/* ============================================================
   ICAN FILM — Shared design system (V3 "Turn the Camera", 2026-07)
   Single source of truth for custom styling. Tailwind (Play CDN)
   handles layout/spacing utilities; this file owns components,
   tokens, the cinematic theme, and the V3 vertical/HUD language.
   Class prefix: .ic-   |   JS hooks: data-* / .is-in
   V3 direction: docs/redesign/V3_VERTICAL_REDESIGN_PLAN.md
   Type: Big Shoulders (display) · Inter (body) · IBM Plex Mono (HUD)
   Legacy S01 classes are kept alive until every page migrates.
   ============================================================ */

:root{
  --ink:#1A1712;        /* text on paper (warmed from #0F0F0F) */
  --carbon:#0A0908;     /* screening-room ground */
  --paper:#FBF9F4;      /* warm paper (was #FAFAFA) */
  --red:#C8001A;        /* REC semantics ONLY: live, primary CTA, active */
  --red-b:#DA2233;      /* bright REC variant on carbon */
  --gold:#D4AF37;       /* Lucy TV contexts ONLY */
  --gray:#737373;       /* meta, captions, dek on paper */
  --dim:#B3A98F;        /* meta, captions on carbon */
  --line:#E7E2D6;       /* hairline on paper */
  --line-dk:rgba(251,249,244,.16); /* hairline on carbon */
  --paper-dim:#F3EFE6;
  --font-disp:'Big Shoulders','Big Shoulders Display','Bahnschrift','Arial Narrow','Avenir Next Condensed',sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono','Cascadia Mono',Consolas,'SF Mono',monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- base ---------- */
/* S12 (Shishir): "scrolling past the footer into black oblivion" = iOS
   rubber-band overscroll painting the carbon body bg past the paper footer.
   Measured: document height == footer bottom on ALL pages/viewports — there
   is no real extra scroll. Lock the elastic bounce (iOS 16+/Android/desktop
   honor overscroll-behavior; ancient iOS keeps its native bounce). */
html,body{overscroll-behavior-y:none}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}
body{background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--red);color:var(--paper)}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:#cfc9bb}
::-webkit-scrollbar-thumb:hover{background:var(--red)}
a{text-decoration:none}
img{display:block}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.ic-carbon ::selection{background:var(--gold);color:var(--carbon)}

/* ---------- typography roles ---------- */
.ic-eyebrow{font-family:var(--font-mono);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;color:var(--red);display:inline-block}
.ic-eyebrow--gold{color:var(--gold)}
.ic-eyebrow--mute{color:var(--gray)}
.ic-carbon .ic-eyebrow--mute{color:var(--dim)}
.ic-label{font-family:var(--font-mono);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.7rem}
.ic-credit{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;color:var(--gray)}
.ic-carbon .ic-credit{color:var(--dim)}
.ic-display{font-family:var(--font-disp);font-weight:700;line-height:.92;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}
.ic-h1{font-size:clamp(3.2rem,9vw,7.5rem)}
.ic-h2{font-size:clamp(2.3rem,5.2vw,4.2rem)}
.ic-h3{font-size:clamp(1.6rem,3vw,2.4rem)}
.ic-dek{font-family:var(--font-body);font-weight:300;color:var(--gray);font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.6}
.ic-carbon .ic-dek{color:rgba(251,249,244,.72)}
.ic-italic{font-style:italic;font-weight:300}
.ic-num{font-variant-numeric:tabular-nums}

/* drop cap (About — legacy until Phase 4 rebuild) */
.ic-dropcap::first-letter{font-family:var(--font-disp);font-size:5rem;font-weight:700;float:left;line-height:.78;padding:.35rem .7rem 0 0;color:var(--red)}

/* ---------- sections ---------- */
.ic-section{padding-block:clamp(4rem,8vw,7rem)}
.ic-paper{background:var(--paper);color:var(--ink)}
.ic-paper--dim{background:var(--paper-dim);color:var(--ink)}
.ic-carbon{background:var(--carbon);color:var(--paper);position:relative;isolation:isolate}
.ic-rule{height:1px;background:var(--line);border:0}
.ic-carbon .ic-rule{background:var(--line-dk)}

/* film grain + vignette atmosphere for carbon spreads */
.ic-grain::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  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");
  background-size:200px 200px;mix-blend-mode:overlay}
.ic-vignette::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 25%,transparent 55%,rgba(0,0,0,.55) 100%)}

/* ============================================================
   V3 MASTHEAD — HUD strip + sticky bar (new pages)
   ============================================================ */
.ic-strip{background:var(--carbon);color:var(--dim);border-bottom:1px solid var(--line-dk);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.16em;font-size:.6rem;padding:.5rem clamp(1.2rem,4vw,3rem);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.ic-strip .ic-tc{color:var(--paper)}
.ic-mast{position:sticky;top:0;z-index:60;background:rgba(10,9,8,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-dk);padding:.85rem clamp(1.2rem,4vw,3rem);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
/* anchored landings (legal.html#privacy/#terms, index #vertical/#work/#studio)
   arrive with the heading clear of the sticky mast */
#privacy,#terms,#vertical,#work,#studio{scroll-margin-top:5.5rem}
/* let the short terms section reach the top of the viewport so "Terms" links
   land AT the heading instead of stalling at max scroll */
#terms{min-height:calc(100vh - 9rem)}
.ic-mast__logo img{height:26px;width:auto}
.ic-mast nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.2rem)}

/* live / REC indicator */
.ic-live{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.62rem;color:var(--red)}
.ic-live--w{color:var(--paper)}
.ic-live__dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(200,0,26,.6);animation:ic-rec 2.2s var(--ease) infinite;flex:none}
@keyframes ic-rec{0%{box-shadow:0 0 0 0 rgba(200,0,26,.55)}70%{box-shadow:0 0 0 9px rgba(200,0,26,0)}100%{box-shadow:0 0 0 0 rgba(200,0,26,0)}}

/* ---------- legacy S01 masthead (old pages until Phase 4) ---------- */
.ic-masthead{background:var(--carbon);color:#fff;position:relative;z-index:50;padding:1rem clamp(1.5rem,4vw,3rem) .5rem}
.ic-meta{display:flex;justify-content:space-between;align-items:center;position:relative;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.16em;font-size:.6rem;color:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:.5rem}
.ic-meta__center{position:absolute;left:50%;transform:translateX(-50%)}
.ic-logo{display:block;width:100%;max-width:34rem;margin:.6rem auto;transform:scaleY(.86)}
.ic-nav{border-top:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.9rem 0;position:sticky;top:0;background:var(--carbon);z-index:40}
@media(min-width:900px){.ic-nav{justify-content:center;gap:2.6rem}}

/* nav link (shared by both mastheads) */
.ic-navlink{font-family:var(--font-mono);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:#fff;position:relative;padding-bottom:2px;transition:color .3s var(--ease)}
.ic-navlink::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--red);transition:width .35s var(--ease)}
.ic-navlink:hover{color:var(--red-b)}
.ic-navlink:hover::after{width:100%}
.ic-navlink.is-active{color:var(--red-b)}
.ic-navlink.is-active::after{width:100%}
.ic-nav__cta{font-family:var(--font-mono);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;color:#fff;border:1px solid var(--red);background:var(--red);padding:.55rem 1.1rem;border-radius:2px;transition:.3s var(--ease)}
.ic-nav__cta:hover{background:transparent;color:#fff}
.ic-burger{background:none;border:0;color:#fff;font-size:1.3rem;line-height:1;cursor:pointer}
/* S18 — the nav reached six links plus a CTA when OTT Platform was added,
   and stopped fitting a tablet: the links wrapped to two lines and crushed
   the CTA against the right edge. Tailwind's md (768px) is now too early to
   show the full nav, so tablets get the burger instead. Selectors are scoped
   to .ic-mast so they outrank the md:inline-block / md:hidden utilities on
   specificity, without !important. The burger's own menu already lists every
   destination, so nothing becomes unreachable. */
@media (max-width:1023.98px){
  .ic-mast nav .ic-navlink,
  .ic-mast nav .ic-nav__cta{display:none}
  .ic-mast .ic-burger{display:block}
}

/* mobile full-screen menu */
.ic-menu{position:fixed;inset:0;background:var(--carbon);z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;opacity:0;visibility:hidden;transition:opacity .4s var(--ease)}
.ic-menu.is-open{opacity:1;visibility:visible}
.ic-menu a{font-family:var(--font-disp);font-weight:700;text-transform:uppercase;font-size:clamp(2.4rem,10vw,3.6rem);line-height:1;color:#fff}
.ic-menu a:hover{color:var(--red-b)}
.ic-menu__close{position:absolute;top:1.6rem;right:1.6rem;background:none;border:0;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer}

/* ---------- buttons ---------- */
.ic-btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;padding:.95rem 1.6rem;border:1px solid transparent;border-radius:2px;cursor:pointer;transition:transform .35s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);will-change:transform}
.ic-btn i{transition:transform .35s var(--ease)}
.ic-btn:hover i{transform:translateX(4px)}
.ic-btn--solid{background:var(--red);color:#fff}
.ic-btn--solid:hover{background:#a00015}
.ic-btn--light{background:var(--paper);color:var(--ink)}
.ic-btn--light:hover{background:var(--red);color:#fff}
.ic-btn--ghost{background:transparent;color:#fff;border-color:rgba(251,249,244,.35)}
.ic-btn--ghost:hover{border-color:#fff}
.ic-btn--dark{background:var(--ink);color:#fff}
.ic-btn--dark:hover{background:var(--red)}
.ic-btn--gold{background:var(--gold);color:#0A0705}
.ic-btn--gold:hover{background:#E9C556}
.ic-link{font-family:var(--font-mono);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;border-bottom:2px solid var(--red);padding-bottom:2px;color:inherit;transition:color .3s var(--ease)}
.ic-link:hover{color:var(--red-b)}

/* ---------- imagery ---------- */
.ic-frame{overflow:hidden;position:relative;background:#111;border-radius:2px}
.ic-img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter 1.1s var(--ease)}
.ic-img--mono{filter:grayscale(80%) contrast(1.05)}
.ic-frame:hover .ic-img--mono{filter:grayscale(0) contrast(1);transform:scale(1.04)}
.ic-cap{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;font-size:.6rem;color:var(--gray);margin-top:.55rem}
.ic-carbon .ic-cap{color:var(--dim)}

/* 9:16 media well — THE V3 motif */
.ic-well{aspect-ratio:9/16}

/* ============================================================
   V3 PHONE FRAME + CAMERA HUD (hero reel)
   ============================================================ */
.ic-phone{position:relative;aspect-ratio:9/16;width:100%;max-width:340px;border:1px solid var(--line-dk);border-radius:22px;overflow:hidden;background:#000;box-shadow:0 32px 90px rgba(0,0,0,.65),0 0 0 6px rgba(251,249,244,.03)}
.ic-phone video,.ic-phone .ic-phone__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ic-phone__frame{position:absolute;inset:11% 8%;border:1px dashed rgba(251,249,244,.16);border-radius:4px;pointer-events:none;z-index:2}
.ic-hud{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:space-between;padding:.9rem;pointer-events:none}
.ic-hud__row{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.ic-hud__badge{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);border:1px solid rgba(251,249,244,.4);border-radius:2px;padding:.25rem .5rem;background:rgba(10,9,8,.35);backdrop-filter:blur(3px)}
.ic-hud__btn{pointer-events:auto;display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);border:1px solid rgba(251,249,244,.4);border-radius:2px;padding:.35rem .6rem;background:rgba(10,9,8,.5);backdrop-filter:blur(4px);cursor:pointer;transition:border-color .3s var(--ease),background .3s var(--ease)}
.ic-hud__btn:hover{border-color:var(--paper);background:rgba(10,9,8,.75)}
.ic-tc{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:.6rem;letter-spacing:.12em;color:var(--paper)}

/* ---------- three doors (legacy) + V3 tall engine variant ---------- */
.ic-door{position:relative;display:block;overflow:hidden;background:#111;color:#fff;min-height:clamp(20rem,40vw,30rem);border-radius:2px}
.ic-door__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(70%) brightness(.62);transition:transform 1.1s var(--ease),filter 1.1s var(--ease)}
.ic-door:hover .ic-door__img{transform:scale(1.05);filter:grayscale(0) brightness(.7)}
.ic-door__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.7) 24%,rgba(0,0,0,.16) 62%,transparent 100%)}
.ic-door__body{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.4rem,2.5vw,2rem);gap:.5rem}
.ic-door__num{font-family:var(--font-mono);font-weight:600;letter-spacing:.16em;font-size:.64rem;text-transform:uppercase;color:var(--gold)}
.ic-door:hover .ic-door__go{color:var(--red-b)}
.ic-door--tall{min-height:0;aspect-ratio:9/13}
@media(max-width:767px){.ic-door--tall{aspect-ratio:4/5}}

/* ---------- cards ---------- */
.ic-card{background:#fff;border:1px solid var(--line);border-radius:2px;display:flex;flex-direction:column;transition:border-color .3s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.ic-card:hover{border-color:var(--red);transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.08)}

/* V3 stat card (carbon) */
.ic-statcard{border:1px solid var(--line-dk);border-radius:2px;padding:1.5rem 1.4rem;background:rgba(251,249,244,.02)}
.ic-statcard__n{font-family:var(--font-disp);font-weight:700;font-size:clamp(2.4rem,4vw,3.4rem);line-height:.9;color:var(--paper);font-variant-numeric:tabular-nums}
.ic-statcard .ic-eyebrow{margin-bottom:.7rem}

/* V3 role chip */
.ic-chip{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-weight:500;text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;color:var(--paper);border:1px solid var(--line-dk);border-radius:2px;padding:.55rem .85rem;transition:border-color .3s var(--ease),color .3s var(--ease)}
.ic-chip:hover{border-color:var(--red-b);color:#fff}
/* chips default to paper-on-carbon; on light sections they flip to ink —
   without this they render white-on-white (invisible on lucy-tv + academy) */
.ic-paper .ic-chip,.ic-paper--dim .ic-chip{color:var(--ink);border-color:#D6CFBF}
.ic-paper .ic-chip:hover,.ic-paper--dim .ic-chip:hover{border-color:var(--red-b);color:var(--red-b)}

/* ============================================================
   V3 THE TURN — 16:9 masks to 9:16 (one pinned beat, JS-driven)
   ============================================================ */
.ic-turn__stage{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:#000}
/* desktop: cap the stage height so the pinned beat fits UNDER the section title —
   width follows from the 16:9 ratio (keeps the 34.18% window math true) */
@media (min-width:1024px){.ic-turn__stage{height:min(58vh,600px);width:auto;margin-inline:auto}}
.ic-turn__clip{position:absolute;inset:0;will-change:clip-path}
.ic-turn__clip img,.ic-turn__clip video{width:100%;height:100%;object-fit:cover}
/* the reel takeover — the IG case fits the stage height exactly (contain, the
   418×840 PNG spans its full canvas) and lands as an object: alpha drop-shadow */
.ic-turn__reel{position:absolute;top:0;bottom:0;left:34.18%;right:34.18%;z-index:4;opacity:0;transform:scale(1.05);will-change:opacity,transform}
.ic-turn__reel img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 44px rgba(0,0,0,.55))}
.ic-turn__guide{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed rgba(218,34,51,.8);opacity:0;z-index:2}
.ic-turn__guide--l{left:34.18%}
.ic-turn__guide--r{right:34.18%}
/* designed side panels — the black the cinema frame leaves behind becomes the
   argument: outlined 16:9 (the past) vs solid red 9:16 (the now) */
.ic-turn__side{position:absolute;top:50%;transform:translateY(-50%);width:34.18%;z-index:3;opacity:0;
  display:flex;flex-direction:column;gap:.9rem;align-items:center;text-align:center;padding:0 clamp(1rem,2.6vw,2.4rem)}
.ic-turn__side--l{left:0}
.ic-turn__side--r{right:0}
.ic-turn__side-num{font-family:var(--font-disp);font-weight:800;line-height:.9;font-size:clamp(2.4rem,5.6vw,5.2rem);
  color:transparent;-webkit-text-stroke:1.5px rgba(251,249,244,.42);letter-spacing:.02em}
.ic-turn__side-num--r{color:var(--red-b);-webkit-text-stroke:0}
.ic-turn__side-k{font-family:var(--font-mono);font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:clamp(.62rem,.9vw,.8rem);color:var(--dim)}
.ic-turn__side-k--r{color:var(--gold)}
.ic-turn__side-sub{font-family:var(--font-mono);font-size:clamp(.58rem,.8vw,.72rem);letter-spacing:.08em;line-height:1.8;color:rgba(251,249,244,.55)}
@media (max-width:767px){.ic-turn__side-sub{display:none}.ic-turn__side-num{font-size:1.6rem;-webkit-text-stroke-width:1px}}
/* no-JS fallback: static turned state, reel landed — video tucked under the IG
   case's screen window (measured from the overlay PNG: x 21–393/418, y 17–746/840) */
.is-turned .ic-turn__clip{clip-path:inset(2.2% 37.8% 11.3% 37.6% round 10px)}
/* phones/tablets: while the beat is pinned the small 16:9 stage left ~40% of the
   viewport empty below — center title+stage in the pinned screen so the space
   reads intentional (JS also shortens the pin distance under 1024px) */
@media (max-width:1023px){
  /* S12 (Shishir, two notes): the stage sits EQUALLY between the "…frame
     flip." line and what follows — but with the slack CAPPED (the old
     100svh stretch left it "so much extra space" before the 60–90s cards).
     Fixed equal margins do both: same gap above and below the stage
     (~8svh, clamped 2.5–4.5rem), and the wrap shrinks so the statcards
     arrive right after the beat. */
  [data-turn-wrap]{display:flex;flex-direction:column;justify-content:center}
  [data-turn-wrap] > div:first-child{margin-bottom:0}
  [data-turn-wrap] [data-turn]{margin-block:clamp(2.5rem,8svh,4.5rem)}
}
/* the standing-phone mockup bakes a wide soft shadow on its LEFT, so the phone
   BODY sits 13.2% right of the image's center — box-centering reads off-center
   on small screens. Nudge by the measured offset; desktop 2-col layout stays. */
@media (max-width:1023px){
  .ic-lucyphone{transform:translateX(-13.2%)}
}
.is-turned .ic-turn__guide{opacity:1}
.is-turned .ic-turn__reel{opacity:1;transform:none}
.is-turned .ic-turn__side{opacity:1}

/* ---------- ticker ---------- */
.ic-ticker{overflow:hidden;border-block:1px solid var(--line-dk);background:var(--carbon);color:#fff}
.ic-ticker__row{display:flex;white-space:nowrap;width:max-content;animation:ic-marq 38s linear infinite}
.ic-ticker__row span{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;padding:.9rem 0;margin-right:3rem;color:rgba(251,249,244,.8)}
.ic-ticker__row b{color:#fff;font-weight:600}
.ic-ticker__row .dot{color:var(--red-b)}
@keyframes ic-marq{to{transform:translateX(-50%)}}

/* ============================================================
   MIC SIGNATURE (legacy S01 — parked; see ANIMATION_PLAN §4)
   ============================================================ */
.ic-mic-stage{perspective:1100px;display:flex;align-items:center;justify-content:center;position:relative}
.ic-mic{position:relative;transform-style:preserve-3d;transition:transform .25s var(--ease-out);will-change:transform;animation:ic-float 6s ease-in-out infinite}
@keyframes ic-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.ic-mic__glow{position:absolute;left:50%;top:46%;width:78%;aspect-ratio:1;transform:translate(-50%,-50%) translateZ(-60px);background:radial-gradient(circle,rgba(200,0,26,.32),transparent 62%);filter:blur(14px);animation:ic-breathe 4.5s ease-in-out infinite}
@keyframes ic-breathe{0%,100%{opacity:.5}50%{opacity:.9}}
.ic-mic svg{display:block;width:100%;height:auto;filter:drop-shadow(0 28px 40px rgba(0,0,0,.55))}
.ic-mic__arm{transform:translateZ(-30px)}
.ic-mic__body{transform:translateZ(40px)}
.ic-onair{display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--line-dk);padding:.4rem .9rem}
.ic-onair__dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:ic-rec 2.2s var(--ease) infinite}
.ic-onair span{font-family:var(--font-mono);font-weight:600;text-transform:uppercase;letter-spacing:.22em;font-size:.62rem;color:#fff}
.ic-wave{display:flex;align-items:flex-end;gap:4px;height:34px}
.ic-wave i{display:block;width:3px;background:linear-gradient(var(--red),var(--gold));border-radius:2px;animation:ic-wave 1.1s ease-in-out infinite}
@keyframes ic-wave{0%,100%{height:18%}50%{height:100%}}

/* ---------- scroll reveal (JS adds .is-in; visible without JS) ---------- */
.ic-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.ic-reveal.is-in{opacity:1;transform:none}
.no-js .ic-reveal{opacity:1;transform:none}
/* SplitText lines */
.ic-line{display:block;overflow:hidden}
.ic-line>*{display:block}

/* ---------- footer ---------- */
.ic-footer{background:var(--paper);border-top:4px solid var(--ink);padding:3rem clamp(1.5rem,4vw,3rem) 1.5rem}
.ic-footer__h{font-family:var(--font-mono);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.64rem;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:.5rem;margin-bottom:1rem}
.ic-footer a:hover{color:var(--red)}

/* ---------- forms ---------- */
.ic-field{width:100%;background:#fff;border:1px solid var(--line);border-radius:2px;padding:.85rem 1rem;font-family:var(--font-body);font-size:.95rem;color:var(--ink);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.ic-field:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(200,0,26,.12)}
.ic-field::placeholder{color:#b8b1a1}
.ic-formlabel{font-family:var(--font-mono);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.62rem;color:var(--gray);margin-bottom:.35rem;display:block}

/* ---------- platform badges ---------- */
.ic-badge{display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--line-dk);border-radius:2px;padding:.6rem 1rem;color:#fff;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;transition:border-color .3s var(--ease),background .3s var(--ease)}
.ic-badge:hover{border-color:var(--gold);background:rgba(212,175,55,.08)}
.ic-badge--ink{color:var(--ink);border-color:var(--line)}
.ic-badge--ink:hover{border-color:var(--red);background:rgba(200,0,26,.05)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .ic-reveal{opacity:1;transform:none}
  .ic-mic{animation:none}
  .ic-mic__glow{display:none}
}

/* ============================================================
   S12 — instant-loading round
   ============================================================ */

/* video poster overlay — iOS WebKit (Safari + Chrome-iOS) can paint a cold
   <video> BLACK until frames arrive regardless of the poster attribute; this
   overlay is deterministic on every engine. site.js fades it on 'playing'. */
.ic-vposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none;transition:opacity .5s var(--ease)}
.ic-vposter.is-off{opacity:0}

/* The Turn, phones (<1024px): the whole 16:9 phase runs on the STILL — the
   horizontal trailer <video> never paints. Two reasons: phones must not
   stream the landscape trailer, and iOS composites <video> on its own layer
   which can ESCAPE the rounded clip-path (the "horizontal frame bleeding
   past the IG case" bug, Shishir's iPhone S12). An <img> clips reliably;
   the mask morph animates the still exactly like desktop. */
@media (max-width:1023px){
  [data-turn] .ic-turn__clip video{display:none}
}

/* The Turn, phones: the vertical cut plays inside the IG case's screen window.
   Geometry mirrors the final mask inset(2.2% 37.8% 11.3% 37.6% round 10px) —
   keep the three in sync (here / site.js tuck tween / .is-turned above). */
/* ⚠ videos are REPLACED elements: left+right / top+bottom do NOT stretch them
   (right/bottom get ignored → the video renders at intrinsic 540px and bleeds
   out of the case — Shishir's iPhone bug). Size the window EXPLICITLY:
   width = 100−37.6−37.8, height = 100−2.2−11.3. */
/* scale(1.05): the video's box and the still's clip window are the same
   geometry, so % rounding can leave a 1px sliver of the still peeking out at
   the edges — the oversize covers it and hides under the case bezel (whose
   frame is ~1.4% of stage per side, wider than the 2–5px overflow). */
.ic-turn__vreel{position:absolute;top:2.2%;left:37.6%;width:24.6%;height:86.5%;transform:scale(1.05);object-fit:cover;border-radius:10px;z-index:3;opacity:0;transition:opacity .35s var(--ease);background:#000}
/* revealed only once frames are actually rendering (site.js adds .is-live on
   'playing') — same iOS-deterministic principle as .ic-vposter: a cold video
   must never paint black over the still */
.ic-turn__vreel.is-live{opacity:1}
@media (min-width:1024px){.ic-turn__vreel{display:none}}

/* inline icon set (Font Awesome retired S12 — was ~253KB of webfonts +
   render-blocking CSS on every page) */
.ic-i{display:inline-block;width:1em;height:1em;vertical-align:-.125em;fill:currentColor;flex:none}
.ic-btn .ic-ar{display:inline-block;transition:transform .35s var(--ease)}
.ic-btn:hover .ic-ar{transform:translateX(4px)}
.ic-btn .ic-ar--d{display:inline-block;transition:transform .35s var(--ease)}
.ic-btn:hover .ic-ar--d{transform:translateY(3px)}
.ic-vol{width:.95em;height:.95em;fill:currentColor;flex:none}
[data-unmute][aria-pressed="false"] .ic-vol--on{display:none}
[data-unmute][aria-pressed="true"] .ic-vol--off{display:none}

/* cross-document view transitions (Chrome 126+ / Safari 18.2+) — page swaps
   read as one continuous surface instead of a white flash; pure enhancement */
@view-transition{navigation:auto}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}