/* ═══════════════════════════════════════════════════════════
   SHOWRUNNER.TECH — Integrated Cinematics splash

   Overlay language is a calibration / instrument plate:
   a continuous ruled frame with graduations, diamond corner
   nodes, segmented ladders and a travelling measurement trace.
   Deliberately not a viewfinder — no L-brackets, no REC dot,
   no film grain.
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:      #05060a;
  --paper:    #ffffff;
  --amber:    #e7cf16;          /* sampled from the plate */

  --hud:      rgba(255,255,255,.70);
  --hud-dim:  rgba(255,255,255,.32);
  --hair:     rgba(255,255,255,.15);

  --pad:      clamp(15px, 2.7vw, 42px);
  --inset:    clamp(26px, 4.2vw, 62px);   /* bar inset from the ruled frame */
  --bed-w:    48%;                        /* pool the lockup + award sit in */
  --bed-h:    45%;

  --mono:     "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:     "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease:     cubic-bezier(.16,.84,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html,body{ height:100% }

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.stage{ position:fixed; inset:0; height:100dvh; overflow:hidden; isolation:isolate }

/* ── Plate ───────────────────────────────────────────────── */

.plate{
  position:absolute; inset:0; z-index:0;
  background:#0b0d11 url("/media/poster.jpg") center/cover no-repeat;
}

.reel{
  width:100%; height:100%; object-fit:cover; display:block;
  /* just enough hold-down to sit under type — crushing it turns the
     yellow passages to olive, so the type gets its own bed instead */
  filter:brightness(.78) contrast(1.04) saturate(1.06);
  transform:scale(1.045);
  opacity:0; transition:opacity 1.2s var(--ease);
}
.reel.live{ opacity:1 }

.plate::after{                          /* matches the grade on the poster */
  content:""; position:absolute; inset:0;
  background:rgba(5,6,10,.36);
  transition:opacity .9s var(--ease);
}
.stage.playing .plate::after{ opacity:0 }

/* ── Grade + screen ──────────────────────────────────────── */

.grade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* type bed — a soft pool the lockup sits in, so the plate itself
       can stay bright and keep the render's gold and silver */
    radial-gradient(var(--bed-w) var(--bed-h) at 50% 51%,
                    rgba(3,4,8,.74) 0%, rgba(3,4,8,.50) 40%,
                    rgba(3,4,8,.24) 68%, rgba(3,4,8,.07) 86%, rgba(3,4,8,0) 100%),
    linear-gradient(180deg, rgba(5,6,10,.80) 0%, rgba(5,6,10,.06) 20%,
                            rgba(5,6,10,.08) 70%, rgba(5,6,10,.86) 100%),
    linear-gradient(90deg,  rgba(4,7,16,.34) 0%, rgba(4,7,16,0) 24%,
                            rgba(4,7,16,0) 76%, rgba(4,7,16,.34) 100%);
}

/* square-edged matte rather than a lens vignette — reads as panel, not optic */
.matte{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.45), transparent 12%),
    linear-gradient(  0deg, rgba(0,0,0,.45), transparent 12%),
    linear-gradient( 90deg, rgba(0,0,0,.34), transparent 10%),
    linear-gradient(270deg, rgba(0,0,0,.34), transparent 10%);
}

/* dot-matrix screen — the instrument counterpart to film grain */
.halftone{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:.42;
  background-image:radial-gradient(rgba(255,255,255,.30) .5px, transparent .6px);
  background-size:4px 4px;
  -webkit-mask-image:radial-gradient(140% 110% at 50% 50%, #000 12%, rgba(0,0,0,.30) 62%, transparent 100%);
          mask-image:radial-gradient(140% 110% at 50% 50%, #000 12%, rgba(0,0,0,.30) 62%, transparent 100%);
  animation:breathe 7.5s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ opacity:.42 } 50%{ opacity:.24 } }

/* measurement trace: a graduated rule that walks the frame */
.trace{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden }
.trace i{
  position:absolute; left:0; right:0; top:-6px; height:5px;
  background:
    repeating-linear-gradient(90deg, rgba(231,207,22,.85) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, rgba(231,207,22,.55), rgba(231,207,22,0));
  box-shadow:0 0 22px rgba(231,207,22,.30);
  opacity:0;
  animation:trace 11s cubic-bezier(.42,0,.32,1) infinite;
  animation-delay:2.8s;
}
@keyframes trace{
  0%{ transform:translateY(0);      opacity:0 }
  6%{                               opacity:.55 }
  46%{ transform:translateY(101vh); opacity:.55 }
  52%,100%{ transform:translateY(101vh); opacity:0 }
}

/* ── Calibration frame ───────────────────────────────────── */

.cal{ position:absolute; inset:0; z-index:6; pointer-events:none }

.edge{
  position:absolute; background:rgba(255,255,255,.20);
  opacity:0; animation:calIn 1s var(--ease) .3s forwards;
}
.e-t,.e-b{ left:var(--pad); right:var(--pad); height:1px }
.e-l,.e-r{ top:var(--pad); bottom:var(--pad); width:1px }
.e-t{ top:var(--pad) }    .e-b{ bottom:var(--pad) }
.e-l{ left:var(--pad) }   .e-r{ right:var(--pad) }
@keyframes calIn{ to{ opacity:1 } }

/* graduations hang off the inside of each edge: minor every 22px, major every 110px */
.grad{
  position:absolute; background-repeat:no-repeat;
  opacity:0; animation:calIn 1.1s var(--ease) .5s forwards;
}
.g-t,.g-b{
  left:var(--pad); right:var(--pad); height:13px;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.42) 0 1px, transparent 1px 110px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.17) 0 1px, transparent 1px 22px);
  background-size:100% 13px, 100% 6px;
}
.g-t{ top:calc(var(--pad) + 1px) }
.g-b{ bottom:calc(var(--pad) + 1px); transform:scaleY(-1) }

.g-l,.g-r{
  top:var(--pad); bottom:var(--pad); width:13px;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.42) 0 1px, transparent 1px 110px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.17) 0 1px, transparent 1px 22px);
  background-size:13px 100%, 6px 100%;
}
.g-l{ left:calc(var(--pad) + 1px) }
.g-r{ right:calc(var(--pad) + 1px); transform:scaleX(-1) }

/* corner nodes: amber diamonds seated on the continuous rule */
.node{
  position:absolute; width:9px; height:9px;
  background:var(--amber); transform:rotate(45deg) scale(.4);
  box-shadow:0 0 14px rgba(231,207,22,.55);
  opacity:0; animation:nodeIn .7s var(--ease) forwards;
}
@keyframes nodeIn{ to{ opacity:1; transform:rotate(45deg) scale(1) } }
.n-tl{ top:calc(var(--pad) - 4px); left:calc(var(--pad) - 4px);   animation-delay:.62s }
.n-tr{ top:calc(var(--pad) - 4px); right:calc(var(--pad) - 4px);  animation-delay:.69s }
.n-bl{ bottom:calc(var(--pad) - 4px); left:calc(var(--pad) - 4px);  animation-delay:.76s }
.n-br{ bottom:calc(var(--pad) - 4px); right:calc(var(--pad) - 4px); animation-delay:.83s }

/* ── Instrument bars ─────────────────────────────────────── */

.bar{
  position:absolute; z-index:8;
  left:var(--inset); right:var(--inset);
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(12px,2vw,26px);
  font-family:var(--mono); font-size:clamp(8.5px,.85vw,11.5px);
  letter-spacing:.17em; color:var(--hud); text-transform:uppercase;
  opacity:0;
}
.bar-top{ top:calc(var(--pad) + 30px); animation:barDown 1s var(--ease) .8s forwards }
.bar-bot{ bottom:calc(var(--pad) + 30px); animation:barUp 1s var(--ease) .88s forwards }
@keyframes barDown{ from{ opacity:0; transform:translateY(-7px) } to{ opacity:1; transform:none } }
@keyframes barUp{   from{ opacity:0; transform:translateY(7px) }  to{ opacity:1; transform:none } }

.seg{ display:flex; align-items:center; gap:clamp(9px,1.3vw,17px); white-space:nowrap }
.seg-c{ flex:1; justify-content:center; min-width:0 }

.label{ color:var(--hud-dim); letter-spacing:.22em }
.label b{ font-weight:500; color:var(--hud) }

/* wordmark glyph: a bracketed aperture, not a viewfinder corner */
.glyph{
  width:11px; height:11px; flex:none; position:relative;
  border:1px solid var(--amber); border-radius:1px;
  box-shadow:0 0 11px rgba(231,207,22,.45);
}
.glyph::after{
  content:""; position:absolute; inset:2.5px;
  background:var(--amber);
}
.wordmark{ font-weight:500; letter-spacing:.30em; color:#fff }
.dim{ color:var(--hud-dim) }

.hair{ height:1px; flex:1; max-width:120px;
       background:linear-gradient(90deg,transparent,var(--hair),transparent) }

/* segmented ladders replace pulsing indicators */
.ladder{ display:flex; align-items:center; gap:2px }
.ladder i{
  display:block; width:5px; height:9px;
  background:rgba(255,255,255,.16);
  transition:background .25s linear;
}
.ladder i.on{ background:var(--amber); box-shadow:0 0 7px rgba(231,207,22,.5) }
.ladder-sm i{ width:3px; height:8px }
.ladder-sm i.on{ box-shadow:none; background:rgba(231,207,22,.85) }

.frm{ color:#fff; letter-spacing:.13em; font-variant-numeric:tabular-nums }

.strip{ gap:clamp(10px,1.6vw,20px) }
.pipe{ width:1px; height:11px; background:var(--hair); flex:none }

/* ── Core ────────────────────────────────────────────────── */

.core{
  position:absolute; z-index:9; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 calc(var(--inset) + clamp(4px,.8vw,14px));
  text-align:center;
}

.title{
  width:100%;
  font-weight:800; font-stretch:112%;
  line-height:.845; letter-spacing:-.012em;
  text-transform:uppercase;
  font-size:clamp(3.1rem, 13.6vw, 15.5rem);
}

.line{
  display:block; position:relative; overflow:hidden;
  text-align:center; padding-block:.035em;
}
.line .txt{
  display:inline-block; white-space:nowrap; color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.70), 0 0 74px rgba(0,0,0,.48);
  transform:translateY(105%);
  animation:rise 1.25s var(--ease) forwards;
}
.line:nth-child(1) .txt{ animation-delay:.18s }
.line:nth-child(2) .txt{ animation-delay:.30s }
@keyframes rise{ to{ transform:none } }

.line::after{                            /* amber rake across the lockup, once */
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(231,207,22,.9) 46%,
             rgba(255,255,255,.95) 52%, rgba(231,207,22,.9) 58%, transparent 100%);
  mix-blend-mode:overlay;
  transform:translateX(-115%);
  animation:rake 1.5s var(--ease) forwards;
}
.line:nth-child(1)::after{ animation-delay:.55s }
.line:nth-child(2)::after{ animation-delay:.67s }
@keyframes rake{ to{ transform:translateX(115%) } }

/* NAB Show mark — reversed to white for the dark plate */
.award-mark{
  display:block;
  width:clamp(88px, 8.4vw, 132px);
  height:auto;
  margin-top:clamp(20px,2.6vw,34px);
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.9)) drop-shadow(0 0 26px rgba(0,0,0,.6));
  opacity:0; animation:tagIn 1.1s var(--ease) 1.12s forwards;
}

.tagline{
  position:relative;
  margin-top:clamp(11px,1.5vw,19px);
  display:flex; align-items:center; justify-content:center;
  max-width:min(64ch, 90vw);
  font-family:var(--mono); font-weight:400;
  font-size:clamp(9.5px,1.02vw,13.5px);
  line-height:1.62; letter-spacing:.185em;
  text-transform:uppercase; color:rgba(255,255,255,.87);
  text-shadow:0 1px 16px rgba(0,0,0,.72);
  opacity:0; animation:tagIn 1.1s var(--ease) 1.2s forwards;
}
@keyframes tagIn{ from{ opacity:0; transform:translateY(9px) } to{ opacity:1; transform:none } }

.tag-txt{ display:block; text-wrap:balance }

/* ── Narrow ──────────────────────────────────────────────── */

@media (max-width: 760px){
  :root{ --inset:clamp(25px,6.4vw,36px); --bed-w:82%; --bed-h:33% }
  .seg-c{ display:none }
  .title{ font-size:clamp(2.9rem, 16.5vw, 6rem); font-stretch:106% }
  .halftone{ background-size:3px 3px; opacity:.3 }
  .g-l,.g-r{ display:none }
  .strip .label:nth-of-type(n+2), .strip .pipe{ display:none }
}

@media (max-width: 430px){
  .frm{ display:none }
  .bar-bot .ladder i:nth-child(n+13){ display:none }
}

/* landscape phones — keep the lockup clear of the bars */
@media (max-height: 460px) and (orientation: landscape){
  .title{ font-size:clamp(2.2rem, 9.4vh, 5rem) }
  .tagline{ margin-top:12px }
  .g-t,.g-b{ display:none }
}

/* ── Reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  .trace,.line::after{ display:none }
  .halftone{ animation:none }
  .reel{ opacity:1 }
  .line .txt,.tagline,.award-mark,.bar,.edge,.grad,.node{
    animation:none; opacity:1; transform:none;
  }
  .node{ transform:rotate(45deg) }
  .g-b{ transform:scaleY(-1) }
  .g-r{ transform:scaleX(-1) }
}