/* ============================================
   story-cine.css — story.html のシネマ演出
   .cine 配下のみに作用。読込は story.html のみ。
   外す時はこのファイルのlinkと .cine ブロックを消すだけ。
   ============================================ */

/* フルブリード（親幅を抜けて全画面幅に） */
.cine {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ---- BEAT: 暗転して白文字が出る（出現は wow fadeInUp / 文字色は .white / サイズは .big*） ---- */
.cine-beat {
  background-color: #080604;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 20px;
}

/* ---- CINEMA: 全画面画像が迫り上がる ---- */
.cine-cinema {
  height: 340vh; /* スクロール量 = 演出の尺（二幕分） */
}

.cine-cinema .sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background-color: #080604;
}

.cine-cinema .bg {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  border-radius: 0;
  opacity: 0;
  will-change: transform, opacity;
}

.cine-cinema .ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg,
    #08060410 0%, #08060440 35%,
    #080604b3 70%, #080604f0 100%);
}

.cine-cinema .content {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  padding: 0 20px 50px;
}

/* 二幕: scene1 と scene2 を同じマスに重ね、下端で切り替える */
.cine-cinema .scene {
  grid-row: 2;
  grid-column: 1;
  align-self: start; /* 二幕とも1行目の位置を揃える */
  transition: opacity 0.7s ease;
}

.cine-cinema .scene.off {
  opacity: 0;
}

.cine-cinema .day-tag {
  font-size: 20px;
  letter-spacing: 4px;
  color: #c8943a;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.cine-cinema .day-tag.on {
  opacity: 1;
  transform: translateY(0);
}

.cine-cinema .ctl {
  display: block;
  font-size: 22px;
  line-height: 1.4;
  color: #f0e6d2;
  margin-bottom: 6px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.cine-cinema .ctl.on {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (min-width: 992px) {
  /* 本文カラム（story-text 820px 中央）とX軸を揃える */
  .cine-cinema .content {
    width: 820px;
    margin: 0 auto;
    padding: 0 0 290px;
  }
}

@media screen and (max-width: 991px) {
  /* 小さく全体を見せてから、スクロールで寄っていく */
  .cine-cinema .bg {
    top: 8%;
    height: 54%;
    object-fit: contain;
  }
  .cine-cinema .day-tag {
    font-size: 16px;
  }
  .cine-cinema .ctl {
    font-size: 18px;
  }
}