/* =========================================================================
   montage.css — "The Evolution of Room 19: Behind the Build"
   A self-playing cinematic documentary montage. Brand: Beckman College.
   The look is restrained, editorial, documentary — deep navy cinema with
   floated screen "evidence" cards, elegant serif statements, and gold/blue
   accents used sparingly. No trailer bombast.
   ========================================================================= */

:root{
  --navy:        #153350;
  --navy-2:      #1d4570;
  --navy-deep:   #0a1c2e;
  --navy-ink:    #06121f;
  --paper:       #FAF6EC;
  --paper-2:     #F1EBDA;
  --ink:         #14110c;
  --yellow:      #FDF23D;
  --yellow-deep: #F0DC00;
  --blue-l:      #71C1D8;
  --teal:        #267A98;
  --coral:       #E08772;

  --f-display: "Playfair Display", Georgia, serif;
  --f-brand:   "Aboreto", "Times New Roman", serif;
  --f-ui:      "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; background:#000; }
body{
  font-family:var(--f-body);
  color:#fff;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- Letterbox host + scaled 1920×1080 canvas ------------------------- */
#viewport{
  position:fixed; inset:0;
  background:
    radial-gradient(120% 120% at 50% 50%, #0c1d30 0%, #050d17 70%, #02070d 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
#stage{
  position:relative;
  width:1920px; height:1080px;
  transform-origin:center center;
  overflow:hidden;
  background:#06121f;
}

/* ---- Scenes ----------------------------------------------------------- */
.scene{
  position:absolute; inset:0;
  opacity:0;
  will-change:opacity;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.scene .pad{ position:absolute; inset:0; }

/* Backdrops */
.bg-cinema{ background:
    radial-gradient(130% 100% at 50% 18%, #163a5c 0%, #0c2238 45%, #06121f 100%); }
.bg-navy{ background:
    radial-gradient(140% 120% at 50% 30%, #1d4570 0%, #123150 45%, #081827 100%); }
.bg-deep{ background:
    radial-gradient(120% 120% at 50% 50%, #0c2138 0%, #050d17 75%); }
.bg-paper{ background:
    radial-gradient(1100px 700px at 80% -10%, rgba(113,193,216,.16), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, rgba(253,242,61,.10), transparent 55%),
    var(--paper); color:var(--ink); }

/* Cinematic vignette + grain overlay shared by all scenes */
.vignette::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(115% 115% at 50% 45%, transparent 55%, rgba(0,0,0,.45) 100%);
}

/* film grain */
#grain{
  position:absolute; inset:-50%; pointer-events:none; opacity:.05; z-index:50;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1.1s steps(4) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-2%)} 75%{transform:translate(-2%,-1%)}
  100%{transform:translate(1%,2%)}
}

/* ---- Typography ------------------------------------------------------- */
.kicker{
  font-family:var(--f-brand);
  letter-spacing:.42em; text-transform:uppercase;
  font-size:24px; color:var(--blue-l);
  margin:0 0 30px;
}
.kicker.gold{ color:var(--yellow); }
.chapnum{
  font-family:var(--f-brand);
  font-size:22px; letter-spacing:.4em; color:var(--yellow);
  margin-bottom:26px;
}
.statement{
  font-family:var(--f-display); font-weight:600;
  font-size:104px; line-height:1.06; letter-spacing:-.01em;
  margin:0; color:#fff;
}
.statement .em{ font-style:italic; }
.statement.paper{ color:var(--navy); }
.from-to{
  font-family:var(--f-display); font-weight:700;
  font-size:128px; line-height:.98; letter-spacing:-.015em; margin:0;
}
.from-to .from{ color:#7f99b3; font-weight:500; font-style:italic; }
.from-to .arrow{ color:var(--yellow); }
.from-to .to{ color:#fff; }
.sub{
  font-family:var(--f-body); font-weight:400;
  font-size:32px; line-height:1.45; color:rgba(255,255,255,.74);
  margin:38px 0 0; max-width:1080px;
}
.sub.paper{ color:#42566a; }
.label-ui{
  font-family:var(--f-ui); font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; font-size:19px;
  color:var(--blue-l);
}

/* small evidence caption */
.cap{
  font-family:var(--f-ui); font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; font-size:17px; color:rgba(255,255,255,.66);
}

/* before / after tags */
.tag{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-ui); font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; font-size:18px;
  padding:9px 18px; border-radius:999px;
}
.tag::before{ content:""; width:9px; height:9px; border-radius:50%; }
.tag.before{ color:#9fb3c6; background:rgba(159,179,198,.13); border:1px solid rgba(159,179,198,.3); }
.tag.before::before{ background:#9fb3c6; }
.tag.after{ color:var(--navy-deep); background:var(--yellow); }
.tag.after::before{ background:var(--navy); }

/* ---- Media cards ------------------------------------------------------ */
.card{
  position:relative; border-radius:14px; overflow:hidden;
  background:#0d2238;
  box-shadow:0 40px 90px rgba(0,0,0,.55), 0 12px 30px rgba(0,0,0,.4);
}
.card img, .card video{ display:block; width:100%; height:100%; object-fit:cover; }
/* show the whole frame (full UI layout / whole door) — no crop, no zoom */
.card img.fit, .card video.fit{ object-fit:contain; background:#0a1826; }
.card.bordered{ border:1px solid rgba(255,255,255,.1); }

/* phone-shaped framing for mobile screenshots */
.phone{
  border-radius:34px; padding:0; overflow:hidden;
  background:#000;
  box-shadow:0 40px 100px rgba(0,0,0,.6), 0 0 0 8px #0c1c2c, 0 0 0 10px rgba(255,255,255,.06);
}
.phone img, .phone video{ width:100%; height:100%; object-fit:cover; }

/* desaturate "before" material */
.aged{ filter:saturate(.55) brightness(.82) contrast(.95); }
.aged-strong{ filter:grayscale(.4) saturate(.5) brightness(.78); }

/* pinned-photo / mood-board look for build artifacts */
.pinwrap{ position:relative; }
.pinframe{ position:relative; background:#f6f2e8; padding:18px 18px 20px; border-radius:3px;
  box-shadow:0 36px 74px rgba(0,0,0,.5), 0 5px 12px rgba(0,0,0,.36);
  transform:rotate(var(--rot,-1.5deg)); }
.pinframe::after{ content:""; position:absolute; inset:0; border-radius:3px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.pinframe img{ display:block; width:100%; height:auto; border-radius:1px; }
/* a 3D push-pin tack holding the photo to the wall */
.tack{ position:absolute; top:-15px; left:50%; transform:translateX(-50%); width:30px; height:30px;
  border-radius:50%; z-index:7;
  background:radial-gradient(circle at 36% 30%, #ff8473 0 24%, #df4233 56%, #a82b21 100%);
  box-shadow:0 9px 15px rgba(0,0,0,.5), inset 0 -3px 5px rgba(0,0,0,.34), inset 0 2px 3px rgba(255,255,255,.45); }
.tack::after{ content:""; position:absolute; top:7px; left:8px; width:8px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.6); }

/* ---- Ken Burns (gated on .live so it restarts deterministically) ------ */
.kb{ width:100%; height:100%; }
.scene.live .kb-in{   animation:kbIn   var(--kb,12s) ease-out both; }
.scene.live .kb-out{  animation:kbOut  var(--kb,12s) ease-out both; }
.scene.live .kb-l{    animation:kbPanL var(--kb,12s) ease-out both; }
.scene.live .kb-r{    animation:kbPanR var(--kb,12s) ease-out both; }
@keyframes kbIn{  from{transform:scale(1.0)}  to{transform:scale(1.14)} }
@keyframes kbOut{ from{transform:scale(1.14)} to{transform:scale(1.0)} }
@keyframes kbPanL{ from{transform:scale(1.12) translateX(3%)}  to{transform:scale(1.12) translateX(-3%)} }
@keyframes kbPanR{ from{transform:scale(1.12) translateX(-3%)} to{transform:scale(1.12) translateX(3%)} }

/* ---- Reveal animations (gated on .live) — snappy, trailer pace --------- */
.r{ opacity:0; }
.scene.live .r{ animation:rise .4s cubic-bezier(.2,.8,.25,1) both; animation-delay:calc(var(--i,0)*.055s + .03s); }
@keyframes rise{ from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:translateY(0)} }

.scene.live .fade{ animation:fadeIn .46s ease both; animation-delay:calc(var(--i,0)*.06s + .03s); }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.scene.live .zoomcard{ animation:zoomCard .46s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i,0)*.055s); }
@keyframes zoomCard{ from{opacity:0; transform:scale(.94) translateY(18px)} to{opacity:1; transform:scale(1) translateY(0)} }

.scene.live .wipe-in{ animation:wipeIn .44s cubic-bezier(.4,0,.1,1) both; animation-delay:calc(var(--i,0)*.055s + .05s); }
@keyframes wipeIn{ from{opacity:0; clip-path:inset(0 100% 0 0)} to{opacity:1; clip-path:inset(0 0 0 0)} }

.scene.live .slide-r{ animation:slideR .44s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i,0)*.055s); }
@keyframes slideR{ from{opacity:0; transform:translateX(60px)} to{opacity:1; transform:translateX(0)} }

/* a thin accent underline that draws on */
.scene.live .draw{ animation:draw .44s ease .18s both; }
@keyframes draw{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
.draw{ transform-origin:left center; transform:scaleX(0); }

/* ---- Trailer comparison components ------------------------------------ */
/* Big section label above a before/after beat */
.megalabel{ font-family:var(--f-ui); font-weight:700; letter-spacing:.34em; text-transform:uppercase;
  font-size:23px; color:var(--blue-l); white-space:nowrap; }
.megalabel.gold{ color:var(--yellow); }

/* Phase divider numerals */
.phase-num{ font-family:var(--f-brand); font-size:28px; letter-spacing:.42em; color:var(--yellow); margin-bottom:28px; }
.phase-title{ font-family:var(--f-display); font-weight:700; font-size:124px; line-height:.96; letter-spacing:-.02em; margin:0; }
.phase-title .em{ font-style:italic; }

/* SUBMITTED stamp */
.stamp{ display:inline-block; font-family:var(--f-ui); font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  font-size:40px; color:var(--yellow); border:5px solid var(--yellow); padding:20px 44px; border-radius:10px;
  transform:rotate(-5deg); }
.scene.live .stamp.thump{ animation:stamp .45s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes stamp{ 0%{opacity:.2; transform:rotate(-5deg) scale(1.8)} 70%{opacity:1; transform:rotate(-5deg) scale(.96)} 100%{opacity:1; transform:rotate(-5deg) scale(1)} }

/* Bigger before/after pills for comparison beats */
.btag{ display:inline-flex; align-items:center; gap:11px; font-family:var(--f-ui); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; font-size:19px; padding:9px 20px; border-radius:999px; }
.btag::before{ content:""; width:9px; height:9px; border-radius:50%; }
.btag.before{ color:#9fb3c6; background:rgba(159,179,198,.12); border:1px solid rgba(159,179,198,.32); }
.btag.before::before{ background:#9fb3c6; }
.btag.after{ color:var(--navy-deep); background:var(--yellow); }
.btag.after::before{ background:var(--navy); }
.btag.mid{ color:#bfe3d0; background:rgba(120,196,159,.12); border:1px solid rgba(120,196,159,.34); }
.btag.mid::before{ background:#78c49f; }

/* Big connective arrow between cards */
.bigarrow{ font-family:var(--f-display); font-size:84px; color:var(--yellow); line-height:1; flex:none; }

/* "What it didn't have yet" row */
.without{ display:flex; gap:30px; flex-wrap:wrap; justify-content:center; }
.without span{ font-family:var(--f-ui); font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:30px;
  color:rgba(255,255,255,.55); display:inline-flex; align-items:center; gap:14px; }
.without span::before{ content:"✕"; color:var(--coral); font-size:24px; }

/* ---- Layout helpers --------------------------------------------------- */
.center-col{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 140px; max-width:1500px; }
.left-col{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  text-align:left; }
.row{ display:flex; align-items:center; gap:64px; }
.stack{ display:flex; flex-direction:column; gap:22px; }

.brandmark{ display:flex; align-items:center; gap:22px; }
.brandmark img{ height:88px; width:auto; display:block; }
.brandmark .bm-text{ font-family:var(--f-brand); letter-spacing:.16em; font-size:40px; line-height:1; }
.brandmark .bm-sub{ font-family:var(--f-ui); letter-spacing:.32em; font-size:16px; color:var(--blue-l); margin-top:8px; }

.dot-sep{ width:7px; height:7px; border-radius:50%; background:var(--yellow); }

/* progress within stage (subtle) */
#chapterbar{
  position:absolute; left:90px; bottom:64px; z-index:40;
  display:flex; align-items:center; gap:14px;
  font-family:var(--f-ui); letter-spacing:.22em; text-transform:uppercase;
  font-size:16px; color:rgba(255,255,255,.5);
}
#chapterbar .ix{ color:var(--yellow); }
#chapterbar.dark{ color:rgba(20,30,42,.5); }
#chapterbar.dark .ix{ color:var(--teal); }

/* ---- External controls (outside the scaled stage) -------------------- */
#controls{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  display:flex; align-items:center; gap:18px;
  padding:14px 22px;
  background:linear-gradient(0deg, rgba(3,8,14,.92), rgba(3,8,14,0));
  font-family:var(--f-ui);
  opacity:0; transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease;
}
#viewport:hover ~ #controls, #controls:hover, #controls.show{ opacity:1; transform:translateY(0); }
#controls button{
  background:rgba(255,255,255,.1); color:#fff; border:none;
  width:46px; height:46px; border-radius:50%;
  font-size:18px; display:grid; place-items:center;
  transition:background .2s ease;
}
#controls button:hover{ background:rgba(255,255,255,.22); }
#scrub{ flex:1; height:5px; -webkit-appearance:none; appearance:none;
  background:rgba(255,255,255,.18); border-radius:3px; cursor:pointer; }
#scrub::-webkit-slider-thumb{ -webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:var(--yellow); cursor:pointer; box-shadow:0 0 0 4px rgba(253,242,61,.2); }
#scrub::-moz-range-thumb{ width:15px; height:15px; border:none; border-radius:50%; background:var(--yellow); }
#time{ font-variant-numeric:tabular-nums; letter-spacing:.08em; font-size:15px;
  color:rgba(255,255,255,.7); min-width:104px; text-align:center; }
#controls .label{ font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.55); }

/* ---- Start overlay (needed to unlock audio) --------------------------- */
#start{
  position:fixed; inset:0; z-index:200;
  background:radial-gradient(130% 100% at 50% 30%, #163a5c 0%, #0c2238 45%, #050d17 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; cursor:pointer;
  transition:opacity .6s ease;
}
#start.hide{ opacity:0; pointer-events:none; }
#start .brandmark{ margin-bottom:54px; }
#start .s-kick{ font-family:var(--f-brand); letter-spacing:.4em; text-transform:uppercase;
  font-size:clamp(13px,1.3vw,19px); color:var(--blue-l); margin-bottom:24px; }
#start .s-title{ font-family:var(--f-display); font-weight:600;
  font-size:clamp(40px,6.6vw,108px); line-height:1.1; margin:0 0 30px; letter-spacing:-.01em;
  max-width:18ch; }
#start .s-title .em{ font-style:italic; color:var(--yellow); }
#start .s-sub{ font-family:var(--f-body); font-size:clamp(15px,1.5vw,22px);
  color:rgba(255,255,255,.62); margin:6px 0 60px; letter-spacing:.02em; }
#start .playbtn{
  display:inline-flex; align-items:center; gap:16px;
  font-family:var(--f-ui); font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  font-size:clamp(14px,1.4vw,18px); color:var(--navy-deep);
  background:var(--yellow); padding:18px 40px; border-radius:999px;
  box-shadow:0 18px 50px rgba(253,242,61,.28);
  transition:transform .25s ease, box-shadow .25s ease;
}
#start:hover .playbtn{ transform:translateY(-2px); box-shadow:0 24px 60px rgba(253,242,61,.4); }
#start .playbtn .tri{ width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent;
  border-left:14px solid var(--navy-deep); }

/* End replay affordance */
#replay{
  position:fixed; inset:0; z-index:150; display:none;
  align-items:center; justify-content:center; flex-direction:column;
  background:rgba(5,12,22,.55); cursor:pointer;
  font-family:var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:#fff;
}
#replay.show{ display:flex; }
#replay .rb{ width:84px; height:84px; border-radius:50%; border:2px solid rgba(255,255,255,.6);
  display:grid; place-items:center; font-size:34px; margin-bottom:20px; }

/* =========================================================================
   FLASHY v2 — cinematic motion layer (keeps the navy/gold/cinema palette)
   ========================================================================= */

/* Full-bleed image/video layer with continuous slow Ken Burns */
.bleed{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.bleed img, .bleed video{ width:100%; height:100%; object-fit:cover; display:block; transform-origin:center; }
/* Energetic punch-in (NOT slow Ken Burns): scale + de-blur, then hold sharp. */
.scene.live .bleed .kbslow{ animation:kbPunch .82s cubic-bezier(.16,.84,.3,1) both; }
.scene.live .bleed .kbslow.alt{ animation:kbPunchAlt .82s cubic-bezier(.16,.84,.3,1) both; }
@keyframes kbPunch{ from{transform:scale(1.16); filter:blur(7px)} to{transform:scale(1.0); filter:blur(0)} }
@keyframes kbPunchAlt{ from{transform:scale(1.16) translateX(2.5%); filter:blur(7px)} to{transform:scale(1.0); filter:blur(0)} }
.bleed.dim::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,12,22,.62) 0%, rgba(5,12,22,.10) 38%, rgba(5,12,22,.78) 100%); }
.bleed.dim-l::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(5,12,22,.86) 0%, rgba(5,12,22,.45) 42%, rgba(5,12,22,0) 72%); }

/* content sits above the bleed */
.fg{ position:relative; z-index:3; }

/* one-shot diagonal light sweep across a card/screen */
.glint{ position:relative; }
.glint::after{ content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(102deg, transparent 32%, rgba(255,255,255,.40) 48%, rgba(255,255,255,.05) 56%, transparent 66%);
  transform:translateX(-130%); }
.scene.live .glint::after{ animation:glint .92s cubic-bezier(.4,0,.2,1) .25s both; }
@keyframes glint{ from{transform:translateX(-130%)} to{transform:translateX(130%)} }

/* scale + de-blur punch entrance */
.scene.live .punchin{ animation:punchIn .6s cubic-bezier(.16,.84,.3,1) both; animation-delay:calc(var(--i,0)*.04s); }
@keyframes punchIn{ from{opacity:0; transform:scale(1.16); filter:blur(9px)} to{opacity:1; transform:scale(1); filter:blur(0)} }

/* directional pushes (staggered via --i) */
.scene.live .push-u{ animation:pushU .56s cubic-bezier(.18,.82,.22,1) both; animation-delay:calc(var(--i,0)*.06s); }
@keyframes pushU{ from{opacity:0; transform:translateY(64px)} to{opacity:1; transform:translateY(0)} }
.scene.live .push-l{ animation:pushL .56s cubic-bezier(.18,.82,.22,1) both; animation-delay:calc(var(--i,0)*.06s); }
@keyframes pushL{ from{opacity:0; transform:translateX(80px)} to{opacity:1; transform:translateX(0)} }
.scene.live .push-r{ animation:pushR .56s cubic-bezier(.18,.82,.22,1) both; animation-delay:calc(var(--i,0)*.06s); }
@keyframes pushR{ from{opacity:0; transform:translateX(-80px)} to{opacity:1; transform:translateX(0)} }
.push-u,.push-l,.push-r,.punchin{ opacity:0; }

/* kinetic giant headline — words rise + de-blur in sequence */
.kinetic{ font-family:var(--f-display); font-weight:700; line-height:.92; letter-spacing:-.022em;
  font-size:150px; margin:0; }
.kinetic .word{ display:inline-block; opacity:0; }
.kinetic .word.gold{ color:var(--yellow); font-style:italic; }
.scene.live .kinetic .word{ animation:wordRise .62s cubic-bezier(.16,.84,.3,1) both; animation-delay:calc(var(--i,0)*.085s + .03s); }
@keyframes wordRise{ from{opacity:0; transform:translateY(48px) scale(1.08); filter:blur(7px)} to{opacity:1; transform:translateY(0) scale(1); filter:blur(0)} }

/* evolution timeline dots */
.evodots{ display:flex; align-items:center; gap:0; }
.evodots .ed{ width:14px; height:14px; border-radius:50%; background:rgba(255,255,255,.22); flex:none; }
.evodots .ed.on{ background:var(--yellow); box-shadow:0 0 0 7px rgba(253,242,61,.16); }
.evodots .ln{ width:58px; height:2px; background:rgba(255,255,255,.16); }
.evodots .ln.on{ background:rgba(253,242,61,.5); }

/* corner stage caption for full-bleed reels */
.stagecap{ position:absolute; left:96px; bottom:122px; z-index:6; text-align:left; max-width:560px; }
.stagecap .n{ font-family:var(--f-brand); font-size:104px; line-height:.74; color:var(--yellow); display:block; }
.stagecap .t{ font-family:var(--f-ui); font-weight:700; letter-spacing:.3em; text-transform:uppercase; font-size:23px; color:#fff; margin-top:18px; }
.stagecap .s{ font-family:var(--f-body); font-size:23px; color:rgba(255,255,255,.72); margin-top:10px; line-height:1.4; }

/* persistent reel header (top-left) */
.reelhead{ position:absolute; left:96px; top:104px; z-index:6;
  font-family:var(--f-ui); font-weight:700; letter-spacing:.34em; text-transform:uppercase; font-size:25px; color:var(--blue-l); }
.reelhead.gold{ color:var(--yellow); }
.reelhead::before{ content:""; display:inline-block; width:46px; height:3px; background:currentColor; margin-right:20px; vertical-align:middle; }

/* personalisation phone screenshot */
.phoneimg{ display:block; border-radius:34px; box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4); }

/* floating desktop "screen" frame */
.doorrow{ display:flex; align-items:flex-start; justify-content:center; gap:48px; }
.doorcol{ display:flex; flex-direction:column; align-items:center; }
.screen{ position:relative; border-radius:14px; overflow:hidden; background:#0d2238;
  box-shadow:0 60px 130px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.08); }
.screen img, .screen video{ display:block; width:100%; height:100%; object-fit:cover; }
.screen.contain img, .screen.contain video{ object-fit:contain; background:#0a1826; }

/* big hero portrait card for the cast morph (centered, swaps in place) */
.hero{ position:relative; width:520px; height:660px; border-radius:18px; overflow:hidden;
  background:#0d2238; box-shadow:0 60px 130px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); }
.hero img, .hero video{ width:100%; height:100%; object-fit:cover; display:block; }

/* white/gold full-frame flash overlay (gated on live) */
.scene.live .frameflash{ animation:frameflash .9s ease-out both; }
@keyframes frameflash{ 0%{opacity:.9} 100%{opacity:0} }

/* =========================================================================
   Real screen-recordings (Iteration 1 + 2). 16:9 captures whose only blemish
   is a "CREATED WITH CAMTASIA" watermark across the top ~6%. We scale the
   footage up from the bottom edge so that band is cropped clean off-frame.
   ========================================================================= */
/* full-bleed recording */
.rec{ position:absolute; inset:0; overflow:hidden; background:#0a1826; }
.rec > video, .rec > img{
  position:absolute; left:50%; bottom:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center bottom;
  transform:translateX(-50%) scale(1.11);
  transform-origin:50% 100%;
}
/* framed-screen recording (desktop "evidence" card) */
.screen.recf{ background:#0a1826; }
.screen.recf video, .screen.recf img{
  object-fit:cover; object-position:center bottom;
  transform:scale(1.12); transform-origin:50% 100%;
}
/* a soft live-capture tally so real footage reads as "the real product" */
.liveflag{ display:inline-flex; align-items:center; gap:11px;
  font-family:var(--f-ui); font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  font-size:18px; color:#fff; }
.liveflag::before{ content:""; width:11px; height:11px; border-radius:50%;
  background:var(--coral); box-shadow:0 0 0 0 rgba(224,135,114,.6); animation:recpulse 1.6s ease-out infinite; }
@keyframes recpulse{ 0%{box-shadow:0 0 0 0 rgba(224,135,114,.55)} 70%{box-shadow:0 0 0 12px rgba(224,135,114,0)} 100%{box-shadow:0 0 0 0 rgba(224,135,114,0)} }

/* ---- Filmstrip: real footage played back from a single sprite-sheet JPEG.
   Each beat is N frames in a cols×rows grid; montage.js flips the
   background-position to animate. The watermark is already cropped out of
   the source frames, so no extra masking is needed here. -------------- */
.strip{ position:absolute; inset:0; background-repeat:no-repeat; background-position:0% 0%;
  image-rendering:auto; }
/* full-bleed strip sits in a .bleed layer */
.bleed .strip{ z-index:0; }
/* framed strip fills the floating "screen" card */
.screen .strip{ position:absolute; inset:0; border-radius:inherit; }

/* =========================================================================
   TRAILER v3 — comparison + transformation helpers (faster, show-don't-tell)
   ========================================================================= */

/* short corner label for full-bleed beats (label only, no paragraph) */
.fbcap{ position:absolute; left:96px; bottom:118px; z-index:6; text-align:left; }
.fbcap .t{ font-family:var(--f-ui); font-weight:700; letter-spacing:.3em; text-transform:uppercase; font-size:26px; color:#fff; }
.fbcap .n{ font-family:var(--f-brand); font-size:84px; line-height:.8; color:var(--yellow); display:block; margin-bottom:14px; }

/* two-up comparison row with a connective arrow */
.vsrow{ display:flex; align-items:center; justify-content:center; gap:40px; }

/* act / big transition statement lines */
.bigline{ font-family:var(--f-display); font-weight:600; font-size:118px; line-height:1.02; letter-spacing:-.02em; margin:0; color:#fff; }
.bigline .em{ font-style:italic; }
.bigline.gold{ color:var(--yellow); }

/* SILENT → SOUND beat: animated equaliser bars (read as audio even when muted) */
.wave{ display:flex; align-items:flex-end; gap:9px; height:120px; }
.wave i{ width:11px; border-radius:6px; background:var(--yellow); height:24px; }
.scene.live .wave i{ animation:wavebar 1.05s ease-in-out infinite; }
.wave i:nth-child(2n){ background:var(--blue-l); }
.wave i:nth-child(1){ animation-delay:0s } .wave i:nth-child(2){ animation-delay:.12s }
.wave i:nth-child(3){ animation-delay:.24s } .wave i:nth-child(4){ animation-delay:.36s }
.wave i:nth-child(5){ animation-delay:.48s } .wave i:nth-child(6){ animation-delay:.30s }
.wave i:nth-child(7){ animation-delay:.16s } .wave i:nth-child(8){ animation-delay:.40s }
.wave i:nth-child(9){ animation-delay:.22s }
@keyframes wavebar{ 0%,100%{ height:24px } 50%{ height:120px } }

/* crossed-out 'muted' chip for the silent 'before' */
.mutechip{ display:inline-flex; align-items:center; gap:13px; font-family:var(--f-ui); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; font-size:19px; color:#9fb3c6;
  padding:9px 20px; border-radius:999px; background:rgba(159,179,198,.12); border:1px solid rgba(159,179,198,.32); }
.mutechip svg{ width:22px; height:22px; }

/* Storyboard beat board (the real Module 3 plan) — diagonal film strip */
.sbreel{ position:relative; width:2240px; max-width:none; display:flex; flex-direction:column;
  gap:30px; justify-content:center; overflow:hidden; padding:40px 0;
  transform:rotate(-10deg);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%); }

/* each row is a strip of celluloid: dark film stock + sprocket holes top & bottom */
.sbtrack{ display:flex; width:max-content; will-change:transform; position:relative;
  background-color:#16130d;
  background-image:
    repeating-linear-gradient(90deg, rgba(250,246,236,.95) 0 20px, transparent 20px 48px),
    repeating-linear-gradient(90deg, rgba(250,246,236,.95) 0 20px, transparent 20px 48px);
  background-size:auto 20px, auto 20px;
  background-position:left 16px, left calc(100% - 16px);
  background-repeat:repeat-x, repeat-x;
  padding:50px 0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 22px 48px rgba(0,0,0,.5); }
.sbtrack.row-b{ margin-left:-202px; }
.sbtrack .sbcard{ width:340px; flex:0 0 340px; margin-right:14px; }
.scene.live .sbtrack.row-a{ animation:sbroll 32s linear infinite; }
.scene.live .sbtrack.row-b{ animation:sbroll 32s linear infinite; }
@keyframes sbroll{ from{ transform:translateX(0); } to{ transform:translateX(-2832px); } }
@media (prefers-reduced-motion: reduce){ .scene.live .sbtrack{ animation:none; } }
.sbcaption{ position:absolute; left:0; right:0; bottom:76px; display:flex; justify-content:center; z-index:6; }
.sbcard{ position:relative; background:var(--paper); color:var(--navy-deep); border-radius:4px;
  padding:22px 24px 20px; text-align:left; min-height:196px; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.06); }
.sbcard .sbtop{ display:flex; align-items:center; justify-content:space-between; }
.sbcard .no{ font-family:var(--f-ui); font-weight:700; font-size:14px; letter-spacing:.2em; color:var(--teal); white-space:nowrap; }
.sbcard .sletter{ font-family:var(--f-display); font-weight:700; font-size:21px; width:42px; height:42px;
  display:grid; place-items:center; border-radius:9px; background:var(--navy-deep); color:var(--yellow); }
.sbcard .ttl{ font-family:var(--f-display); font-weight:600; font-size:29px; line-height:1.08; margin-top:13px; }
.sbcard .ph{ margin-top:auto; padding-top:14px; font-family:var(--f-ui); font-weight:700; font-size:13.5px;
  letter-spacing:.16em; text-transform:uppercase; color:#7c8893; }

/* RECAP as a rolling film strip (echoes the storyboard celluloid) */
.reelstrip{ position:relative; width:1760px; max-width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.filmtrack{ display:flex; width:max-content; will-change:transform;
  background-color:#16130d;
  background-image:
    repeating-linear-gradient(90deg, rgba(250,246,236,.95) 0 20px, transparent 20px 48px),
    repeating-linear-gradient(90deg, rgba(250,246,236,.95) 0 20px, transparent 20px 48px);
  background-size:auto 20px, auto 20px;
  background-position:left 16px, left calc(100% - 16px);
  background-repeat:repeat-x, repeat-x;
  padding:48px 0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 22px 48px rgba(0,0,0,.5); }
.scene.live .filmtrack{ animation:reelroll 34s linear infinite; }
@keyframes reelroll{ from{ transform:translateX(0); } to{ transform:translateX(-3024px); } }
/* second row rolls the opposite way so two strips reveal more at once */
.filmtrack + .filmtrack{ margin-top:20px; }
.scene.live .filmtrack.rev{ animation:reelrollrev 34s linear infinite; }
@keyframes reelrollrev{ from{ transform:translateX(-3024px); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion: reduce){ .scene.live .filmtrack, .scene.live .filmtrack.rev{ animation:none; } }
.filmtrack .cell{ width:416px; flex:0 0 416px; margin-right:16px; position:relative;
  border-radius:4px; overflow:hidden; aspect-ratio:16/10; background:#0d2238;
  box-shadow:0 4px 14px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.4); }
.filmtrack .cell img, .filmtrack .cell video{ width:100%; height:100%; object-fit:cover; display:block; }
.filmtrack .cell::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(4,10,18,.6), transparent 55%); }
.filmtrack .cell .cl{ position:absolute; left:12px; bottom:12px; z-index:2; font-family:var(--f-ui); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; font-size:15px; color:#fff;
  background:rgba(6,18,31,.74); padding:6px 12px; border-radius:7px; }
.filmtrack .soundcell{ background:linear-gradient(155deg,#163c5e 0%,#0b2238 100%); display:grid; place-items:center; }
.filmtrack .soundcell::after{ background:none; }
.filmtrack .soundcell .wv{ display:flex; align-items:flex-end; gap:7px; height:64px; }
.filmtrack .soundcell .wv i{ width:7px; border-radius:4px; background:var(--yellow); box-shadow:0 0 16px rgba(253,242,61,.4); }

@media (prefers-reduced-motion: reduce){
  #grain{ animation:none; }
  .liveflag::before{ animation:none; }
  .scene.live .bleed .kbslow, .scene.live .bleed .kbslow.alt{ animation:none; }
  .scene.live .wave i{ animation:none; height:72px; }
  .scene.live .nowgrid .cell{ animation:none; }
  .kinetic .word, .push-u, .push-l, .push-r, .punchin{ opacity:1 !important; }
}