/* ===========================================================
   scroll-linked film reel
   スクロール量で (1) シーンが切り替わり (2) 各映像の再生位置が進む
   =========================================================== */

.reel {
  position: relative;
  /* シーン数 × 尺。JS 側の band 計算はこの高さに依存しない */
  height: 340svh;
}

.reel__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
}

.reel__scene {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  will-change: opacity;
}
/* JS が動かない場合でも 1枚目は見える */
.reel__scene:first-child { opacity: 1; }

.reel__scene > img,
.reel__scene > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.04) brightness(1.02) saturate(0.95);
}
/* 動画が使える環境では poster を隠す */
.reel__scene.has-video > img { opacity: 0; }

/* 素材が日中の明るい写真になったので、文字が乗る左側だけを確実に沈める。
   明るい空に薄いグラデーションを重ねても読めるようにはならない。 */
.reel__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(11,10,9,.92) 0%, rgba(11,10,9,.74) 26%, rgba(11,10,9,.18) 56%, transparent 74%),
    linear-gradient(to top, rgba(11,10,9,.7), rgba(11,10,9,.1) 38%, transparent 62%);
}
@media (max-width: 760px) {
  .reel__stage::after {
    background:
      linear-gradient(to top, rgba(11,10,9,.94) 0%, rgba(11,10,9,.72) 34%, rgba(11,10,9,.2) 62%, transparent 84%);
  }
}

/* ---- コピー。シーンに合わせて差し替わる ---- */

.reel__copy {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(3rem, 1.5rem + 6vw, 8rem);
  z-index: 3;
  /* 和文見出しは em 指定だと級数に連動して幅が暴れる。実寸で止める */
  max-width: min(88vw, 40rem);
}

.reel__line {
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease), transform 720ms var(--ease);
  pointer-events: none;
}
.reel__line.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* 1行目だけは通常フローに置いて高さを確保する */
.reel__line:first-child { position: relative; }

.reel__title {
  font-family: var(--font-mincho);
  /* 1行に収める必要があるので、--t-hero より一段抑える */
  font-size: clamp(1.6rem, 0.95rem + 2.4vw, 3rem);
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: var(--paper);
  text-shadow: 0 2px 30px rgba(11, 10, 9, 0.9);
}
.reel__title em {
  display: block;
  font-family: var(--font-latin);
  font-size: 0.26em;
  font-style: normal;
  letter-spacing: 0.5em;
  color: var(--brass-lit);
  margin-bottom: 3.2em;
  text-shadow: 0 2px 20px rgba(7, 6, 5, 0.9);
}
.reel__note {
  margin-top: 1.4rem;
  max-width: min(88vw, 34rem);
  color: var(--paper-2);
  text-shadow: 0 2px 18px rgba(11, 10, 9, 0.95);
}

/* 右下は明るい素材だと必ず埋もれる。左のテキスト帯の中に入れる */
.reel__meta {
  position: absolute;
  left: var(--gutter);
  top: clamp(5.5rem, 4rem + 4vw, 8rem);
  z-index: 3;
  display: none;
}
@media (min-width: 900px) { .reel__meta { display: block; } }
.reel__meta .label { text-shadow: 0 2px 18px rgba(11, 10, 9, 0.95); }

/* ---- 進行インジケータ ---- */

.reel__ticks {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: none;
  flex-direction: column;
  gap: 0.9rem;
}
@media (min-width: 900px) { .reel__ticks { display: flex; } }

.reel__tick {
  --fill: 0;
  width: 1px;
  height: 2.6rem;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.reel__tick::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brass-lit);
  transform: scaleY(var(--fill));
  transform-origin: top;
}

@media (prefers-reduced-motion: reduce) {
  .reel { height: auto; }
  .reel__stage { position: relative; height: 78svh; }
  .reel__scene { opacity: 1; position: relative; height: 100%; }
  .reel__scene + .reel__scene { display: none; }
  .reel__line { position: relative; opacity: 1; transform: none; }
  .reel__line + .reel__line { display: none; }
}