/* VIGIL — storyworld site. Layout + motion system modelled on a scroll-driven
   tableau site; all copy, art, brand marks and sound are original. */

:root {
  --black: #000;
  --white: #fff;
  --lime: #c6ff4a;
  --lav: #9d90ec;
  --lav-dark: #7b6cd8;
  --lav-card: #8f7fbc;
  --error: #b83e35;
  --line-light: hsla(0, 0%, 100%, .2);
  --line-dark: rgba(0, 0, 0, .1);
  --menu-width: 67px;
  --menu-height: 51px;
  --menu-pad: 20px;
  --menu-radius: 10px;
  --radius: 1rem;
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
  --f-head: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --f-display: "Unbounded", "Inter Tight", sans-serif;
  --vh: 1vh;
}

@media (max-width: 767px) {
  :root { --menu-width: 0px; --menu-height: 4.1rem; --menu-pad: 0px; --menu-radius: 0px; --radius: .5rem; }
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(6.4px, .625vw, 12px); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: none; }
@media (max-width: 767px) { html { font-size: clamp(8.5333px, 2.6667vw, 27.28px); } }
html, body { margin: 0; }
body { background: #fff; color: #000; font-family: var(--f-body); overflow-x: hidden; }
body.is-locked { overflow: hidden; height: 100%; }
button { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; letter-spacing: inherit; padding: 0; text-transform: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
p, h1, h2, h3 { margin: 0; font-weight: inherit; }
hr { border: 0; margin: 0; }
::selection { background: var(--lime); color: #000; }

/* ---------- type scale ---------- */
.t-h0 { font-family: var(--f-head); font-size: 8rem; font-weight: 800; letter-spacing: -.075em; line-height: .87; text-transform: uppercase; }
.t-h1 { font-family: var(--f-head); font-size: 5.2rem; font-weight: 800; letter-spacing: -.07em; line-height: .9; text-transform: uppercase; }
.t-h2 { font-family: var(--f-head); font-size: 3.6rem; font-weight: 700; letter-spacing: -.06em; line-height: .85; text-transform: uppercase; }
.t-body1 { font-family: var(--f-body); font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.t-body2 { font-family: var(--f-body); font-size: 1.8rem; font-weight: 400; line-height: 1.5; }
.t-cap2 { font-family: var(--f-mono); font-size: .9rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; text-transform: uppercase; }
.t-cap3 { font-family: var(--f-mono); font-size: 1rem; font-weight: 400; letter-spacing: -.02em; line-height: 1.1; text-transform: uppercase; }
.t-cap4 { font-family: var(--f-mono); font-size: 11px; font-weight: 400; letter-spacing: -.02em; line-height: 1; text-transform: uppercase; }
.t-btn { font-family: var(--f-mono); font-size: 1.1rem; font-weight: 500; letter-spacing: -.02em; line-height: .85; text-transform: uppercase; }
.t-display { font-family: var(--f-display); font-weight: 900; letter-spacing: -.06em; line-height: .87; text-transform: uppercase; }
@media (max-width: 767px) {
  .t-h0 { font-size: 4.8rem; }
  .t-h1 { font-size: 2.5rem; line-height: .95; }
  .t-h2 { font-size: 2.8rem; }
  .t-body1 { font-size: 1.2rem; line-height: 1.2; }
  .t-body2 { font-size: 1.5rem; line-height: 1.3; }
  .t-cap2 { font-size: .8rem; }
}

.d-only { }
.m-only { display: none !important; }
@media (max-width: 767px) { .d-only { display: none !important; } .m-only { display: revert !important; } }

.full { position: absolute; inset: 0; }
.sq-dot { display: inline-block; width: .5rem; height: .5rem; min-width: .5rem; background: currentColor; margin-right: 9px; position: relative; top: -.1em; }

/* hacky text: spacer keeps the layout, overlay types in */
.hk { position: relative; display: inline-block; }
.hk > .hk-sp { opacity: 0; white-space: pre-line; }
.hk > .hk-an { position: absolute; left: 0; top: 0; white-space: pre-line; width: 100%; }
.hk.block { display: block; }

/* link-hover: coloured block slides under text */
.lh { display: inline-block; overflow: hidden; position: relative; vertical-align: top; }
.lh > .lh-bg { position: absolute; inset: 0; transform: translateX(-101%); transition: transform .45s var(--ease-out-expo); background: var(--lh-bg, #fff); }
.lh > .lh-c { position: relative; display: inline-block; transition: color .3s; }
.lh:hover > .lh-bg, .lh.is-hover > .lh-bg { transform: translateX(0); }
.lh:hover > .lh-c, .lh.is-hover > .lh-c { color: var(--lh-fg, #000); }

/* ============ PRELOADER ============ */
#preloader { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; background: #fff; color: #000; text-transform: uppercase; cursor: none; transition: opacity .1s; }
#preloader.is-gone { opacity: 0; pointer-events: none; }
#preloader .bar { position: relative; width: 87rem; height: 1px; background: #e1e1e1; font-family: var(--f-mono); font-size: 1.1rem; font-weight: 500; line-height: .8; }
#preloader .bar .progress { position: absolute; inset: 0; background: #000; transform-origin: left center; transform: scaleX(0); }
#preloader .details { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 1rem; }
#preloader .details .left { display: flex; align-items: center; }
#preloader .details .icon { margin-right: .75rem; width: 1rem; }
#preloader .cta { position: absolute; left: 0; top: 0; transform: translate(50vw, 75vh); pointer-events: none; }
#preloader .cta .ring { position: relative; transform: translate(-50%, -50%); width: 5.4rem; height: 5.4rem; }
#preloader .cta .ring svg.r { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 9s linear infinite; }
#preloader .cta .ring .btn-audio { position: absolute; inset: 0; margin: auto; color: #000; }
#preloader .cta .copy { position: absolute; left: 50%; top: 100%; transform: translate(-50%, .7rem); white-space: nowrap; font-family: var(--f-mono); font-size: .75rem; color: #7a4a2e; }
#preloader .cta.is-hidden { opacity: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 767px) {
  #preloader .bar { width: 18rem; }
  #preloader .filenames { display: none; }
  #preloader .cta { top: auto; bottom: 5rem; left: 50%; transform: none; }
  #preloader .cta .ring { transform: translate(-50%, 0); }
}

/* audio bars button */
.btn-audio { display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer; }
.btn-audio .ln { width: 1px; height: 13px; margin: 0 1px; background: currentColor; transform-origin: center; transform: scaleY(.25); }

/* ============ INTRO ============ */
#intro { position: fixed; inset: 0; z-index: 390; pointer-events: none; }
#intro canvas, #intro svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#intro .intro-bg { position: absolute; inset: 0; background: #fff; }
#intro.is-done { display: none; }

/* ============ STAGE ============ */
#stage { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: #fff; }
#stage .layer { position: absolute; inset: 0; }
.sec { position: absolute; inset: 0; pointer-events: none; visibility: hidden; }
.sec.is-on { visibility: visible; }
.sec .pe { pointer-events: auto; }
.sec-inner { position: absolute; inset: 0; padding: calc(var(--menu-pad) + var(--menu-height)) var(--menu-pad) var(--menu-pad) calc(var(--menu-pad) + var(--menu-width)); }

/* background image stack (story backdrops) */
#stageBg { z-index: 0; }
#cardWrap { z-index: 2; }
#bgStack { z-index: 3; }
#planes { z-index: 4; }
#landingWarp { z-index: 5; }
#bgStack .bgi { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; will-change: opacity, transform; }
#bgStack .bgi.peaks { animation: drift 40s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.08) translate3d(-1.5%, 0, 0); } to { transform: scale(1.12) translate3d(1.5%, -1%, 0); } }
#bgStack .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0) 35%, rgba(0,0,0,.15)); opacity: 0; }

/* persistent 3D card */
#cardWrap { position: absolute; inset: 0; perspective: 2200px; perspective-origin: 50% 50%; pointer-events: none; }
#pcard { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; will-change: transform; }
#pcard .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; border-radius: var(--pc-radius, 0px); }
#pcard .face .img { position: absolute; inset: 0; background-size: cover; background-position: center 38%; }
#pcard .back { transform: rotateY(180deg); }
#pcard .back .img { opacity: 0; }
#pcard .back .img.is-cur { opacity: 1; }
#pcard .back .colcard { background: var(--lav-card); }
#pcard .face .gloss { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.22) 48%, rgba(255,255,255,0) 60%); opacity: 0; mix-blend-mode: screen; }
#pcard .face .tint { position: absolute; inset: 0; background: var(--lav); mix-blend-mode: color; opacity: 0; }

#landingWarp { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
#landingWarp .ch { position: absolute; inset: -4%; background-size: cover; background-position: center 38%; mix-blend-mode: screen; }
#landingWarp .scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }

/* lavender planes for gallery entry */
#planes .plane { position: absolute; left: 50%; top: 50%; will-change: transform; }

/* fx canvas for pill transitions */
#pillFx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }

/* ---------- LANDING ---------- */
#sLanding { color: #fff; z-index: 10; }
#sLanding .inner { position: absolute; inset: calc(var(--menu-pad) + var(--menu-height)) var(--menu-pad) var(--menu-pad) calc(var(--menu-pad) + var(--menu-width)); padding: 3.6rem 4rem; cursor: grab; }
#sLanding .inner:active { cursor: grabbing; }
.landing-desc { width: 25rem; }
.landing-titles { position: absolute; right: 5.4rem; bottom: 4rem; text-align: right; }
.landing-title { display: block; font-family: var(--f-head); font-weight: 800; font-size: 13.6rem; line-height: .82; letter-spacing: -.075em; text-transform: uppercase; white-space: nowrap; position: relative; will-change: transform; }
.landing-title .sub { position: absolute; left: -3.8rem; top: 1.1rem; font-family: var(--f-mono); font-size: .9rem; font-weight: 500; letter-spacing: 0; }
.landing-title .dot { color: #fff; }
.landing-title.l1 { margin-right: 24rem; }
.landing-title.l2 { margin-right: 0; }
.landing-title.l3 { margin-right: 13rem; }
.scroll-ind { position: absolute; right: 4.4rem; bottom: 3.2rem; display: flex; align-items: center; gap: 1.4rem; }
.scroll-ind .arrow { position: relative; width: 1.4rem; height: 1.4rem; transform: rotate(45deg); }
.scroll-ind .arrow .l1 { position: absolute; right: 0; bottom: 0; width: 1px; height: 100%; background: currentColor; transform-origin: bottom; }
.scroll-ind .arrow .l2 { position: absolute; right: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform-origin: right; }
@media (max-width: 767px) {
  #sLanding .inner { padding: 2rem 1.6rem; }
  .landing-desc { width: 70%; }
  .landing-titles { right: 1.6rem; bottom: 6rem; }
  .landing-title { font-size: 5.4rem; }
  .landing-title.l1 { margin-right: 6rem; } .landing-title.l3 { margin-right: 3rem; }
  .landing-title .sub { display: none; }
}

/* ---------- shared blocks/lines ---------- */
.gline { position: absolute; background: var(--line-dark); }
.theme-dk .gline { background: var(--line-light); }
.gline.h { height: 1px; left: 0; right: 0; transform-origin: left center; }
.gline.v { width: 1px; top: 0; bottom: 0; transform-origin: center top; }
.cap { display: flex; align-items: center; font-family: var(--f-mono); font-size: .9rem; font-weight: 500; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.1; }
.cap .sq-dot { width: .5rem; height: .5rem; }
.title1 .t-h1 .ln { display: block; overflow: hidden; }
.title1 .t-h1 .ln > span { display: block; will-change: transform; }
.title1 .t-h1 .ln:first-child > span { text-indent: 3.6rem; }
.title1 .cap { position: absolute; margin-top: .5rem; }

/* card with corner cut (clip via JS path) */
.ccard { position: absolute; overflow: hidden; background: #222; }
.ccard .img { position: absolute; inset: 0; background-size: cover; background-position: center; }

/* ---------- PROJECT INTRO ---------- */
#sIntro { color: #000; z-index: 8; }
#sIntro .grid { position: absolute; inset: calc(var(--menu-pad) + var(--menu-height)) var(--menu-pad) var(--menu-pad) calc(var(--menu-pad) + var(--menu-width)); display: grid; grid-template-columns: 1fr 1fr 34.7%; grid-template-rows: 1fr 1.35fr; }
#sIntro .b-tl { grid-column: 1 / 3; grid-row: 1; position: relative; padding: 3.6rem 4rem; }
#sIntro .b-bl { grid-column: 1 / 3; grid-row: 2; position: relative; display: grid; grid-template-columns: 1fr 1fr; }
#sIntro .b-r { grid-column: 3; grid-row: 1 / 3; position: relative; padding: 3.6rem 3.6rem; }
#sIntro .b-bl .c1 { position: relative; padding: 0 4rem 3.6rem; display: flex; flex-direction: column; justify-content: space-between; }
#sIntro .b-bl .c2 { position: relative; padding: 0 4rem 3.6rem; display: flex; flex-direction: column; justify-content: flex-end; }
#sIntro .img1 { position: relative; width: 21rem; aspect-ratio: 16/9; margin-top: 0; }
#sIntro .img1 .ccard { inset: 0; }
#sIntro .img1 .cap { position: absolute; left: 0; top: calc(100% + .8rem); }
#sIntro .hero-slot { position: relative; width: 29rem; aspect-ratio: 1; margin-left: auto; }
#sIntro .hero-slot .cap { position: absolute; left: 0; bottom: calc(100% + .8rem); }
#sIntro .desc { width: 22rem; }
#sIntro .media { position: absolute; inset: 3.6rem 3.6rem 3.6rem 3.6rem; }
#sIntro .media .ccard { inset: 0; }
#sIntro .media .cap { position: absolute; left: 1.6rem; bottom: 1.4rem; color: #fff; z-index: 3; }
.btn-play { position: absolute; left: 1.6rem; bottom: 3.6rem; width: 6.1rem; height: 6.1rem; color: #fff; z-index: 3; pointer-events: auto; }
.btn-play svg { width: 100%; height: 100%; overflow: visible; }
.btn-play .ring { transition: transform .6s var(--ease-out-expo); transform-origin: center; }
.btn-play:hover .ring { transform: rotate(90deg) scale(1.08); }
@media (max-width: 767px) {
  #sIntro .grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; }
  #sIntro .b-tl { grid-column: 1 / 3; padding: 2rem 1.6rem; }
  #sIntro .b-r { grid-column: 2; grid-row: 2; padding: 1.6rem; }
  #sIntro .b-bl { grid-column: 1 / 3; grid-row: 3; }
  #sIntro .img1 { width: 13rem; }
  #sIntro .hero-slot { width: 14rem; }
  #sIntro .b-bl .c1, #sIntro .b-bl .c2 { padding: 1.6rem; }
  #sIntro .media { inset: 1.6rem; }
}

/* ---------- STORY ---------- */
#sStory { color: #fff; z-index: 8; }
#sStory .story-inner { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
#sStory .row { position: relative; margin-left: calc(var(--menu-pad) + var(--menu-width)); margin-right: var(--menu-pad); }
#sStory .row1 { height: 100vh; padding-top: calc(var(--menu-pad) + var(--menu-height)); display: grid; grid-template-columns: 1fr 25rem; }
#sStory .row1 .rb { position: relative; padding: 3.6rem 4rem; }
#sStory .terminal { white-space: pre-line; opacity: .9; }
#sStory .row2 { height: 70vh; display: grid; grid-template-columns: 1fr 25rem; }
#sStory .row2 .rb { position: relative; padding: 3.6rem 4rem; }
#sStory .coords { white-space: pre-line; }
#sStory .degrees { width: 9rem; margin-top: 2rem; opacity: .8; }
#sStory .row3 { height: 80vh; display: grid; grid-template-columns: 25rem 1fr; }
#sStory .row3 .rb { position: relative; padding: 3.6rem 4rem; }
#sStory .row3 .title1 { margin-top: 12rem; }
#sStory .row4 { height: 40vh; display: grid; grid-template-columns: 25rem 1fr; }
#sStory .row4 .rb { position: relative; padding: 3.6rem 4rem; }
#sStory .gline { background: var(--line-light); }
@media (max-width: 767px) {
  #sStory .row1, #sStory .row2, #sStory .row3, #sStory .row4 { grid-template-columns: 1fr; }
  #sStory .row1 .rb, #sStory .row2 .rb, #sStory .row3 .rb, #sStory .row4 .rb { padding: 2rem 1.6rem; }
  #sStory .row3 .title1 { margin-top: 2rem; }
}

/* ---------- SIGIL (silhouettes) ---------- */
#sSigil { z-index: 9; color: #fff; }
#sSigil .mark { position: absolute; left: 50%; top: 50%; width: 22rem; transform: translate(-50%, -50%); }
#sSigil .mark svg { width: 100%; height: auto; overflow: visible; }
#sSigil .cap { position: absolute; left: calc(var(--menu-pad) + var(--menu-width) + 4rem); bottom: calc(var(--menu-pad) + 3.6rem); }

/* ---------- COLLECTION INTRO ---------- */
#sCollect { color: #000; z-index: 8; }
#sCollect .grid { position: absolute; inset: calc(var(--menu-pad) + var(--menu-height)) var(--menu-pad) var(--menu-pad) calc(var(--menu-pad) + var(--menu-width)); display: grid; grid-template-columns: 24rem 1fr 30rem; }
#sCollect .b-left { position: relative; }
#sCollect .count { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); font-family: var(--f-display); font-weight: 900; font-size: 22rem; letter-spacing: -.07em; line-height: .8; white-space: nowrap; }
#sCollect .count-foot { position: absolute; left: 3rem; right: 2rem; bottom: 2.8rem; display: flex; align-items: center; gap: .8rem; }
#sCollect .count-foot img { width: 1.4rem; }
#sCollect .b-mid { position: relative; display: flex; align-items: center; justify-content: center; }
#sCollect .hero-slot { width: 42rem; aspect-ratio: 1; position: relative; }
#sCollect .b-right { position: relative; display: grid; grid-template-rows: 1fr 1fr; }
#sCollect .rt, #sCollect .rb2 { position: relative; padding: 3.2rem 3rem; }
#sCollect .crystal-wrap { position: absolute; inset: 3.2rem 3rem 5rem 3rem; }
#sCollect .crystal-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#sCollect .measure { position: absolute; right: 0; top: 0; bottom: 0; width: 7rem; }
#sCollect .face-wrap { position: absolute; inset: 3.2rem 3rem 5rem 3rem; }
#sCollect .face-wrap .ccard { inset: 0; }
#sCollect .rt .cap, #sCollect .rb2 .cap { position: absolute; left: 3rem; bottom: 2.4rem; }
#colCardArt { position: absolute; inset: 0; }
#colPop { position: fixed; z-index: 7; pointer-events: none; opacity: 0; clip-path: polygon(0 -40%, 100% -40%, 100% 27px, calc(38% + 26px) 27px, calc(38% - 5px) 1px, 0 1px); }
#colPop .cut { position: absolute; left: 0; right: 0; bottom: 0; height: 118%; background-size: cover; background-position: center bottom; }
#colCardArt .cut { position: absolute; left: 0; right: 0; bottom: 0; height: 118%; background-size: cover; background-position: center bottom; }
@media (max-width: 767px) {
  #sCollect .grid { grid-template-columns: 8rem 1fr; grid-template-rows: 1fr auto; }
  #sCollect .count { font-size: 9rem; }
  #sCollect .b-right { grid-column: 1 / 3; grid-template-rows: none; grid-template-columns: 1fr 1fr; height: 16rem; }
  #sCollect .hero-slot { width: 22rem; }
  #sCollect .count-foot { display: none; }
}

/* ---------- GALLERY ---------- */
#sGallery { color: #000; z-index: 8; }
#sGallery .grid { position: absolute; inset: calc(var(--menu-pad) + var(--menu-height)) var(--menu-pad) var(--menu-pad) calc(var(--menu-pad) + var(--menu-width)); }
#sGallery .b-tl { position: absolute; left: 0; top: 0; width: 60%; height: 27%; padding: 3.6rem 4rem; }
#sGallery .b-tr { position: absolute; right: 0; top: 0; width: 40%; height: 27%; padding: 3.6rem 4rem 3.6rem 3rem; display: grid; grid-template-columns: 10rem 1fr; gap: 2rem; }
#sGallery .body { max-width: 30rem; }
#sGallery .carousel { position: absolute; left: 0; right: 0; top: 27%; bottom: 0; perspective: 1500px; perspective-origin: 50% 45%; }
#sGallery .ring { position: absolute; left: 50%; top: 45%; transform-style: preserve-3d; will-change: transform; }
#sGallery .gitem { position: absolute; left: 0; top: 0; width: 17rem; height: 23rem; margin: -11.5rem 0 0 -8.5rem; backface-visibility: hidden; border-radius: .6rem; overflow: hidden; background-size: cover; background-position: center; will-change: transform, filter; }
#sGallery .gitem .shine { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 30%); }
#sGallery .arrow { position: absolute; left: 50%; width: 1.4rem; transform: translateX(-50%); }
#sGallery .arrow.up { top: calc(45% - 14.2rem); }
#sGallery .arrow.dn { top: calc(45% + 12.8rem); transform: translateX(-50%) rotate(180deg); }
#sGallery .gline.mid { top: 45%; }
@media (max-width: 767px) {
  #sGallery .b-tl { width: 100%; height: auto; padding: 2rem 1.6rem; }
  #sGallery .b-tr { top: 12rem; width: 100%; height: auto; padding: 0 1.6rem; grid-template-columns: 1fr; }
  #sGallery .b-tr .cap { display: none; }
  #sGallery .carousel { top: 40%; }
  #sGallery .gitem { width: 12rem; height: 16rem; margin: -8rem 0 0 -6rem; }
}

/* ---------- TABLEAUX ---------- */
#sTab { z-index: 9; color: #fff; }
.tab { position: absolute; inset: 0; visibility: hidden; }
.tab.is-on { visibility: visible; }
.tab .tcard { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; transform-origin: 50% 50%; will-change: transform, clip-path; overflow: hidden; background: #1a1430; }
.tab .tart { position: absolute; inset: -3%; background-size: cover; background-position: center; will-change: transform, filter; transition: filter .6s; }
.tab .tfx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tab .tvig { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(8, 4, 24, .55)); pointer-events: none; }
.tab .story { position: absolute; left: 50%; bottom: 5.4rem; transform: translateX(-50%); text-align: center; width: 44rem; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.tab .story .cap { justify-content: center; margin-bottom: 1.4rem; }
.tab .story .cap .sq-dot { margin: 0 .8rem; }
.tab .story .t-body1 .ln { display: block; overflow: hidden; }
.tab .story .t-body1 .ln > span { display: block; }
.tab .hitzone { position: absolute; inset: 0; pointer-events: auto; cursor: none; touch-action: pan-y; }

/* second layer (click & hold) */
.sd { position: absolute; inset: 0; pointer-events: none; }
.sd .sd-dim { position: absolute; inset: 0; background: #07040f; opacity: 0; }
.sd .sd-title { position: absolute; left: calc(var(--menu-pad) + var(--menu-width) + 1.6rem); top: 50%; height: 0; display: flex; align-items: flex-start; }
.sd .sd-title .tt { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: rotate(-90deg) translate(-50%, 0); white-space: nowrap; font-family: var(--f-display); font-weight: 900; font-size: 13.2rem; letter-spacing: -.06em; line-height: .78; text-transform: uppercase; color: #fff; }
.sd .sd-title .tt .ch { display: inline-block; will-change: transform, opacity; }
.sd .sd-title .tcap { position: absolute; left: 11.6rem; top: 0; transform: translateY(-50%); white-space: nowrap; }
.sd .blk { position: absolute; border: 1px solid rgba(255,255,255,.28); opacity: 0; }
.sd .blk .bh { position: absolute; left: 1.2rem; top: 1rem; right: 1.2rem; display: flex; justify-content: space-between; }
.sd .blk .bf { position: absolute; left: 1.2rem; bottom: 1rem; right: 1.2rem; display: flex; justify-content: space-between; opacity: .8; }
.sd .blk canvas { position: absolute; left: 1.2rem; right: 1.2rem; top: 3.4rem; bottom: 3.4rem; width: calc(100% - 2.4rem); height: calc(100% - 6.8rem); }
.sd .blk .crn { position: absolute; width: 8px; height: 8px; border-color: #fff; border-style: solid; }
.sd .blk .crn.a { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.sd .blk .crn.b { right: -1px; top: -1px; border-width: 1px 1px 0 0; }
.sd .blk .crn.c { left: -1px; bottom: -1px; border-width: 0 0 1px 1px; }
.sd .blk .crn.d { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.sd .blk.b1 { right: 7rem; top: 12rem; width: 30rem; height: 22rem; }
.sd .blk.b2 { left: 28rem; bottom: 9rem; width: 26rem; height: 24rem; }
.sd .blk.b3 { right: 11rem; bottom: 8rem; width: 22rem; height: 25rem; }
.sd .loc { position: absolute; right: 7rem; top: 7.4rem; white-space: pre-line; opacity: 0; text-align: left; width: 30rem; }
.sd .dots { position: absolute; left: 44%; top: 20%; width: 26rem; height: 16rem; opacity: 0; background-image: radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.4px); background-size: 1.4rem 1.4rem; }
@media (max-width: 767px) {
  .sd .sd-title .tt { font-size: 6rem; }
  .sd .sd-title .tcap { left: 5.4rem; }
  .sd .blk.b1 { right: 1.6rem; top: 8rem; width: 16rem; height: 13rem; }
  .sd .blk.b2 { left: 7rem; bottom: 7rem; width: 15rem; height: 14rem; }
  .sd .blk.b3, .sd .loc, .sd .dots { display: none; }
  .tab .story { width: 90%; bottom: 3rem; }
}

/* hold cursor */
#holdCursor { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .3s; color: #fff; }
#holdCursor.is-on { opacity: 1; }
#holdCursor .hc { position: absolute; transform: translate(-50%, -50%); width: 7.6rem; height: 7.6rem; }
#holdCursor svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#holdCursor .lbl { position: absolute; left: 50%; top: calc(100% + .9rem); transform: translateX(-50%); white-space: nowrap; }
#holdCursor .lbl2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; }
#holdCursor .prog { transition: none; }
#holdCursor.is-holding .lbl { opacity: 0; }
#holdCursor.is-holding .lbl2 { opacity: 1; }

/* ---------- LAUNCH ---------- */
#sLaunch { color: #000; z-index: 9; }
#sLaunch .grid { position: absolute; inset: calc(var(--menu-pad) + var(--menu-height)) var(--menu-pad) var(--menu-pad) calc(var(--menu-pad) + var(--menu-width)); overflow: hidden; }
#sLaunch .big { position: absolute; left: 0; right: 0; top: 3.4rem; text-align: center; text-transform: uppercase; overflow: hidden; padding: .06em 0 .03em; font-family: var(--f-display); font-weight: 900; font-size: 19.4rem; letter-spacing: -.035em; line-height: .8; white-space: nowrap; }
#sLaunch .big .ch { display: inline-block; will-change: transform; }
#sLaunch .gline.h1 { top: 33%; }
#sLaunch .lcards { position: absolute; left: 50%; top: 52%; width: 0; height: 0; }
#sLaunch .lcard { position: absolute; pointer-events: auto; cursor: pointer; will-change: transform; transition: filter .5s; }
#sLaunch .lcard .ccard { inset: 0; }
#sLaunch .lcard .cap { position: absolute; left: 1.2rem; bottom: 1rem; color: #fff; z-index: 3; }
#sLaunch .lcard.c1 { width: 42rem; height: 40rem; left: -26rem; top: -25rem; }
#sLaunch .lcard.c2 { width: 16rem; height: 34rem; left: 18rem; top: -17rem; }
#sLaunch .lcard.c3 { width: 32rem; height: 17rem; left: -18rem; top: 14rem; }
#sLaunch.is-hovering .lcard:not(.is-hover) { filter: brightness(.6) saturate(.7); }
#sLaunch .ask { position: absolute; left: 4rem; bottom: 3.6rem; width: 24rem; }
#sLaunch .cta { position: absolute; right: 4rem; bottom: 3.6rem; }
@media (max-width: 767px) {
  #sLaunch .big { font-size: 4.6rem; top: 3rem; }
  #sLaunch .lcard.c1 { width: 22rem; height: 21rem; left: -13rem; top: -12rem; }
  #sLaunch .lcard.c2 { width: 8rem; height: 17rem; left: 9.5rem; top: -9rem; }
  #sLaunch .lcard.c3 { width: 16rem; height: 9rem; left: -9rem; top: 7.5rem; }
  #sLaunch .ask { left: 1.6rem; width: 70%; bottom: 2rem; }
  #sLaunch .cta { display: none; }
}

/* main button (cut corner) */
.btn-main { position: relative; display: inline-flex; align-items: center; gap: .9rem; height: 3.6rem; padding: 0 1.8rem 0 1.4rem; color: #fff; pointer-events: auto; }
.btn-main .bgsvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.btn-main .bgsvg path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.btn-main .fill { position: absolute; inset: 0; background: currentColor; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 0 100%); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out-expo); }
.btn-main:hover .fill { transform: scaleX(1); }
.btn-main .lbl { position: relative; z-index: 1; transition: color .3s; }
.btn-main svg.ico { position: relative; z-index: 1; width: 1.1rem; }
.btn-main:hover .lbl, .btn-main:hover svg.ico { color: #000; mix-blend-mode: normal; }
.btn-main.dark { color: #000; }
.btn-main.dark:hover .lbl, .btn-main.dark:hover svg.ico { color: #fff; }

/* ============ FRAME ============ */
#frame { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
#frame .fl { position: absolute; inset: 0; --c: #000; --cl: var(--line-dark); color: var(--c); }
#frame .fl.theme-dk { --c: #fff; --cl: var(--line-light); }
#frame .pad { position: absolute; inset: var(--menu-pad); }
#frame .outline { position: absolute; inset: 0; border: 1px solid var(--cl); border-radius: var(--menu-radius); }
#frame .top { position: absolute; left: 0; right: 0; top: 0; height: var(--menu-height); display: flex; }
#frame .top .burger { width: var(--menu-width); height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: auto; border: 1px solid transparent; border-radius: var(--menu-radius) 0 0 0; transition: border-color .3s; }
#frame .top .burger:hover { border-color: var(--c); }
#frame .top .burger svg { width: 27px; stroke: currentColor; }
#frame .top .bar { flex: 1; position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
#frame .top .bar .prog { position: absolute; inset: 0; overflow: hidden; }
#frame .top .bar .prog .fill { position: absolute; inset: 0; background: currentColor; opacity: .06; transform-origin: left; transform: scaleX(0); }
#frame .top .bar .prog .edge { position: absolute; inset: 0; border-right: 1px solid var(--cl); transform-origin: left; transform: translateX(-100%); }
#frame .top .hline { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--cl); }
#frame .sub { position: relative; display: flex; gap: 3.4rem; font-family: var(--f-mono); font-size: 1rem; text-transform: uppercase; }
#frame .sub button { display: flex; align-items: center; pointer-events: auto; opacity: .5; transition: opacity .3s; }
#frame .sub button .sq-dot { opacity: 0; transition: opacity .3s; }
#frame .sub button.is-active { opacity: 1; }
#frame .sub button.is-active .sq-dot { opacity: 1; }
#frame .sub button:hover { opacity: 1; }
#frame .left { position: absolute; left: 0; top: 0; bottom: 0; width: var(--menu-width); }
#frame .left .vline { position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: var(--cl); }
#frame .left .mark { position: absolute; left: 50%; top: 50%; width: 39px; transform: translate(-50%, -50%); pointer-events: auto; }
#frame .left .mark svg { width: 100%; fill: currentColor; }
#frame .left .bottom { position: absolute; left: 0; right: 0; bottom: 0; }
#frame .left .bottom button { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; pointer-events: auto; }
#frame .left .bottom .btn-console svg { width: 18px; stroke: currentColor; fill: none; }
#frame .fl.is-hidden { visibility: hidden; }
@media (max-width: 767px) {
  #frame .left, #frame .sub { display: none; }
  #frame .top .burger { width: 45px; border-right: 1px solid var(--cl); }
  #frame .top .mwm { display: block !important; width: 5.4rem; margin: 0 auto; fill: currentColor; }
}
#frame .top .mwm { display: none; }

.enlist { position: fixed; right: var(--menu-pad); top: var(--menu-pad); z-index: 110; height: var(--menu-height); display: flex; align-items: center; padding: 0 3rem 0 3rem; background: #fff; color: #000; font-family: var(--f-mono); font-weight: 600; font-size: 1.3rem; letter-spacing: .02em; clip-path: polygon(1.2rem 0, 100% 0, 100% 100%, 0 100%, 0 1.2rem); border-radius: 0 var(--menu-radius) 0 0; transition: background .3s, color .3s; }
.enlist:hover { background: var(--lime); }
@media (max-width: 767px) { .enlist { height: var(--menu-height); padding: 0 1.4rem; font-size: 1.1rem; } }

/* ============ MENU ============ */
#menu { position: fixed; inset: 0; z-index: 500; pointer-events: none; visibility: hidden; }
#menu.is-open { pointer-events: auto; visibility: visible; }
#menu .underlay { position: absolute; inset: 0; background: rgba(255,255,255,.72); opacity: 0; backdrop-filter: blur(0px); }
#menu .panel { position: absolute; left: var(--menu-pad); top: var(--menu-pad); bottom: var(--menu-pad); width: 60.7rem; min-width: 540px; background: #000; color: #fff; border-radius: var(--menu-radius); display: grid; grid-template-columns: 1fr var(--menu-width); overflow: hidden; clip-path: inset(0 100% 0 0 round var(--menu-radius)); }
#menu .col { position: relative; display: flex; flex-direction: column; }
#menu .sec-nav { flex: 1; display: grid; grid-template-columns: 13rem 1fr; padding: 3.2rem 0 0 2.2rem; }
#menu .sec-nav > .cap { align-self: start; margin-top: 1.2rem; }
#menu .nav { display: flex; flex-direction: column; align-items: flex-start; }
#menu .nav .it { position: relative; display: flex; align-items: flex-start; font-family: var(--f-head); font-weight: 800; font-size: 5.4rem; letter-spacing: -.07em; line-height: 1.04; text-transform: uppercase; --lh-bg: var(--lime); --lh-fg: #000; }
#menu .nav .it .lh { padding: 0 .6rem; }
#menu .nav .it.is-active .lh > .lh-bg { transform: none; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 0 100%); }
#menu .nav .it.is-active .lh > .lh-c { color: #000; }
#menu .nav .it .extra { font-family: var(--f-mono); font-size: .9rem; font-weight: 500; letter-spacing: 0; line-height: 1.1; color: var(--lime); margin: .6rem 0 0 .6rem; white-space: pre-line; opacity: 0; }
#menu .nav .it.is-active .extra, #menu .nav .it:hover .extra { opacity: 1; }
#menu .sec-row { display: grid; grid-template-columns: 13rem 1fr; padding: 2.2rem 0 2.2rem 2.2rem; border-top: 1px solid rgba(255,255,255,.2); font-family: var(--f-mono); font-size: 1rem; }
#menu .sec-row .links { display: flex; flex-direction: column; gap: .7rem; font-size: 1.1rem; }
#menu .sec-row .links a { --lh-bg: #fff; --lh-fg: #000; }
#menu .sec-row.misc { padding: 2rem 0 2rem 2.2rem; font-size: .9rem; opacity: .75; }
#menu .rail { border-left: 1px solid rgba(255,255,255,.2); position: relative; }
#menu .rail .close { position: absolute; left: 0; right: 0; top: 0; height: var(--menu-height); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(255,255,255,.2); }
#menu .rail .close svg { width: 16px; stroke: #fff; }
#menu .rail .mark { position: absolute; left: 50%; top: 50%; width: 39px; transform: translate(-50%, -50%); fill: #fff; }
#menu .rail .btn-audio { position: absolute; left: 0; right: 0; bottom: 0; height: var(--menu-width); color: #fff; }
#menu .wblocks { position: absolute; inset: 0; pointer-events: none; }
#menu .wblocks i { position: absolute; background: #fff; }
@media (max-width: 767px) {
  #menu .panel { inset: 0; width: auto; min-width: 0; grid-template-columns: 1fr; border-radius: 0; }
  #menu .rail { position: absolute; right: 0; top: 0; width: 45px; border: 0; height: 4.1rem; }
  #menu .rail .mark, #menu .rail .btn-audio { display: none; }
  #menu .sec-nav { grid-template-columns: 1fr; padding-top: 6rem; }
  #menu .sec-nav > .cap { display: none; }
  #menu .nav .it { font-size: 4.2rem; }
}

/* ============ CONSOLE ============ */
#console { position: fixed; inset: 0; z-index: 600; display: none; align-items: center; justify-content: center; }
#console.is-open { display: flex; }
#console .bgc { position: absolute; inset: 0; background: rgba(4, 2, 12, .72); backdrop-filter: blur(6px); }
#console .win { position: relative; width: min(74rem, 92vw); height: min(52rem, 80vh); background: #07070a; color: var(--lime); border: 1px solid rgba(198,255,74,.35); font-family: var(--f-mono); font-size: 1.25rem; line-height: 1.5; display: flex; flex-direction: column; clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 2rem, 100% 100%, 2rem 100%, 0 calc(100% - 2rem)); }
#console .hd { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 1.8rem; border-bottom: 1px solid rgba(198,255,74,.25); text-transform: uppercase; font-size: 1rem; }
#console .hd button { color: var(--lime); font-size: 1rem; }
#console .out { flex: 1; overflow: auto; padding: 1.6rem 1.8rem; white-space: pre-wrap; }
#console .out .dim { opacity: .55; }
#console .out .wht { color: #fff; }
#console .inrow { display: flex; gap: .8rem; padding: 1.2rem 1.8rem 1.6rem; border-top: 1px solid rgba(198,255,74,.25); }
#console input { flex: 1; background: none; border: 0; outline: 0; color: #fff; font: inherit; caret-color: var(--lime); text-transform: uppercase; }
#console .scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(198,255,74,.03) 0 1px, transparent 1px 3px); }

/* ============ SCROLL + FOOTER ============ */
#scroller { position: relative; z-index: 5; pointer-events: none; }
#spacer { width: 1px; }
#footer { position: relative; background: #000; color: #fff; pointer-events: auto; z-index: 6; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; }
#footer .wordmark { flex: 1; display: flex; align-items: flex-end; }
#footer .top { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid rgba(255,255,255,.2); }
#footer .item { position: relative; padding: 2.4rem 2.4rem 3.2rem; min-height: 18.6rem; border-right: 1px solid rgba(255,255,255,.2); display: flex; flex-direction: column; gap: 2.4rem; }
#footer .item:last-child { border-right: 0; }
#footer .item .head { font-family: var(--f-mono); font-size: 1rem; text-transform: uppercase; display: flex; align-items: center; }
#footer .item.misc .console-preview { font-family: var(--f-mono); font-size: 1rem; line-height: 1.25; text-transform: uppercase; white-space: pre-line; opacity: .8; cursor: pointer; }
#footer .item.nav .links { display: flex; flex-direction: column; font-family: var(--f-mono); font-size: 1.2rem; line-height: 1.35; text-transform: uppercase; align-items: flex-start; }
#footer .item.nav .links a { --lh-bg: #fff; --lh-fg: #000; }
#footer .item.nav .links a.is-active .lh-bg { transform: none; }
#footer .item.nav .links a.is-active .lh-c { color: #000; }
#footer .item.social .links { display: flex; flex-direction: column; font-family: var(--f-mono); font-size: 1.2rem; line-height: 1.35; align-items: flex-start; }
#footer .item.social .links a { --lh-bg: #fff; --lh-fg: #000; }
#footer .item.press .desc { font-family: var(--f-mono); font-size: 1.2rem; text-transform: uppercase; line-height: 1.35; }
#footer .item.press .desc .muted { opacity: .55; }
#footer .item.press .email { cursor: copy; }
#footer .item.press .email .copied { color: var(--lime); margin-left: .6rem; opacity: 0; transition: opacity .3s; }
#footer .item.press .email.is-copied .copied { opacity: 1; }
#footer .wordmark { padding: 6rem 1.6rem 1rem; }
#footer .wordmark svg { width: 100%; height: auto; display: block; fill: #fff; overflow: visible; }
#footer .wordmark svg .lt { transform-box: fill-box; transform-origin: 50% 100%; }
#footer .bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1.6rem 2.4rem 2.2rem; font-family: var(--f-mono); font-size: .9rem; text-transform: uppercase; }
#footer .bottom .center { display: flex; gap: 3.4rem; }
#footer .bottom .right { text-align: right; }
.btn-region { display: inline-flex; align-items: center; gap: .6rem; }
.btn-region svg { width: .9rem; stroke: currentColor; fill: none; }
@media (max-width: 767px) {
  #footer .top { grid-template-columns: 1fr 1fr; }
  #footer .item { min-height: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
  #footer .item.misc { display: none; }
  #footer .bottom { grid-template-columns: 1fr; gap: 1.2rem; text-align: center; }
  #footer .bottom .center { justify-content: center; gap: 1.6rem; }
  #footer .bottom .right, #footer .bottom .left { text-align: center; }
}

/* toast */
#toast { position: fixed; left: 50%; bottom: 3rem; z-index: 700; transform: translate(-50%, 1rem); background: #000; color: var(--lime); font-family: var(--f-mono); font-size: 1.1rem; text-transform: uppercase; padding: 1rem 1.6rem; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; }
#toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* video overlay (teaser) */
#vover { position: fixed; inset: 0; z-index: 650; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.92); }
#vover.is-open { display: flex; }
#vover canvas { width: min(128rem, 92vw); aspect-ratio: 16 / 9; background: #000; }
#vover .x { position: absolute; right: 3rem; top: 3rem; color: #fff; font-family: var(--f-mono); font-size: 1.2rem; }
#vover .vcap { position: absolute; left: 50%; bottom: 3rem; transform: translateX(-50%); color: #fff; font-family: var(--f-mono); font-size: 1rem; text-transform: uppercase; opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  #bgStack .bgi.peaks { animation: none; }
  #preloader .cta .ring svg.r { animation: none; }
}