/* ════════════════════════════════════════════════════════════════
   A·Tr · Iris Shutter — 多枚葉アイリス絞り遷移
   架空映像レーベル REEL ZERO の編集デザイン化したインデックス
   serif（Instrument Serif）×サンセリフ×モノの編集タイポ、
   多層 still cut、masthead + thumb strip + credits/schedule
   ════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:where(html,body){line-break:strict;word-break:normal;overflow-wrap:break-word}
:where(h1,h2,h3,h4){text-wrap:balance}
:where(p,li){text-wrap:pretty}

:root{
  --bg:#f4f3ee;
  --ink:#0a0a0a;
  --muted:#6a6a6a;
  --line:#d8d6cc;
  --paper:#fff;
  --hi:#ff2d55;
  --alt:#0066ff;
  --font:'DM Sans','Noto Sans JP',sans-serif;
  --serif:'Instrument Serif','DM Sans',serif;
  --mono:'JetBrains Mono',monospace;

  /* ─ reel theme tokens ─ */
  --reel-bg:#0a0a0a;
  --reel-ink:#f4f3ee;
  --reel-dim:rgba(255,255,255,.55);
  --reel-faint:rgba(255,255,255,.10);
  --reel-line:rgba(255,255,255,.08);
}

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:400;line-height:1.65}
a{color:inherit;text-decoration:none}

/* ─── HEADER ─── */
header.site{
  position:sticky;top:0;z-index:50;background:var(--bg);
  padding:1rem clamp(1.2rem,4vw,3rem);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--ink);
}
.back{font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;display:inline-flex;align-items:center;gap:.6em}
.back .arrow{transition:transform .25s}
.back:hover .arrow{transform:translateX(-.3em)}
.cell-marker{font-family:var(--mono);font-size:.78rem;letter-spacing:.22em;color:var(--hi)}

/* ─── intro ─── */
.intro{
  max-width:1200px;margin:0 auto;
  padding:clamp(5rem,12vw,9rem) clamp(1.5rem,4vw,3rem) clamp(2.5rem,7vw,5rem);
}
.kicker{
  display:inline-block;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.32em;color:var(--muted);
  margin-bottom:1.8rem;
}
.intro h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(3.6rem,12.5vw,8.6rem);
  line-height:.95;letter-spacing:-.015em;
}
.intro .lead{font-size:clamp(1rem,1.25vw,1.15rem);color:var(--muted);max-width:36em;margin-top:1.8rem;line-height:1.95}

/* ════════════════════════════════════════════
   COMPONENT: .reel — Iris Shutter + REEL ZERO Index
   ════════════════════════════════════════════ */

.reel{
  position:relative;
  margin:0 auto clamp(3rem,6vw,5rem);
  max-width:1440px;
  padding:0 clamp(1rem,3vw,2rem);
  font-feature-settings:'ss01';
}

/* ── REEL ZERO masthead ── */
.reel-masthead{
  background:var(--reel-bg);color:var(--reel-ink);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:.95rem clamp(1.2rem,3vw,2.4rem);
  border-bottom:1px solid var(--reel-line);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;
}
.rz-mark{display:inline-flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.rz-dots{display:inline-flex;gap:.32rem;align-items:center}
.rz-dots i{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.18);
  animation:rz-blink 3.6s steps(1,end) infinite;
}
.rz-dots i:nth-child(2){animation-delay:.6s}
.rz-dots i:nth-child(3){animation-delay:1.2s;background:var(--hi)}
@keyframes rz-blink{
  0%,16%{transform:scale(1);opacity:1}
  20%,100%{transform:scale(.8);opacity:.35}
}
.rz-name{font-weight:700;letter-spacing:.36em;color:#fff;font-size:.8rem}
.rz-sub{color:var(--reel-dim);letter-spacing:.28em}
.rz-edition{display:flex;gap:1.6rem;flex-wrap:wrap;color:var(--reel-dim)}
.rz-edition > div{display:flex;flex-direction:column;gap:.15rem;line-height:1.2}
.rz-edition .rz-k{font-size:.58rem;letter-spacing:.32em;color:rgba(255,255,255,.32)}
.rz-edition .rz-v{color:#fff;font-size:.72rem;letter-spacing:.18em;font-weight:500}
@media(max-width:760px){
  .reel-masthead{flex-direction:column;align-items:flex-start;gap:.9rem}
  .rz-sub{display:none}
  .rz-edition{gap:1.1rem}
}

/* ── stage（黒、iris の親） ── */
.reel-stage{
  position:relative;
  background:var(--reel-bg);
  color:var(--reel-ink);
  min-height:clamp(720px,90vh,940px);
  overflow:hidden;
  isolation:isolate;
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><circle cx='14' cy='14' r='10' fill='none' stroke='%23ff2d55' stroke-width='.7' opacity='.7'/><circle cx='14' cy='14' r='1' fill='%23ff2d55'/><path d='M14 2 V8 M14 20 V26 M2 14 H8 M20 14 H26' stroke='%23ff2d55' stroke-width='.7' opacity='.7'/></svg>") 14 14, crosshair;
}

/* 上部ステータスバー */
.reel-topbar{
  position:relative;z-index:30;
  display:flex;justify-content:space-between;align-items:center;gap:1.4rem;
  padding:.95rem clamp(1.2rem,3vw,2.4rem);
  border-bottom:1px solid var(--reel-line);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.26em;color:var(--reel-dim);
}
.reel-section{color:rgba(255,255,255,.7);font-weight:700}
.reel-progress{display:inline-flex;align-items:center;gap:.9rem;color:#fff}
.rp-track{
  width:140px;height:1px;background:var(--reel-faint);position:relative;overflow:hidden;
}
.rp-track i{
  position:absolute;left:0;top:0;height:100%;width:var(--rp,25%);
  background:#fff;
  transition:width .6s cubic-bezier(.4,.2,.2,1);
}
.reel-counter{display:inline-flex;align-items:baseline;gap:.4em}
.reel-counter em{
  font-style:normal;font-weight:500;font-variant-numeric:tabular-nums;
  font-size:.92rem;color:#fff;
}
.rc-slash{color:rgba(255,255,255,.32)}
.reel-counter > span:last-child{color:rgba(255,255,255,.42)}

/* ── フレーム（差替対象） ── */
.reel-frame{
  position:relative;z-index:5;
  display:grid;
  overflow:hidden;             /* iris-svg をクリップ */
  min-height:520px;            /* iris の描画領域を確保 */
}

/* ── 1 film card ── */
.film{
  grid-column:1;grid-row:1;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  padding:clamp(1.4rem,3.4vw,2.6rem) clamp(1.2rem,3vw,2.4rem) clamp(1.2rem,3vw,2.2rem);
  opacity:0;visibility:hidden;pointer-events:none;
}
.film.is-active{opacity:1;visibility:visible;pointer-events:auto}
@media(min-width:980px){
  .film{
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:clamp(2.2rem,4vw,3.6rem);
    align-items:stretch;
  }
}

/* ── 左：visual（still + stamp + caption） ── */
.film-visual{
  position:relative;display:flex;flex-direction:column;gap:.8rem;
  min-width:0;
}
.film-still{
  position:relative;
  aspect-ratio:3/4;
  width:100%;
  max-height:min(64vh,640px);
  overflow:hidden;
  isolation:isolate;
  background:#000;
  outline:1px solid rgba(255,255,255,.06);
}
.film.is-active .film-still{
  animation:still-burns 24s ease-in-out infinite alternate;
}
@keyframes still-burns{
  0%  {transform:scale(1.00) translate(0,0)}
  100%{transform:scale(1.06) translate(-1.4%,-.6%)}
}
.still-vignette{
  position:absolute;inset:0;pointer-events:none;z-index:6;
  background:
    radial-gradient(ellipse 110% 80% at 50% 50%,transparent 50%,rgba(0,0,0,.55) 100%),
    linear-gradient(180deg,rgba(0,0,0,.18) 0,transparent 22%,transparent 78%,rgba(0,0,0,.45) 100%);
}
.still-grain{
  position:absolute;inset:-2px;pointer-events:none;z-index:7;
  background-image:radial-gradient(rgba(255,255,255,.085) .85px,transparent 1.2px);
  background-size:3px 3px;
  mix-blend-mode:overlay;opacity:.85;
  animation:grain-shift 1.1s steps(8,end) infinite;
}
@keyframes grain-shift{
  0%  {transform:translate(0,0)}
  25% {transform:translate(-1px,1px)}
  50% {transform:translate(1px,-1px)}
  75% {transform:translate(-1px,-1px)}
  100%{transform:translate(0,0)}
}
.still-caption{
  position:absolute;left:.7rem;bottom:.6rem;z-index:8;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.28em;
  color:rgba(255,255,255,.78);
  background:rgba(0,0,0,.32);padding:.32em .52em;
  backdrop-filter:blur(2px);
}

/* film stamp（写真の上に乗る編集スタンプ） */
.film-stamp{
  position:absolute;top:.7rem;left:.7rem;right:.7rem;z-index:8;
  display:flex;justify-content:space-between;gap:.4rem;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.28em;
  color:rgba(255,255,255,.78);
  pointer-events:none;
}
.film-stamp > span{
  background:rgba(0,0,0,.32);padding:.32em .52em;backdrop-filter:blur(2px);
}
.fs-no{color:var(--hi);font-weight:500}

/* ── 右：text panel ── */
.film-text{
  display:flex;flex-direction:column;gap:1.05rem;min-width:0;
  padding-top:.2rem;
}
.film-no{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.34em;color:var(--hi);
}
.film-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.6rem,6.4vw,5.2rem);
  line-height:.96;letter-spacing:-.01em;color:#fff;
  text-wrap:balance;
}
.film-title em{font-style:italic}
.film-title .ch{
  display:inline-block;
  opacity:0;transform:translateY(.5em);
}
.film.is-active .film-title .ch{
  animation:ch-rise .65s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes ch-rise{
  0%  {opacity:0;transform:translateY(.5em) rotate(2deg)}
  100%{opacity:1;transform:translateY(0)   rotate(0)}
}
.film-byline{
  font-family:var(--serif);font-style:italic;font-size:1.08rem;
  color:rgba(255,255,255,.72);
  margin-top:-.2rem;
}
.film-byline strong{color:#fff;font-weight:400;border-bottom:1px solid rgba(255,255,255,.32);padding-bottom:.05em}
.film-synopsis{
  font-size:.96rem;line-height:1.85;color:rgba(255,255,255,.78);
  max-width:42em;margin-top:.2rem;
}
.film.is-active [data-reveal-stagger]{
  opacity:0;animation:fade-up .8s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:.42s;
}
@keyframes fade-up{
  0%  {opacity:0;transform:translateY(.6em)}
  100%{opacity:1;transform:none}
}

/* credits + schedule grid */
.film-grid{
  display:grid;gap:1.4rem;margin-top:.6rem;
}
@media(min-width:560px){.film-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.film-credits h4,.film-schedule h4{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.32em;
  color:rgba(255,255,255,.42);font-weight:500;
  padding-bottom:.5rem;margin-bottom:.65rem;
  border-bottom:1px solid var(--reel-line);
}
.film-credits dl{
  display:grid;grid-template-columns:max-content 1fr;column-gap:1rem;row-gap:.32rem;
  font-size:.82rem;line-height:1.6;
}
.film-credits dt{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;
  color:rgba(255,255,255,.4);text-transform:uppercase;align-self:center;
}
.film-credits dd{color:rgba(255,255,255,.92);font-weight:400}

.film-schedule ul{list-style:none;display:flex;flex-direction:column}
.film-schedule li{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.7rem;
  padding:.5rem 0;border-bottom:1px dashed var(--reel-line);
  font-size:.78rem;
}
.film-schedule li:last-child{border-bottom:none}
.sch-date{font-family:var(--mono);letter-spacing:.12em;color:rgba(255,255,255,.88);font-variant-numeric:tabular-nums}
.sch-room{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;color:rgba(255,255,255,.5)}
.sch-status{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;font-weight:500;
  padding:.25em .5em;border:1px solid;text-align:center;min-width:5.2em;
}
.status--avail{color:#a4eebc;border-color:rgba(164,238,188,.5)}
.status--few  {color:#ffd770;border-color:rgba(255,215,112,.5)}
.status--sold {color:rgba(255,255,255,.32);border-color:rgba(255,255,255,.12);text-decoration:line-through}

/* awards row */
.film-awards{
  display:flex;flex-wrap:wrap;gap:.4rem .6rem;
  margin-top:.4rem;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.26em;
  color:rgba(255,255,255,.42);
}
.film-awards span{
  display:inline-block;padding:.32em .55em;
  border:1px solid rgba(255,255,255,.14);
}

/* CTAs（magnetic hover） */
.film-cta{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.4rem}
.cta{
  position:relative;display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;font-weight:500;
  color:rgba(255,255,255,.95);
  background:transparent;border:1px solid rgba(255,255,255,.32);
  padding:.95em 1.4em;cursor:pointer;overflow:hidden;
  transition:color .25s ease,border-color .25s ease,transform .35s cubic-bezier(.2,.7,.2,1);
}
.cta::before{
  content:"";position:absolute;inset:0;
  background:#fff;
  transform:translateX(-101%);
  transition:transform .42s cubic-bezier(.7,0,.2,1);
}
.cta > *{position:relative;z-index:1}
.cta:hover{color:#0a0a0a;border-color:#fff}
.cta:hover::before{transform:translateX(0)}
.cta-arrow{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.cta:hover .cta-arrow{transform:translateX(.3em)}
.cta--solid{background:#fff;color:#0a0a0a;border-color:#fff}
.cta--solid::before{background:var(--hi)}
.cta--solid:hover{color:#fff}
.cta:disabled{opacity:.5;cursor:not-allowed}

/* ════════════════════════════════════════════
   STILL CUTS — 各作品の多層 CSS 写真
   ════════════════════════════════════════════ */

.film-still > div[class^="s-"]{position:absolute;inset:0;pointer-events:none}

/* ─── 01 SALT HOUR — 海岸塩田 / 夕景 ─── */
.still--01{background:#0d0e10}
.still--01 .s-sky{
  background:
    radial-gradient(ellipse at 62% 28%,rgba(255,168,118,.85),transparent 38%),
    radial-gradient(ellipse at 65% 28%,rgba(255,220,180,.7),transparent 18%),
    linear-gradient(180deg,#0a0e18 0%,#1e2a3a 22%,#5a4a48 50%,#7a4a32 70%,#3a2418 90%,#181012 100%);
}
.still--01 .s-sun{
  inset:auto;left:60%;top:24%;width:46px;height:46px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,#ffd6a8 0%,rgba(255,220,170,.9) 30%,rgba(255,180,120,.5) 60%,transparent 100%);
  filter:blur(.5px);
  box-shadow:0 0 60px 16px rgba(255,200,150,.45);
}
.still--01 .s-horizon{
  inset:auto 0 42% 0;height:1px;
  background:linear-gradient(to right,transparent 5%,rgba(255,220,180,.7) 40%,rgba(255,180,120,.85) 60%,transparent 95%);
  box-shadow:0 0 8px rgba(255,200,150,.4);
}
.still--01 .s-water{
  inset:42% 0 18% 0;
  background:
    linear-gradient(180deg,rgba(255,168,118,.45) 0%,rgba(120,90,80,.3) 40%,rgba(40,38,48,.6) 100%),
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.07) 0,rgba(255,255,255,.07) 1px,
      transparent 1px,transparent 7px);
  mask:linear-gradient(180deg,#000 0%,#000 90%,transparent 100%);
}
.still--01 .s-mounds{
  inset:auto 0 0 0;height:24%;
  background:
    radial-gradient(ellipse 14% 100% at 14% 50%,#181010 30%,transparent 70%),
    radial-gradient(ellipse 18% 100% at 36% 60%,#1c1410 30%,transparent 70%),
    radial-gradient(ellipse 22% 100% at 62% 55%,#221816 30%,transparent 70%),
    radial-gradient(ellipse 14% 100% at 86% 65%,#181210 30%,transparent 70%),
    linear-gradient(180deg,rgba(20,16,14,.4) 0%,#0e0a0a 80%);
}

/* ─── 02 ECHO CHAMBER — 廃線地下 / トンネル ─── */
.still--02{background:#0a0b0d}
.still--02 .s-tunnel{
  background:
    radial-gradient(ellipse 70% 110% at 50% 110%,rgba(255,220,160,.06),transparent 50%),
    radial-gradient(ellipse 40% 80% at 50% 30%,rgba(60,68,80,.5),transparent 70%),
    linear-gradient(180deg,#08090c 0%,#15181e 35%,#1c2128 65%,#0e1015 100%);
}
.still--02 .s-floor{
  inset:62% 0 0 0;
  background:
    linear-gradient(180deg,rgba(255,210,140,.18) 0%,rgba(40,40,46,.3) 30%,transparent 90%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,
      transparent 1px,transparent 30px);
  clip-path:polygon(0 100%,100% 100%,68% 0,32% 0);
}
.still--02 .s-lamp{
  inset:auto;left:50%;top:14%;width:5px;height:5px;border-radius:50%;
  transform:translateX(-50%);
  background:#fff4d4;
  box-shadow:
    0 0 8px 2px rgba(255,236,180,.95),
    0 0 24px 4px rgba(255,224,160,.75),
    0 0 60px 14px rgba(255,210,140,.4);
}
.still--02 .s-cone{
  inset:14% 0 0 0;
  background:radial-gradient(ellipse 18% 70% at 50% 0%,rgba(255,228,170,.32) 0%,rgba(255,228,170,.08) 35%,transparent 75%);
  mix-blend-mode:screen;
}
.still--02 .s-dust{
  inset:0;
  background:
    radial-gradient(circle at 48% 32%,rgba(255,255,255,.4) 1px,transparent 2px) 0 0/40px 40px,
    radial-gradient(circle at 52% 48%,rgba(255,255,255,.3) 1px,transparent 2px) 0 0/55px 55px,
    radial-gradient(circle at 50% 60%,rgba(255,255,255,.25) 1px,transparent 2px) 0 0/72px 72px;
  mix-blend-mode:screen;opacity:.5;
  mask:radial-gradient(ellipse 20% 60% at 50% 28%,#000,transparent 80%);
}

/* ─── 03 MOTHER TONGUE — 台所 / 朝の窓光 ─── */
.still--03{background:#1a120a}
.still--03 .s-room{
  background:
    radial-gradient(ellipse at 80% 22%,rgba(255,232,168,.55),transparent 50%),
    radial-gradient(ellipse at 20% 80%,rgba(80,40,20,.6),transparent 70%),
    linear-gradient(135deg,#6e5638 0%,#8a6a48 28%,#604632 60%,#2c1e14 100%);
}
.still--03 .s-counter{
  inset:auto 0 0 0;height:38%;
  background:
    linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(180deg,
      rgba(50,30,18,.5) 0,rgba(50,30,18,.5) 2px,
      rgba(70,46,28,.3) 2px,rgba(70,46,28,.3) 4px);
}
.still--03 .s-counter::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(to right,transparent,rgba(255,232,170,.6),transparent);
}
.still--03 .s-window{
  inset:6% 4% auto auto;width:36%;height:54%;
  background:linear-gradient(180deg,rgba(255,236,180,.34) 0%,rgba(255,200,140,.1) 100%);
  clip-path:polygon(12% 0,100% 0,100% 84%,0 100%,0 10%);
  filter:blur(2px);
  mix-blend-mode:screen;
}
.still--03 .s-beam{
  inset:0;
  background:linear-gradient(115deg,transparent 50%,rgba(255,232,170,.18) 65%,transparent 85%);
  mix-blend-mode:screen;
}
.still--03 .s-steam{
  inset:38% 30% 32% 30%;
  background:
    radial-gradient(ellipse at 30% 40%,rgba(255,250,240,.18),transparent 60%),
    radial-gradient(ellipse at 70% 60%,rgba(255,250,240,.12),transparent 50%);
  filter:blur(8px);
  mix-blend-mode:screen;
  animation:steam 9s ease-in-out infinite alternate;
}
@keyframes steam{
  0%  {transform:translateY(0)   scale(1)   ;opacity:.7}
  100%{transform:translateY(-6%) scale(1.08);opacity:.95}
}

/* ─── 04 AFTER THE RAIN, STATIC — CRT / VHS ─── */
.still--04{background:#0a0e10}
.still--04 .s-crt{
  background:
    radial-gradient(ellipse 70% 95% at 50% 50%,rgba(100,180,160,.2) 0%,rgba(40,80,80,.15) 40%,rgba(8,16,20,.4) 90%),
    linear-gradient(180deg,#152024 0%,#0c1418 50%,#070d10 100%);
}
.still--04 .s-static{
  background:
    radial-gradient(circle at 12% 24%,rgba(255,255,255,.18) 1px,transparent 1.4px) 0 0/4px 4px,
    radial-gradient(circle at 64% 38%,rgba(255,255,255,.12) 1px,transparent 1.4px) 0 0/5px 5px,
    radial-gradient(circle at 22% 70%,rgba(255,255,255,.16) 1px,transparent 1.4px) 0 0/3px 3px,
    radial-gradient(circle at 78% 64%,rgba(255,255,255,.10) 1px,transparent 1.4px) 0 0/6px 6px;
  mix-blend-mode:screen;
  animation:static-jitter .12s steps(2,end) infinite;
}
@keyframes static-jitter{
  0%  {transform:translate(0,0)}
  50% {transform:translate(-1px,1px)}
  100%{transform:translate(1px,-1px)}
}
.still--04 .s-scan{
  background:repeating-linear-gradient(0deg,
    rgba(255,255,255,.08) 0,rgba(255,255,255,.08) 1px,
    transparent 1px,transparent 3px);
  mix-blend-mode:overlay;
}
.still--04 .s-curve{
  background:
    radial-gradient(ellipse 90% 110% at 50% 50%,transparent 60%,rgba(0,0,0,.45) 100%),
    linear-gradient(90deg,rgba(255,40,40,.05) 0%,transparent 8%,transparent 92%,rgba(40,40,255,.05) 100%);
}
.still--04 .s-channel{
  position:absolute;inset:auto auto 1.3rem 1rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;
  color:rgba(180,240,210,.85);
  background:rgba(20,40,40,.3);padding:.32em .55em;
  border:1px solid rgba(180,240,210,.25);
  pointer-events:none;z-index:8;
  animation:ch-flick 4.2s steps(2,end) infinite;
}
@keyframes ch-flick{
  0%,86%{opacity:1}
  88%,90%{opacity:.3}
  92%,100%{opacity:1}
}

/* ════════════════════════════════════════════
   IRIS SVG — JS が挿入
   open 状態では文字に被らないよう visibility:hidden
   ════════════════════════════════════════════ */
.iris-svg{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:25;pointer-events:none;display:block;
  visibility:hidden;
}
.reel[data-iris-state="closing"] .iris-svg,
.reel[data-iris-state="closed"]  .iris-svg,
.reel[data-iris-state="opening"] .iris-svg{
  visibility:visible;
}
.iris-svg .blade{
  fill:var(--iris-blade,#0a0a0a);
  stroke:var(--iris-edge,rgba(255,255,255,.05));
  stroke-width:.4;
  transform-origin:130px 0;
  transform:rotate(var(--rot,96deg));
  transition:transform var(--iris-d,420ms) var(--iris-ease,cubic-bezier(.65,0,.15,1));
  transition-delay:var(--iris-dly,0ms);
}
.reel[data-iris-state="closing"] .iris-svg .blade,
.reel[data-iris-state="closed"]  .iris-svg .blade{ --rot:0deg }
.reel[data-iris-state="opening"] .iris-svg .blade{ --rot:96deg }

.iris-svg .rim{
  fill:none;stroke:rgba(255,255,255,.06);stroke-width:.5;
  opacity:0;transition:opacity .25s ease;
}
.reel[data-iris-state="closed"] .iris-svg .rim{opacity:1;animation:rim-pulse .42s ease-out}
@keyframes rim-pulse{
  0%  {transform:scale(1);opacity:0}
  40% {opacity:1}
  100%{transform:scale(1.05);opacity:0}
}
.iris-svg .center-dot{
  fill:var(--hi);
  opacity:0;transform-origin:center;
  transition:opacity .15s ease;
}
.reel[data-iris-state="closed"] .iris-svg .center-dot{
  opacity:1;animation:dot-pulse .35s ease-out;
}
@keyframes dot-pulse{
  0%  {transform:scale(0)  ;opacity:1}
  60% {transform:scale(1.4);opacity:.7}
  100%{transform:scale(2.4);opacity:0}
}

/* ── サムネイル strip ── */
.reel-thumbs{
  position:relative;z-index:6;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:1px solid var(--reel-line);
  background:rgba(0,0,0,.4);
}
.thumb{
  position:relative;display:grid;grid-template-columns:60px 1fr;gap:.8rem;
  padding:.85rem 1rem;align-items:center;
  background:transparent;border:none;color:#fff;cursor:pointer;text-align:left;
  border-right:1px solid var(--reel-line);
  transition:background .25s ease;
}
.thumb:last-child{border-right:none}
.thumb:hover{background:rgba(255,255,255,.04)}
.thumb.is-active{background:rgba(255,255,255,.06)}
.thumb.is-active::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--hi);
  animation:thumb-arm .42s cubic-bezier(.2,.7,.2,1);
}
@keyframes thumb-arm{
  0%  {transform:scaleX(0);transform-origin:left center}
  100%{transform:scaleX(1);transform-origin:left center}
}
.th-still{
  display:block;width:60px;height:60px;
  background:#000;outline:1px solid rgba(255,255,255,.1);
  transition:filter .25s ease,transform .35s cubic-bezier(.2,.7,.2,1);
  filter:grayscale(.55) brightness(.7);
}
.thumb:hover .th-still,
.thumb.is-active .th-still{filter:none;transform:scale(1.04)}

/* サムネ内の小さい still を CSS で再現（簡略版） */
.th-still--01{
  background:
    radial-gradient(ellipse at 62% 28%,rgba(255,180,130,.85),transparent 40%),
    linear-gradient(180deg,#1a2434 0%,#5a3a28 55%,#181010 100%);
}
.th-still--02{
  background:
    radial-gradient(ellipse 18% 80% at 50% 10%,rgba(255,230,170,.7),transparent 70%),
    linear-gradient(180deg,#10141a 0%,#262c34 50%,#0c1014 100%);
}
.th-still--03{
  background:
    radial-gradient(ellipse at 78% 28%,rgba(255,232,170,.6),transparent 55%),
    linear-gradient(135deg,#6e5638 0%,#604632 60%,#2c1e14 100%);
}
.th-still--04{
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0,rgba(255,255,255,.06) 1px,transparent 1px,transparent 3px),
    linear-gradient(180deg,#152024 0%,#0c1418 50%,#070d10 100%);
}
.th-text{display:flex;flex-direction:column;gap:.18rem;min-width:0;overflow:hidden}
.th-no{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.32em;color:rgba(255,255,255,.42);
}
.th-title{
  font-family:var(--serif);font-size:1.05rem;line-height:1.1;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.th-meta{font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;color:rgba(255,255,255,.55)}

@media(max-width:760px){
  .reel-thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .thumb:nth-child(2n){border-right:none}
  .thumb:nth-child(-n+2){border-bottom:1px solid var(--reel-line)}
}
@media(max-width:480px){
  .reel-thumbs{grid-template-columns:1fr}
  .thumb{border-right:none;border-bottom:1px solid var(--reel-line)}
  .thumb:last-child{border-bottom:none}
}

/* ── 操作バー（PREV / hint / NEXT） ── */
.reel-controls{
  position:relative;z-index:6;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.9rem clamp(1.2rem,3vw,2.4rem);
  border-top:1px solid var(--reel-line);
  background:rgba(0,0,0,.5);
}
.rn-btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.26em;color:rgba(255,255,255,.78);
  background:transparent;border:1px solid rgba(255,255,255,.2);
  padding:.7em 1.15em;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .25s cubic-bezier(.2,.7,.2,1);
}
.rn-btn:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.5)}
.rn-btn:disabled{opacity:.4;cursor:not-allowed}
.rn-btn .rn-arrow{font-size:1rem;letter-spacing:0;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.rn-btn:hover .rn-arrow{transform:translateX(-.3em)}
.rn-btn--next:hover .rn-arrow{transform:translateX(.3em)}
.reel-hint{font-family:var(--mono);font-size:.6rem;letter-spacing:.28em;color:rgba(255,255,255,.32)}
@media(max-width:560px){.reel-hint{display:none}}

/* ── ステージのフッター（masthead と対） ── */
.reel-foot{
  background:var(--reel-bg);color:var(--reel-dim);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.85rem clamp(1.2rem,3vw,2.4rem);
  border-top:1px solid var(--reel-line);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.28em;
}

/* ════════════ reduced motion ════════════ */
@media (prefers-reduced-motion: reduce){
  .iris-svg{display:none}
  .film{transition:opacity .25s ease;opacity:0;visibility:hidden}
  .film.is-active{opacity:1;visibility:visible}
  .film-title .ch,
  [data-reveal-stagger]{opacity:1 !important;transform:none !important;animation:none !important}
  .film.is-active .film-still{animation:none}
  .still-grain,.s-steam,.s-static,.s-channel,.rz-dots i{animation:none}
}

/* END COMPONENT */


/* ─── NOTES ─── */
.notes{max-width:1100px;margin:0 auto;padding:clamp(3rem,6vw,5rem) clamp(1.5rem,4vw,3rem)}
.shou{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-bottom:1rem;border-bottom:1px solid var(--ink);margin-bottom:2.5rem}
.shou h2{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:700;letter-spacing:.04em}
.shou .no{font-family:var(--mono);font-size:.78rem;letter-spacing:.25em;color:var(--muted)}
.frame{font-size:.92rem;line-height:1.9;color:var(--muted);max-width:46em;margin:-1rem 0 2rem;padding:1rem 1.2rem;border-left:3px solid var(--hi);background:var(--paper)}
.frame code{font-family:var(--mono);font-size:.88em;background:var(--bg);padding:.1em .35em;border:1px solid var(--line)}
.notes-grid{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-bottom:3rem}
@media(min-width:780px){.notes-grid{grid-template-columns:repeat(3,1fr)}}
.note{position:relative;background:var(--paper);border:1px solid var(--ink);padding:1.5rem 1.4rem 1.4rem}
.note-no{position:absolute;top:1rem;right:1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--muted)}
.note h3{font-size:1.02rem;font-weight:700;margin-bottom:.7rem;letter-spacing:.02em}
.note p{font-size:.86rem;color:var(--muted);line-height:1.8}
.note code,.var span code{font-family:var(--mono);font-size:.85em;background:var(--bg);padding:.1em .35em;border:1px solid var(--line)}
.sub-h{font-size:1rem;font-weight:700;letter-spacing:.04em;margin:2rem 0 1rem;padding-bottom:.7rem;border-bottom:1px dashed var(--ink)}
.vars{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--ink);background:var(--paper)}
.var{display:grid;grid-template-columns:minmax(8rem,auto) 1fr auto;gap:1rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);align-items:center}
.var:last-child{border-bottom:none}
.var code{font-family:var(--mono);font-size:.82rem;color:var(--hi);font-weight:500}
.var span{font-size:.85rem;color:var(--muted);line-height:1.5}
.var em{font-family:var(--mono);font-size:.78rem;font-style:normal;color:var(--ink);background:var(--bg);padding:.15em .55em;border:1px solid var(--line);white-space:nowrap}
@media(max-width:680px){.var{grid-template-columns:1fr;gap:.3rem;padding:.9rem 1rem}.var em{justify-self:start}}
.a11y{list-style:none;display:grid;gap:.6rem;background:var(--paper);border:1px solid var(--ink);padding:1rem 1.2rem;margin-top:1rem}
.a11y li{position:relative;padding-left:1.2em;font-size:.88rem;line-height:1.75;color:var(--muted)}
.a11y li::before{content:"→";position:absolute;left:0;top:0;color:var(--hi);font-family:var(--mono)}
.a11y code{font-family:var(--mono);font-size:.85em;background:var(--bg);padding:.1em .35em;border:1px solid var(--line)}

/* ─── FOOTER ─── */
footer{
  padding:2rem clamp(1.2rem,4vw,3rem) 1.5rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--muted);
  border-top:1px solid var(--ink);
}
footer a{color:var(--ink)}