/* ============================================================
   SoundVault — ThreeJS build. MOBILE-FIRST.
   Every base rule targets a phone in portrait; larger screens are
   progressive enhancement via min-width queries. Brand tokens match
   the live site: black main, #1068FF hue, #26D6E3 detail.
   ============================================================ */

/* ── type: the three brand-guideline faces ─────────────────────
   The typography page assigns Montserrat to 80% of the system (regular and
   bold), OPTIEdgar to headings and main information (15%), and IBM Plex Mono
   to additional information (5%). Keep those roles explicit here so a new
   decorative face cannot quietly become a fourth tier.

   IT WAS NEVER ACTUALLY LOADED. Every rule below said Montserrat, no
   @font-face and no webfont link existed, and it is not a system font on
   macOS or Windows, so the whole site had been rendering in Helvetica /
   Arial. That is why it did not match the deck. Self-hosted now rather
   than linked, so the page has no third-party dependency and no FOUT
   waiting on fonts.googleapis.com.

   One FILE covers 400 to 800: Google ships Montserrat as a variable font
   and serves the same woff2 for every weight, so the range is declared
   once. The latin-ext face is a separate unicode-range on purpose -- the
   browser only fetches its 68KB if a glyph outside latin actually appears,
   which on a Finnish page is never, but it keeps Estonian and the odd
   artist name safe. */
@font-face{
  font-family:"OPTIEdgar";
  src:url("./assets/fonts/OPTIEdgar-Extended.otf") format("opentype");
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("./assets/fonts/montserrat-var-latin.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Montserrat";
  src:url("./assets/fonts/montserrat-var-latin-ext.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,
    U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
    U+2C60-2C7F,U+A720-A7FF;
}
/* IBM Plex Mono: the deck's technical face. On the posters it sets the
   small letterspaced labels -- LINEUP A-Z, SUVILAHTI / HELSINKI FINLAND,
   SPONSOR AREA -- and this page is full of exactly those. */
@font-face{
  font-family:"IBM Plex Mono";
  src:url("./assets/fonts/plexmono-400-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("./assets/fonts/plexmono-600-latin.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("./assets/fonts/plexmono-400-latin-ext.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,
    U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
    U+2C60-2C7F,U+A720-A7FF;
}

/* ── approved roles from the guideline typography page ─────────
     --f-ui       Montserrat      primary copy, buttons and artist names
     --f-heading  OPTIEdgar       headings and main information
     --f-mono     IBM Plex Mono   small supplementary / technical labels */
:root{
  --f-display:OPTIEdgar,Montserrat,sans-serif;
  --f-heading:OPTIEdgar,Montserrat,sans-serif;
  --f-ui:Montserrat,"Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

:root{
  --black:#000;
  --ink:#05070B;
  --blue:#1068FF;
  --blue-deep:#0051DC;
  --teal:#26D6E3;
  /* Shared HUD palette. Header and footer derive from the exact section
     hues so the chrome cannot drift away from the content screens. */
  --sv-hue-lineup:16,104,255;
  --sv-hue-tickets:38,214,227;
  --sv-hue-info:111,157,255;
  --white:#fff;
  --mist:#D7E2ED;
  --line:rgba(215,226,237,.16);
  --edge:rgba(38,214,227,.38);
  --pad:20px;                       /* phone gutter */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-interactive:cubic-bezier(.16,1,.3,1);
  --ease-sharp:cubic-bezier(.76,0,.24,1);

  /* chamfer language: two sizes, used everywhere the brand cuts a
     corner, so the geometry reads as one system rather than one-offs. */
  --chamfer:12px;      /* tickets, hue-band seal, chunky panels */
  --chamfer-sm:8px;     /* artist cards, info cards, footer chips */

  /* spacing scale — deliberate vertical rhythm instead of magic numbers */
  --sp-1:8px;
  --sp-2:12px;
  --sp-3:16px;
  --sp-4:24px;
  --sp-5:32px;
  --sp-6:48px;
  --sp-7:64px;
  --sp-8:96px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-width:none}
html.sv-weighted-scrolling{scroll-behavior:auto}
html::-webkit-scrollbar{display:none;width:0;height:0}
body{-ms-overflow-style:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--black);color:var(--mist);
  font-family:var(--f-ui);
  font-size:16px;line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* fallback atmosphere if WebGL never starts */
  background-image:
    radial-gradient(120% 80% at 78% 0%,rgba(16,104,255,.28),rgba(0,0,0,0) 62%),
    radial-gradient(90% 60% at 10% 100%,rgba(38,214,227,.10),rgba(0,0,0,0) 60%);
  background-attachment:fixed;
}

a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

.electric-lattice{
  position:fixed;left:0;display:block;z-index:0;pointer-events:none;
  opacity:0;filter:brightness(1);will-change:transform,opacity,filter;
  transition:opacity .7s ease,filter .72s cubic-bezier(.16,.82,.2,1);
}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none;filter:brightness(1);transition:filter .72s cubic-bezier(.16,.82,.2,1)}
html.electric-pending #gl{opacity:0}
html.electric-visible #gl{opacity:1;transition:opacity .7s ease,filter .72s cubic-bezier(.16,.82,.2,1)}
html.electric-visible .electric-lattice{opacity:1}
html.electric-visible.electric-energized .electric-lattice{
  opacity:1;filter:brightness(2.35) saturate(1.16) drop-shadow(0 0 4px rgba(38,214,227,.38));
  transition:opacity .14s ease,filter .16s ease-out;
}
html.electric-visible.electric-energized #gl{
  filter:brightness(1.85) saturate(1.18) drop-shadow(0 0 5px rgba(38,214,227,.32));
  transition:filter .16s ease-out;
}
html[data-gl="electric"] body{
  /* Near-black atmosphere: the cyan circuit lattice and current pulses carry
     the colour, while the space between them stays genuinely dark. */
  background-color:#000;
  background-image:radial-gradient(76% 82% at 50% 42%,#010710 0%,#000207 44%,#000 100%);
}
/* The circuit lattice already provides fine texture. Dropping the additional
   full-screen blend layer saves a permanent compositing pass. */
html[data-gl="electric"] #grain{display:none}
/* Static film grain keeps the texture without forcing a huge fixed layer to
   jump between compositor positions. The old stepped animation made the
   otherwise-fluid WebGL movement read as a low-frame-rate video. */
#grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.11;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
main,.nav,.foot,.menu{position:relative;z-index:2}

/* ── boot veil ─────────────────────────────────────────────── */
#boot{
  --boot-blue:#1068ff;--boot-teal:#26d6e3;--boot-white:#f3fbff;
  --boot-cx:50%;--boot-cy:50%;
  position:fixed;inset:0;z-index:999;overflow:hidden;isolation:isolate;
  background:#02050b;color:var(--boot-white);opacity:1;visibility:visible;
  animation:bootFail .1s linear 9s forwards;      /* failsafe if JS dies */
}
#boot.gone{opacity:0!important;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}
/* The class is written by the tiny inline head script. With scripting fully
   disabled it never exists, so the decorative loader must not cover a site
   that cannot run it. */
html:not(.sv-booting):not([data-intro]) #boot{display:none}
@keyframes bootFail{to{opacity:0;visibility:hidden}}

/* The real targets retain their layout while the load-out is measuring
   them. They become visible on the exact frame the animated duplicates
   arrive, so the hand-off cannot jump at another viewport size. */
.sv-booting .nav,
.sv-booting main .hero-inner,
.sv-booting .scroll-hint,
.sv-booting .sv-site-hud,
.sv-booting .sv-corner-overlay,
.sv-booting .sv-corner-fill{
  opacity:0;animation:bootTargetFail .1s linear 9s forwards;
}
@keyframes bootTargetFail{to{opacity:1}}

.boot-world,.boot-hud,.boot-blocks,
.boot-scanlines,.boot-vignette,.boot-flash{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
}
.boot-world{z-index:0}
.boot-blocks{z-index:1;overflow:hidden}
.boot-hud{z-index:2}
.boot-scanlines{
  z-index:3;opacity:.1;
  background:repeating-linear-gradient(180deg,transparent 0,transparent 3px,rgba(76,191,255,.12) 4px);
}
.boot-vignette{
  z-index:4;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 27%,rgba(0,5,14,.12) 54%,rgba(0,0,0,.72) 100%),
    linear-gradient(90deg,rgba(0,0,0,.36),transparent 19% 81%,rgba(0,0,0,.36));
}
.boot-flash{
  display:none;z-index:5;opacity:0;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.94) 0,rgba(173,246,255,.54) 5%,rgba(38,214,227,.20) 18%,transparent 50%),
    linear-gradient(90deg,transparent 15%,rgba(38,214,227,.13) 49.8%,rgba(255,255,255,.7) 50%,rgba(38,214,227,.13) 50.2%,transparent 85%);
}
.boot-corner-icons{
  position:absolute;inset:0;z-index:6;pointer-events:none;
}

/* Modular archive blocks assemble from opposite sides of the viewport. The
   pieces are intentionally architectural rather than noisy: dark mass, a
   single live edge and brief stepped signal changes. */
.boot-blocks i{
  --block-alpha:.38;--block-from:-26px;--block-delay:0s;
  position:absolute;display:block;opacity:0;
  border:1px solid rgba(23,126,220,.18);
  border-left-color:rgba(38,214,227,.58);
  background:
    linear-gradient(90deg,rgba(16,104,255,.22),rgba(4,17,37,.72) 24%,rgba(2,7,16,.48)),
    #020711;
  box-shadow:inset 0 1px rgba(105,224,255,.13);
  transform:translate3d(var(--block-from),0,0) scaleX(.28);
  transform-origin:left center;
  will-change:transform,opacity;
  animation:
    bootBlockAssemble .64s steps(5,end) var(--block-delay) forwards,
    bootBlockSignal 1.12s steps(2,end) calc(.82s + var(--block-delay)) infinite;
}
.boot-blocks i::after{
  content:"";position:absolute;left:7px;top:3px;width:min(38%,42px);height:1px;
  background:rgba(38,214,227,.62);box-shadow:0 0 5px rgba(38,214,227,.28);
}

/* Left module bank. */
.boot-blocks i:nth-child(1){left:7%;top:21%;width:clamp(76px,16vw,250px);height:10px;--block-delay:.02s}
.boot-blocks i:nth-child(2){left:12%;top:29%;width:clamp(44px,8vw,122px);height:28px;--block-alpha:.27;--block-delay:.10s}
.boot-blocks i:nth-child(3){left:5%;top:44%;width:clamp(62px,11vw,170px);height:8px;--block-delay:.18s}
.boot-blocks i:nth-child(4){left:16%;top:62%;width:clamp(82px,15vw,228px);height:12px;--block-alpha:.3;--block-delay:.26s}
.boot-blocks i:nth-child(5){left:25%;top:15%;width:clamp(38px,7vw,105px);height:7px;--block-alpha:.24;--block-delay:.34s}
.boot-blocks i:nth-child(6){left:28%;top:76%;width:clamp(58px,10vw,154px);height:9px;--block-delay:.42s}

/* Right module bank mirrors the structure but not every proportion. */
.boot-blocks i:nth-child(n+7):nth-child(-n+12){
  --block-from:26px;transform-origin:right center;border-left-color:rgba(23,126,220,.18);
  border-right-color:rgba(38,214,227,.58);
  background:linear-gradient(270deg,rgba(16,104,255,.22),rgba(4,17,37,.72) 24%,rgba(2,7,16,.48)),#020711;
}
.boot-blocks i:nth-child(7){right:7%;top:21%;width:clamp(76px,16vw,250px);height:10px;--block-delay:.06s}
.boot-blocks i:nth-child(8){right:12%;top:29%;width:clamp(44px,8vw,122px);height:28px;--block-alpha:.27;--block-delay:.14s}
.boot-blocks i:nth-child(9){right:5%;top:44%;width:clamp(62px,11vw,170px);height:8px;--block-delay:.22s}
.boot-blocks i:nth-child(10){right:16%;top:62%;width:clamp(82px,15vw,228px);height:12px;--block-alpha:.3;--block-delay:.30s}
.boot-blocks i:nth-child(11){right:25%;top:15%;width:clamp(38px,7vw,105px);height:7px;--block-alpha:.24;--block-delay:.38s}
.boot-blocks i:nth-child(12){right:28%;top:76%;width:clamp(58px,10vw,154px);height:9px;--block-delay:.46s}

/* Central docking bay. Four thin pieces frame each sigil and the final logo
   without putting another bright box behind them. */
.boot-blocks i:nth-child(n+13){--block-alpha:.3;--block-from:0px;border-color:rgba(38,214,227,.24);background:rgba(3,13,29,.56)}
.boot-blocks i:nth-child(13){left:calc(50% - min(210px,34vw));top:calc(50% - 78px);width:min(420px,68vw);height:6px;--block-delay:.18s}
.boot-blocks i:nth-child(14){left:calc(50% - min(210px,34vw));top:calc(50% + 72px);width:min(420px,68vw);height:6px;--block-delay:.26s}
.boot-blocks i:nth-child(15){left:calc(50% - min(210px,34vw));top:calc(50% - 57px);width:6px;height:114px;--block-delay:.34s}
.boot-blocks i:nth-child(16){right:calc(50% - min(210px,34vw));top:calc(50% - 57px);width:6px;height:114px;--block-delay:.42s}
.boot-blocks i:nth-child(17){left:calc(50% - min(174px,29vw));top:calc(50% - 62px);width:clamp(28px,5vw,74px);height:5px;--block-alpha:.58;--block-delay:.50s}
.boot-blocks i:nth-child(18){right:calc(50% - min(174px,29vw));top:calc(50% + 57px);width:clamp(28px,5vw,74px);height:5px;--block-alpha:.58;--block-delay:.58s}

@keyframes bootBlockAssemble{
  0%{opacity:0;transform:translate3d(var(--block-from),0,0) scaleX(.28)}
  34%{opacity:.1}
  67%{opacity:calc(var(--block-alpha) * .62);transform:translate3d(0,0,0) scaleX(.72)}
  100%{opacity:var(--block-alpha);transform:translate3d(0,0,0) scaleX(1)}
}
@keyframes bootBlockSignal{
  0%,80%,100%{opacity:var(--block-alpha)}
  82%{opacity:calc(var(--block-alpha) * .34)}
  88%{opacity:calc(var(--block-alpha) * 1.42)}
  92%{opacity:var(--block-alpha)}
}

/* ── intro background lab ────────────────────────────────────
   Five lightweight alternatives to the production archive blocks. The
   sigils, logo, progress, corner marks and particle field stay unchanged;
   only the secondary screen language changes. Every option reuses the same
   18 elements and the same opacity/transform animation. */

/* 01 — long, nearly weightless signal rails entering from the edges. */
html[data-sv-screen="1"] .boot-blocks i{
  height:1px;border:0;border-radius:0;
  background:linear-gradient(90deg,transparent,rgba(16,104,255,.22) 18%,rgba(38,214,227,.58));
  box-shadow:0 0 6px rgba(38,214,227,.12);--block-alpha:.48;
}
html[data-sv-screen="1"] .boot-blocks i::after{
  left:auto;right:0;top:-2px;width:4px;height:4px;background:#8eefff;
  box-shadow:0 0 7px rgba(38,214,227,.65);
}
html[data-sv-screen="1"] .boot-blocks i:nth-child(n+7):nth-child(-n+12){
  background:linear-gradient(270deg,transparent,rgba(16,104,255,.22) 18%,rgba(38,214,227,.58));
}
html[data-sv-screen="1"] .boot-blocks i:nth-child(n+7):nth-child(-n+12)::after{left:0;right:auto}
html[data-sv-screen="1"] .boot-blocks i:nth-child(1){left:3%;right:auto;top:18%;width:27vw}
html[data-sv-screen="1"] .boot-blocks i:nth-child(2){left:8%;right:auto;top:26%;width:12vw}
html[data-sv-screen="1"] .boot-blocks i:nth-child(3){left:2%;right:auto;top:42%;width:19vw}
html[data-sv-screen="1"] .boot-blocks i:nth-child(4){left:12%;right:auto;top:62%;width:15vw}
html[data-sv-screen="1"] .boot-blocks i:nth-child(5){left:4%;right:auto;top:72%;width:9vw}
html[data-sv-screen="1"] .boot-blocks i:nth-child(6){left:22%;right:auto;top:82%;width:8vw}
html[data-sv-screen="1"] .boot-blocks i:nth-child(7){right:3%;left:auto;top:18%;width:27vw}
html[data-sv-screen="1"] .boot-blocks i:nth-child(8){right:8%;left:auto;top:26%;width:12vw}
html[data-sv-screen="1"] .boot-blocks i:nth-child(9){right:2%;left:auto;top:42%;width:19vw}
html[data-sv-screen="1"] .boot-blocks i:nth-child(10){right:12%;left:auto;top:62%;width:15vw}
html[data-sv-screen="1"] .boot-blocks i:nth-child(11){right:4%;left:auto;top:72%;width:9vw}
html[data-sv-screen="1"] .boot-blocks i:nth-child(12){right:22%;left:auto;top:82%;width:8vw}
html[data-sv-screen="1"] .boot-blocks i:nth-child(13){left:calc(50% - min(190px,28vw));right:auto;top:calc(50% - 70px);width:min(92px,15vw)}
html[data-sv-screen="1"] .boot-blocks i:nth-child(14){right:calc(50% - min(190px,28vw));left:auto;top:calc(50% + 70px);width:min(92px,15vw)}
html[data-sv-screen="1"] .boot-blocks i:nth-child(15){left:calc(50% - min(190px,28vw));right:auto;top:calc(50% + 70px);width:min(54px,9vw);height:1px}
html[data-sv-screen="1"] .boot-blocks i:nth-child(16){right:calc(50% - min(190px,28vw));left:auto;top:calc(50% - 70px);width:min(54px,9vw);height:1px}
html[data-sv-screen="1"] .boot-blocks i:nth-child(17),
html[data-sv-screen="1"] .boot-blocks i:nth-child(18){display:none}

/* 02 — slim vertical scan columns; data is present without boxing the logo. */
html[data-sv-screen="2"] .boot-blocks i{
  width:1px;border:0;border-radius:0;--block-alpha:.42;
  background:repeating-linear-gradient(180deg,rgba(38,214,227,.62) 0 2px,transparent 2px 8px);
  box-shadow:0 0 6px rgba(16,104,255,.16);transform-origin:center top;
}
html[data-sv-screen="2"] .boot-blocks i::after{
  left:-2px;top:0;width:5px;height:12px;background:linear-gradient(180deg,#c8fbff,transparent);
  box-shadow:0 0 8px rgba(38,214,227,.48);
}
html[data-sv-screen="2"] .boot-blocks i:nth-child(1){left:5%;right:auto;top:17%;height:24vh}
html[data-sv-screen="2"] .boot-blocks i:nth-child(2){left:9%;right:auto;top:29%;height:42vh}
html[data-sv-screen="2"] .boot-blocks i:nth-child(3){left:15%;right:auto;top:12%;height:18vh}
html[data-sv-screen="2"] .boot-blocks i:nth-child(4){left:21%;right:auto;top:61%;height:22vh}
html[data-sv-screen="2"] .boot-blocks i:nth-child(5){left:27%;right:auto;top:20%;height:13vh}
html[data-sv-screen="2"] .boot-blocks i:nth-child(6){left:32%;right:auto;top:72%;height:12vh}
html[data-sv-screen="2"] .boot-blocks i:nth-child(7){right:5%;left:auto;top:17%;height:24vh}
html[data-sv-screen="2"] .boot-blocks i:nth-child(8){right:9%;left:auto;top:29%;height:42vh}
html[data-sv-screen="2"] .boot-blocks i:nth-child(9){right:15%;left:auto;top:12%;height:18vh}
html[data-sv-screen="2"] .boot-blocks i:nth-child(10){right:21%;left:auto;top:61%;height:22vh}
html[data-sv-screen="2"] .boot-blocks i:nth-child(11){right:27%;left:auto;top:20%;height:13vh}
html[data-sv-screen="2"] .boot-blocks i:nth-child(12){right:32%;left:auto;top:72%;height:12vh}
html[data-sv-screen="2"] .boot-blocks i:nth-child(n+13){display:none}

/* 03 — six sparse, dark glass tiles with clipped opposing corners. */
html[data-sv-screen="3"] .boot-blocks i{
  display:none;border:1px solid rgba(38,214,227,.16);--block-alpha:.34;
  background:
    linear-gradient(180deg,rgba(38,214,227,.12),transparent 1px),
    radial-gradient(circle at 12% 20%,rgba(16,104,255,.18),transparent 42%),
    rgba(1,7,16,.72);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  box-shadow:inset 0 0 18px rgba(16,104,255,.06),0 0 12px rgba(0,0,0,.4);
}
html[data-sv-screen="3"] .boot-blocks i::after{
  left:8px;right:auto;top:7px;width:34%;height:1px;background:rgba(38,214,227,.7);
}
html[data-sv-screen="3"] .boot-blocks i:nth-child(1){display:block;left:5%;right:auto;top:19%;width:clamp(110px,17vw,270px);height:clamp(54px,8vw,118px)}
html[data-sv-screen="3"] .boot-blocks i:nth-child(3){display:block;left:10%;right:auto;top:58%;width:clamp(82px,13vw,205px);height:clamp(48px,7vw,102px)}
html[data-sv-screen="3"] .boot-blocks i:nth-child(6){display:block;left:28%;right:auto;top:76%;width:clamp(58px,8vw,124px);height:clamp(28px,4vw,56px)}
html[data-sv-screen="3"] .boot-blocks i:nth-child(7){display:block;right:5%;left:auto;top:19%;width:clamp(110px,17vw,270px);height:clamp(54px,8vw,118px)}
html[data-sv-screen="3"] .boot-blocks i:nth-child(9){display:block;right:10%;left:auto;top:58%;width:clamp(82px,13vw,205px);height:clamp(48px,7vw,102px)}
html[data-sv-screen="3"] .boot-blocks i:nth-child(12){display:block;right:28%;left:auto;top:76%;width:clamp(58px,8vw,124px);height:clamp(28px,4vw,56px)}

/* 04 — two quiet horizon gates. No individual screens at all. */
html[data-sv-screen="4"] .boot-blocks i{
  display:none;height:1px;border:0;--block-alpha:.5;
  background:linear-gradient(90deg,transparent,rgba(16,104,255,.22),rgba(38,214,227,.74),rgba(16,104,255,.22),transparent);
  box-shadow:0 0 7px rgba(38,214,227,.16);
}
html[data-sv-screen="4"] .boot-blocks i::after{display:none}
html[data-sv-screen="4"] .boot-blocks i:nth-child(1),
html[data-sv-screen="4"] .boot-blocks i:nth-child(3),
html[data-sv-screen="4"] .boot-blocks i:nth-child(7),
html[data-sv-screen="4"] .boot-blocks i:nth-child(9),
html[data-sv-screen="4"] .boot-blocks i:nth-child(13),
html[data-sv-screen="4"] .boot-blocks i:nth-child(14){display:block}
html[data-sv-screen="4"] .boot-blocks i:nth-child(1){left:3%;right:auto;top:31%;width:31vw}
html[data-sv-screen="4"] .boot-blocks i:nth-child(3){left:12%;right:auto;top:69%;width:22vw}
html[data-sv-screen="4"] .boot-blocks i:nth-child(7){right:3%;left:auto;top:31%;width:31vw}
html[data-sv-screen="4"] .boot-blocks i:nth-child(9){right:12%;left:auto;top:69%;width:22vw}
html[data-sv-screen="4"] .boot-blocks i:nth-child(13){left:calc(50% - min(240px,38vw));right:auto;top:calc(50% - 74px);width:min(480px,76vw)}
html[data-sv-screen="4"] .boot-blocks i:nth-child(14){left:calc(50% - min(240px,38vw));right:auto;top:calc(50% + 74px);width:min(480px,76vw)}

/* 05 — small connected signal nodes: the least screen-like option. */
html[data-sv-screen="5"] .boot-blocks i{
  width:4px;height:4px;border:1px solid rgba(158,242,255,.72);border-radius:50%;
  background:rgba(38,214,227,.68);box-shadow:0 0 8px rgba(38,214,227,.58);
  --block-alpha:.7;transform-origin:center;
}
html[data-sv-screen="5"] .boot-blocks i::after{
  left:3px;top:1px;width:clamp(28px,6vw,92px);height:1px;
  background:repeating-linear-gradient(90deg,rgba(38,214,227,.4) 0 2px,transparent 2px 7px);
  box-shadow:none;transform:rotate(var(--node-angle,0deg));transform-origin:left center;
}
html[data-sv-screen="5"] .boot-blocks i:nth-child(n+7):nth-child(-n+12)::after{
  left:auto;right:3px;transform-origin:right center;
}
html[data-sv-screen="5"] .boot-blocks i:nth-child(1){left:8%;right:auto;top:20%;--node-angle:18deg}
html[data-sv-screen="5"] .boot-blocks i:nth-child(2){left:18%;right:auto;top:31%;--node-angle:-12deg}
html[data-sv-screen="5"] .boot-blocks i:nth-child(3){left:6%;right:auto;top:49%;--node-angle:8deg}
html[data-sv-screen="5"] .boot-blocks i:nth-child(4){left:23%;right:auto;top:65%;--node-angle:17deg}
html[data-sv-screen="5"] .boot-blocks i:nth-child(5){left:31%;right:auto;top:18%;--node-angle:32deg}
html[data-sv-screen="5"] .boot-blocks i:nth-child(6){left:29%;right:auto;top:80%;--node-angle:-28deg}
html[data-sv-screen="5"] .boot-blocks i:nth-child(7){right:8%;left:auto;top:20%;--node-angle:-18deg}
html[data-sv-screen="5"] .boot-blocks i:nth-child(8){right:18%;left:auto;top:31%;--node-angle:12deg}
html[data-sv-screen="5"] .boot-blocks i:nth-child(9){right:6%;left:auto;top:49%;--node-angle:-8deg}
html[data-sv-screen="5"] .boot-blocks i:nth-child(10){right:23%;left:auto;top:65%;--node-angle:-17deg}
html[data-sv-screen="5"] .boot-blocks i:nth-child(11){right:31%;left:auto;top:18%;--node-angle:-32deg}
html[data-sv-screen="5"] .boot-blocks i:nth-child(12){right:29%;left:auto;top:80%;--node-angle:28deg}
html[data-sv-screen="5"] .boot-blocks i:nth-child(13){left:calc(50% - min(190px,30vw));right:auto;top:calc(50% - 68px);--node-angle:0deg}
html[data-sv-screen="5"] .boot-blocks i:nth-child(14){right:calc(50% - min(190px,30vw));left:auto;top:calc(50% + 68px);--node-angle:180deg}
html[data-sv-screen="5"] .boot-blocks i:nth-child(15){left:calc(50% - min(190px,30vw));right:auto;top:calc(50% + 68px);--node-angle:0deg}
html[data-sv-screen="5"] .boot-blocks i:nth-child(16){right:calc(50% - min(190px,30vw));left:auto;top:calc(50% - 68px);--node-angle:180deg}
html[data-sv-screen="5"] .boot-blocks i:nth-child(17),
html[data-sv-screen="5"] .boot-blocks i:nth-child(18){display:none}

/* Live-site version of the intro scope: restrained enough to sit behind the
   content, but built from the same concentric lattice, radial calibration
   ticks and centre crosshair as the load-out reference. */
.sv-site-hud{
  --site-hud-size:min(76vmin,720px);
  --site-hud-opacity:.42;
  position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none;
  opacity:var(--site-hud-opacity);mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0 54%,transparent 84%);
  mask-image:radial-gradient(circle at 50% 50%,#000 0 54%,transparent 84%);
}
.sv-site-hud__scope{
  position:absolute;left:50%;top:50%;width:var(--site-hud-size);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
}
.sv-site-hud__scope::before,.sv-site-hud__scope::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
}
/* Keep the centre crosshair and calibration readouts, but remove every
   concentric circle from the persistent background overlay. */
.sv-site-hud__scope::before,
.sv-site-hud__scope::after,
.sv-site-hud__ring,
.sv-site-hud__axis,
.sv-site-hud__reticle{display:none}
.sv-site-hud__scope::before{
  background:
    radial-gradient(circle,transparent 0 10%,rgba(38,214,227,.32) 10.2% 10.45%,transparent 10.7% 25%,rgba(54,150,255,.22) 25.2% 25.45%,transparent 25.7% 42%,rgba(38,214,227,.25) 42.2% 42.5%,transparent 42.8% 49.4%,rgba(38,214,227,.26) 49.6% 50%,transparent 50.2%);
  box-shadow:inset 0 0 70px rgba(16,104,255,.10);
}
.sv-site-hud__scope::after{
  inset:2%;
  background:repeating-conic-gradient(from 0deg,rgba(38,214,227,.38) 0 .3deg,transparent .3deg 9deg);
  -webkit-mask-image:radial-gradient(circle,transparent 0 26%,#000 26.4% 27%,transparent 27.4% 44%,#000 44.4% 46%,transparent 46.4%);
  mask-image:radial-gradient(circle,transparent 0 26%,#000 26.4% 27%,transparent 27.4% 44%,#000 44.4% 46%,transparent 46.4%);
  animation:siteHudTurn 34s linear infinite;
}
@keyframes siteHudTurn{to{transform:rotate(360deg)}}
.sv-site-hud__ring{
  position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);
  border:1px dashed rgba(38,214,227,.27);box-shadow:0 0 9px rgba(16,104,255,.10);
}
.sv-site-hud__ring--1{width:31%;height:31%;transform:translate(-50%,-50%) rotate(18deg)}
.sv-site-hud__ring--2{width:66%;height:66%;border-style:dotted;border-color:rgba(77,168,255,.22)}
.sv-site-hud__ring--3{width:94%;height:94%;transform:translate(-50%,-50%) rotate(-11deg)}
.sv-site-hud__axis{position:absolute;left:50%;top:50%;opacity:.56}
.sv-site-hud__axis--x{
  width:116%;height:1px;transform:translate(-50%,-50%);
  background:linear-gradient(90deg,transparent,rgba(38,214,227,.34) 22%,transparent 22.2% 47%,rgba(38,214,227,.72) 50%,transparent 53% 77.8%,rgba(38,214,227,.34) 78%,transparent);
}
.sv-site-hud__axis--y{
  width:1px;height:116%;transform:translate(-50%,-50%);
  background:linear-gradient(180deg,transparent,rgba(38,214,227,.24) 31%,transparent 31.2% 47%,rgba(38,214,227,.62) 50%,transparent 53% 68.8%,rgba(38,214,227,.24) 69%,transparent);
}
.sv-site-hud__reticle{
  position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%) rotate(45deg);
  border:1px solid rgba(191,248,255,.72);box-shadow:0 0 12px rgba(38,214,227,.72);
}
.sv-site-hud__readout{
  position:absolute;top:69%;font:600 clamp(6px,.48vw,9px)/1 var(--f-mono);
  letter-spacing:.16em;color:rgba(166,226,248,.48);white-space:nowrap;
}
.sv-site-hud__readout--left{right:56%}
.sv-site-hud__readout--right{left:56%}
.boot-system,.boot-telemetry,.boot-progress{
  position:absolute;z-index:8;font-family:var(--f-mono);text-transform:uppercase;
}
.boot-system{
  top:max(24px,4.2vh);left:50%;display:flex;align-items:center;gap:11px;
  transform:translateX(-50%);white-space:nowrap;color:rgba(210,242,255,.68);
  font-size:clamp(7px,.55vw,10px);font-weight:600;letter-spacing:.24em;
}
.boot-system i{width:clamp(34px,5vw,86px);height:1px;background:linear-gradient(90deg,transparent,var(--boot-teal))}
.boot-system i:last-child{transform:scaleX(-1)}
.boot-telemetry{
  top:50%;color:rgba(146,206,237,.48);font-size:clamp(7px,.5vw,9px);letter-spacing:.16em;
  writing-mode:vertical-rl;
}
.boot-telemetry--left{left:max(11px,1.8vw);transform:translateY(-50%) rotate(180deg)}
.boot-telemetry--right{right:max(11px,1.8vw);transform:translateY(-50%)}

.boot-spirit{
  position:absolute;z-index:7;left:var(--boot-cx);top:var(--boot-cy);width:clamp(26px,2.72vw,43px);
  height:clamp(26px,2.72vw,43px);transform:translate(-50%,-50%);
  opacity:0;filter:drop-shadow(0 0 6px rgba(38,214,227,.32));
  will-change:opacity;
}
.boot-spirit img{
  position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:contain;
}
.boot-spirit::before,.boot-spirit::after{display:none}

.boot-lockup{
  position:absolute;z-index:7;left:var(--boot-cx);top:var(--boot-cy);
  width:min(42vw,520px);aspect-ratio:1011/134;
  transform:translate(-50%,-50%);opacity:0;will-change:opacity;
}
.boot-logo-final{
  position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;object-fit:contain;
  opacity:0;transform:scale(.88);filter:brightness(2.8) blur(2px) drop-shadow(0 0 18px rgba(38,214,227,.72));
}
.boot-logo-fragments{position:absolute;inset:0;z-index:2;pointer-events:none}
.boot-logo-fragments i{
  position:absolute;inset:0;display:block;opacity:0;
  background:url("./assets/logo/festival-white-trim.png") center/100% 100% no-repeat;
  transform:translate(var(--burst-x),var(--burst-y)) rotate(var(--burst-r)) scale(.72);
  filter:brightness(3.4) blur(2.5px) drop-shadow(0 0 13px rgba(38,214,227,.85));
}
.boot-logo-fragments i:nth-child(1){--burst-x:-52%;--burst-y:-190%;--burst-r:-18deg;--burst-d:0s;clip-path:polygon(0 0,11% 0,9% 100%,0 100%)}
.boot-logo-fragments i:nth-child(2){--burst-x:-39%;--burst-y:145%;--burst-r:14deg;--burst-d:.018s;clip-path:polygon(8% 0,20% 0,23% 100%,9% 100%)}
.boot-logo-fragments i:nth-child(3){--burst-x:-30%;--burst-y:-120%;--burst-r:-11deg;--burst-d:.036s;clip-path:polygon(18% 0,29% 0,32% 100%,22% 100%)}
.boot-logo-fragments i:nth-child(4){--burst-x:-18%;--burst-y:185%;--burst-r:19deg;--burst-d:.054s;clip-path:polygon(27% 0,38% 0,40% 100%,31% 100%)}
.boot-logo-fragments i:nth-child(5){--burst-x:-8%;--burst-y:-205%;--burst-r:-8deg;--burst-d:.072s;clip-path:polygon(36% 0,47% 0,49% 100%,39% 100%)}
.boot-logo-fragments i:nth-child(6){--burst-x:4%;--burst-y:160%;--burst-r:12deg;--burst-d:.09s;clip-path:polygon(45% 0,56% 0,58% 100%,48% 100%)}
.boot-logo-fragments i:nth-child(7){--burst-x:15%;--burst-y:-175%;--burst-r:16deg;--burst-d:.108s;clip-path:polygon(54% 0,65% 0,67% 100%,57% 100%)}
.boot-logo-fragments i:nth-child(8){--burst-x:27%;--burst-y:135%;--burst-r:-14deg;--burst-d:.126s;clip-path:polygon(63% 0,74% 0,76% 100%,66% 100%)}
.boot-logo-fragments i:nth-child(9){--burst-x:39%;--burst-y:-150%;--burst-r:11deg;--burst-d:.144s;clip-path:polygon(72% 0,83% 0,85% 100%,75% 100%)}
.boot-logo-fragments i:nth-child(10){--burst-x:52%;--burst-y:180%;--burst-r:-19deg;--burst-d:.162s;clip-path:polygon(81% 0,91% 0,94% 100%,84% 100%)}
.boot-logo-fragments i:nth-child(11){--burst-x:-58%;--burst-y:20%;--burst-r:-6deg;--burst-d:.06s;clip-path:polygon(0 28%,52% 18%,51% 58%,0 72%)}
.boot-logo-fragments i:nth-child(12){--burst-x:58%;--burst-y:-18%;--burst-r:7deg;--burst-d:.09s;clip-path:polygon(48% 42%,100% 28%,100% 76%,49% 82%)}
.boot-lockup::before,.boot-lockup::after{
  content:"";position:absolute;left:50%;top:50%;z-index:1;pointer-events:none;opacity:0;
}
.boot-lockup::before{
  width:15%;aspect-ratio:1;border:1px solid rgba(106,228,255,.9);border-radius:50%;
  transform:translate(-50%,-50%) scale(.12);box-shadow:0 0 18px rgba(38,214,227,.62),inset 0 0 12px rgba(38,214,227,.35);
}
.boot-lockup::after{
  width:150%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(38,214,227,.25),#fff 50%,rgba(38,214,227,.25),transparent);
  transform:translate(-50%,-50%) scaleX(0);box-shadow:0 0 12px rgba(38,214,227,.8);
}
.boot-lockup.is-forming .boot-logo-fragments i{
  animation:svLogoShardForm .68s var(--burst-d) cubic-bezier(.12,.88,.18,1) both;
}
.boot-lockup.is-forming .boot-logo-final{animation:svLogoFinalLock .76s cubic-bezier(.16,.9,.18,1) both}
.boot-lockup.is-forming::before{animation:svLogoShockRing .72s ease-out both}
.boot-lockup.is-forming::after{animation:svLogoShockBeam .68s ease-out both}
@keyframes svLogoShardForm{
  0%{opacity:0;transform:translate(var(--burst-x),var(--burst-y)) rotate(var(--burst-r)) scale(.72);filter:brightness(3.4) blur(2.5px) drop-shadow(0 0 13px rgba(38,214,227,.85))}
  14%{opacity:.94}
  68%{opacity:1;transform:translate(0,0) rotate(0) scale(1.035);filter:brightness(2.5) blur(.3px) drop-shadow(0 0 11px rgba(38,214,227,.72))}
  82%{opacity:.82;transform:translate(0,0) rotate(0) scale(.992);filter:brightness(1.6) blur(0) drop-shadow(0 0 7px rgba(38,214,227,.4))}
  100%{opacity:0;transform:translate(0,0) rotate(0) scale(1);filter:none}
}
@keyframes svLogoFinalLock{
  0%,52%{opacity:0;transform:scale(.88);filter:brightness(2.8) blur(2px) drop-shadow(0 0 18px rgba(38,214,227,.72))}
  66%{opacity:1;transform:scale(1.045);filter:brightness(3.4) blur(0) drop-shadow(0 0 22px rgba(38,214,227,.9))}
  82%{opacity:1;transform:scale(.992);filter:brightness(1.35) drop-shadow(0 0 9px rgba(38,214,227,.42))}
  100%{opacity:1;transform:scale(1);filter:brightness(1) drop-shadow(0 0 7px rgba(38,214,227,.2))}
}
@keyframes svLogoShockRing{
  0%,38%{opacity:0;transform:translate(-50%,-50%) scale(.12)}
  48%{opacity:.92}
  100%{opacity:0;transform:translate(-50%,-50%) scale(5.8)}
}
@keyframes svLogoShockBeam{
  0%,43%{opacity:0;transform:translate(-50%,-50%) scaleX(0)}
  54%{opacity:1;transform:translate(-50%,-50%) scaleX(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scaleX(1.28)}
}

/* Ten deliberately different post-loadout reveals. The intro stays quiet;
   these effects only fire once the counter has locked at 100%. */
.sv-site-arriving #gl,.sv-site-arriving main,.sv-site-arriving .nav,
.sv-site-arriving .sv-intro-frame{
  transform-origin:50% 50%;
  backface-visibility:hidden;
}

html[data-sv-transition="1"] .sv-site-arriving #gl,
html[data-sv-transition="1"] .sv-site-arriving main,
html[data-sv-transition="1"] .sv-site-arriving .nav,
html[data-sv-transition="1"] .sv-site-arriving .sv-intro-frame{
  animation:svNeonRift .84s cubic-bezier(.12,.82,.18,1) both;
}
@keyframes svNeonRift{
  0%{clip-path:inset(49.85% 42% 49.85% 42%);transform:scaleX(.42);filter:brightness(4) blur(1px);opacity:.2}
  18%{clip-path:inset(49.72% 0 49.72% 0);transform:scaleX(1);filter:brightness(3);opacity:1}
  54%{clip-path:inset(13% 0 13% 0);filter:brightness(1.45)}
  78%{clip-path:inset(0);transform:scaleX(1.015);filter:brightness(1.1)}
  100%{clip-path:inset(0);transform:scale(1);filter:none;opacity:1}
}

html[data-sv-transition="2"] .sv-site-arriving #gl,
html[data-sv-transition="2"] .sv-site-arriving main,
html[data-sv-transition="2"] .sv-site-arriving .nav,
html[data-sv-transition="2"] .sv-site-arriving .sv-intro-frame{
  animation:svDataShards .9s cubic-bezier(.14,.8,.18,1) both;
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 6.5%,transparent 6.5% 8.333%);
  mask-image:repeating-linear-gradient(90deg,#000 0 6.5%,transparent 6.5% 8.333%);
}
@keyframes svDataShards{
  0%{transform:translate3d(-8vw,18vh,0) skewX(-8deg);filter:blur(7px) brightness(2.8);opacity:0;-webkit-mask-position:20vw 0;mask-position:20vw 0}
  32%{opacity:1}
  62%{transform:translate3d(1.8vw,-2vh,0) skewX(2deg);filter:blur(1px) brightness(1.55);-webkit-mask-position:-8vw 0;mask-position:-8vw 0}
  78%{transform:translate3d(0,0,0);filter:none;-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 6.5%,transparent 6.5% 8.333%);mask-image:repeating-linear-gradient(90deg,#000 0 6.5%,transparent 6.5% 8.333%)}
  79%,100%{transform:none;filter:none;opacity:1;-webkit-mask-image:none;mask-image:none}
}

html[data-sv-transition="3"] .sv-site-arriving #gl,
html[data-sv-transition="3"] .sv-site-arriving main,
html[data-sv-transition="3"] .sv-site-arriving .nav,
html[data-sv-transition="3"] .sv-site-arriving .sv-intro-frame{
  animation:svGravityFlip .88s cubic-bezier(.12,.82,.2,1) both;
  transform-origin:50% 0;
}
@keyframes svGravityFlip{
  0%{transform:perspective(900px) translateY(48vh) rotateX(-78deg) scale(.68);filter:blur(8px) brightness(2.2);opacity:0}
  48%{opacity:1}
  72%{transform:perspective(900px) translateY(-2vh) rotateX(7deg) scale(1.025);filter:brightness(1.3)}
  88%{transform:perspective(900px) translateY(.5vh) rotateX(-2deg) scale(.995)}
  100%{transform:none;filter:none;opacity:1}
}

html[data-sv-transition="4"] .sv-site-arriving #gl,
html[data-sv-transition="4"] .sv-site-arriving main{
  animation:svCoreBreach .9s cubic-bezier(.12,.8,.16,1) both;
}
html[data-sv-transition="4"] .sv-site-arriving .nav,
html[data-sv-transition="4"] .sv-site-arriving .sv-intro-frame{
  animation:svCoreChrome .76s .12s cubic-bezier(.16,.82,.18,1) both;
}
@keyframes svCoreBreach{
  0%{clip-path:polygon(50% 49%,51% 50%,50% 51%,49% 50%);transform:scale(.7) rotate(-3deg);filter:brightness(4) blur(5px);opacity:.2}
  46%{clip-path:polygon(50% -25%,125% 50%,50% 125%,-25% 50%);transform:scale(1.08) rotate(.8deg);filter:brightness(1.8);opacity:1}
  72%{clip-path:inset(0);transform:scale(.985);filter:brightness(1.08)}
  100%{clip-path:inset(0);transform:none;filter:none;opacity:1}
}
@keyframes svCoreChrome{
  0%{transform:scale(1.08);filter:blur(5px) brightness(2);opacity:0}
  70%{transform:scale(.99);filter:brightness(1.2);opacity:1}
  100%{transform:none;filter:none;opacity:1}
}

html[data-sv-transition="5"] .sv-site-arriving #gl{animation:svMagneticField .6s ease-out both}
html[data-sv-transition="5"] .sv-site-arriving main{animation:svMagneticMain .64s cubic-bezier(.12,.88,.18,1) both}
html[data-sv-transition="5"] .sv-site-arriving .nav{animation:svMagneticNav .58s cubic-bezier(.08,.9,.16,1) both}
html[data-sv-transition="5"] .sv-site-arriving .sv-intro-frame{animation:svMagneticFrame .62s cubic-bezier(.1,.86,.2,1) both}
@keyframes svMagneticField{
  0%{transform:scale(.68) rotate(-2deg);filter:blur(10px) brightness(2.6);opacity:0}
  72%{transform:scale(1.035);filter:blur(1px) brightness(1.25);opacity:1}
  100%{transform:none;filter:none;opacity:1}
}
@keyframes svMagneticMain{
  0%{transform:translateY(18vh) scale(.72) rotate(1.5deg);filter:blur(8px) brightness(1.8);opacity:0}
  68%{transform:translateY(-1.5vh) scale(1.025) rotate(-.3deg);filter:brightness(1.2);opacity:1}
  100%{transform:none;filter:none;opacity:1}
}
@keyframes svMagneticNav{
  0%{transform:translateY(-130%) scaleX(.75);filter:blur(5px) brightness(2.2);opacity:0}
  72%{transform:translateY(5%) scaleX(1.02);filter:brightness(1.2);opacity:1}
  100%{transform:none;filter:none;opacity:1}
}
@keyframes svMagneticFrame{
  0%{clip-path:inset(48% 48%);transform:scale(1.14);filter:brightness(3);opacity:0}
  70%{clip-path:inset(0);transform:scale(.99);opacity:1}
  100%{clip-path:inset(0);transform:none;filter:none;opacity:1}
}

html[data-sv-transition="6"] .sv-site-arriving #gl,
html[data-sv-transition="6"] .sv-site-arriving main,
html[data-sv-transition="6"] .sv-site-arriving .nav,
html[data-sv-transition="6"] .sv-site-arriving .sv-intro-frame{
  animation:svPlasmaRain .92s cubic-bezier(.12,.82,.18,1) both;
}
@keyframes svPlasmaRain{
  0%{transform:translateY(-28vh) skewY(-5deg) scaleY(1.18);filter:blur(8px) brightness(3);opacity:0}
  56%{transform:translateY(2vh) skewY(1deg) scaleY(.98);filter:brightness(1.5);opacity:1}
  78%{transform:translateY(-.6vh);filter:brightness(1.1)}
  100%{transform:none;filter:none;opacity:1}
}

html[data-sv-transition="7"] .sv-site-arriving #gl,
html[data-sv-transition="7"] .sv-site-arriving main,
html[data-sv-transition="7"] .sv-site-arriving .nav,
html[data-sv-transition="7"] .sv-site-arriving .sv-intro-frame{
  animation:svCrossSurge .88s cubic-bezier(.1,.84,.16,1) both;
}
@keyframes svCrossSurge{
  0%{clip-path:polygon(48.8% 0,51.2% 0,51.2% 48.8%,100% 48.8%,100% 51.2%,51.2% 51.2%,51.2% 100%,48.8% 100%,48.8% 51.2%,0 51.2%,0 48.8%,48.8% 48.8%);filter:brightness(3.4) blur(2px);opacity:.28}
  42%{clip-path:polygon(32% 0,68% 0,68% 32%,100% 32%,100% 68%,68% 68%,68% 100%,32% 100%,32% 68%,0 68%,0 32%,32% 32%);filter:brightness(1.65);opacity:1}
  76%{clip-path:inset(0);transform:scale(1.018)}
  100%{clip-path:inset(0);transform:none;filter:none;opacity:1}
}

html[data-sv-transition="8"] .sv-site-arriving #gl,
html[data-sv-transition="8"] .sv-site-arriving main,
html[data-sv-transition="8"] .sv-site-arriving .nav,
html[data-sv-transition="8"] .sv-site-arriving .sv-intro-frame{
  animation:svDiamondShock .94s cubic-bezier(.1,.82,.16,1) both;
}
@keyframes svDiamondShock{
  0%{clip-path:polygon(50% 49.5%,50.5% 50%,50% 50.5%,49.5% 50%);transform:scale(.45) rotate(-12deg);filter:brightness(5) blur(3px);opacity:.15}
  42%{clip-path:polygon(50% -30%,130% 50%,50% 130%,-30% 50%);transform:scale(1.12) rotate(2deg);filter:brightness(2.2);opacity:1}
  68%{clip-path:inset(0);transform:scale(.97) rotate(-.4deg);filter:brightness(1.3)}
  100%{clip-path:inset(0);transform:none;filter:none;opacity:1}
}

html[data-sv-transition="9"] .sv-site-arriving #gl,
html[data-sv-transition="9"] .sv-site-arriving main,
html[data-sv-transition="9"] .sv-site-arriving .nav,
html[data-sv-transition="9"] .sv-site-arriving .sv-intro-frame{
  animation:svReverseCurrent .98s cubic-bezier(.12,.8,.16,1) both;
}
@keyframes svReverseCurrent{
  0%{transform:scale(1.48) rotate(2deg);filter:blur(12px) brightness(2.5);opacity:0}
  34%{transform:scale(.74) rotate(-1deg);filter:blur(2px) brightness(3.6);opacity:.92}
  55%{transform:scale(1.09);filter:brightness(1.8);opacity:1}
  76%{transform:scale(.985);filter:brightness(1.15)}
  100%{transform:none;filter:none;opacity:1}
}

html[data-sv-transition="10"] .sv-site-arriving #gl{animation:svMagneticField .72s ease-out both}
html[data-sv-transition="10"] .sv-site-arriving main{animation:svMagneticMain .76s cubic-bezier(.12,.88,.18,1) both}
html[data-sv-transition="10"] .sv-site-arriving .nav{animation:svMagneticNav .7s cubic-bezier(.08,.9,.16,1) both}
html[data-sv-transition="10"] .sv-site-arriving .sv-intro-frame{animation:svMagneticFrame .74s cubic-bezier(.1,.86,.2,1) both}

.sv-site-arriving .sv-site-hud{animation:svTransitionHud .82s cubic-bezier(.12,.82,.18,1) both}
html[data-sv-transition="5"] .sv-site-arriving .sv-site-hud,
html[data-sv-transition="10"] .sv-site-arriving .sv-site-hud{animation:svMagneticHud .74s cubic-bezier(.1,.86,.18,1) both}
@keyframes svTransitionHud{
  0%{opacity:0;filter:blur(6px) brightness(2.2);transform:scale(.62) rotate(-24deg)}
  100%{opacity:var(--site-hud-opacity);filter:none;transform:scale(1)}
}
@keyframes svMagneticHud{
  0%{opacity:0;filter:blur(8px) brightness(3);transform:scale(1.45) rotate(38deg)}
  74%{opacity:var(--site-hud-opacity);filter:brightness(1.4);transform:scale(.96) rotate(-3deg)}
  100%{opacity:var(--site-hud-opacity);filter:none;transform:scale(1) rotate(0)}
}

.sv-transition-fx{
  position:fixed;inset:0;z-index:1100;overflow:hidden;pointer-events:none;opacity:0;visibility:hidden;
  mix-blend-mode:screen;
}
.sv-site-arriving .sv-transition-fx{opacity:1;visibility:visible}
.sv-transition-fx__beam,.sv-transition-fx__core{position:absolute;display:block;opacity:0}
.sv-transition-fx__beam{left:50%;top:50%;width:0;height:2px;transform:translate(-50%,-50%);background:#dffcff}
.sv-transition-fx__core{left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%) rotate(45deg);border:1px solid #bffaff}
.sv-transition-fx__shards{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);opacity:0}
.sv-transition-fx__shards i{border-left:1px solid rgba(38,214,227,.45);background:linear-gradient(180deg,transparent,rgba(16,104,255,.12),transparent)}
.sv-transition-fx__electric{position:absolute;inset:0;width:100%;height:100%}

html[data-sv-transition="1"] .sv-site-arriving .sv-transition-fx__beam{
  animation:svRiftBeam .82s cubic-bezier(.12,.82,.18,1) both;
  box-shadow:0 0 8px #fff,0 0 24px #26d6e3,0 0 72px #1068ff;
}
@keyframes svRiftBeam{
  0%{width:0;opacity:0}
  12%{width:12%;opacity:1}
  34%{width:100%;height:2px;opacity:1}
  58%{width:100%;height:28vh;opacity:.52}
  100%{width:100%;height:100vh;opacity:0}
}

html[data-sv-transition="2"] .sv-site-arriving .sv-transition-fx__shards{opacity:1}
html[data-sv-transition="2"] .sv-site-arriving .sv-transition-fx__shards i{
  animation:svShardStrike .72s cubic-bezier(.12,.8,.2,1) both;
  animation-delay:calc(var(--i) * 18ms);
}
@keyframes svShardStrike{
  0%{transform:translateY(calc((var(--i) - 6) * 8vh)) scaleY(.06);filter:brightness(4);opacity:0}
  32%{opacity:.9}
  72%{transform:translateY(0) scaleY(1);opacity:.28}
  100%{transform:none;opacity:0}
}

html[data-sv-transition="3"] .sv-site-arriving .sv-transition-fx::before{
  content:"";position:absolute;left:-20%;right:-20%;bottom:-18%;height:72%;
  background:repeating-linear-gradient(90deg,rgba(38,214,227,.34) 0 1px,transparent 1px 8vw),repeating-linear-gradient(0deg,rgba(16,104,255,.28) 0 1px,transparent 1px 7vh);
  transform-origin:50% 100%;animation:svGravityGrid .88s ease-out both;
}
@keyframes svGravityGrid{
  0%{transform:perspective(500px) rotateX(82deg) translateY(35%);opacity:0}
  38%{opacity:.75}
  100%{transform:perspective(500px) rotateX(72deg) translateY(-55%);opacity:0}
}

html[data-sv-transition="4"] .sv-site-arriving .sv-transition-fx__core{
  animation:svCoreGlyph .86s cubic-bezier(.1,.82,.16,1) both;
  box-shadow:0 0 14px #fff,0 0 38px #26d6e3,0 0 90px #1068ff;
}
@keyframes svCoreGlyph{
  0%{width:8px;height:8px;opacity:0}
  18%{opacity:1}
  52%{width:72vmax;height:72vmax;border-width:2px;opacity:.9}
  100%{width:150vmax;height:150vmax;opacity:0}
}

html[data-sv-transition="10"] .sv-site-arriving .sv-transition-fx::before,
html[data-sv-transition="10"] .sv-site-arriving .sv-transition-fx::after{
  content:"";position:absolute;left:50%;top:50%;background:linear-gradient(90deg,transparent,#dffcff,transparent);opacity:0;
}
html[data-sv-transition="10"] .sv-site-arriving .sv-transition-fx::before{width:100vw;height:1px;transform:translate(-50%,-50%);animation:svMagneticAxisX .74s ease-out both}
html[data-sv-transition="10"] .sv-site-arriving .sv-transition-fx::after{width:1px;height:100vh;transform:translate(-50%,-50%);animation:svMagneticAxisY .74s .06s ease-out both}
@keyframes svMagneticAxisX{0%{transform:translate(-50%,-50%) scaleX(0);opacity:0}24%{opacity:1}70%{transform:translate(-50%,-50%) scaleX(1);opacity:.7}100%{opacity:0}}
@keyframes svMagneticAxisY{0%{transform:translate(-50%,-50%) scaleY(0);opacity:0}24%{opacity:1}70%{transform:translate(-50%,-50%) scaleY(1);opacity:.6}100%{opacity:0}}

html[data-sv-transition] .sv-site-arriving .nav-logo,
html[data-sv-transition] .sv-site-arriving .nav .btn,
html[data-sv-transition] .sv-site-arriving main .btn{
  animation:svElectricControl .58s cubic-bezier(.08,.9,.16,1) both;
  animation-delay:calc(.14s + var(--sv-electric-order,0) * 24ms);
  transform-origin:50% 50%;
}
@keyframes svElectricControl{
  0%{transform:scale(.12) rotate(-5deg);filter:blur(4px) brightness(5);opacity:0}
  48%{transform:scale(1.14) rotate(1deg);filter:brightness(2.4);opacity:1}
  72%{transform:scale(.96);filter:brightness(1.3)}
  100%{transform:none;filter:none;opacity:1}
}

.sv-transition-picker{
  position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:1200;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;padding:6px;
  transform:translateX(-50%);border:1px solid rgba(38,214,227,.25);
  background:rgba(0,5,14,.88);box-shadow:0 0 18px rgba(16,104,255,.16);
  font:600 9px/1 var(--f-mono);letter-spacing:.13em;color:rgba(207,240,252,.72);
  transition:opacity .2s ease,visibility .2s ease;
}
html.sv-booting .sv-transition-picker,.sv-site-arriving .sv-transition-picker{opacity:0;visibility:hidden;pointer-events:none}
.sv-transition-picker__label{min-width:142px;padding:0 8px;white-space:nowrap}
.sv-transition-picker button{
  min-width:28px;height:28px;padding:0 7px;border:1px solid rgba(38,214,227,.2);
  background:transparent;color:inherit;font:inherit;letter-spacing:.08em;cursor:pointer;
}
.sv-transition-picker button:hover,.sv-transition-picker button:focus-visible,
.sv-transition-picker button[aria-current="true"]{
  border-color:rgba(38,214,227,.75);color:#f2fdff;background:rgba(16,104,255,.2);
  outline:none;
}
.sv-transition-picker__replay{min-width:68px!important;margin-left:3px}

/* Final handoff: a compact HUD display pops toward the viewer, then becomes
   the viewport. These rules intentionally override the retired variation lab. */
.sv-site-arriving #gl,.sv-site-arriving main,.sv-site-arriving .nav,
.sv-site-arriving .sv-intro-frame{
  animation:svHudScreenReveal .82s cubic-bezier(.14,.86,.18,1) both!important;
  transform-origin:50% 50%!important;
}
@keyframes svHudScreenReveal{
  0%,18%{clip-path:inset(43% 44%);transform:perspective(900px) translateZ(-220px) scale(.62);filter:blur(5px) brightness(2.3);opacity:0}
  34%{clip-path:inset(38% 34%);transform:perspective(900px) translateZ(45px) scale(1.04);filter:brightness(1.75);opacity:.82}
  52%{clip-path:inset(35% 30%);transform:perspective(900px) translateZ(0) scale(.98);filter:brightness(1.2);opacity:1}
  100%{clip-path:inset(0);transform:none;filter:none;opacity:1}
}
.sv-site-arriving .sv-site-hud{
  animation:svHudScreenLattice .82s cubic-bezier(.14,.86,.18,1) both!important;
}
@keyframes svHudScreenLattice{
  0%,24%{opacity:0;transform:scale(.18);filter:blur(5px) brightness(2.2)}
  48%{opacity:var(--site-hud-opacity);transform:scale(.74);filter:brightness(1.5)}
  100%{opacity:var(--site-hud-opacity);transform:scale(1);filter:none}
}
.sv-transition-screen{
  --transition-cut:clamp(10px,1.05vw,15px);
  --transition-gap:clamp(7px,.72vw,10px);
  --transition-rail:clamp(34px,5.5vw,72px);
  position:absolute;left:50%;top:50%;width:min(38vw,430px);aspect-ratio:16/9;
  transform:translate(-50%,-50%) scale(.06);opacity:0;
  border:0;
  clip-path:polygon(
    var(--transition-cut) 0,calc(100% - var(--transition-cut)) 0,
    100% var(--transition-cut),100% calc(100% - var(--transition-cut)),
    calc(100% - var(--transition-cut)) 100%,var(--transition-cut) 100%,
    0 calc(100% - var(--transition-cut)),0 var(--transition-cut));
  background:linear-gradient(112deg,rgba(38,214,227,.94),rgba(16,104,255,.76) 52%,rgba(38,214,227,.68));
  box-shadow:0 0 24px rgba(38,214,227,.36),0 0 80px rgba(16,104,255,.18);
  animation:none;will-change:transform,opacity,filter;
}
.sv-site-arriving .sv-transition-screen{animation:svHudScreenPop .82s cubic-bezier(.1,.88,.16,1) both}
@keyframes svHudScreenPop{
  0%{transform:translate(-50%,-50%) scale(.04);filter:blur(3px) brightness(3);opacity:0}
  18%{opacity:1}
  36%{transform:translate(-50%,-50%) scale(1.12);filter:brightness(1.8);opacity:1}
  50%{transform:translate(-50%,-50%) scale(.98);filter:none;opacity:1}
  70%{transform:translate(-50%,-50%) scale(1.18,1.1);opacity:.92}
  100%{transform:translate(-50%,-50%) scale(4.4,5.2);filter:blur(1px);opacity:0}
}
.sv-transition-screen::before{
  content:"";position:absolute;inset:1px;pointer-events:none;
  clip-path:polygon(
    calc(var(--transition-cut) - 1px) 0,calc(100% - var(--transition-cut) + 1px) 0,
    100% calc(var(--transition-cut) - 1px),100% calc(100% - var(--transition-cut) + 1px),
    calc(100% - var(--transition-cut) + 1px) 100%,calc(var(--transition-cut) - 1px) 100%,
    0 calc(100% - var(--transition-cut) + 1px),0 calc(var(--transition-cut) - 1px));
  background:
    linear-gradient(135deg,transparent 0 47.8%,rgba(38,214,227,.08) 48.4%,transparent 49.1%) 0 0 / 78px 78px,
    linear-gradient(90deg,transparent 0 49%,rgba(16,104,255,.07) 49.5%,transparent 50%) 0 0 / 58px 58px,
    repeating-linear-gradient(180deg,transparent 0 5px,rgba(38,214,227,.035) 6px),
    radial-gradient(76% 130% at 12% 0,rgba(10,161,220,.09),transparent 66%),
    radial-gradient(76% 82% at 50% 42%,#010710 0%,#000207 54%,#000 100%);
}
.sv-transition-screen::after{
  content:"";position:absolute;inset:var(--transition-gap);pointer-events:none;opacity:.68;
  background:
    linear-gradient(135deg,transparent calc(50% - .7px),rgba(38,214,227,.94) 50%,transparent calc(50% + .7px)) left top / var(--transition-cut) var(--transition-cut) no-repeat,
    linear-gradient(90deg,rgba(38,214,227,.9),transparent) var(--transition-cut) top / var(--transition-rail) 1px no-repeat,
    linear-gradient(180deg,rgba(38,214,227,.9),transparent) left var(--transition-cut) / 1px var(--transition-rail) no-repeat,
    linear-gradient(45deg,transparent calc(50% - .7px),rgba(16,104,255,.88) 50%,transparent calc(50% + .7px)) right top / var(--transition-cut) var(--transition-cut) no-repeat,
    linear-gradient(270deg,rgba(16,104,255,.82),transparent) right var(--transition-cut) top / var(--transition-rail) 1px no-repeat,
    linear-gradient(180deg,rgba(16,104,255,.82),transparent) right top var(--transition-cut) / 1px var(--transition-rail) no-repeat,
    linear-gradient(45deg,transparent calc(50% - .7px),rgba(16,104,255,.72) 50%,transparent calc(50% + .7px)) left bottom / var(--transition-cut) var(--transition-cut) no-repeat,
    linear-gradient(90deg,rgba(16,104,255,.68),transparent) left var(--transition-cut) bottom / var(--transition-rail) 1px no-repeat,
    linear-gradient(0deg,rgba(16,104,255,.68),transparent) left bottom var(--transition-cut) / 1px var(--transition-rail) no-repeat,
    linear-gradient(135deg,transparent calc(50% - .7px),rgba(38,214,227,.82) 50%,transparent calc(50% + .7px)) right bottom / var(--transition-cut) var(--transition-cut) no-repeat,
    linear-gradient(270deg,rgba(38,214,227,.78),transparent) right var(--transition-cut) bottom / var(--transition-rail) 1px no-repeat,
    linear-gradient(0deg,rgba(38,214,227,.78),transparent) right bottom var(--transition-cut) / 1px var(--transition-rail) no-repeat;
  filter:drop-shadow(0 0 5px rgba(38,214,227,.16));
}
.sv-transition-screen span{
  position:absolute;z-index:1;left:calc(var(--transition-gap) + var(--transition-cut) + 5px);top:calc(var(--transition-gap) + 6px);font:600 7px/1 var(--f-mono);
  letter-spacing:.18em;color:rgba(203,246,255,.66);
}
.sv-transition-screen__reticle{
  position:absolute;z-index:1;left:50%;top:50%;width:clamp(18px,1.8vw,28px);height:clamp(24px,2.4vw,37px);
  transform:translate(-50%,-50%);border:0;background:rgba(225,253,255,.94);
  -webkit-mask:url("./assets/logo/symbol.svg") center/contain no-repeat;
  mask:url("./assets/logo/symbol.svg") center/contain no-repeat;
  filter:drop-shadow(0 0 7px rgba(38,214,227,.72));box-shadow:none;
}
.sv-transition-screen__corner{display:none}
.sv-transition-screen__echo{display:none;position:absolute;inset:-1px;border:1px solid rgba(38,214,227,.64);pointer-events:none}

/* Pulse Pop is the production handoff. Keep the panel expansion, but only
   animate compositor properties. In particular, never clip or blur the full
   document: rasterising a long page during the intro is the main source of
   dropped frames on phones. */
html[data-sv-hud="1"] .sv-site-arriving main{animation:none!important}
html[data-sv-hud="1"] .sv-site-arriving #gl,
html[data-sv-hud="1"] .sv-site-arriving .nav,
html[data-sv-hud="1"] .sv-site-arriving .sv-intro-frame,
html[data-sv-hud="1"] .sv-site-arriving main .hero-inner,
html[data-sv-hud="1"] .sv-site-arriving .scroll-hint{
  animation:svHudPulseReveal .72s cubic-bezier(.16,.82,.2,1) both!important;
  transform-origin:50% 50%!important;will-change:transform,opacity;
}
html[data-sv-hud="1"] .sv-site-arriving .sv-site-hud{
  animation:svHudPulseLattice .72s cubic-bezier(.16,.82,.2,1) both!important;
  will-change:transform,opacity;
}
html[data-sv-hud="1"] .sv-site-arriving .sv-transition-screen{
  animation:svHudPulsePop .88s cubic-bezier(.14,.84,.18,1) both!important;
  will-change:transform,opacity;
}
html[data-sv-hud="1"] .sv-site-arriving .sv-transition-screen::after{
  animation:svHudLineCharge .88s cubic-bezier(.14,.84,.18,1) both;
}
html[data-sv-hud="1"] .sv-site-arriving .sv-transition-screen__reticle{
  animation:svHudReticleCharge .88s ease-out both;
}
html[data-sv-hud="1"] .sv-transition-fx{mix-blend-mode:normal}
@keyframes svHudPulseReveal{
  0%,24%{transform:translateZ(0) scale(.94);opacity:0}
  58%{transform:translateZ(0) scale(1.012);opacity:.96}
  100%{transform:translateZ(0) scale(1);opacity:1}
}
@keyframes svHudPulseLattice{
  0%,28%{transform:translateZ(0) scale(.72);opacity:0}
  64%{transform:translateZ(0) scale(1.015);opacity:var(--site-hud-opacity)}
  100%{transform:translateZ(0) scale(1);opacity:var(--site-hud-opacity)}
}
@keyframes svHudPulsePop{
  0%{transform:translate3d(-50%,-50%,0) scale(.1);opacity:0}
  22%{transform:translate3d(-50%,-50%,0) scale(1.035);opacity:1}
  42%{transform:translate3d(-50%,-50%,0) scale(1);opacity:1}
  58%{transform:translate3d(-50%,-50%,0) scale(1.08);opacity:1}
  100%{transform:translate3d(-50%,-50%,0) scale(5.35,6.15);opacity:0}
}
@keyframes svHudLineCharge{
  0%{opacity:.16;filter:brightness(.9) drop-shadow(0 0 0 rgba(38,214,227,0))}
  20%{opacity:1;filter:brightness(2.6) drop-shadow(0 0 6px rgba(38,214,227,.82))}
  43%{opacity:.72;filter:brightness(1.15) drop-shadow(0 0 3px rgba(16,104,255,.38))}
  62%{opacity:1;filter:brightness(3.1) drop-shadow(0 0 8px rgba(38,214,227,.92))}
  100%{opacity:0;filter:brightness(3.6) drop-shadow(0 0 12px rgba(38,214,227,.72))}
}
@keyframes svHudReticleCharge{
  0%{opacity:0;filter:drop-shadow(0 0 0 rgba(38,214,227,0))}
  22%,48%{opacity:1;filter:drop-shadow(0 0 7px rgba(38,214,227,.72))}
  64%{opacity:1;filter:drop-shadow(0 0 14px rgba(38,214,227,1))}
  100%{opacity:0;filter:drop-shadow(0 0 20px rgba(38,214,227,.7))}
}

/* 02 — the HUD panel swings out like a thin holographic display. */
html[data-sv-hud="2"] .sv-site-arriving #gl,
html[data-sv-hud="2"] .sv-site-arriving main,
html[data-sv-hud="2"] .sv-site-arriving .nav,
html[data-sv-hud="2"] .sv-site-arriving .sv-intro-frame{
  animation:svHudFlipReveal .86s cubic-bezier(.12,.86,.16,1) both!important;
}
html[data-sv-hud="2"] .sv-site-arriving .sv-transition-screen{animation:svHudFlipPop .86s cubic-bezier(.1,.88,.16,1) both!important}
@keyframes svHudFlipPop{
  0%{transform:translate(-50%,-50%) perspective(850px) rotateY(-88deg) scale(.7);filter:brightness(3);opacity:0}
  24%{opacity:1}
  43%{transform:translate(-50%,-50%) perspective(850px) rotateY(11deg) scale(1.06);filter:brightness(1.65)}
  58%{transform:translate(-50%,-50%) perspective(850px) rotateY(-3deg) scale(.99);filter:none;opacity:1}
  100%{transform:translate(-50%,-50%) perspective(850px) rotateY(0) scale(4.5,5.2);opacity:0}
}
@keyframes svHudFlipReveal{
  0%,28%{clip-path:inset(39% 35%);transform:perspective(900px) rotateY(-82deg) scale(.72);filter:brightness(2.4);opacity:0}
  47%{clip-path:inset(36% 31%);transform:perspective(900px) rotateY(9deg) scale(1.035);filter:brightness(1.5);opacity:.9}
  65%{transform:perspective(900px) rotateY(-2deg) scale(.99);opacity:1}
  100%{clip-path:inset(0);transform:none;filter:none;opacity:1}
}

/* 03 — one signal line unfolds vertically into a HUD screen. */
html[data-sv-hud="3"] .sv-site-arriving #gl,
html[data-sv-hud="3"] .sv-site-arriving main,
html[data-sv-hud="3"] .sv-site-arriving .nav,
html[data-sv-hud="3"] .sv-site-arriving .sv-intro-frame{
  animation:svHudSignalReveal .86s cubic-bezier(.14,.84,.18,1) both!important;
}
html[data-sv-hud="3"] .sv-site-arriving .sv-transition-screen{animation:svHudSignalPop .86s cubic-bezier(.12,.88,.16,1) both!important}
@keyframes svHudSignalPop{
  0%{transform:translate(-50%,-50%) scale(.03,.012);filter:brightness(5);opacity:0}
  16%{transform:translate(-50%,-50%) scale(.9,.012);opacity:1}
  34%{transform:translate(-50%,-50%) scale(1.06,1.08);filter:brightness(1.8);opacity:1}
  52%{transform:translate(-50%,-50%) scale(.99);filter:none;opacity:1}
  100%{transform:translate(-50%,-50%) scale(4.5,5.2);opacity:0}
}
@keyframes svHudSignalReveal{
  0%,20%{clip-path:inset(49.8% 45%);transform:scaleX(.2);filter:brightness(3);opacity:0}
  38%{clip-path:inset(37% 31%);transform:scale(1.02,1.08);filter:brightness(1.65);opacity:.9}
  56%{transform:scale(.99);filter:none;opacity:1}
  100%{clip-path:inset(0);transform:none;opacity:1}
}

/* 04 — three quiet frame echoes radiate from the first panel. */
html[data-sv-hud="4"] .sv-site-arriving #gl,
html[data-sv-hud="4"] .sv-site-arriving main,
html[data-sv-hud="4"] .sv-site-arriving .nav,
html[data-sv-hud="4"] .sv-site-arriving .sv-intro-frame{
  animation:svHudEchoReveal .92s cubic-bezier(.12,.84,.18,1) both!important;
}
html[data-sv-hud="4"] .sv-site-arriving .sv-transition-screen{animation:svHudEchoPop .92s cubic-bezier(.1,.88,.16,1) both!important}
html[data-sv-hud="4"] .sv-site-arriving .sv-transition-screen__echo{
  display:block;animation:svHudEchoRing .58s var(--echo-delay) cubic-bezier(.16,.72,.22,1) both;
}
@keyframes svHudEchoPop{
  0%{transform:translate3d(-50%,-50%,0) scale(.16);opacity:0}
  24%{transform:translate3d(-50%,-50%,0) scale(1.025);opacity:1}
  48%{transform:translate3d(-50%,-50%,0) scale(1);opacity:1}
  100%{transform:translate3d(-50%,-50%,0) scale(4.65,5.35);opacity:0}
}
@keyframes svHudEchoRing{
  0%{transform:translateZ(0) scale(1);opacity:.68}
  100%{transform:translateZ(0) scale(var(--echo-scale));opacity:0}
}
@keyframes svHudEchoReveal{
  0%,25%{clip-path:inset(40% 37%);transform:translateZ(0) scale(.86);opacity:0}
  45%{clip-path:inset(34% 29%);transform:translateZ(0) scale(.985);opacity:.58}
  72%{clip-path:inset(8%);transform:translateZ(0) scale(1.006);opacity:1}
  100%{clip-path:inset(0);transform:translateZ(0) scale(1);opacity:1}
}

/* 05 — the glass HUD drops into the centre, catches, then fills the screen. */
html[data-sv-hud="5"] .sv-site-arriving #gl,
html[data-sv-hud="5"] .sv-site-arriving main,
html[data-sv-hud="5"] .sv-site-arriving .nav,
html[data-sv-hud="5"] .sv-site-arriving .sv-intro-frame{
  animation:svHudDropReveal .9s cubic-bezier(.12,.86,.16,1) both!important;
}
html[data-sv-hud="5"] .sv-site-arriving .sv-transition-screen{animation:svHudDropPop .9s cubic-bezier(.1,.9,.14,1) both!important}
@keyframes svHudDropPop{
  0%{transform:translate(-50%,calc(-50% - 34vh)) perspective(800px) rotateX(22deg) scale(.82);filter:blur(5px) brightness(2.4);opacity:0}
  30%{transform:translate(-50%,calc(-50% + 2.5vh)) perspective(800px) rotateX(-4deg) scale(1.04);filter:brightness(1.5);opacity:1}
  46%{transform:translate(-50%,calc(-50% - .8vh)) perspective(800px) rotateX(1deg) scale(.99);filter:none;opacity:1}
  62%{transform:translate(-50%,-50%) scale(1);opacity:1}
  100%{transform:translate(-50%,-50%) scale(4.5,5.2);opacity:0}
}
@keyframes svHudDropReveal{
  0%,32%{clip-path:inset(38% 34%);transform:translateY(-14vh) perspective(900px) rotateX(16deg) scale(.78);filter:blur(5px) brightness(2);opacity:0}
  50%{transform:translateY(1.5vh) perspective(900px) rotateX(-3deg) scale(1.02);filter:brightness(1.35);opacity:.95}
  66%{transform:translateY(-.4vh) scale(.995);filter:none;opacity:1}
  100%{clip-path:inset(0);transform:none;opacity:1}
}

@media (max-width:719px){
  .sv-transition-screen{width:min(72vw,300px)}
  html[data-sv-hud="4"] .sv-site-arriving #gl,
  html[data-sv-hud="4"] .sv-site-arriving main,
  html[data-sv-hud="4"] .sv-site-arriving .nav,
  html[data-sv-hud="4"] .sv-site-arriving .sv-intro-frame{
    animation:svHudEchoRevealMobile .76s cubic-bezier(.16,.82,.2,1) both!important;
    will-change:transform,opacity;
  }
  html[data-sv-hud="4"] .sv-site-arriving .sv-transition-screen{
    animation:svHudEchoPopMobile .82s cubic-bezier(.14,.82,.18,1) both!important;
  }
  html[data-sv-hud="4"] .sv-site-arriving .sv-transition-screen__echo:nth-of-type(3){display:none}
}
@keyframes svHudEchoRevealMobile{
  0%,27%{transform:translateZ(0) scale(.9);opacity:0}
  58%{transform:translateZ(0) scale(1.012);opacity:.94}
  100%{transform:translateZ(0) scale(1);opacity:1}
}
@keyframes svHudEchoPopMobile{
  0%{transform:translate3d(-50%,-50%,0) scale(.18);opacity:0}
  27%{transform:translate3d(-50%,-50%,0) scale(1.02);opacity:1}
  49%{transform:translate3d(-50%,-50%,0) scale(1);opacity:1}
  100%{transform:translate3d(-50%,-50%,0) scale(4.8,5.8);opacity:0}
}

/* Five deliberately simple electric handoffs. The live interface always
   enters the same way; only the centre panel's single motion changes. */
html[data-sv-hud] .sv-site-arriving main{animation:none!important}
html[data-sv-hud] .sv-site-arriving #gl,
html[data-sv-hud] .sv-site-arriving .nav,
html[data-sv-hud] .sv-site-arriving .sv-intro-frame,
html[data-sv-hud] .sv-site-arriving main .hero-inner,
html[data-sv-hud] .sv-site-arriving .scroll-hint{
  animation:svHudSimpleReveal .82s cubic-bezier(.16,.82,.2,1) both!important;
  transform-origin:50% 50%!important;will-change:transform,opacity;
}
html[data-sv-hud] .sv-site-arriving .sv-site-hud{
  animation:svHudSimpleLattice .82s cubic-bezier(.16,.82,.2,1) both!important;
}
html[data-sv-hud] .sv-site-arriving .sv-transition-screen::after{
  animation:svHudSimpleCharge .84s ease-out both;
}
html[data-sv-hud] .sv-site-arriving .sv-transition-screen__reticle{
  animation:svHudSimpleReticle .84s ease-out both;
}
.sv-transition-screen span{display:none}

html[data-sv-hud="1"] .sv-site-arriving .sv-transition-screen{
  animation:svHudCleanExpand .84s cubic-bezier(.16,.82,.2,1) both!important;
}
html[data-sv-hud="2"] .sv-site-arriving .sv-transition-screen{
  animation:svHudLineOpen .84s cubic-bezier(.16,.82,.2,1) both!important;
}
html[data-sv-hud="3"] .sv-site-arriving .sv-transition-screen{
  animation:svHudSoftDissolve .84s cubic-bezier(.16,.82,.2,1) both!important;
}
html[data-sv-hud="4"] .sv-site-arriving .sv-transition-screen{
  animation:svHudSingleEchoPanel .84s cubic-bezier(.16,.82,.2,1) both!important;
}
html[data-sv-hud="4"] .sv-site-arriving .sv-transition-screen__echo:not(:first-of-type){display:none!important}
html[data-sv-hud="4"] .sv-site-arriving .sv-transition-screen__echo:first-of-type{
  display:block;animation:svHudSingleEcho .58s .2s cubic-bezier(.16,.72,.22,1) both;
}
html[data-sv-hud="5"] .sv-site-arriving .sv-transition-screen{
  animation:svHudEdgeRelease .84s cubic-bezier(.16,.82,.2,1) both!important;
}

@keyframes svHudSimpleReveal{
  0%,22%{transform:translateZ(0) scale(.96);opacity:0}
  58%{transform:translateZ(0) scale(1.006);opacity:.96}
  100%{transform:translateZ(0) scale(1);opacity:1}
}
@keyframes svHudSimpleLattice{
  0%,24%{transform:translateZ(0) scale(.9);opacity:0}
  62%{transform:translateZ(0) scale(1);opacity:var(--site-hud-opacity)}
  100%{transform:translateZ(0) scale(1);opacity:var(--site-hud-opacity)}
}
@keyframes svHudSimpleCharge{
  0%{opacity:.18;filter:brightness(.9) drop-shadow(0 0 0 rgba(38,214,227,0))}
  34%{opacity:1;filter:brightness(2.25) drop-shadow(0 0 7px rgba(38,214,227,.8))}
  68%{opacity:.82;filter:brightness(1.35) drop-shadow(0 0 4px rgba(38,214,227,.45))}
  100%{opacity:0;filter:brightness(1.8) drop-shadow(0 0 7px rgba(38,214,227,.42))}
}
@keyframes svHudSimpleReticle{
  0%{opacity:0}
  28%,62%{opacity:1}
  100%{opacity:0}
}
@keyframes svHudCleanExpand{
  0%{transform:translate3d(-50%,-50%,0) scale(.14);opacity:0}
  28%{transform:translate3d(-50%,-50%,0) scale(1);opacity:1}
  52%{transform:translate3d(-50%,-50%,0) scale(1);opacity:1}
  100%{transform:translate3d(-50%,-50%,0) scale(5.3,6.1);opacity:0}
}
@keyframes svHudLineOpen{
  0%{transform:translate3d(-50%,-50%,0) scale(.08,.012);opacity:0}
  26%{transform:translate3d(-50%,-50%,0) scale(1,.012);opacity:1}
  46%{transform:translate3d(-50%,-50%,0) scale(1);opacity:1}
  100%{transform:translate3d(-50%,-50%,0) scale(5.3,6.1);opacity:0}
}
@keyframes svHudSoftDissolve{
  0%{transform:translate3d(-50%,-50%,0) scale(.74);opacity:0}
  30%{transform:translate3d(-50%,-50%,0) scale(1);opacity:1}
  62%{transform:translate3d(-50%,-50%,0) scale(1.03);opacity:.78}
  100%{transform:translate3d(-50%,-50%,0) scale(1.12);opacity:0}
}
@keyframes svHudSingleEchoPanel{
  0%{transform:translate3d(-50%,-50%,0) scale(.18);opacity:0}
  28%{transform:translate3d(-50%,-50%,0) scale(1);opacity:1}
  54%{transform:translate3d(-50%,-50%,0) scale(1);opacity:1}
  100%{transform:translate3d(-50%,-50%,0) scale(4.9,5.7);opacity:0}
}
@keyframes svHudSingleEcho{
  0%{transform:translateZ(0) scale(1);opacity:.58}
  100%{transform:translateZ(0) scale(1.55);opacity:0}
}
@keyframes svHudEdgeRelease{
  0%{transform:translate3d(-50%,-50%,0) scale(.22);opacity:0}
  28%{transform:translate3d(-50%,-50%,0) scale(1);opacity:1}
  56%{transform:translate3d(-50%,-50%,0) scale(1);opacity:1}
  100%{transform:translate3d(-50%,-50%,0) scale(5.7,1.08);opacity:0}
}

.boot-progress{
  left:50%;top:calc(50% + clamp(48px,7vmin,66px));bottom:auto;
  width:min(360px,58vw);transform:translateX(-50%);
  color:rgba(194,229,245,.62);font-size:clamp(7px,.58vw,10px);letter-spacing:.13em;
}
.boot-state{margin-bottom:8px;text-align:center;color:rgba(225,247,255,.8)}
.boot-progress-line{
  position:relative;height:7px;overflow:visible;
  background:repeating-linear-gradient(90deg,rgba(88,166,210,.18) 0 15px,transparent 15px 19px);
  border-block:1px solid rgba(38,214,227,.08);
}
.boot-progress-line i{
  position:absolute;inset:0 auto 0 0;width:0;will-change:width;
  background:repeating-linear-gradient(90deg,var(--boot-blue) 0 15px,transparent 15px 19px);
  box-shadow:0 0 10px rgba(38,214,227,.38);
}
.boot-progress-line b{
  position:absolute;left:0;top:50%;width:2px;height:13px;transform:translate(-50%,-50%);
  background:#eaffff;box-shadow:0 0 8px var(--boot-teal);
}
.boot-progress-row{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;margin-top:9px;align-items:center}
.boot-progress-row strong{color:#eaffff;font-size:1.08em;font-weight:600;letter-spacing:.12em}
.boot-progress-row span:last-child{text-align:right}

.boot-flights{position:absolute;inset:0;z-index:9;pointer-events:none}
#boot .boot-flight{
  position:absolute!important;z-index:1!important;margin:0!important;pointer-events:none!important;
  opacity:0;transform-origin:0 0;will-change:left,top,width,height,transform,opacity,filter;
}
#boot .boot-flight-logo{line-height:0}
#boot .boot-flight-logo img{display:block;width:100%;height:100%;object-fit:contain}
#boot .boot-flight-control{
  display:flex!important;align-items:center!important;justify-content:center!important;
  color:#fff!important;text-decoration:none!important;white-space:nowrap;isolation:isolate;
}
#boot .boot-flight-control::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--btn-art) center/100% 100% no-repeat;
  filter:drop-shadow(0 0 10px rgba(38,214,227,.38));
}
#boot .boot-flight-control .menu-icon::before{
  background:currentColor;box-shadow:0 4px 0 currentColor,0 8px 0 currentColor,0 0 7px rgba(38,214,227,.5);
}
#boot .boot-flight-hero{
  display:block!important;max-width:none!important;container-type:normal!important;z-index:2!important;
}
#boot .boot-flight-hero::before{opacity:0!important}
#boot .boot-flight-hero .btn{pointer-events:none!important}

@media (max-width:719px){
  .boot-system{top:max(19px,3vh);letter-spacing:.17em}
  .boot-telemetry{display:none}
  .boot-lockup{width:min(76vw,320px);top:50%}
  .boot-spirit{top:50%;width:clamp(26px,7.68vw,34px);height:clamp(26px,7.68vw,34px)}
  .sv-site-hud{--site-hud-size:min(118vw,560px);--site-hud-opacity:.34}
  .sv-site-hud__readout{display:none}
  .boot-progress{top:calc(50% + 44px);bottom:auto;width:min(72vw,300px)}
  .boot-progress-row span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .boot-blocks i:nth-child(2),.boot-blocks i:nth-child(4),.boot-blocks i:nth-child(5),
  .boot-blocks i:nth-child(8),.boot-blocks i:nth-child(10),.boot-blocks i:nth-child(11){display:none}
  .sv-transition-picker{width:calc(100vw - 24px);gap:2px}
  .sv-transition-picker__label{display:none}
  .sv-transition-picker button{min-width:22px;height:26px;padding:0 4px}
  .sv-transition-picker__replay{min-width:54px!important}
}

/* ── nav shell ────────────────────────────────────────────────
   Just the sticky row and its ground. All the header's character lives in
   the .hud-bar inside it, which is the same artwork as the separators. */
/* ── header ────────────────────────────────────────────────────
   Logo left, navigation centred, menu right. The buttons are the page's
   own .btn (see the buttons section) rather than a separate set, so the
   header and the hero speak with one control language. */
.nav{
  --nav-pad-y:12px;
  --nav-gutter:14px;
  position:sticky;top:0;z-index:70;isolation:isolate;
  padding:calc(var(--nav-pad-y) + env(safe-area-inset-top))
          max(var(--nav-gutter),env(safe-area-inset-right))
          var(--nav-pad-y)
          max(var(--nav-gutter),env(safe-area-inset-left));
  background-color:transparent;
  background-image:linear-gradient(180deg,rgba(0,0,0,.64),rgba(0,0,0,.42) 76%,transparent);
}
/* Mobile: logo and menu are centred in equal halves of one row. The three
   primary links live at the foot of the hero. Desktop returns to the
   three-zone flex layout below. */
.nav-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  position:relative;align-items:center;gap:0;
}
.nav-logo{
  justify-self:center;display:block;width:min(150px,calc(100% - 16px));
  padding:6px;line-height:0;
}
/* WIDTH-driven, not height. Height-driven plus max-width squashes the
   lockup when the zone is tight, because the browser keeps the height and
   clips the width -- which is exactly what happened: the wordmark ran on
   past its zone and under the first button. Width with height:auto shrinks
   it in proportion instead. 7.545:1, so 150px wide reads as 20px tall. */
.nav-logo img{display:block;width:100%;height:auto}
.nav-end{justify-self:center;display:flex;justify-content:center}
@media (min-width:900px){
  .nav{
    --nav-pad-y:10px;--nav-gutter:clamp(44px,6vw,96px);
    --header-h:74px;--header-cut:14px;--header-corner:clamp(44px,7vw,104px);
    --header-accent:118,154,255;
    padding-top:calc(22px + env(safe-area-inset-top));
  }
  /* nowrap is load-bearing. With wrapping on, a flex line is filled at the
     items' BASE sizes and anything that does not fit wraps -- it never gets
     the chance to shrink. Logo 193 + nav 880 + menu 94 + gaps is 1199, so
     on a 1153px row the menu wrapped to its own line and the logo ate the
     leftover. nowrap lets the middle give way instead, which is what
     `flex:0 1 880px` was asking for all along. */
  /* One quiet HUD box around the complete header. It shares the sections'
     four-cut rail geometry, with a colder glacier-blue accent of its own. */
  .nav-row{
    display:flex;flex-wrap:nowrap;height:var(--header-h);min-height:var(--header-h);
    gap:10px var(--sp-3);padding-inline:clamp(18px,3vw,52px);isolation:isolate;z-index:1;
  }
  .nav::before{
    content:"";position:absolute;inset:4px 4px 0;z-index:2;pointer-events:none;opacity:.72;
    background:
      linear-gradient(135deg,transparent calc(50% - .7px),rgba(var(--header-accent),.92) 50%,transparent calc(50% + .7px)) left top / var(--header-cut) var(--header-cut) no-repeat,
      linear-gradient(90deg,rgba(var(--header-accent),.92),transparent) var(--header-cut) top / var(--header-corner) 1px no-repeat,
      linear-gradient(180deg,rgba(var(--header-accent),.92),transparent) left var(--header-cut) / 1px var(--header-corner) no-repeat,
      linear-gradient(45deg,transparent calc(50% - .7px),rgba(var(--header-accent),.62) 50%,transparent calc(50% + .7px)) right top / var(--header-cut) var(--header-cut) no-repeat,
      linear-gradient(270deg,rgba(var(--header-accent),.62),transparent) right var(--header-cut) top / var(--header-corner) 1px no-repeat,
      linear-gradient(180deg,rgba(var(--header-accent),.62),transparent) right top var(--header-cut) / 1px var(--header-corner) no-repeat,
      linear-gradient(45deg,transparent calc(50% - .7px),rgba(var(--header-accent),.48) 50%,transparent calc(50% + .7px)) left bottom / var(--header-cut) var(--header-cut) no-repeat,
      linear-gradient(90deg,rgba(var(--header-accent),.48),transparent) left var(--header-cut) bottom / var(--header-corner) 1px no-repeat,
      linear-gradient(0deg,rgba(var(--header-accent),.48),transparent) left bottom var(--header-cut) / 1px var(--header-corner) no-repeat,
      linear-gradient(135deg,transparent calc(50% - .7px),rgba(var(--header-accent),.78) 50%,transparent calc(50% + .7px)) right bottom / var(--header-cut) var(--header-cut) no-repeat,
      linear-gradient(270deg,rgba(var(--header-accent),.78),transparent) right var(--header-cut) bottom / var(--header-corner) 1px no-repeat,
      linear-gradient(0deg,rgba(var(--header-accent),.78),transparent) right bottom var(--header-cut) / 1px var(--header-corner) no-repeat;
    filter:drop-shadow(0 0 7px rgba(var(--header-accent),.16));
  }
  .nav::after{
    content:"";position:absolute;inset:5px 5px 1px;z-index:0;pointer-events:none;
    clip-path:polygon(
      calc(var(--header-cut) - 1px) 0,calc(100% - var(--header-cut) + 1px) 0,
      100% calc(var(--header-cut) - 1px),100% calc(100% - var(--header-cut) + 1px),
      calc(100% - var(--header-cut) + 1px) 100%,calc(var(--header-cut) - 1px) 100%,
      0 calc(100% - var(--header-cut) + 1px),0 calc(var(--header-cut) - 1px));
    border:1px solid rgba(var(--header-accent),.07);
    background:
      radial-gradient(70% 120% at 82% 0,rgba(var(--header-accent),.075),transparent 66%),
      linear-gradient(180deg,rgba(7,18,39,.18),rgba(1,5,12,.28));
    box-shadow:inset 0 0 24px rgba(var(--header-accent),.025);
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  }
  .nav-logo,.sq-nav,.nav-end{z-index:1}
  .nav-logo{width:auto;flex:1 1 0;min-width:0;margin:-6px}   /* equal side zones -> centred middle */
  .nav-end{flex:1 1 0;min-width:0}
  .nav-logo img{width:min(204px,100%)}
}

/* Reference header restoration: the persistent viewport HUD stays outside,
   while this dark bevel is an inset panel around the header controls. */
@media (min-width:900px){
  .nav::before,.nav::after{content:none}
  .nav-row::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    clip-path:polygon(
      var(--header-cut) 0,calc(100% - var(--header-cut)) 0,
      100% var(--header-cut),100% calc(100% - var(--header-cut)),
      calc(100% - var(--header-cut)) 100%,var(--header-cut) 100%,
      0 calc(100% - var(--header-cut)),0 var(--header-cut));
    background:
      linear-gradient(135deg,transparent calc(50% - .7px),rgba(var(--sv-hue-lineup),.62) 50%,transparent calc(50% + .7px)) left top / var(--header-cut) var(--header-cut) no-repeat,
      linear-gradient(45deg,transparent calc(50% - .7px),rgba(var(--sv-hue-info),.62) 50%,transparent calc(50% + .7px)) right top / var(--header-cut) var(--header-cut) no-repeat,
      linear-gradient(45deg,transparent calc(50% - .7px),rgba(var(--sv-hue-lineup),.62) 50%,transparent calc(50% + .7px)) left bottom / var(--header-cut) var(--header-cut) no-repeat,
      linear-gradient(135deg,transparent calc(50% - .7px),rgba(var(--sv-hue-info),.62) 50%,transparent calc(50% + .7px)) right bottom / var(--header-cut) var(--header-cut) no-repeat,
      linear-gradient(90deg,rgba(var(--sv-hue-lineup),.62),rgba(var(--sv-hue-lineup),.34) 30%,rgba(var(--sv-hue-tickets),.651) 50%,rgba(var(--sv-hue-info),.34) 70%,rgba(var(--sv-hue-info),.62)) var(--header-cut) top / calc(100% - var(--header-cut) - var(--header-cut)) 1px no-repeat,
      linear-gradient(90deg,rgba(var(--sv-hue-lineup),.62),rgba(var(--sv-hue-lineup),.34) 30%,rgba(var(--sv-hue-tickets),.651) 50%,rgba(var(--sv-hue-info),.34) 70%,rgba(var(--sv-hue-info),.62)) var(--header-cut) bottom / calc(100% - var(--header-cut) - var(--header-cut)) 1px no-repeat,
      linear-gradient(rgba(var(--sv-hue-lineup),.62),rgba(var(--sv-hue-lineup),.62)) left var(--header-cut) / 1px calc(100% - var(--header-cut) - var(--header-cut)) no-repeat,
      linear-gradient(rgba(var(--sv-hue-info),.62),rgba(var(--sv-hue-info),.62)) right var(--header-cut) / 1px calc(100% - var(--header-cut) - var(--header-cut)) no-repeat;
  }
  .nav-row::after{
    content:"";position:absolute;inset:1px;z-index:0;pointer-events:none;
    clip-path:polygon(
      calc(var(--header-cut) - 1px) 0,calc(100% - var(--header-cut) + 1px) 0,
      100% calc(var(--header-cut) - 1px),100% calc(100% - var(--header-cut) + 1px),
      calc(100% - var(--header-cut) + 1px) 100%,calc(var(--header-cut) - 1px) 100%,
      0 calc(100% - var(--header-cut) + 1px),0 calc(var(--header-cut) - 1px));
    background:rgba(0,0,0,.40);
    box-shadow:none;
  }
}

/* Wide header geometry: keep the centre controls fixed, then place the brand
   and utility control toward the outer quarters. Below 1000px the flexible
   zones above remain in charge to prevent overlap. */
@media (min-width:1000px){
  /* Match the section-screen inset so the header rails resolve onto the
     same vertical guides instead of colliding with the viewport overlay. */
  .nav{
    padding-left:max(clamp(10px,1.5vw,24px),env(safe-area-inset-left));
    padding-right:max(clamp(10px,1.5vw,24px),env(safe-area-inset-right));
  }
  .nav-row{position:relative;justify-content:center}
  .nav-logo{
    position:absolute;left:12.5%;transform:translateX(-50%);
    width:218px;flex:0 0 auto;min-width:0;margin:0;
  }
  .nav-end{
    position:absolute;left:auto;right:calc(12.5% - 109px);transform:none;
    flex:0 0 auto;min-width:0;justify-content:center;
  }
  .sq-nav{
    position:absolute;left:50%;top:50%;margin:0;
    transform:translate(-50%,-50%);
  }
}

/* The row holds the page's own .btn now, which brings its own height and
   padding, so this only has to lay them out. auto columns rather than
   equal thirds: these buttons are sized by their label, and forcing three
   different words into identical boxes left OHJELMA cramped and INFO
   swimming. */
.sq-nav{
  display:none;                                    /* phone: lives in hero */
}
@media (min-width:900px){
  .sq-nav{
    width:clamp(480px,40vw,540px);height:48px;flex:0 0 auto;order:0;margin-inline:auto;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
    padding:0;isolation:isolate;
  }
  /* The outer HUD now spans the complete header. Keep only the symmetrical
     page dividers inside the centred control group. */
  .sq-nav::before{content:none}
  .sq-nav::after{content:none}
}
/* Header buttons run one step smaller than the hero's, so the nav reads as
   navigation and the hero CTA stays the loudest thing on the page. */
.sq-nav .btn{
  width:100%;min-width:0;min-height:48px;padding:9px 18px;font-size:11px;letter-spacing:.10em;
}
.sq-nav .btn:nth-child(1){--btn-art:url("./assets/buttons/sqbtn-ohjelma.svg")}
.sq-nav .btn:nth-child(2){--btn-art:url("./assets/buttons/sqbtn-tickets.svg")}
.sq-nav .btn:nth-child(3){--btn-art:url("./assets/buttons/sqbtn-info.svg")}
@media (max-width:479px){
  .sq-nav .btn{min-height:38px;padding:10px 14px;font-size:11px;letter-spacing:.06em}
}

/* ── menu button + panel ─────────────────────────────────────── */
.menu-btn{
  --btn-art:url("./assets/buttons/sqbtn-tickets.svg");
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-width:112px;min-height:42px;padding:0 14px;
  font:700 11px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--mist);background:transparent;border:0;border-radius:0;cursor:pointer;
  transition:color .22s ease,transform .34s var(--ease-interactive),text-shadow .22s ease;
}
@media (min-width:900px){
  .menu-btn{min-width:160px;min-height:48px;padding:0 22px;gap:10px;font-size:11px}
  .menu-btn .menu-icon{width:14px;height:9px;flex:0 0 14px}
  .menu-btn .menu-icon::before,.menu-btn .menu-icon::after{width:14px}
  .menu-btn .menu-icon::before{box-shadow:0 3.5px 0 currentColor,0 7px 0 currentColor,0 0 7px rgba(38,214,227,.5)}
  .menu-btn .menu-icon::after{top:4.5px}
}
.menu-icon{position:relative;width:16px;height:10px;flex:0 0 16px;color:var(--teal)}
.menu-icon::before{
  content:"";position:absolute;left:0;top:1px;width:16px;height:1px;
  background:currentColor;
  box-shadow:0 4px 0 currentColor,0 8px 0 currentColor,0 0 7px rgba(38,214,227,.5);
  transition:top .24s var(--ease-interactive),transform .24s var(--ease-interactive),box-shadow .18s ease;
}
.menu-icon::after{
  content:"";position:absolute;left:0;top:5px;width:16px;height:1px;
  background:currentColor;opacity:0;transform:rotate(0);
  transition:opacity .16s ease,transform .24s var(--ease-interactive);
}
.menu-btn[aria-expanded="true"] .menu-icon::before{
  top:5px;transform:rotate(45deg);box-shadow:0 0 7px rgba(38,214,227,.5);
}
.menu-btn[aria-expanded="true"] .menu-icon::after{
  opacity:1;transform:rotate(-45deg);
}
.menu-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--btn-art) center/100% 100% no-repeat;
  filter:drop-shadow(0 0 5px rgba(16,104,255,.18));
  opacity:.9;transition:opacity .22s ease,filter .28s ease;
}
.menu-btn::after{
  content:"";position:absolute;inset:5px 6px;z-index:-1;pointer-events:none;
  clip-path:polygon(7% 0,100% 0,100% 76%,93% 100%,0 100%,0 24%);
  background:linear-gradient(108deg,transparent 16%,rgba(16,104,255,.06) 37%,rgba(38,214,227,.18) 50%,rgba(16,104,255,.06) 63%,transparent 84%);
  opacity:0;transform:translateX(-58%);
  transition:opacity .18s ease,transform .56s var(--ease-interactive);
}
.menu-btn:hover,.menu-btn:focus-visible,.menu-btn[aria-expanded="true"]{
  color:#fff;background-color:transparent;transform:translateY(-2px) scale(1.015);
  text-shadow:0 0 10px rgba(134,240,255,.58);
}
.menu-btn:hover::before,.menu-btn:focus-visible::before,.menu-btn[aria-expanded="true"]::before{
  opacity:1;
  filter:brightness(1.24) drop-shadow(0 0 8px rgba(16,104,255,.55)) drop-shadow(0 0 15px rgba(38,214,227,.2));
}
.menu-btn:hover::after,.menu-btn:focus-visible::after,.menu-btn[aria-expanded="true"]::after{
  opacity:1;transform:translateX(58%);
}
.menu-btn:active{transform:translateY(1px) scale(.965);text-shadow:0 0 14px rgba(190,249,255,.82);transition-duration:.08s}
.menu-btn:active::before{filter:brightness(1.58) drop-shadow(0 0 10px rgba(38,214,227,.76))}
.menu-btn:active::after{opacity:.92;transform:translateX(0) scaleX(.9);transition-duration:.08s}

.menu{
  position:fixed;inset:0;z-index:60;background:transparent;
  display:flex;align-items:flex-start;justify-content:flex-end;
  padding:calc(74px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 16px max(12px,env(safe-area-inset-left));
  pointer-events:none;
}
body.menu-open{overflow:hidden}
.menu[hidden]{display:none}
.menu.open{pointer-events:auto}
.menu-inner{
  --menu-cut:12px;
  position:relative;isolation:isolate;width:min(100%,480px);max-height:calc(100svh - 90px);
  overflow:auto;padding:clamp(18px,4vw,28px);
  clip-path:polygon(var(--menu-cut) 0,100% 0,100% calc(100% - var(--menu-cut)),calc(100% - var(--menu-cut)) 100%,0 100%,0 var(--menu-cut));
  background:linear-gradient(135deg,rgba(var(--sv-hue-lineup),.92),rgba(var(--sv-hue-tickets),.64) 48%,rgba(var(--sv-hue-info),.82));
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.58));
  opacity:0;transform:translateY(-10px) scale(.985);transform-origin:top right;
  transition:opacity .22s ease,transform .3s var(--ease-interactive);
  scrollbar-width:thin;scrollbar-color:rgba(38,214,227,.42) transparent;
}
.menu-inner::before{
  content:"";position:absolute;inset:1px;z-index:0;pointer-events:none;
  clip-path:polygon(calc(var(--menu-cut) - 1px) 0,100% 0,100% calc(100% - var(--menu-cut) + 1px),calc(100% - var(--menu-cut) + 1px) 100%,0 100%,0 calc(var(--menu-cut) - 1px));
  background:rgba(0,0,0,.94);
}
.menu-inner>*{position:relative;z-index:1}
.menu.open .menu-inner{opacity:1;transform:none}
.menu-close{
  display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;
  margin:0 0 18px;padding:0 0 12px;color:var(--teal);background-color:transparent;
  border:0;border-bottom:1px solid rgba(38,214,227,.28);cursor:pointer;
  font:700 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  transition:color .18s ease,border-color .18s ease,text-shadow .18s ease;
}
.menu-close span:last-child{font:400 26px/.7 var(--f-ui);letter-spacing:0}
.menu-close:hover,.menu-close:focus-visible{color:#fff;border-color:var(--teal);text-shadow:0 0 10px rgba(38,214,227,.58)}
.menu-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
.menu-groups .mg:last-child{grid-column:1/-1}
.mg a{
  display:block;padding:8px 0;color:var(--mist);text-decoration:none;
  font:400 clamp(14px,3.6vw,17px)/1.2 var(--f-heading);text-transform:uppercase;
  border-bottom:1px solid var(--line);
  transition:color .16s ease,padding-left .16s ease;
}
.mg a:hover{color:var(--teal);padding-left:8px}
.menu-groups .mg:last-child a{display:inline-block;margin-right:18px;border-bottom:0;font-family:var(--f-ui);font-size:11px;font-weight:650;letter-spacing:.08em}
.menu-promo{
  display:grid;grid-template-columns:1fr auto;gap:7px 18px;align-items:end;
  margin-top:22px;padding:16px 0 2px;color:#fff;text-decoration:none;
  border-top:1px solid rgba(38,214,227,.34);border-bottom:1px solid rgba(16,104,255,.28);
}
.menu-promo span{grid-column:1/-1;color:var(--teal);font:600 9px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase}
.menu-promo strong{font:400 clamp(20px,5vw,27px)/1 var(--f-heading);letter-spacing:.03em}
.menu-promo small{grid-column:1;font:600 10px/1.3 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:rgba(215,226,237,.68)}
.menu-promo b{grid-column:2;grid-row:2/4;align-self:center;color:#fff;font:700 10px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase}
.menu-promo:hover b{color:var(--teal)}
.menu-foot{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font:400 10px/1 var(--f-mono);letter-spacing:.1em;color:rgba(215,226,237,.68);
}
@media (min-width:900px){
  .menu{
    padding-top:calc(22px + env(safe-area-inset-top) + 74px + 14px);
    padding-right:max(24px,calc(12.5vw - 91px));
  }
  .menu-inner{max-height:calc(100svh - 126px)}
}
@media (max-width:420px){
  .menu-groups{gap:16px}
  .menu-inner{padding:18px}
  .mg a{font-size:13px}
}

/* ── focus baseline: every interactive element gets a visible ring ── */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--teal);outline-offset:3px;border-radius:3px;
}

/* ── buttons ──────────────────────────────────────────────────
   The supplied 360x96 SVG artwork is stretched into the existing responsive
   control boxes. preserveAspectRatio="none" keeps the frame attached to all
   four sides; non-scaling strokes keep its small-size rails crisp. */
.btn{
  --btn-art:url("./assets/buttons/sqbtn-ohjelma.svg");
  position:relative;display:inline-flex;align-items:center;justify-content:center;z-index:0;
  isolation:isolate;
  min-height:48px;
  font:700 13px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;
  color:#fff;text-decoration:none;padding:14px 30px;
  transition:color .22s ease,transform .34s var(--ease-interactive),text-shadow .22s ease;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--btn-art) center/100% 100% no-repeat;
  filter:drop-shadow(0 0 5px rgba(16,104,255,.18));
  opacity:.9;transition:opacity .22s ease,filter .28s ease;
}
.btn::after{
  display:block;content:"";position:absolute;inset:5px 6px;z-index:-1;pointer-events:none;
  clip-path:polygon(7% 0,100% 0,100% 76%,93% 100%,0 100%,0 24%);
  background:linear-gradient(108deg,transparent 16%,rgba(16,104,255,.06) 37%,rgba(38,214,227,.2) 50%,rgba(16,104,255,.06) 63%,transparent 84%);
  opacity:0;transform:translateX(-58%);
  transition:opacity .18s ease,transform .56s var(--ease-interactive);
}
.btn:hover,.btn:focus-visible{
  color:#fff;transform:translateY(-3px) scale(1.015);
  text-shadow:0 0 10px rgba(134,240,255,.58);
}
.btn:hover::before,.btn:focus-visible::before{
  background:var(--btn-art) center/100% 100% no-repeat;
  opacity:1;
  filter:brightness(1.24) drop-shadow(0 0 8px rgba(16,104,255,.55)) drop-shadow(0 0 15px rgba(38,214,227,.2));
}
.btn:hover::after,.btn:focus-visible::after{opacity:1;transform:translateX(58%)}
.btn:active{transform:translateY(1px) scale(.965);text-shadow:0 0 14px rgba(190,249,255,.82);transition-duration:.08s}
.btn:active::before{filter:brightness(1.58) drop-shadow(0 0 10px rgba(38,214,227,.76))}
.btn:active::after{opacity:.92;transform:translateX(0) scaleX(.9);transition-duration:.08s}
.btn:focus-visible{outline:1px solid var(--teal);outline-offset:4px}
.btn-ghost::before{opacity:.72}
.hero-cta .btn:last-child{--btn-art:url("./assets/buttons/sqbtn-info.svg")}
.sect>.btn{--btn-art:url("./assets/buttons/sqbtn-tickets.svg")}

/* ── hero ──────────────────────────────────────────────────── */
.hero{
  --hero-media-gutter:clamp(18px,1.5vw,24px);
  min-height:calc(clamp(540px,76svh,720px) + 300px);height:auto;max-height:none;aspect-ratio:auto;
  display:flex;flex-direction:column;
  justify-content:flex-end;position:relative;
  padding:0 max(var(--pad),env(safe-area-inset-right)) calc(76px + env(safe-area-inset-bottom)) max(var(--pad),env(safe-area-inset-left));
}
.hero-media{
  position:absolute;
  top:var(--hero-media-gutter);right:var(--hero-media-gutter);
  bottom:var(--hero-media-gutter);left:var(--hero-media-gutter);
  z-index:0;overflow:hidden;
  pointer-events:none;
  clip-path:polygon(
    var(--screen-cut) 0,calc(100% - var(--screen-cut)) 0,
    100% var(--screen-cut),100% calc(100% - var(--screen-cut)),
    calc(100% - var(--screen-cut)) 100%,var(--screen-cut) 100%,
    0 calc(100% - var(--screen-cut)),0 var(--screen-cut));
  background:#01050b url("./assets/video/website-hero-poster.jpg") center/cover no-repeat;
}
.hero-media::before,.hero-media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
}
.hero-media::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.28) 18%,rgba(0,0,0,.10) 58%,rgba(0,0,0,.62) 100%),
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.44));
}
.hero-media::after{
  background:
    radial-gradient(80% 70% at 82% 18%,rgba(16,104,255,.08),transparent 70%),
    linear-gradient(135deg,rgba(38,214,227,.025),transparent 44%);
  box-shadow:inset 0 0 74px rgba(0,0,0,.42);
}
.hero-video{
  display:block;width:calc(100% + 400px);max-width:none;height:100%;
  margin-left:-200px;object-fit:cover;object-position:center;
  opacity:.94;filter:brightness(.96) contrast(1.08) saturate(1.08);
}
.hero-inner{
  max-width:720px;position:relative;z-index:2;
  /* makes cqi units below resolve against THIS element's actual
     rendered width — the hero title can never be wider than its box,
     at any viewport size, without hand-tuned vw breakpoints. */
  container-type:inline-size;
}
/* soft scrim behind the copy: keeps type legible over the moving
   WebGL scene without boxing it in or hiding the 3D behind it. */
.hero-inner::before{
  content:"";position:absolute;z-index:-1;
  left:-20px;right:-20px;top:-32px;bottom:-24px;
  background:radial-gradient(120% 100% at 18% 100%,rgba(0,0,0,.82) 0%,rgba(0,0,0,.52) 45%,rgba(0,0,0,0) 82%);
  pointer-events:none;
}
.eyebrow{
  display:flex;align-items:center;gap:8px;margin:0 0 var(--sp-3);
  font:600 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--teal);
}
.tick{width:22px;height:1px;background:var(--teal);box-shadow:0 0 10px var(--teal)}
/* The wordmark lives in the header now, not here. This element carries no
   visual weight at all -- it exists so the page still has an h1 for the
   document outline. The date below is the hero's opening line. */
.hero-title{margin:0}
/* visible to screen readers only */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.hero-dates{
  margin:var(--sp-4) 0 0;font:400 clamp(15px,4.4vw,22px)/1 var(--f-heading);
  letter-spacing:.12em;color:#fff;
}
.hero-sub{margin:var(--sp-2) 0 var(--sp-5);max-width:46ch;color:var(--mist);font-size:15px;line-height:1.6}
.hero-cta{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  width:min(100%,420px);gap:8px;
}
.hero-cta .btn{min-width:0;padding-inline:10px}
.hero-mobile-nav{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  width:min(100%,420px);gap:8px;margin-top:10px;
}
.hero-mobile-nav .btn{
  width:100%;min-width:0;min-height:40px;padding:10px 6px;
  font-size:10px;letter-spacing:.07em;
}
.hero-mobile-nav .btn:nth-child(1){--btn-art:url("./assets/buttons/sqbtn-ohjelma.svg")}
.hero-mobile-nav .btn:nth-child(2){--btn-art:url("./assets/buttons/sqbtn-tickets.svg")}
.hero-mobile-nav .btn:nth-child(3){--btn-art:url("./assets/buttons/sqbtn-info.svg")}
.scroll-hint{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);
  width:1px;height:44px;background:linear-gradient(180deg,transparent,var(--teal));opacity:.7}
.scroll-hint span{position:absolute;left:-2px;top:0;width:5px;height:5px;background:var(--teal);
  box-shadow:0 0 10px var(--teal);animation:hintDrop 2.1s var(--ease) infinite}
@keyframes hintDrop{0%{top:0;opacity:0}20%{opacity:1}100%{top:40px;opacity:0}}

/* ── HUD rail separator ──────────────────────────────
   Artwork: assets/hud/sep-src.svg (1920x240), the transparent-bay HUD.
   Sliced by the same rule as the nav frame: caps that never scale, a
   middle that fills whatever is left. Slice widths on a 240-unit canvas
   are 506 (caps), 240 (tile) and 380 (badge), so their rendered widths
   are 2.1083x, 1x and 1.5833x the rail height. --hud-h drives it all.

   THE BAY IS A HOLE, and that is the whole design. The WebGL vortex
   behind the page shows straight through it, so the separator is a window
   onto the background rather than a bar sitting on top of it. Nothing here
   drifts and nothing needs to: the movement in the bay is the real scene
   moving, which ties the rail to the page harder than any animation did.
   That is also why --sv-flow no longer appears in this file.

   Five pieces, because the artwork has a centre module. Reading across:
     cap-l | tile run | badge | tile run | cap-r
   The tile is pure horizontal lines, so the two runs need no phase
   agreement with each other or with the badge, and each simply repeats
   from its own edge. That is the one freedom the old hazard rail did not
   have, and it is what makes the badge possible at all.

   No element here may carry vertical padding: the runs are positioned
   against the rail's own box, and padding would shift them off the caps.
*/
.hud-bar{
  /* The default, and the separator's phone size. .hud-bar.rail and
     .hud-bar.nav-bar override it -- BOTH qualified by .hud-bar, because
     this declaration sits later in the file and a bare .rail / .nav-bar
     would tie on specificity and lose. */
  --hud-h:56px;
  --hud-cap:calc(var(--hud-h) * 2.108333);   /* 506 / 240 */
  --hud-tile:var(--hud-h);                   /* 240 / 240 */
  --hud-badge-w:calc(var(--hud-h) * 1.583333); /* 380 / 240 */
  position:relative;
  height:var(--hud-h);
  /* below this the caps would start to overlap each other */
  min-width:calc(var(--hud-cap) * 2);
  isolation:isolate;
  transition:filter .3s ease;
}
.hud-bar:hover{filter:brightness(1.18) drop-shadow(0 0 10px rgba(38,214,227,.36))}
@media (min-width:600px){ .hud-bar.rail{--hud-h:68px} }
@media (min-width:1024px){ .hud-bar.rail{--hud-h:84px} }

.hud-bar::before,.hud-bar::after{
  content:"";position:absolute;top:0;bottom:0;width:var(--hud-cap);z-index:2;
  background-repeat:no-repeat;background-size:100% 100%;pointer-events:none;
}
.hud-bar::before{left:0;background-image:url("./assets/hud/sep-cap-l.svg")}
.hud-bar::after{right:0;background-image:url("./assets/hud/sep-cap-r.svg")}

/* The two plain runs. Each repeats from the edge it starts at, so the tile
   always meets its cap on a whole tile and any part-tile falls against the
   badge in the middle, where nothing can betray it. Explicit tile width in
   px, never `auto`, so Chrome has no repeat to round. */
.hud-run{
  position:absolute;top:0;bottom:0;z-index:1;pointer-events:none;
  background-image:url("./assets/hud/sep-mid.svg");
  background-size:var(--hud-tile) 100%;
  background-repeat:repeat-x;
}
.hud-run.is-l{left:var(--hud-cap);right:50%;background-position:left center}
.hud-run.is-r{left:50%;right:var(--hud-cap);background-position:right center}

/* The artwork's own centre module: the rail dip and the twin indicator
   plates. It is a fixed slice rather than part of the tile because it
   happens once, and it is what gives the eye somewhere to land on a run
   that is otherwise the same line repeated. */
.hud-badge{
  position:absolute;top:0;bottom:0;z-index:3;pointer-events:none;
  left:50%;width:var(--hud-badge-w);transform:translateX(-50%);
  background:url("./assets/hud/sep-badge.svg") center/100% 100% no-repeat;
}

/* ── Split Beam edge separator ─────────────────────────────────
   Three slices: two fixed 240x100 edge caps and one repeating 200x100
   centre. Split Beam uses three heavy structural rails and compact edge
   modules, removing Fjord Spine's hairline calibration detail.
   At >=1440px each cap renders at 120px. The entire separator is set to
   exactly 50% of the previous on-page scale at every breakpoint.

   Join contract in all three SVGs: y=40/50/60.

   NO VERTICAL PADDING. The middle is clipped to the content box so it
   cannot run under the caps. Vertical padding would shrink that box and
   pull the five centre rails away from the fixed cap joins. */
.sep{
  --sep-h:14px;
  --sep-cap:calc(var(--sep-h) * 2.4);    /* 240 / 100; max 120px rendered */
  --sep-tile:calc(var(--sep-h) * 2);     /* 200 / 100 */
  position:relative;
  height:var(--sep-h);
  min-width:calc(var(--sep-cap) * 2);         /* or the caps overlap */
  margin-block:clamp(18px,3vw,48px);
  padding-left:var(--sep-cap);padding-right:var(--sep-cap);
  background-image:url("./assets/hud/split-beam-separator-mid.svg");
  background-repeat:repeat-x;
  background-position:left center;
  background-size:var(--sep-tile) 100%;
  background-origin:content-box;
  background-clip:content-box;
  isolation:isolate;
  transition:filter .3s ease;
}
.sep:hover{filter:brightness(1.18) drop-shadow(0 0 10px rgba(38,214,227,.36))}
.sep::before,.sep::after{
  content:"";position:absolute;top:0;bottom:0;width:var(--sep-cap);
  background-repeat:no-repeat;background-size:100% 100%;pointer-events:none;
}
.sep::before{left:0;background-image:url("./assets/hud/split-beam-separator-cap-l.svg")}
.sep::after{right:0;background-image:url("./assets/hud/split-beam-separator-cap-r.svg")}

@media (min-width:390px){.sep{--sep-h:17px}}
@media (min-width:600px){.sep{--sep-h:26px}}
@media (min-width:1024px){.sep{--sep-h:41px}}
@media (min-width:1440px){.sep{--sep-h:50px}}

/* ── nested section screens ───────────────────────────────────
   A faint glass plane and four short corner rails make every major block
   read as a screen inside the page. The frame stays deliberately open:
   there is no full bright border competing with the separator or the
   content, and each section moves the hue pocket to a different corner. */
.hero,.sect{
  --screen-hue:var(--sv-hue-tickets);
  --screen-glow-x:86%;
  --screen-glow-y:16%;
  --screen-inset:clamp(10px,1.5vw,24px);
  --screen-corner:clamp(44px,7vw,104px);
  --screen-cut:clamp(8px,.85vw,14px);
  position:relative;isolation:isolate;
}
#lineup{--screen-hue:var(--sv-hue-lineup);--screen-glow-x:12%;--screen-glow-y:18%}
#liput{--screen-hue:var(--sv-hue-tickets);--screen-glow-x:88%;--screen-glow-y:78%}
#info{--screen-hue:var(--sv-hue-info);--screen-glow-x:12%;--screen-glow-y:76%}

.hero::before,.sect::before{
  content:"";position:absolute;inset:var(--screen-inset);z-index:3;
  pointer-events:none;opacity:.46;
  background:
    linear-gradient(90deg,rgba(var(--screen-hue),.88),transparent) left top / var(--screen-corner) 1px no-repeat,
    linear-gradient(180deg,rgba(var(--screen-hue),.88),transparent) left top / 1px var(--screen-corner) no-repeat,
    linear-gradient(270deg,rgba(var(--screen-hue),.62),transparent) right top / var(--screen-corner) 1px no-repeat,
    linear-gradient(180deg,rgba(var(--screen-hue),.62),transparent) right top / 1px var(--screen-corner) no-repeat,
    linear-gradient(90deg,rgba(var(--screen-hue),.48),transparent) left bottom / var(--screen-corner) 1px no-repeat,
    linear-gradient(0deg,rgba(var(--screen-hue),.48),transparent) left bottom / 1px var(--screen-corner) no-repeat,
    linear-gradient(270deg,rgba(var(--screen-hue),.76),transparent) right bottom / var(--screen-corner) 1px no-repeat,
    linear-gradient(0deg,rgba(var(--screen-hue),.76),transparent) right bottom / 1px var(--screen-corner) no-repeat;
  filter:drop-shadow(0 0 7px rgba(var(--screen-hue),.18));
  transition:opacity .3s ease,filter .3s ease;
}
.hero::after,.sect::after{
  content:"";position:absolute;inset:var(--screen-inset);z-index:0;
  pointer-events:none;
  clip-path:polygon(
    var(--screen-cut) 0,calc(100% - var(--screen-cut)) 0,
    100% var(--screen-cut),100% calc(100% - var(--screen-cut)),
    calc(100% - var(--screen-cut)) 100%,var(--screen-cut) 100%,
    0 calc(100% - var(--screen-cut)),0 var(--screen-cut));
  border:1px solid rgba(var(--screen-hue),.055);
  background:
    radial-gradient(62% 46% at var(--screen-glow-x) var(--screen-glow-y),rgba(var(--screen-hue),.105),rgba(var(--screen-hue),.032) 38%,transparent 72%),
    linear-gradient(145deg,rgba(var(--screen-hue),.022),transparent 36%,rgba(3,7,14,.055));
  box-shadow:inset 0 0 54px rgba(var(--screen-hue),.018);
  transition:border-color .3s ease,box-shadow .3s ease,filter .3s ease;
}
.hero:hover::before,.sect:hover::before{
  opacity:.74;
  filter:drop-shadow(0 0 11px rgba(var(--screen-hue),.44));
}
.hero:hover::after,.sect:hover::after{
  border-color:rgba(var(--screen-hue),.13);
  box-shadow:inset 0 0 64px rgba(var(--screen-hue),.045),0 0 24px rgba(var(--screen-hue),.07);
}
.hero::after{z-index:1}
.hero::before,.sect::before{
  /* Inset section HUDs use the earlier four-cut language from the reference. */
  background:
    linear-gradient(135deg,transparent calc(50% - .7px),rgba(var(--screen-hue),.88) 50%,transparent calc(50% + .7px)) left top / var(--screen-cut) var(--screen-cut) no-repeat,
    linear-gradient(90deg,rgba(var(--screen-hue),.88),transparent) var(--screen-cut) top / var(--screen-corner) 1px no-repeat,
    linear-gradient(180deg,rgba(var(--screen-hue),.88),transparent) left var(--screen-cut) / 1px var(--screen-corner) no-repeat,
    linear-gradient(45deg,transparent calc(50% - .7px),rgba(var(--screen-hue),.62) 50%,transparent calc(50% + .7px)) right top / var(--screen-cut) var(--screen-cut) no-repeat,
    linear-gradient(270deg,rgba(var(--screen-hue),.62),transparent) right var(--screen-cut) top / var(--screen-corner) 1px no-repeat,
    linear-gradient(180deg,rgba(var(--screen-hue),.62),transparent) right top var(--screen-cut) / 1px var(--screen-corner) no-repeat,
    linear-gradient(45deg,transparent calc(50% - .7px),rgba(var(--screen-hue),.48) 50%,transparent calc(50% + .7px)) left bottom / var(--screen-cut) var(--screen-cut) no-repeat,
    linear-gradient(90deg,rgba(var(--screen-hue),.48),transparent) left var(--screen-cut) bottom / var(--screen-corner) 1px no-repeat,
    linear-gradient(0deg,rgba(var(--screen-hue),.48),transparent) left bottom var(--screen-cut) / 1px var(--screen-corner) no-repeat,
    linear-gradient(135deg,transparent calc(50% - .7px),rgba(var(--screen-hue),.76) 50%,transparent calc(50% + .7px)) right bottom / var(--screen-cut) var(--screen-cut) no-repeat,
    linear-gradient(270deg,rgba(var(--screen-hue),.76),transparent) right var(--screen-cut) bottom / var(--screen-corner) 1px no-repeat,
    linear-gradient(0deg,rgba(var(--screen-hue),.76),transparent) right bottom var(--screen-cut) / 1px var(--screen-corner) no-repeat;
}
.hero::after,.sect::after{
  clip-path:polygon(
    var(--screen-cut) 0,calc(100% - var(--screen-cut)) 0,
    100% var(--screen-cut),100% calc(100% - var(--screen-cut)),
    calc(100% - var(--screen-cut)) 100%,var(--screen-cut) 100%,
    0 calc(100% - var(--screen-cut)),0 var(--screen-cut));
  border-left:1px solid rgba(var(--screen-hue),.055);
  border-right:1px solid rgba(var(--screen-hue),.055);
}
.sect>*{position:relative;z-index:1}

@media (max-width:560px){
  .hero{--hero-media-gutter:18px}
  .hero,.sect{--screen-inset:8px;--screen-corner:46px;--screen-cut:8px}
  .hero::before,.sect::before{opacity:.38}
  .hero::after,.sect::after{
    clip-path:polygon(
      var(--screen-cut) 0,calc(100% - var(--screen-cut)) 0,
      100% var(--screen-cut),100% calc(100% - var(--screen-cut)),
      calc(100% - var(--screen-cut)) 100%,var(--screen-cut) 100%,
      0 calc(100% - var(--screen-cut)),0 var(--screen-cut));
  }
  .hero-media{
    top:18px;right:18px;bottom:22px;left:18px;
    clip-path:polygon(
      8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),
      calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  }
}
/* Section-edge A/B test. `flush` removes both the HUD inset and the hero
   media gutter; `inset` preserves the original 18–24px thickness. */
html[data-sv-section-edge="flush"] .hero,
html[data-sv-section-edge="flush"] .sect{--screen-inset:0px}
html[data-sv-section-edge="flush"] .hero{--hero-media-gutter:0px}
html[data-sv-section-edge="flush"] .hero-media{inset:0}
@media (prefers-reduced-transparency:reduce){
  .hero::after,.sect::after{background:transparent;box-shadow:none}
  .talent-hero-object{filter:none}
  .talent-hero-object::before{background:transparent;box-shadow:none;opacity:.4}
  .talent-hero-logo-fallback{filter:none}
}

/* ── sections ──────────────────────────────────────────────── */
.sect{
  padding:var(--sp-7) max(var(--pad),env(safe-area-inset-right)) calc(var(--sp-7) + var(--sp-1)) max(var(--pad),env(safe-area-inset-left));
  scroll-margin-top:76px;
}
@media (min-width:900px){
  .sect{scroll-margin-top:106px}
}
.sect-head{margin-bottom:var(--sp-5);position:relative;z-index:0}
.sect-head::before{
  content:"";position:absolute;z-index:-1;left:-16px;right:-16px;top:-16px;bottom:-16px;
  background:radial-gradient(100% 100% at 0% 0%,rgba(0,0,0,.55),rgba(0,0,0,0) 75%);
  pointer-events:none;
}
.label{
  margin:0 0 var(--sp-2);font:600 10px/1 var(--f-mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--teal);
  padding-bottom:var(--sp-1);border-bottom:1px solid rgba(38,214,227,.28);
}
/* Uppercase, like every other header on the page -- the eyebrow, the
   labels and both card headings were already set that way, and this was
   the last one running mixed case. OPTIEdgar is a display face drawn for
   caps anyway; its lowercase is the weakest thing in it.
   Sized down a step too: at 88px "LINEUP 2027" was competing with the
   hero rather than introducing a section. */
.sect-title{
  font-family:var(--f-display);font-weight:400;margin:0;
  font-size:clamp(30px,8vw,64px);line-height:.96;letter-spacing:0;
  text-transform:uppercase;color:#fff;
}
.sect-sub{margin:var(--sp-3) 0 0;max-width:52ch;font-size:15px;line-height:1.6}

/* The lineup is image-led, so its approved OPTIEdgar heading sits one scale
   below the generic section treatment. Artist names stay in Montserrat, the
   brand's primary face, at a smaller and steadier size. */
#lineup{padding-top:clamp(52px,6vw,76px);padding-bottom:clamp(40px,4.5vw,56px)}
#lineup .sect-head{margin-bottom:clamp(28px,3.4vw,42px)}
#lineup .label{font-size:9px;letter-spacing:.18em}
#lineup .sect-title{
  font-family:var(--f-heading);font-size:clamp(32px,4.8vw,56px);
  line-height:1;letter-spacing:.015em;
}
#lineup .art b{
  font-family:var(--f-ui);font-weight:650;
  font-size:clamp(10px,min(5.4cqi,calc(78cqi / (var(--ch) * .70))),16px);
  letter-spacing:.025em;
}
#lineup .artist-carousel{margin-bottom:0}
.lineup-actions{
  display:grid;gap:10px;width:min(100%,260px);margin:clamp(18px,2.4vw,28px) auto 0;
}
.lineup-actions .btn{width:100%;min-width:0}
.lineup-actions .btn:first-child{--btn-art:url("./assets/buttons/sqbtn-ohjelma.svg")}
.section-actions{
  display:grid;width:min(100%,260px);margin:clamp(18px,2.4vw,28px) auto 0;
}
.section-actions .btn{width:100%;min-width:0}
#liput .section-actions .btn{--btn-art:url("./assets/buttons/sqbtn-tickets.svg")}
#info .section-actions .btn{--btn-art:url("./assets/buttons/sqbtn-info.svg")}

/* artists carousel */
.artist-carousel{position:relative;margin:0 0 var(--sp-5)}
.artist-carousel__toolbar{
  display:flex;align-items:end;justify-content:flex-start;gap:var(--sp-3);
  margin:0 0 var(--sp-3);padding:0 2px var(--sp-2);
  border-bottom:1px solid rgba(38,214,227,.22);
}
.artist-carousel__readout{display:grid;gap:6px}
.artist-carousel__readout span{
  color:rgba(215,226,237,.72);font:600 10px/1 var(--f-ui);
  letter-spacing:.12em;text-transform:uppercase;
}
.artist-carousel__readout strong{
  color:var(--teal);font:600 11px/1 var(--f-mono);letter-spacing:.12em;
}
.artist-carousel__progress{position:relative;height:1px;margin-top:var(--sp-3);background:rgba(215,226,237,.14);overflow:visible}
.artist-carousel__progress i{
  position:absolute;left:0;top:-1px;height:3px;background:var(--teal);
  box-shadow:0 0 9px rgba(38,214,227,.55);transition:left .2s ease,width .2s ease;
}
.artists{
  --artist-gap:var(--sp-2);
  container-type:inline-size;list-style:none;margin:0;padding:6px 1px 8px;
  display:flex;gap:var(--artist-gap);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-padding-inline:1px;scroll-behavior:smooth;
  scrollbar-width:none;overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
}
.artists::-webkit-scrollbar{display:none}
.artists.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.artists img{-webkit-user-drag:none;user-select:none}
.artists:focus-visible{outline:1px solid var(--teal);outline-offset:5px}
/* ── artist cards: brand HUD frame (ChatGPT Hues v2, thick-line 4:5) ──
   The frame is the brand SVG, not CSS. It already carries the chamfers,
   the blue and teal edges, the technical rails and the corner markers as
   one drawn object, so the cards match the asset exactly rather than
   approximating it. SVG over the 269KB PNG: 9KB, and crisp at any size.
     .art::before → wash behind the panel, clipped to the frame outline
     .art-photo   → the artist's press photo, same clip
     .art::after  → the frame itself
   The artwork sits inside a margin in its own box — the outline starts
   at 6.5%/5.5% of the viewBox — so --fx/--fy mirror that and everything
   else (wash, photo, label, index) is positioned against the drawn
   frame, not the element box. */
.art{
  --fx:6.5%; --fy:5.5%;           /* where the drawn frame starts */
  --fcx:6.67%; --fcy:5.21%;       /* its chamfer, as % of the framed area */
  --wash-x:74%; --wash-y:6%;      /* per-card wash origin, varied below */
  container-type:inline-size;     /* lets the name size off the card, not the grid */
  position:relative;aspect-ratio:4/5;contain:paint;
  flex:0 0 calc((100% - var(--artist-gap)) / 2);scroll-snap-align:start;
  translate:0 0;scale:1;
  transition:translate .52s var(--ease-interactive),scale .52s var(--ease-interactive);
}
/* Layer order inside the frame: photo (0) → wash/scrim (1) → frame (2)
   → index and name (3). The wash sits ON TOP of the photo so it doubles
   as the legibility scrim under the name; with no photo it is simply the
   card's own finish, which is why the two use the same box and clip. */
.art-photo{
  position:absolute;inset:var(--fy) var(--fx);z-index:0;
  /* An absolutely positioned REPLACED element does not stretch to its
     offsets — width:auto keeps the intrinsic 640px. So size it explicitly;
     the percentages resolve against the card, matching the inset above. */
  width:calc(100% - var(--fx) * 2);height:calc(100% - var(--fy) * 2);
  clip-path:polygon(var(--fcx) 0,100% 0,100% calc(100% - var(--fcy)),calc(100% - var(--fcx)) 100%,0 100%,0 var(--fcy));
  /* 42%, not centre: press shots are framed with headroom, and the name
     sits over the bottom of the card. */
  object-fit:cover;object-position:50% 42%;
  background:#05070d;   /* holds the shape while the lazy image loads */
  /* Press shots are mostly low-key and the frame sits over a black page,
     so they need a real lift: 1.1, then 1.32, and the faces still sat in
     shadow at card size. Contrast comes DOWN as brightness goes up --
     pushing both together crushes the blacks these portraits are mostly
     made of, and the face gains nothing. */
  filter:brightness(1.5) contrast(.97) saturate(1.06);
  transform:scale(1.001);transform-origin:50% 42%;
  transition:transform .72s var(--ease-interactive);
}
.art::before{
  content:"";position:absolute;inset:var(--fy) var(--fx);z-index:1;
  clip-path:polygon(var(--fcx) 0,100% 0,100% calc(100% - var(--fcy)),calc(100% - var(--fcx)) 100%,0 100%,0 var(--fcy));
  background:
    radial-gradient(120% 90% at var(--wash-x) var(--wash-y),rgba(16,104,255,.30),rgba(0,0,0,0) 60%),
    linear-gradient(180deg,rgba(16,104,255,.10) 0%,rgba(0,0,0,.55) 50%,rgba(0,0,0,.88) 100%);
}
/* Over a photo the same wash would bury the face, so the card carrying one
   gets a lighter version: transparent through the top two thirds, dark only
   where the name lands. Browsers without :has() keep the heavy wash — the
   name stays readable, the portrait is just dimmer. */
.art:has(.art-photo)::before{
  background:
    radial-gradient(120% 90% at var(--wash-x) var(--wash-y),rgba(16,104,255,.08),rgba(0,0,0,0) 55%),
    linear-gradient(180deg,rgba(3,6,14,.04) 0%,rgba(3,6,14,0) 38%,rgba(3,6,14,.46) 74%,rgba(3,6,14,.90) 100%);
}
.art-scan{
  position:absolute;inset:var(--fy) var(--fx);z-index:1;overflow:hidden;pointer-events:none;
  clip-path:polygon(var(--fcx) 0,100% 0,100% calc(100% - var(--fcy)),calc(100% - var(--fcx)) 100%,0 100%,0 var(--fcy));
  contain:paint;
}
.art-scan::before{
  content:"";position:absolute;top:-20%;bottom:-20%;left:-45%;width:34%;
  background:linear-gradient(90deg,transparent,rgba(38,214,227,.13),transparent);
  opacity:0;transform:translateX(-120%) skewX(-12deg);
  transition:transform .72s var(--ease-interactive),opacity .22s ease;
}
.art::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:url("./assets/hud/frame-4x5.svg?cb=2") center/100% 100% no-repeat;
  opacity:.9;transition:opacity .38s ease;
}
/* vary the wash so 30 identical frames don't read as one repeated tile */
.art-v2{--wash-x:24%;--wash-y:12%}
.art-v3{--wash-x:50%;--wash-y:0%}
.art-v4{--wash-x:88%;--wash-y:34%}
.art-v5{--wash-x:12%;--wash-y:62%}

.art-idx{
  position:absolute;top:13%;left:11%;z-index:3;
  font:400 9px/1 var(--f-mono);letter-spacing:.22em;
  color:rgba(38,214,227,.75);
  transition:color .38s ease,transform .52s var(--ease-interactive);
}

/* drop-shadow, not box-shadow: the card is transparent outside the
   frame, so a box-shadow would glow around an invisible rectangle. */
.art:hover,.art:focus-within{
  translate:0 -5px;scale:1.006;
}
.art:hover .art-photo,.art:focus-within .art-photo{
  transform:scale(1.038);
}
.art:hover .art-scan::before,.art:focus-within .art-scan::before{opacity:1;transform:translateX(520%) skewX(-12deg)}
.art:hover::after,.art:focus-within::after{opacity:1}
.art:hover .art-idx,.art:focus-within .art-idx{
  color:var(--teal);transform:translateX(3px);
}
.art:hover b,.art:focus-within b{
  color:var(--teal);transform:translateY(-2px);
}

/* sits above the frame's bottom rail, inside its side edges */
.art b{position:absolute;left:11%;right:11%;bottom:16%;z-index:3;
  font-family:var(--f-ui);font-weight:650;line-height:1.18;
  /* Sized off the card, not the viewport, and shrunk to fit the longest
     word: --ch is that word's length (set in JS). The label occupies 78%
     of the card, so the second term is "the size at which the longest word
     exactly spans that". min() takes whichever is smaller, so
     KLANGKUENSTLER stops breaking mid-word while DYEN keeps full size.

     The constant is em-per-cap for the face in use, measured with a little
     headroom. Montserrat's uppercase width is close enough to the existing
     0.70 fit constant to preserve the current card sizing. Re-measure if the
     primary face changes:
     span at 100px, uppercase, divide width by 100 and by the cap count. */
  --ch:7;
  font-size:clamp(10px,min(6.6cqi,calc(78cqi / (var(--ch) * 0.70))),19px);
  letter-spacing:-.01em;text-transform:uppercase;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.8);
  /* never break inside a word — a split proper noun reads as a typo.
     Names wrap at spaces; a single word too wide for the card overflows
     and JS squeezes it (see fitNames), which beats 8px type. */
  overflow-wrap:normal;word-break:normal;transform-origin:left center;
  transition:color .38s ease,transform .52s var(--ease-interactive);
  /* Plain block, and deliberately NOT overflow:hidden. Two reasons:
     a -webkit-box reports clientWidth as its own width however far the
     text overflows (breaking the fit measurement), and clipping happens
     in the element's own coordinate space — so a clipped tail stays
     clipped no matter how much scaleX shrinks the box. The card's
     clip-path is the real backstop if a name ever exceeds the cap. */
  display:block}



/* tickets */
.tickets{display:grid;gap:var(--sp-2)}
.tk{
  position:relative;display:flex;flex-direction:column;gap:6px;
  padding:var(--sp-3) 56px var(--sp-3) var(--sp-3);
  border:1px solid var(--line);background:rgba(16,104,255,.08);
  clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
  transition:border-color .2s ease,background-color .2s ease,transform .2s var(--ease);
}
.tk:hover{border-color:rgba(38,214,227,.75);background:rgba(16,104,255,.20);transform:translateX(3px)}
/* Montserrat, not the display face: these are rows of information, not
   headings, and the ticket name should support rather than overpower price. */
.tk h3{margin:0;font:700 15px/1.2 var(--f-ui);
  letter-spacing:.06em;color:#fff;text-transform:uppercase}
.tk .when{font:400 11px/1.45 var(--f-mono);letter-spacing:.05em;
  text-transform:uppercase;color:var(--mist)}
.tk .price{font:700 16px/1 var(--f-ui);color:#fff}
.tk .status{font:600 10px/1 var(--f-mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal)}
.tk .sym{position:absolute;top:14px;right:14px;width:26px;height:26px;opacity:.85}

/* info */
.info-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-2)}
.ii{padding:var(--sp-3);border:1px solid var(--line);background:rgba(16,104,255,.08);
  clip-path:polygon(var(--chamfer-sm) 0,100% 0,100% calc(100% - var(--chamfer-sm)),calc(100% - var(--chamfer-sm)) 100%,0 100%,0 var(--chamfer-sm));
  transition:border-color .2s ease,background-color .2s ease}
.ii:hover{border-color:rgba(38,214,227,.45);background:rgba(16,104,255,.14)}
.ii h3{margin:0 0 5px;font:700 12px/1.2 var(--f-ui);letter-spacing:.08em;
  text-transform:uppercase;color:#fff}
.ii p{margin:0;font:400 13px/1.55 var(--f-ui)}
/* Info marks from Brand-Assets/04 Icons/Info Icons — see assets/icons/README.md.
   Shipped WHITE, not tinted: filter can't hue-shift white (no hue to rotate,
   no saturation to pull), and mask-image would mean giving up the real <img>
   and with it srcset and lazy-loading. White is the brand's own on-dark
   treatment anyway; opacity and drop-shadow carry the hover.
   The mark spans both rows so h3 and p auto-place into column 2 — it sits
   beside the whole text block instead of pushing the copy down. */
.ii{display:grid;grid-template-columns:auto 1fr;column-gap:var(--sp-3);align-items:start}
.ii-ico{grid-row:1/3;width:40px;height:40px;display:block;opacity:.92;
  filter:drop-shadow(0 0 10px rgba(38,214,227,.25));transition:opacity .2s ease,filter .2s ease}
.ii:hover .ii-ico{opacity:1;filter:drop-shadow(0 0 14px rgba(38,214,227,.55))}

/* ── footer ────────────────────────────────────────────────── */
.foot{
  --footer-cut:14px;
  --footer-inset:clamp(16px,1.7vw,28px);
  --footer-bottom-inset:calc(var(--footer-inset) + 14px);
  position:relative;isolation:isolate;
  padding:var(--sp-6) max(var(--pad),env(safe-area-inset-right)) calc(var(--sp-6) + var(--sp-1) + 10px + env(safe-area-inset-bottom)) max(var(--pad),env(safe-area-inset-left));
  text-align:center;border:0;background:transparent;
}
.foot::before,.foot::after{
  content:"";position:absolute;pointer-events:none;
  clip-path:polygon(
    var(--footer-cut) 0,calc(100% - var(--footer-cut)) 0,
    100% var(--footer-cut),100% calc(100% - var(--footer-cut)),
    calc(100% - var(--footer-cut)) 100%,var(--footer-cut) 100%,
    0 calc(100% - var(--footer-cut)),0 var(--footer-cut));
}
.foot::before{
  inset:var(--footer-inset) var(--footer-inset) var(--footer-bottom-inset);z-index:0;
  background:
    linear-gradient(135deg,transparent calc(50% - .7px),rgba(var(--sv-hue-lineup),.62) 50%,transparent calc(50% + .7px)) left top / var(--footer-cut) var(--footer-cut) no-repeat,
    linear-gradient(45deg,transparent calc(50% - .7px),rgba(var(--sv-hue-info),.62) 50%,transparent calc(50% + .7px)) right top / var(--footer-cut) var(--footer-cut) no-repeat,
    linear-gradient(45deg,transparent calc(50% - .7px),rgba(var(--sv-hue-lineup),.62) 50%,transparent calc(50% + .7px)) left bottom / var(--footer-cut) var(--footer-cut) no-repeat,
    linear-gradient(135deg,transparent calc(50% - .7px),rgba(var(--sv-hue-info),.62) 50%,transparent calc(50% + .7px)) right bottom / var(--footer-cut) var(--footer-cut) no-repeat,
    linear-gradient(90deg,rgba(var(--sv-hue-lineup),.62),rgba(var(--sv-hue-lineup),.34) 30%,rgba(var(--sv-hue-tickets),.651) 50%,rgba(var(--sv-hue-info),.34) 70%,rgba(var(--sv-hue-info),.62)) var(--footer-cut) top / calc(100% - var(--footer-cut) - var(--footer-cut)) 1px no-repeat,
    linear-gradient(90deg,rgba(var(--sv-hue-lineup),.62),rgba(var(--sv-hue-lineup),.34) 30%,rgba(var(--sv-hue-tickets),.651) 50%,rgba(var(--sv-hue-info),.34) 70%,rgba(var(--sv-hue-info),.62)) var(--footer-cut) bottom / calc(100% - var(--footer-cut) - var(--footer-cut)) 1px no-repeat,
    linear-gradient(rgba(var(--sv-hue-lineup),.62),rgba(var(--sv-hue-lineup),.62)) left var(--footer-cut) / 1px calc(100% - var(--footer-cut) - var(--footer-cut)) no-repeat,
    linear-gradient(rgba(var(--sv-hue-info),.62),rgba(var(--sv-hue-info),.62)) right var(--footer-cut) / 1px calc(100% - var(--footer-cut) - var(--footer-cut)) no-repeat;
}
.foot::after{
  inset:calc(var(--footer-inset) + 1px) calc(var(--footer-inset) + 1px) calc(var(--footer-bottom-inset) + 1px);z-index:0;
  clip-path:polygon(
    calc(var(--footer-cut) - 1px) 0,calc(100% - var(--footer-cut) + 1px) 0,
    100% calc(var(--footer-cut) - 1px),100% calc(100% - var(--footer-cut) + 1px),
    calc(100% - var(--footer-cut) + 1px) 100%,calc(var(--footer-cut) - 1px) 100%,
    0 calc(100% - var(--footer-cut) + 1px),0 calc(var(--footer-cut) - 1px));
  background:rgba(0,0,0,.40);
  box-shadow:none;
}
.foot>*{position:relative;z-index:1}
.foot-brand{display:flex;flex-direction:column;align-items:center}
.foot-logo{height:22px;width:auto;opacity:.9}
.foot p{margin:var(--sp-3) 0 0;font-size:13px}
.foot-small{opacity:.6;font-size:12px !important}
.foot-social{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:var(--sp-4)}
.foot-social a{
  --btn-art:url("./assets/buttons/sqbtn-tickets.svg");
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;min-height:48px;padding:0;
  color:#fff;text-decoration:none;border:0;background:transparent;
  transition:color .2s ease,transform .3s var(--ease-interactive),text-shadow .2s ease;
}
.foot-social a::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--btn-art) center/100% 100% no-repeat;
  filter:drop-shadow(0 0 5px rgba(16,104,255,.16));
  transition:filter .2s ease;
}
.foot-social a:hover,.foot-social a:focus-visible{color:#fff;transform:translateY(-2px) scale(1.055)}
.foot-social a:active{color:var(--teal);transform:translateY(1px) scale(.94);background:rgba(38,214,227,.12)}
.foot-social a:hover::before,.foot-social a:focus-visible::before{
  filter:brightness(1.28) drop-shadow(0 0 10px rgba(38,214,227,.42));
}
.social-icon{
  display:block;width:19px;height:19px;background:currentColor;
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;
  filter:drop-shadow(0 0 4px rgba(38,214,227,.18));
  transition:filter .2s ease,transform .3s var(--ease-interactive);
}
.foot-social a:hover .social-icon,.foot-social a:focus-visible .social-icon{
  filter:drop-shadow(0 0 7px rgba(38,214,227,.7));transform:scale(1.06);
}
.social-icon--instagram{-webkit-mask-image:url("./assets/icons/social-instagram.svg");mask-image:url("./assets/icons/social-instagram.svg")}
.social-icon--tiktok{-webkit-mask-image:url("./assets/icons/social-tiktok.svg");mask-image:url("./assets/icons/social-tiktok.svg")}
.social-icon--youtube{width:21px;-webkit-mask-image:url("./assets/icons/social-youtube.svg");mask-image:url("./assets/icons/social-youtube.svg")}
.social-icon--facebook{width:17px;-webkit-mask-image:url("./assets/icons/social-facebook.svg");mask-image:url("./assets/icons/social-facebook.svg")}

@media (min-width:900px){
  .foot{
    display:grid;grid-template-columns:minmax(180px,25%) minmax(300px,50%) minmax(240px,25%);
    grid-template-rows:auto auto;align-items:center;column-gap:0;row-gap:18px;
    min-height:170px;
    padding:calc(var(--footer-inset) + 24px) var(--footer-inset) calc(var(--footer-bottom-inset) + 18px);
    text-align:left;
  }
  .foot-brand{grid-column:1;grid-row:1;align-items:center;justify-self:center;text-align:center}
  .foot-brand .foot-logo{height:auto;width:min(218px,100%)}
  .foot-brand p{margin-top:12px}
  .foot .foot-pages{
    grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(3,max-content);
    justify-content:center;align-content:center;gap:18px 30px;margin:0;
  }
  .foot-social{
    grid-column:3;grid-row:1;display:flex;flex-wrap:wrap;
    justify-self:center;width:auto;gap:10px;margin:0;
  }
  .foot-social a{width:46px;height:46px;min-height:46px;padding:0}
  .foot-small{
    grid-column:1/-1;grid-row:2;margin:0 clamp(18px,3vw,52px)!important;padding-top:14px;
    border-top:1px solid rgba(var(--sv-hue-tickets),.12);
    text-align:center;
  }
}

/* ── reveal on scroll ──────────────────────────────────────── */
/* Reveal-on-scroll. Gated behind .js so the content is NEVER hidden
   unless JS is alive to un-hide it. Without this, a failed observer
   leaves whole sections invisible over the 3D background. */
.js .rv{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease var(--rv-delay,0s),transform .7s var(--ease) var(--rv-delay,0s)}
.js .rv.in{opacity:1;transform:none}
/* Reveal motion and hover motion use separate properties and delays. Without
   this, the generic .rv transition replaces the artist card's smoother
   translate / scale / filter timing after JavaScript starts. */
.js .rv.art{
  transition:
    opacity .6s ease var(--rv-delay,0s),
    transform .7s var(--ease) var(--rv-delay,0s),
    translate .52s var(--ease-interactive),
    scale .52s var(--ease-interactive);
}

/* ── ≥720px: tablet ────────────────────────────────────────── */
@media (min-width:720px){
  :root{--pad:40px}
  .artists{--artist-gap:var(--sp-3)}
  .art{flex-basis:calc((100% - var(--artist-gap) - var(--artist-gap)) / 3)}
  .info-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
  .tk{flex-direction:row;align-items:center;justify-content:space-between;padding:var(--sp-4) 72px var(--sp-4) var(--sp-4)}
  .tk .right{text-align:right}
}
/* ── ≥1024px: laptop ───────────────────────────────────────── */
@media (min-width:1024px){
  :root{--pad:56px}
  .hero-inner{max-width:900px}
  .art{flex-basis:calc((100% - var(--artist-gap) - var(--artist-gap) - var(--artist-gap)) / 4)}
  .info-grid{grid-template-columns:repeat(3,1fr)}
  .ii-ico{width:48px;height:48px}
  .sect{padding:var(--sp-8) var(--pad) calc(var(--sp-8) + var(--sp-2))}
  .sect-head{margin-bottom:var(--sp-6)}
}

@media (min-width:900px){
  .hero-cta{display:flex;width:auto;gap:var(--sp-3)}
  .hero-cta .btn{padding-inline:30px}
  .hero-mobile-nav{display:none}
}

@media (max-width:899px){
  /* The hero navigation owns the lower mobile area, so the centred scroll
     indicator would compete with it and appear to jump as height changes. */
  .nav-row{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;min-height:38px;gap:0;
  }
  .nav-logo{
    place-self:center;margin:0;width:min(150px,calc(100% - 16px));
  }
  .nav-end{place-self:center;margin:0}
  .menu-btn{min-height:38px}
  .hero-cta{display:none}
  .hero{
    min-height:calc(clamp(540px,78svh,680px) + 300px);
    padding-bottom:calc(28px + env(safe-area-inset-bottom));
  }
  .hero-video{width:100%;max-width:100%;margin-left:0}
  .scroll-hint{display:none}
}

@media (max-width:719px){
  .foot-social{
    display:flex;width:100%;margin-inline:auto;
  }
  .foot-social a{width:48px;min-width:48px;padding:0}
}

@media (prefers-reduced-motion:reduce){
  #grain,.scroll-hint span{animation:none}
  .hero-video{display:none}
  .sv-site-hud__scope::after{animation:none}
  .rv,.js .rv,.js .rv.art{opacity:1;transform:none;transition:none}
  .art,.art-photo,.art::before,.art::after,.art-scan::before,.art b,.art-idx,
  .btn,.btn::before,.btn::after,.menu-btn,.menu-btn::before,.menu-btn::after,
  .tk,.hud-btn,.corner-nav a,.hud-bar,.sep,
  .hero::before,.hero::after,.sect::before,.sect::after,
  .foot-social a,.foot-social a::before,.social-icon{transition:none}
  .btn:hover,.btn:focus-visible,.btn:active,.menu-btn:hover,.menu-btn:focus-visible,
  .art:hover,.art:focus-within,
  .art:hover .art-photo,.art:focus-within .art-photo{transform:none}
  .art:hover,.art:focus-within{translate:0 0;scale:1}
  .artists{scroll-behavior:auto}
  .artist-carousel__progress i{transition:none}
}

/* ── non-home pages ───────────────────────────────────────────
   These routes share the home page's atmosphere, HUD and control language,
   but skip the long load-out sequence. Their first viewport is editorial:
   one clear title, one sentence and the facts needed to orient the visitor. */
.subpage-body{
  --page-screen-hue:var(--sv-hue-tickets);
  --page-screen-glow-x:86%;
  --page-screen-glow-y:16%;
  --page-line:rgba(var(--page-screen-hue),.2);
  --page-line-strong:rgba(var(--page-screen-hue),.62);
  --page-fill:rgba(var(--page-screen-hue),.065);
  --page-fill-hover:rgba(var(--page-screen-hue),.115);
  --page-button-art:url("./assets/buttons/sqbtn-tickets.svg");
  min-height:100%;background-color:#000;
}
body[data-page="ohjelma"],body[data-page="aikataulu"],body[data-page="artisti"]{
  --page-screen-hue:var(--sv-hue-lineup);--page-screen-glow-x:12%;--page-screen-glow-y:18%;
  --page-button-art:url("./assets/buttons/sqbtn-ohjelma.svg");
}
body[data-page="liput"]{
  --page-screen-hue:var(--sv-hue-tickets);--page-screen-glow-x:88%;--page-screen-glow-y:78%;
  --page-button-art:url("./assets/buttons/sqbtn-tickets.svg");
}
body[data-page="info"],body[data-page="syojuo"]{
  --page-screen-hue:var(--sv-hue-info);--page-screen-glow-x:12%;--page-screen-glow-y:76%;
  --page-button-art:url("./assets/buttons/sqbtn-info.svg");
}
body[data-page="kumppanit"],body[data-page="kumppaniaktivoinnit"]{
  --page-screen-hue:var(--sv-hue-tickets);--page-screen-glow-x:84%;--page-screen-glow-y:24%;
  --page-button-art:url("./assets/buttons/sqbtn-tickets.svg");
}
body[data-page="tietoa"],body[data-page="meista"],body[data-page="tiimi"],body[data-page="yhteystiedot"]{
  --page-screen-hue:var(--sv-hue-lineup);--page-screen-glow-x:18%;--page-screen-glow-y:74%;
  --page-button-art:url("./assets/buttons/sqbtn-ohjelma.svg");
}
body[data-page="talent"]{
  --page-screen-hue:var(--sv-hue-tickets);--page-screen-glow-x:78%;--page-screen-glow-y:18%;
  --page-button-art:url("./assets/buttons/sqbtn-tickets.svg");
}
.subpage-main{position:relative;z-index:2;overflow:hidden}
.noscript-page{padding:120px var(--pad);min-height:70vh}
.noscript-page h1{font:400 clamp(42px,12vw,92px)/.95 var(--f-display);color:#fff;text-transform:uppercase}
.skip-link{
  position:fixed;left:16px;top:10px;z-index:1000;padding:10px 14px;
  color:#000;background:var(--teal);font:700 11px/1 var(--f-ui);
  text-transform:uppercase;text-decoration:none;transform:translateY(-150%);
}
.skip-link:focus{transform:none}

.sq-nav .btn[aria-current="page"]{color:var(--teal)}
.sq-nav .btn[aria-current="page"]::before{
  filter:brightness(1.22) drop-shadow(0 0 10px rgba(38,214,227,.42));
}
.mg a[aria-current="page"]{color:var(--teal);padding-left:8px}

.page-hero{
  --screen-hue:var(--page-screen-hue);
  --screen-glow-x:var(--page-screen-glow-x);
  --screen-glow-y:var(--page-screen-glow-y);
  --screen-inset:clamp(10px,1.5vw,24px);
  --screen-corner:clamp(44px,7vw,104px);
  --screen-cut:clamp(8px,.85vw,14px);
  position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(500px,72svh,780px);
  padding:clamp(110px,16vh,180px) max(var(--pad),env(safe-area-inset-right))
          clamp(64px,9vh,110px) max(var(--pad),env(safe-area-inset-left));
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(var(--page-screen-hue),.12) 0 1px,transparent 1px) 50% 0/25% 100%,
    radial-gradient(70% 80% at var(--page-screen-glow-x) var(--page-screen-glow-y),rgba(var(--page-screen-hue),.16),transparent 72%),
    linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.76));
  opacity:.68;
}
.page-hero__screen{
  position:absolute;inset:var(--screen-inset);z-index:0;pointer-events:none;
  clip-path:polygon(
    var(--screen-cut) 0,calc(100% - var(--screen-cut)) 0,
    100% var(--screen-cut),100% calc(100% - var(--screen-cut)),
    calc(100% - var(--screen-cut)) 100%,var(--screen-cut) 100%,
    0 calc(100% - var(--screen-cut)),0 var(--screen-cut));
  border:1px solid rgba(var(--screen-hue),.07);
  background:
    radial-gradient(62% 46% at var(--screen-glow-x) var(--screen-glow-y),rgba(var(--screen-hue),.105),rgba(var(--screen-hue),.032) 38%,transparent 72%),
    linear-gradient(145deg,rgba(var(--screen-hue),.022),transparent 36%,rgba(3,7,14,.055));
  box-shadow:inset 0 0 54px rgba(var(--screen-hue),.018);
}
.page-hero__screen::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.52;
  background:
    linear-gradient(135deg,transparent calc(50% - .7px),rgba(var(--screen-hue),.88) 50%,transparent calc(50% + .7px)) left top / var(--screen-cut) var(--screen-cut) no-repeat,
    linear-gradient(90deg,rgba(var(--screen-hue),.88),transparent) var(--screen-cut) top / var(--screen-corner) 1px no-repeat,
    linear-gradient(180deg,rgba(var(--screen-hue),.88),transparent) left var(--screen-cut) / 1px var(--screen-corner) no-repeat,
    linear-gradient(45deg,transparent calc(50% - .7px),rgba(var(--screen-hue),.62) 50%,transparent calc(50% + .7px)) right top / var(--screen-cut) var(--screen-cut) no-repeat,
    linear-gradient(270deg,rgba(var(--screen-hue),.62),transparent) right var(--screen-cut) top / var(--screen-corner) 1px no-repeat,
    linear-gradient(180deg,rgba(var(--screen-hue),.62),transparent) right top var(--screen-cut) / 1px var(--screen-corner) no-repeat,
    linear-gradient(45deg,transparent calc(50% - .7px),rgba(var(--screen-hue),.48) 50%,transparent calc(50% + .7px)) left bottom / var(--screen-cut) var(--screen-cut) no-repeat,
    linear-gradient(90deg,rgba(var(--screen-hue),.48),transparent) left var(--screen-cut) bottom / var(--screen-corner) 1px no-repeat,
    linear-gradient(0deg,rgba(var(--screen-hue),.48),transparent) left bottom var(--screen-cut) / 1px var(--screen-corner) no-repeat,
    linear-gradient(135deg,transparent calc(50% - .7px),rgba(var(--screen-hue),.76) 50%,transparent calc(50% + .7px)) right bottom / var(--screen-cut) var(--screen-cut) no-repeat,
    linear-gradient(270deg,rgba(var(--screen-hue),.76),transparent) right var(--screen-cut) bottom / var(--screen-corner) 1px no-repeat,
    linear-gradient(0deg,rgba(var(--screen-hue),.76),transparent) right bottom var(--screen-cut) / 1px var(--screen-corner) no-repeat;
  filter:drop-shadow(0 0 7px rgba(var(--screen-hue),.18));
}
.page-hero__copy{width:min(100%,1040px);position:relative;z-index:1}
.page-title{
  margin:0;max-width:11ch;color:#fff;text-transform:uppercase;
  font:400 clamp(44px,12.5vw,116px)/.86 var(--f-display);
  letter-spacing:-.015em;overflow-wrap:normal;word-break:normal;
  text-shadow:0 0 34px rgba(16,104,255,.16);
}
.page-lead{
  max-width:62ch;margin:var(--sp-4) 0 0;color:var(--mist);
  font:500 clamp(16px,2.2vw,22px)/1.5 var(--f-ui);
}
.page-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-5)}
.page-meta span{
  padding:8px 10px;border:1px solid var(--page-line);
  background:var(--page-fill);color:var(--teal);
  font:600 9px/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;
}
.page-hero__code{
  position:absolute;right:max(var(--pad),env(safe-area-inset-right));bottom:var(--sp-4);
  color:rgba(38,214,227,.58);font:400 9px/1 var(--f-mono);
  letter-spacing:.16em;text-transform:uppercase;writing-mode:vertical-rl;
}

.talent-hero-field{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:.72}
.talent-hero-field__grid{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(38,214,227,.12) 1px,transparent 1px) 0 0/84px 100%,
  linear-gradient(180deg,rgba(38,214,227,.08) 1px,transparent 1px) 0 0/100% 84px;
  mask-image:linear-gradient(90deg,transparent,black 14%,black 86%,transparent);
}
.talent-hero-field__beam{position:absolute;width:62%;height:1px;left:14%;top:54%;background:linear-gradient(90deg,transparent,rgba(38,214,227,.52),transparent);box-shadow:0 0 18px rgba(38,214,227,.18);transform:rotate(-14deg);transform-origin:center}
.talent-bit{position:absolute;left:var(--bit-x);top:var(--bit-y);width:var(--bit-size);height:var(--bit-size);border-radius:50%;background:var(--teal);box-shadow:0 0 12px rgba(38,214,227,.8);animation:talentBitFloat 4.8s var(--bit-delay) ease-in-out infinite alternate}
@keyframes talentBitFloat{from{opacity:.16;transform:translate3d(-6px,5px,0) scale(.7)}to{opacity:.9;transform:translate3d(7px,-9px,0) scale(1.35)}}
.talent-hero-object{position:absolute;z-index:1;right:clamp(6%,8vw,14%);top:46%;width:clamp(170px,30vw,350px);aspect-ratio:1;transform:translate3d(0,-50%,0);isolation:isolate}
.talent-hero-object::before{content:"";position:absolute;inset:9%;z-index:-1;border:1px solid rgba(38,214,227,.38);border-radius:50%;background:radial-gradient(circle,rgba(38,214,227,.16),rgba(0,0,0,.72) 58%,transparent 72%);box-shadow:inset 0 0 22px rgba(38,214,227,.18),0 0 28px rgba(38,214,227,.1)}
.talent-hero-canvas{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;opacity:0;transition:opacity .5s ease;pointer-events:none}
.talent-hero-logo-fallback{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;object-fit:contain;opacity:.78;transition:opacity .5s ease}
.talent-hero-object.is-webgl .talent-hero-canvas{opacity:1}
.talent-hero-object.is-webgl .talent-hero-logo-fallback{opacity:.08}
.talent-hero-object.is-webgl:not(.is-webgl-ready) .talent-hero-logo-fallback{opacity:.78}
.talent-hero-object.is-reduced-transparency .talent-hero-canvas{opacity:0}
.talent-hero-object.is-reduced-transparency .talent-hero-logo-fallback{opacity:.86}
.talent-hero-object__orbit{position:absolute;inset:7%;border:1px solid rgba(38,214,227,.34);border-radius:50%;transform:rotateX(68deg) rotateZ(14deg);box-shadow:0 0 20px rgba(38,214,227,.08)}
.talent-hero-tools{display:grid;gap:16px;max-width:620px;margin-top:clamp(22px,4vw,36px)}
.talent-hero-stats{display:flex;flex-wrap:wrap;gap:18px 26px;padding-top:12px;border-top:1px solid rgba(38,214,227,.28);color:rgba(215,226,237,.72);font:600 10px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.talent-hero-stats span{display:inline-flex;align-items:baseline;gap:8px}
.talent-hero-stats strong{color:#fff;font:400 20px/1 var(--f-heading);letter-spacing:-.02em}
.talent-hero-nav{display:flex;flex-wrap:wrap;gap:8px}
.talent-hero-nav a{min-height:44px;display:inline-flex;align-items:center;padding:11px 16px;color:#fff;text-decoration:none;border:1px solid rgba(38,214,227,.32);background:rgba(3,8,16,.56);clip-path:polygon(var(--chamfer-sm) 0,100% 0,100% calc(100% - var(--chamfer-sm)),calc(100% - var(--chamfer-sm)) 100%,0 100%,0 var(--chamfer-sm));font:600 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.talent-hero-nav a:focus-visible{color:var(--teal);border-color:var(--teal);background:var(--page-fill-hover)}

.page-section{
  --screen-hue:var(--page-screen-hue);
  --screen-glow-x:var(--page-screen-glow-x);
  --screen-glow-y:var(--page-screen-glow-y);
  width:100%;max-width:1440px;margin-inline:auto;
}
.page-section--tight{padding-top:var(--sp-4)}
.two-column{display:grid;gap:var(--sp-5)}
.long-copy{max-width:700px}
.long-copy p{margin:0 0 var(--sp-4);font:500 clamp(17px,2vw,22px)/1.6 var(--f-ui);color:var(--mist)}
.long-copy p:first-child{color:#fff}

.feature-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
.feature-card{
  min-height:220px;position:relative;padding:var(--sp-5) var(--sp-4);
  border:1px solid var(--page-line);background:
    linear-gradient(90deg,var(--page-line-strong),transparent) 12px 0/72px 1px no-repeat,
    linear-gradient(180deg,var(--page-line-strong),transparent) 100% 12px/1px 42px no-repeat,
    radial-gradient(90% 100% at 0 0,var(--page-fill),transparent 70%),rgba(1,5,12,.72);
  clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
  box-shadow:inset 0 0 32px rgba(var(--page-screen-hue),.025);
  transition:transform .24s var(--ease),border-color .24s ease,box-shadow .24s ease;
}
.feature-card:hover{transform:translateY(-3px);border-color:var(--page-line-strong);box-shadow:inset 0 0 42px var(--page-fill),0 0 18px rgba(var(--page-screen-hue),.06)}
.feature-card span{display:block;margin-bottom:var(--sp-6);color:var(--teal);font:600 10px/1 var(--f-mono);letter-spacing:.2em}
.feature-card h3{margin:0;color:#fff;font:400 clamp(22px,4vw,31px)/1 var(--f-heading);text-transform:uppercase}
.feature-card p{margin:var(--sp-3) 0 0;max-width:36ch;font-size:14px;line-height:1.65}

.page-cta{
  display:grid;gap:var(--sp-4);align-items:center;margin-top:var(--sp-6);padding:var(--sp-5) var(--sp-4);
  border:1px solid var(--page-line);background:
    linear-gradient(90deg,var(--page-line-strong),transparent) 12px 0/84px 1px no-repeat,
    linear-gradient(180deg,var(--page-line-strong),transparent) 100% 12px/1px 48px no-repeat,
    radial-gradient(72% 130% at 0 0,var(--page-fill),transparent 72%),rgba(0,3,9,.68);
  clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
}
.page-cta h3{margin:0;color:#fff;font:400 clamp(23px,4vw,38px)/1.05 var(--f-heading);text-transform:uppercase}
.page-cta p:not(.label){margin:var(--sp-2) 0 0;font-size:13px}
.page-cta .btn{justify-self:start;--btn-art:var(--page-button-art)}
.page-cta--primary{box-shadow:inset 0 0 38px var(--page-fill)}

.detail-list{border-top:1px solid var(--page-line)}
.detail-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-4);padding:var(--sp-3) 0;border-bottom:1px solid var(--page-line)}
.detail-row span{font:600 10px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.detail-row strong{text-align:right;color:#fff;font:700 12px/1.3 var(--f-ui);text-transform:uppercase}

.copy-grid{display:grid;gap:var(--sp-3)}
.copy-block{padding:0 0 var(--sp-4);border-bottom:1px solid var(--page-line)}
.copy-block h3{margin:0;color:#fff;font:400 clamp(21px,4vw,30px)/1 var(--f-heading);text-transform:uppercase}
.copy-block p{margin:var(--sp-3) 0 0;max-width:50ch;font-size:14px;line-height:1.7}

.faq-list{border-top:1px solid var(--page-line)}
.faq-item{border-bottom:1px solid var(--page-line)}
.faq-item summary{
  position:relative;cursor:pointer;list-style:none;padding:var(--sp-4) 42px var(--sp-4) 0;
  color:#fff;font:700 13px/1.35 var(--f-ui);letter-spacing:.04em;text-transform:uppercase;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:5px;top:50%;transform:translateY(-50%);color:var(--teal);font:400 22px/1 var(--f-mono)}
.faq-item[open] summary::after{content:"−"}
.faq-item p{max-width:66ch;margin:0;padding:0 0 var(--sp-4);font-size:14px;line-height:1.7}

.contact-grid{display:grid;gap:var(--sp-3)}
.contact-card{
  min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--sp-4);
  color:var(--mist);text-decoration:none;border:1px solid var(--page-line);
  background:
    linear-gradient(90deg,var(--page-line-strong),transparent) 12px 0/72px 1px no-repeat,
    linear-gradient(180deg,var(--page-line-strong),transparent) 100% 12px/1px 42px no-repeat,
    radial-gradient(90% 100% at 0 0,var(--page-fill),transparent 70%),rgba(1,5,12,.74);
  clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
  transition:transform .24s var(--ease),border-color .24s ease,box-shadow .24s ease;
}
.contact-card:hover{transform:translateY(-3px);border-color:var(--page-line-strong);box-shadow:inset 0 0 38px var(--page-fill)}
.contact-card span{margin-bottom:auto;color:var(--teal);font:600 9px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase}
.contact-card strong{color:#fff;font:400 clamp(20px,4vw,29px)/1.1 var(--f-heading);text-transform:uppercase;overflow-wrap:anywhere}
.contact-card i{margin-top:var(--sp-3);font:600 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.social-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
.social-grid a{
  min-height:72px;display:flex;align-items:center;justify-content:center;padding:var(--sp-3);
  color:#fff;text-decoration:none;border:1px solid var(--page-line);background:
    linear-gradient(90deg,var(--page-line-strong),transparent) 9px 0/46px 1px no-repeat,var(--page-fill);
  clip-path:polygon(var(--chamfer-sm) 0,100% 0,100% calc(100% - var(--chamfer-sm)),calc(100% - var(--chamfer-sm)) 100%,0 100%,0 var(--chamfer-sm));
  font:600 11px/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
.social-grid a:hover{color:var(--teal);border-color:var(--page-line-strong);box-shadow:inset 0 0 26px var(--page-fill-hover)}
.art-link{position:absolute;inset:var(--fy) var(--fx);z-index:4;clip-path:polygon(var(--fcx) 0,100% 0,100% calc(100% - var(--fcy)),calc(100% - var(--fcx)) 100%,0 100%,0 var(--fcy))}
.art-link:focus-visible{outline:2px solid var(--teal);outline-offset:-5px}
.team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
.team-card{min-height:150px;padding:var(--sp-4);border:1px solid var(--page-line);background:linear-gradient(90deg,var(--page-line-strong),transparent) 12px 0/60px 1px no-repeat,radial-gradient(90% 100% at 0 0,var(--page-fill),transparent 70%),rgba(1,5,12,.72);clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer))}
.team-card span{color:var(--teal);font:600 9px/1 var(--f-mono);letter-spacing:.16em}
.team-card h3{margin:var(--sp-5) 0 0;color:#fff;font:400 clamp(18px,3vw,25px)/1.05 var(--f-heading);text-transform:uppercase}
.team-card p{margin:var(--sp-2) 0 0;font-size:12px;line-height:1.5}
.artist-profile{display:grid;gap:var(--sp-5);align-items:start}
.artist-profile__portrait{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:#05070d;clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer))}
.artist-profile__portrait::after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid var(--page-line-strong);background:linear-gradient(180deg,var(--page-fill),transparent 55%,rgba(0,0,0,.36))}
.artist-profile__portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:brightness(1.15) contrast(.98)}
.artist-profile__copy .detail-list{margin:var(--sp-5) 0}
.talent-roster{padding-top:clamp(44px,8vw,96px)}
.talent-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:var(--sp-5)}
.talent-section-head .label{margin:0 0 12px}
.talent-section-head .sect-title{margin:0;max-width:none;font-size:clamp(38px,7vw,76px);line-height:.9}
.talent-section-head__note{max-width:22ch;margin:0 0 4px;color:rgba(215,226,237,.54);font:600 9px/1.5 var(--f-mono);letter-spacing:.12em;text-align:right;text-transform:uppercase}
.talent-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
.talent-card{position:relative;display:grid;grid-template-columns:minmax(126px,.44fr) minmax(0,1fr);min-height:312px;border:1px solid var(--page-line);background:radial-gradient(90% 120% at 0 0,var(--page-fill),transparent 72%),rgba(0,0,0,.74);clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));overflow:hidden;transition:transform .24s var(--ease),border-color .24s ease,box-shadow .24s ease}
.talent-card:focus-within{transform:translateY(-3px);border-color:var(--page-line-strong);box-shadow:inset 0 0 42px var(--page-fill),0 0 20px rgba(var(--sv-hue-tickets),.06)}
.talent-card__media{position:relative;min-width:0;border-right:1px solid var(--page-line);background:#000;overflow:hidden}
.talent-card__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.08) 26%,rgba(0,0,0,.2) 54%,rgba(0,0,0,.88) 100%)}
.talent-card__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:brightness(.82) contrast(1.06) saturate(.9);transition:transform .5s var(--ease),filter .3s ease}
.talent-card__media-readout{position:absolute;z-index:1;inset:14px 12px auto;display:flex;justify-content:space-between;gap:8px;color:rgba(215,226,237,.7);font:600 8px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.talent-card__media-readout span:first-child{color:var(--teal)}
.talent-card__body{display:flex;flex-direction:column;min-width:0;padding:clamp(18px,3vw,30px)}
.talent-card__tag-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:var(--sp-3)}
.talent-card__tag{margin:0;color:var(--teal);font:600 8px/1.45 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.talent-card__index{color:rgba(215,226,237,.45);font:600 9px/1 var(--f-mono);letter-spacing:.14em}
.talent-card h3{margin:0;color:#fff;font:400 clamp(26px,7vw,48px)/.92 var(--f-heading);letter-spacing:-.02em;text-transform:uppercase;overflow-wrap:normal;word-break:normal;hyphens:none}
.talent-card__name{color:#fff;text-decoration:none;text-decoration-thickness:1px;text-underline-offset:7px}
.talent-card__name:focus-visible{color:var(--teal);text-decoration:underline}
.talent-card__bio{max-width:35ch;margin:var(--sp-3) 0 0;color:rgba(215,226,237,.78);font:500 13px/1.5 var(--f-ui);text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.talent-card__meta{display:flex;justify-content:space-between;gap:var(--sp-3);margin-top:auto;padding-top:var(--sp-5);border-top:1px solid var(--page-line)}
.talent-card__meta span,.talent-card__meta strong{font:600 9px/1.35 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.talent-card__meta span{color:rgba(215,226,237,.52)}.talent-card__meta strong{color:#fff;text-align:right}
.talent-card__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-3)}
.talent-link{min-height:44px;display:inline-flex;align-items:center;gap:7px;padding:10px 12px;color:#fff;text-decoration:none;border:1px solid var(--page-line);background:var(--page-fill);clip-path:polygon(var(--chamfer-sm) 0,100% 0,100% calc(100% - var(--chamfer-sm)),calc(100% - var(--chamfer-sm)) 100%,0 100%,0 var(--chamfer-sm));font:600 9px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.talent-link:focus-visible{color:var(--teal);border-color:var(--page-line-strong);background:var(--page-fill-hover)}
.talent-booking{display:block;margin-top:var(--sp-8);padding:var(--sp-6) var(--sp-4);border:1px solid var(--page-line-strong);background:radial-gradient(80% 140% at 0 0,rgba(var(--sv-hue-tickets),.14),transparent 70%),rgba(0,0,0,.78);clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));box-shadow:inset 0 0 48px rgba(var(--sv-hue-tickets),.04)}
.talent-booking>.label{margin:0 0 12px}
.talent-booking>.sect-title{margin:0 0 var(--sp-5);max-width:none;font-size:clamp(38px,7vw,76px);line-height:.9}
.talent-booking-form{max-width:980px}
.talent-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.talent-form-grid label{display:grid;gap:8px;min-width:0}
.talent-form-grid label span{color:var(--teal);font:600 9px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.talent-form-grid input,.talent-form-grid textarea{width:100%;border:1px solid var(--page-line);border-radius:0;padding:13px 12px;color:#fff;background:rgba(0,0,0,.82);font:500 16px/1.35 var(--f-ui);outline:none;transition:border-color .2s ease,box-shadow .2s ease}
.talent-form-grid textarea{resize:vertical;min-height:130px}
.talent-form-grid input:focus,.talent-form-grid textarea:focus{border-color:var(--teal);box-shadow:0 0 0 2px rgba(38,214,227,.12)}
.talent-form-field--wide{grid-column:1/-1}
.talent-form-submit{margin-top:var(--sp-4);min-height:48px;--btn-art:var(--page-button-art)}
.talent-form-status{min-height:1.35em;margin:12px 0 0;color:var(--teal);font:600 10px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.talent-form-status__link{color:#fff;text-decoration:underline;text-underline-offset:4px}
.talent-media{padding-top:var(--sp-7)}
.talent-media-grid,.talent-detail-media{display:grid;gap:clamp(34px,6vw,88px)}
.talent-media-panel{min-width:0}
.talent-media-panel>.sect-title{margin:0 0 var(--sp-4);font-size:clamp(28px,5vw,56px);line-height:.95;text-wrap:balance}
.talent-media-list{border-top:1px solid var(--page-line)}
.talent-media-row{display:block;padding:var(--sp-3) 0;color:#fff;border-bottom:1px solid var(--page-line);transition:transform .22s var(--ease),background-color .22s ease}
.talent-media-row__head{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;min-height:48px}
.talent-media-row__idx{color:var(--teal);font:600 10px/1 var(--f-mono);letter-spacing:.14em}
.talent-media-row__copy{display:grid;gap:5px;min-width:0}.talent-media-row__copy strong{font:650 clamp(13px,1.7vw,17px)/1.2 var(--f-ui)}.talent-media-row__copy small{color:rgba(215,226,237,.62);font:400 9px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;overflow-wrap:normal;word-break:normal;hyphens:none}
.talent-media-row__type{display:inline-flex;align-items:center;min-height:44px;padding:10px 8px;box-sizing:border-box;color:var(--teal);font:600 9px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;text-decoration:none}
.talent-media-row__type:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:5px}
.talent-media-player{margin:var(--sp-3) 0 0 34px;border-top:1px solid var(--page-line)}
.talent-media-row__state{margin:10px 0 0 34px;color:rgba(215,226,237,.58);font:600 9px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.talent-media-player summary{display:flex;justify-content:space-between;align-items:center;min-height:48px;color:var(--teal);cursor:pointer;font:600 9px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;list-style:none}
.talent-media-player summary::-webkit-details-marker{display:none}
.talent-media-player summary span{font-size:16px;font-weight:400}
.talent-media-player[open] summary span{transform:rotate(45deg)}
.talent-media-player__frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#05070d;border:1px solid var(--page-line)}
.talent-media-player__frame iframe{display:block;width:100%;height:100%;border:0}
.talent-profile{display:grid;gap:var(--sp-6);align-items:start}
.talent-profile__portrait{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:#05070d;clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer))}
.talent-profile__portrait::after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid var(--page-line-strong);background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.52))}
.talent-profile__portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:brightness(.9) contrast(1.05) saturate(.82)}
.talent-profile__copy{min-width:0}.talent-profile__copy>.sect-title{margin:0 0 var(--sp-4)}
.talent-back-link{min-height:44px;display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--sp-4);color:var(--teal);font:600 10px/1.2 var(--f-mono);letter-spacing:.1em;text-decoration:none;text-transform:uppercase}
.talent-back-link:hover,.talent-back-link:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:5px}
.talent-profile__platform{display:inline-flex;min-height:44px;align-items:center;margin-top:var(--sp-4);color:var(--teal);font:600 10px/1.3 var(--f-mono);letter-spacing:.08em;text-decoration:underline;text-underline-offset:5px;text-transform:uppercase}
.talent-detail-media{padding-top:var(--sp-7)}
.talent-detail-media .talent-media-panel{min-width:0}
.foot-pages{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:var(--sp-4)}
.foot-pages a{color:rgba(215,226,237,.72);font:600 9px/1 var(--f-mono);letter-spacing:.1em;text-decoration:none;text-transform:uppercase}
.foot-pages a:hover{color:var(--teal)}

@media (min-width:720px){
  .feature-grid,.contact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .copy-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5) var(--sp-6)}
  .page-cta{grid-template-columns:minmax(0,1fr) auto;padding:var(--sp-6)}
  .page-cta .btn{justify-self:end}
  .social-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .team-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
  .artist-profile{grid-template-columns:minmax(260px,.7fr) minmax(0,1fr);gap:clamp(40px,7vw,100px)}
  .talent-profile{grid-template-columns:minmax(260px,.7fr) minmax(0,1fr);gap:clamp(40px,7vw,100px)}
  .talent-card{grid-template-columns:minmax(156px,.46fr) minmax(0,1fr);min-height:336px}
  .talent-card--featured{grid-column:span 2;grid-template-columns:minmax(230px,.56fr) minmax(0,1fr);min-height:392px}
  .talent-card--featured .talent-card__body{padding:var(--sp-5)}
  .talent-card--featured h3{font-size:clamp(36px,5vw,68px)}
  .talent-media-grid,.talent-detail-media{grid-template-columns:repeat(2,minmax(0,1fr))}
  .talent-booking{padding:var(--sp-7)}
}

@media (min-width:1024px){
  .two-column{grid-template-columns:minmax(0,.9fr) minmax(360px,1fr);gap:clamp(64px,9vw,140px);align-items:start}
  .two-column .sect-head{position:sticky;top:110px}
  .feature-card{min-height:280px;padding:var(--sp-6) var(--sp-5)}
  .team-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .page-hero__code{bottom:var(--sp-6)}
  .talent-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
}

@media (hover:hover) and (pointer:fine){
  .talent-card:hover{transform:translateY(-3px);border-color:var(--page-line-strong);box-shadow:inset 0 0 42px var(--page-fill),0 0 20px rgba(var(--sv-hue-tickets),.06)}
  .talent-card:hover .talent-card__image{transform:scale(1.035);filter:brightness(.9) contrast(1.06) saturate(.96)}
  .talent-card__name:hover,.talent-link:hover{color:var(--teal);text-decoration:underline}
  .talent-link:hover{border-color:var(--page-line-strong);background:var(--page-fill-hover)}
  .talent-media-row:hover{transform:translateX(8px);background:linear-gradient(90deg,var(--page-fill),transparent 72%)}
  .talent-media-row__type:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
}

@media (max-width:560px){
  .page-hero{--screen-inset:8px;--screen-corner:46px;--screen-cut:8px}
  body[data-page="talent"] .page-hero{min-height:clamp(500px,64svh,680px)}
  .talent-hero-object{right:50%;top:39%;width:min(60vw,220px);transform:translate3d(50%,-50%,0)}
  .talent-hero-tools{max-width:calc(100vw - 2 * var(--pad))}
  .subpage-body .page-cta .btn{min-height:42px;padding:11px 20px;font-size:11px}
}

@media (max-width:340px){
  .talent-hero-object{top:36%;width:min(56vw,196px)}
}

@media (max-width:430px){
  .page-title{max-width:100%;font-size:clamp(34px,10vw,44px);overflow-wrap:anywhere;word-break:break-word}
  body[data-page="talent"] .page-title,body[data-page="talent-artist"] .page-title{overflow-wrap:normal;word-break:normal;hyphens:none}
  .page-meta span{font-size:8px;letter-spacing:.09em}
  .page-hero__code{display:none}
  .detail-row{grid-template-columns:1fr;gap:6px}
  .detail-row strong{text-align:left}
  .social-grid{grid-template-columns:1fr}
  .talent-media-panel>.sect-title{font-size:clamp(28px,8vw,42px);letter-spacing:-.02em}
  .talent-section-head{align-items:flex-start;flex-direction:column;gap:12px}
  .talent-section-head__note{margin:0;text-align:left}
  .talent-card{grid-template-columns:minmax(112px,.44fr) minmax(0,1fr);min-height:304px}
  .talent-card__body{padding:14px}
  .talent-card__meta{align-items:start;flex-direction:column;gap:6px}
  .talent-card__meta strong{text-align:left}
  .talent-card__bio{-webkit-line-clamp:2;font-size:12px;line-height:1.45}
  .talent-card__media-readout{inset:12px 9px auto;font-size:7px}
  .talent-media-grid,.talent-detail-media{grid-template-columns:1fr}
  .talent-media-row__head{grid-template-columns:28px minmax(0,1fr);gap:var(--sp-2)}
  .talent-media-row__type{grid-column:2;justify-self:start}
  .talent-media-player{margin-left:28px}
  .talent-media-row__state{margin-left:28px}
  .talent-form-grid{grid-template-columns:1fr}
  .talent-form-field--wide{grid-column:auto}
}

@media (prefers-reduced-motion:reduce){
  .talent-bit{animation:none}
  .talent-hero-canvas,.talent-hero-logo-fallback{transition:none}
  .talent-media-row{transition:none}
}

@media (prefers-reduced-transparency:reduce){
  .talent-hero-object::before{background:#000;box-shadow:none}
  .talent-card,.talent-booking{background:#000;box-shadow:none}
  .talent-card__media::after{background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.86))}
}

/* Section separators have been removed site-wide. Keeping the shared class
   hidden also covers generated subpages without leaving stray vertical gaps. */
.sep{display:none!important}

/* ── shared route handoff ─────────────────────────────────────
   The click gets two brief hue rails; the next page settles four pixels into
   place. Chromium upgrades this to a cross-document View Transition while
   the class-based entrance keeps the same rhythm elsewhere. The persistent
   nav and corner frame cross-fade independently so the chrome feels fixed. */
@view-transition{navigation:auto}
.nav{view-transition-name:sv-route-nav}
main{view-transition-name:sv-route-main}
.sv-intro-frame{view-transition-name:sv-route-frame}

::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(sv-route-main){animation:svRouteNativeOut .14s ease-in both;mix-blend-mode:normal}
::view-transition-new(sv-route-main){animation:svRouteNativeIn .24s var(--ease) both;mix-blend-mode:normal}
::view-transition-old(sv-route-nav),::view-transition-old(sv-route-frame){animation:svRouteChromeOut .13s ease-in both;mix-blend-mode:normal}
::view-transition-new(sv-route-nav),::view-transition-new(sv-route-frame){animation:svRouteChromeIn .22s ease-out both;mix-blend-mode:normal}
@keyframes svRouteNativeOut{to{opacity:.72;transform:translateY(-4px)}}
@keyframes svRouteNativeIn{from{opacity:.72;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes svRouteChromeOut{to{opacity:.82}}
@keyframes svRouteChromeIn{from{opacity:.82}to{opacity:1}}

body.sv-route-leaving::before,body.sv-route-leaving::after,
body.sv-route-entering::before,body.sv-route-entering::after{
  content:"";position:fixed;left:0;right:0;z-index:1300;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--page-screen-hue,var(--sv-hue-tickets)),.22) 12%,rgba(var(--page-screen-hue,var(--sv-hue-tickets)),.94) 50%,rgba(var(--page-screen-hue,var(--sv-hue-tickets)),.22) 88%,transparent);
  box-shadow:0 0 8px rgba(var(--page-screen-hue,var(--sv-hue-tickets)),.34);
}
body.sv-route-leaving::before,body.sv-route-entering::before{top:calc(50% - 6px);transform-origin:left center}
body.sv-route-leaving::after,body.sv-route-entering::after{top:calc(50% + 6px);transform-origin:right center}
body.sv-route-leaving::before{animation:svRouteRailIn .17s ease-out both}
body.sv-route-leaving::after{animation:svRouteRailIn .17s .025s ease-out both}
body.sv-route-entering::before{animation:svRouteRailOut .24s ease-in both}
body.sv-route-entering::after{animation:svRouteRailOut .24s .025s ease-in both}
body.sv-route-leaving:not(.sv-route-native) main{opacity:.72;transform:translateY(-4px);transition:opacity .14s ease-in,transform .17s ease-in}
body.sv-route-entering main{animation:svRouteNativeIn .24s var(--ease) both}
@keyframes svRouteRailIn{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes svRouteRailOut{from{opacity:1;transform:scaleX(1)}to{opacity:0;transform:scaleX(0)}}

/* Subpage surfaces use the same route hue as their surrounding HUD screen.
   Labels stay cyan and icons stay white: the page family lives in the rails,
   low-opacity glass and button frame rather than tinting all content. */
.subpage-body .label{border-bottom-color:var(--page-line)}
.subpage-body .tk,.subpage-body .ii{
  border-color:var(--page-line);
  background:
    linear-gradient(90deg,var(--page-line-strong),transparent) 10px 0/58px 1px no-repeat,
    radial-gradient(90% 130% at 0 0,var(--page-fill),transparent 72%),rgba(1,5,12,.7);
  box-shadow:inset 0 0 28px rgba(var(--page-screen-hue),.02);
}
.subpage-body .tk:hover,.subpage-body .ii:hover{
  border-color:var(--page-line-strong);
  background:
    linear-gradient(90deg,var(--page-line-strong),transparent) 10px 0/76px 1px no-repeat,
    radial-gradient(90% 130% at 0 0,var(--page-fill-hover),transparent 72%),rgba(1,5,12,.74);
  box-shadow:inset 0 0 34px var(--page-fill);
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root),
  ::view-transition-old(sv-route-main),::view-transition-new(sv-route-main),
  ::view-transition-old(sv-route-nav),::view-transition-new(sv-route-nav),
  ::view-transition-old(sv-route-frame),::view-transition-new(sv-route-frame){animation-duration:.001ms!important}
  body.sv-route-leaving::before,body.sv-route-leaving::after,
  body.sv-route-entering::before,body.sv-route-entering::after{display:none}
  body.sv-route-leaving main,body.sv-route-entering main{animation:none;transform:none;opacity:1;transition:none}
}