/* Pave hero: the light-table intro, the calm strip and the monitor (HERO, SPEC §3.2). Everything here is .hero*. */

/* ---------------------------------------------------------------- geometry (desktop ≥ 768). JS sets the same values
   in px from clientWidth/innerHeight; these calc() forms are the first paint and the no-JS layout. */
.hero{
  --hero-vh:100svh;
  --hero-band:116px;
  --hero-mon-h:clamp(260px,calc(var(--hero-vh) - 440px),480px);
  --hero-mon-w:calc(var(--hero-mon-h) * 9 / 16);
  --hero-mon-top:calc(var(--hero-vh) - 69px - var(--hero-mon-h));
  --hero-strip-h:calc(var(--hero-mon-h) * .75);
  --hero-strip-top:calc(var(--hero-mon-top) + (var(--hero-mon-h) - var(--hero-strip-h)) / 2);
  --hero-band-top:calc(var(--hero-vh) - var(--hero-band));
  --hero-lane-top:calc(var(--hero-band-top) + 9px);
  --hero-ph-top:calc(var(--hero-mon-top) - 12px);
  --hero-ph-bottom:calc(var(--hero-band-top) + 33px);
  --hero-copies:1;           /* loop-copy cards (intro: 0 until 4.30) */
  --hero-dim:.5;             /* strip cards' dim overlay at calm */
  --hero-edge:1;             /* the strip's edge fade */
  position:relative;height:100svh;overflow:hidden;overflow:clip;isolation:isolate;color:var(--fg);
  -webkit-tap-highlight-color:transparent;
}

/* ---------------------------------------------------------------- the light table (full intro only; JS builds it) */
.hero-stage{position:absolute;left:0;top:0;width:100%;height:calc(var(--hero-vh) - var(--hero-band));
  overflow:hidden;pointer-events:none;z-index:0;perspective:1100px;perspective-origin:50% 42%}
.hero-sheet{position:absolute;left:0;top:0;transform-origin:50% 50%}
.hero-sheet.is-moving{will-change:transform}
.hero-sheet canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,var(--night) 7%,var(--night) 93%,transparent 100%),linear-gradient(180deg,transparent 0,var(--night) 9%,var(--night) 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,var(--night) 7%,var(--night) 93%,transparent 100%),linear-gradient(180deg,transparent 0,var(--night) 9%,var(--night) 100%);
  mask-composite:intersect}
.hero-scan{position:absolute;left:0;top:0;width:1.5px;height:100%;margin-left:-.75px;background:var(--ink);opacity:0;will-change:transform,opacity}

/* ---------------------------------------------------------------- copy */
.hero-copy{position:absolute;left:0;right:0;top:96px;z-index:3;padding:0 var(--gutter);text-align:center;pointer-events:none}
.hero-copy>*{pointer-events:auto}
.hero .display-1{margin:0;text-wrap:balance}
.hero-lead{margin:16px auto 0;max-width:780px;text-wrap:pretty}
.hero .ctas{margin-top:20px;display:flex;gap:12px;justify-content:center}
.hero .fine{margin-top:10px;text-wrap:balance}
.hero-w-mask{padding:0 .04em .16em;margin:0 -.04em -.16em}
@media (max-height:799px) and (min-width:768px){.hero-copy{top:80px}}

/* ---------------------------------------------------------------- the edit: strip, playhead, monitor, waveform */
.hero-edit{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-strip{position:absolute;left:0;width:100%;top:var(--hero-strip-top);height:var(--hero-strip-h);z-index:1;
  overflow-x:clip;overscroll-behavior-x:contain;touch-action:pan-y;cursor:grab;pointer-events:auto;user-select:none;-webkit-user-select:none}
.hero-strip.is-dragging{cursor:grabbing}
/* the edge fade (SPEC: edge mask, opaque from 12% to 88%) is drawn as two night overlays, so the
   strip's own focus ring and the hover label above the cards are not clipped by a mask */
.hero-strip::before,.hero-strip::after{content:'';position:absolute;top:-1px;bottom:-1px;width:12%;z-index:3;pointer-events:none;opacity:var(--hero-edge)}
.hero-strip::before{left:0;background:linear-gradient(90deg,var(--night),rgba(11,12,14,0))}
.hero-strip::after{right:0;background:linear-gradient(270deg,var(--night),rgba(11,12,14,0))}
.hero-track{position:absolute;inset:0;will-change:transform}

.hero-card{position:absolute;top:0;height:100%;transform-origin:50% 50%}
.hero-card.is-copy{opacity:var(--hero-copies)}
.hero-card-win{position:absolute;inset:0;overflow:hidden;background:var(--night-2)}
.hero-card-media{position:absolute;left:0;top:0;transform-origin:0 0}
.hero-card-tile,.hero-card-img{position:absolute;inset:0;width:100%;height:100%}
.hero-card-tile{display:block}
.hero-card-img{display:block;object-fit:cover;object-position:50% 38%}
.hero-card-dim{position:absolute;inset:0;background:var(--night);opacity:var(--hero-dim);pointer-events:none}
.hero.is-calm .hero-card-dim{transition:opacity .3s var(--e-out)}
.hero.is-calm .hero-card.is-hover .hero-card-dim{opacity:.2}
.hero-card-ring,.hero-card-shadow{position:absolute;top:0;height:100%;pointer-events:none}

.hero-pill{position:absolute;top:-10px;z-index:4;display:flex;align-items:center;gap:6px;height:28px;padding:0 11px;
  border-radius:999px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap;
  transform:translate(-50%,-100%);opacity:0;transition:opacity .2s var(--e-out);pointer-events:none}
.hero-pill.is-on{opacity:1}
.hero-pill .k{color:var(--fg-2)}
.hero-pill .v{color:var(--fg)}
.hero-pill svg,.hero-ro-label svg{flex:none;color:var(--fg-2)}

.hero-playhead{position:absolute;left:50%;top:var(--hero-ph-top);height:calc(var(--hero-ph-bottom) - var(--hero-ph-top));
  width:1.5px;margin-left:-.75px;background:var(--light);transform-origin:50% 0;z-index:2}
.hero-playhead i{position:absolute;left:50%;top:-3.5px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--light)}

.hero-monitor{position:absolute;left:calc(50% - var(--hero-mon-w) / 2);top:var(--hero-mon-top);width:var(--hero-mon-w);height:var(--hero-mon-h);
  margin:0;z-index:3;overflow:hidden;border-radius:var(--r-monitor);background:var(--night-2) center/cover no-repeat;
  box-shadow:var(--shadow-lift);transform-origin:50% 50%;pointer-events:none}
.hero-monitor img,.hero-monitor video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.hero-monitor img{transition:opacity .12s linear}
.hero-monitor video{opacity:0;transition:opacity .3s var(--e-out)}
.hero-monitor.is-video video{opacity:1}

.hero-lane{position:absolute;left:0;width:100%;top:var(--hero-lane-top);height:24px;z-index:1;color:var(--fg);pointer-events:none}
.hero-lane-half{position:absolute;top:0;bottom:0;overflow:hidden}
.hero-lane-a{left:0;width:50%;opacity:.7}
.hero-lane-b{left:50%;right:0;opacity:.24}
.hero-lane svg{position:absolute;top:0;left:0;height:100%;overflow:visible;will-change:transform}
.hero-lane-b svg{left:-100%}

/* ---------------------------------------------------------------- the band: control · caption/readout · counter/film */
.hero-band{position:absolute;left:0;right:0;bottom:0;height:var(--hero-band);z-index:4;pointer-events:none}
.hero-control{position:absolute;left:calc(var(--gutter) - 8px);top:60px;height:32px;padding:0 8px;border-radius:999px;
  background:none;border:0;font-size:13px;font-weight:450;letter-spacing:0;color:var(--fg-2);pointer-events:auto;transition:color .2s ease}
.hero-control:hover{color:var(--fg)}
.hero-caption{position:absolute;left:var(--gutter);right:var(--gutter);top:60px;height:32px;margin:0;overflow:hidden;
  font-size:15px;line-height:32px;letter-spacing:-.005em;text-align:center;white-space:nowrap;color:var(--fg)}
.hero-caption span{position:absolute;left:0;right:0;top:0;opacity:.85}
.hero-counter{position:absolute;right:var(--gutter);top:60px;line-height:32px;font-size:13px;font-weight:450;
  font-variant-numeric:tabular-nums;color:var(--fg-2)}
.hero-film{position:absolute;right:var(--gutter);top:58px;pointer-events:auto}
.hero-film .len{font-variant-numeric:tabular-nums}
.hero-readout{position:absolute;left:50%;top:60px;width:340px;height:32px;margin-left:-170px}
.hero-ro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  opacity:0;transition:opacity .2s linear}
.hero-ro.is-on{opacity:1}
.hero-ro-track{position:relative;width:200px;height:2px}
.hero-ro-track::before{content:'';position:absolute;left:0;right:0;top:.5px;height:1px;background:var(--fg);opacity:.25}
.hero-ro-track i{position:absolute;top:0;height:2px;background:var(--light)}
.hero-ro-label{display:flex;align-items:center;gap:6px;white-space:nowrap;line-height:1}
.hero-ro-label .k{color:var(--fg-2)}
.hero-ro-label .v{color:var(--fg)}
@media (max-width:1023px){.hero-readout{display:none}}

/* ---------------------------------------------------------------- modes: hidden starting states (html.js only, so
   ?static and no-JS show everything); JS takes over with inline styles and .is-calm ends them */
html.js[data-intro="full"] .hero:not(.is-calm) .hero-copy>*,
html.js[data-intro="short"] .hero:not(.is-calm) .hero-copy>*,
html.js[data-intro="full"] .hero:not(.is-calm) .hero-monitor,
html.js[data-intro="short"] .hero:not(.is-calm) .hero-monitor,
html.js[data-intro="full"] .hero:not(.is-calm) .hero-film,
html.js[data-intro="full"] .hero:not(.is-calm) .hero-readout,
html.js[data-intro="short"] .hero:not(.is-calm) .hero-lane,
html.js[data-intro="full"] .hero:not(.is-live) .hero-band>*,
html.js[data-intro="short"] .hero:not(.is-calm) .hero-band>*{opacity:0}
html.js[data-intro="full"] .hero:not(.is-calm) .hero-playhead,
html.js[data-intro="short"] .hero:not(.is-calm) .hero-playhead{transform:scaleY(0)}
html.js[data-intro="full"] .hero:not(.is-calm){--hero-copies:0;--hero-dim:0;--hero-edge:0;--fg:var(--ink);--fg-2:var(--ink-2);--hair:var(--line-ink);--on-fg:var(--paper)}
/* fail-safe: if the hero script never takes over (blocked or broken), the copy appears anyway after 4 s */
html.js[data-intro="full"] .hero:not(.is-live) .hero-copy>*,
html.js[data-intro="short"] .hero:not(.is-live) .hero-copy>*{animation:hero-failsafe .6s 4s forwards}
@keyframes hero-failsafe{to{opacity:1}}
/* the counter and the caption belong to the intro only */
html:not([data-intro="full"]) .hero-counter,html:not([data-intro="full"]) .hero-caption,
.hero.is-calm .hero-counter,.hero.is-calm .hero-caption{visibility:hidden}

/* ---------------------------------------------------------------- mobile (< 768): normal flow, centred */
@media (max-width:767px){
  .hero{--hero-band:96px;height:auto;display:grid;justify-items:center;align-content:start;padding:80px 24px 12px;text-align:center}
  .hero-copy{display:contents}
  .hero-copy>*{max-width:342px}
  #hero-title{order:1}
  .hero-lead{order:2;margin:14px 0 0}
  .hero-edit{order:3;position:relative;inset:auto;width:calc(100% + 48px);height:308px;margin:20px -24px 0}
  .hero .ctas{order:4;margin-top:20px;flex-direction:column;gap:12px;width:100%}
  .hero .ctas .btn{width:100%}
  .hero .fine{order:5;margin-top:8px}
  .hero-band{order:6;position:relative;left:auto;right:auto;bottom:auto;width:100%;height:36px;margin-top:8px}

  .hero-strip{top:40px;height:200px}
  .hero-monitor{top:0;width:157.5px;height:280px;left:calc(50% - 78.75px)}
  .hero-playhead{top:-12px;height:320px}
  .hero-lane{top:292px;height:16px}

  .hero-control{left:-8px;top:2px}
  .hero-film{right:0;top:0}
  .hero-counter{right:0;top:2px;line-height:32px}
  .hero-caption{left:-24px;right:-24px;top:-22px;height:20px;font-size:14px;line-height:20px}
  .hero-readout{display:none}
  .hero-stage{height:calc(var(--hero-vh) - 96px)}
}