/* GTV Lab homepage layer. Loads after lab.css on the homepage only. */
@property --glow{syntax:'<percentage>';inherits:false;initial-value:0%}
:root{--glass:rgb(18 23 19 / .58);--glass-line:rgb(214 239 127 / .16);--ease-out:cubic-bezier(.16,1,.3,1);--mono:ui-monospace,'SFMono-Regular','Cascadia Mono',Consolas,monospace}
html{background:var(--bg)}
body{overflow-x:clip}
::selection{background:var(--lime);color:#111}

/* Header floats over the scene as frosted glass. */
.site-header{position:fixed;inset:0 0 auto;max-width:none;border-bottom-color:transparent;background:linear-gradient(to bottom,rgb(16 19 17 / .7),transparent);transition:background .4s,border-color .4s,padding .4s var(--ease-out)}
.site-header.is-scrolled{background:rgb(16 19 17 / .72);border-bottom-color:var(--glass-line);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);padding-block:16px}
.site-header nav a{position:relative}
.site-header nav a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--lime);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)}
.site-header nav a:hover::after{transform:scaleX(1);transform-origin:left}

/* Stage: full-bleed WebGL hero. */
.stage{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;isolation:isolate;overflow:hidden;background:radial-gradient(120% 70% at 30% 62%,#2a3a1f 0%,transparent 55%),linear-gradient(#141a15,#0c0f0d 70%)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;opacity:0;transition:opacity 1.6s ease}
.gl-ready .stage canvas{opacity:1}
.stage-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgb(12 15 13 / .88) 0%,rgb(12 15 13 / .5) 38%,transparent 65%),linear-gradient(to top,var(--bg) 0%,transparent 22%)}
.stage .hero{padding-top:150px;padding-bottom:40px;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:70px}
.hero h1{font-size:clamp(4.4rem,8.4vw,9.4rem);line-height:.9;margin-bottom:30px;text-wrap:balance}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .line>*{display:inline-block;animation:rise 1.1s var(--ease-out) both}
.hero h1 .line:nth-child(2)>*{animation-delay:.12s}
.hero h1 em{background:linear-gradient(100deg,var(--lime) 20%,#f4ffd2 45%,var(--lime) 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise 1.1s .12s var(--ease-out) both,sheen 6s 1.4s ease-in-out infinite}
.hero-copy>*:not(h1){animation:fade-up .9s var(--ease-out) both}
.hero-copy>.eyebrow{animation-delay:0s}.hero-copy>.hero-lede{animation-delay:.3s}.hero-copy>.hero-detail{animation-delay:.4s}.hero-copy>.hero-actions{animation-delay:.5s}
.eyebrow{font-family:var(--mono);letter-spacing:.18em}
.status-dot{box-shadow:0 0 0 0 rgb(214 239 127 / .6);animation:pulse 2.2s infinite}
.hero-lede{font-size:clamp(1.1rem,1.5vw,1.35rem)!important;color:var(--ink)!important;line-height:1.55!important}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.button{position:relative;overflow:hidden;border-radius:999px;padding-inline:26px;transition:background .2s,translate .35s var(--ease-out),box-shadow .3s}
.button:hover{box-shadow:0 10px 40px -8px rgb(214 239 127 / .55)}
.button.ghost{background:rgb(240 241 232 / .04);color:var(--ink);border-color:rgb(240 241 232 / .2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.button.ghost:hover{border-color:var(--lime);color:var(--lime);background:rgb(214 239 127 / .06);box-shadow:none}

/* Glass concept card with tilt. */
.hero-art{perspective:1200px;animation:fade-up 1.2s .35s var(--ease-out) both}
.glass{position:relative;padding:12px;border-radius:22px;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 40px 120px -30px #000,inset 0 1px 0 rgb(255 255 255 / .06);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .5s var(--ease-out)}
.glass::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgb(214 239 127 / .14),transparent 45%);z-index:2}
.hero-art img{border:0;border-radius:14px;aspect-ratio:1.45;height:auto;object-position:33% 0}
.hero-art figcaption{padding:14px 6px 4px;font-family:var(--mono);font-size:10px;letter-spacing:.04em}

/* HUD under the hero. */
.hud{display:flex;justify-content:space-between;gap:20px;padding-block:22px 34px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--glass-line)}
.hud b{color:var(--lime);font-weight:600;font-variant-numeric:tabular-nums;font-size:13px}
.hud .cue{animation:bob 2.4s ease-in-out infinite}

/* Tool marquee. */
.tool-strip{overflow:hidden;gap:0;padding-block:0;border-color:var(--glass-line)}
.tool-strip>.label{flex:none;padding:22px 26px 22px 0;border-right:1px solid var(--glass-line);font-family:var(--mono)}
.marquee{flex:1;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 28s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:inline-flex;align-items:center;gap:26px;padding:22px 13px;font-family:var(--display);font-size:1.5rem;font-weight:500;letter-spacing:.02em;white-space:nowrap}
.marquee-track span::after{content:'✦';font-size:.7rem;color:var(--lime);margin-left:13px}
.tool-strip>a{flex:none;padding:22px 0 22px 26px;border-left:1px solid var(--glass-line)}
.tool-strip>a:hover{color:var(--lime)}

/* Project cards: depth, spotlight, gradient border. */
.project-grid{gap:30px}
.project-card{position:relative;padding:14px 14px 26px;border-radius:24px;background:linear-gradient(180deg,rgb(255 255 255 / .03),transparent 40%),var(--panel);border:1px solid var(--line);transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease-out),border-color .3s,box-shadow .4s}
.project-card::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgb(214 239 127 / .7),transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
.project-card:hover{box-shadow:0 30px 80px -30px rgb(0 0 0 / .9),0 0 0 1px rgb(214 239 127 / .08)}
.project-card:hover::before{opacity:1}
.project-card .card-art{border-radius:14px}
.project-card .card-art::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgb(10 13 11 / .55),transparent 45%);pointer-events:none}
.project-card .image-label{z-index:1;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:rgb(16 19 17 / .7);font-family:var(--mono)}
.project-card:hover img{transform:scale(1.05)}
.card-art img{transition:transform .9s var(--ease-out)}
.project-card .card-meta,.project-card h3,.project-card>p{padding-inline:10px}
.card-meta{font-family:var(--mono)}
.project-card h3 span{transition:transform .35s var(--ease-out)}
.project-card:hover h3 span{transform:translate(4px,-4px)}

/* Manifesto: outlined kinetic type. */
.manifesto{border-color:var(--glass-line);position:relative}
.manifesto h2{line-height:.95}
.manifesto h2 .outline{color:transparent;-webkit-text-stroke:1.5px rgb(240 241 232 / .55)}
.manifesto h2 span:not(.outline){color:var(--lime);text-shadow:0 0 60px rgb(214 239 127 / .35)}

/* Journal rows: sweep highlight. */
.journal-row{position:relative;padding-inline:18px;border-radius:4px;isolation:isolate;transition:padding .4s var(--ease-out)}
.journal-row::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(214 239 127 / .08),transparent 70%);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.journal-row:hover{padding-inline:28px 10px}
.journal-row:hover::before{transform:scaleX(1)}
.journal-date{font-family:var(--mono)}
.journal-row>span:last-child{transition:transform .35s var(--ease-out)}
.journal-row:hover>span:last-child{transform:translate(4px,-4px)}

/* Music banner: living equaliser. */
.music-banner{border-radius:28px;border:1px solid var(--line);background:radial-gradient(80% 120% at 85% 50%,rgb(214 239 127 / .1),transparent 60%),var(--panel);overflow:hidden;position:relative}
.wave-large i{border-radius:4px;transform-origin:center;animation:eq 1.6s ease-in-out infinite alternate;animation-delay:calc(var(--i,0) * -.13s);box-shadow:0 0 18px rgb(214 239 127 / .25)}
.ad-space{border-radius:18px}

/* Reveal choreography (only once JS confirms it can show content). */
.js-home [data-reveal]{opacity:0;translate:0 40px;filter:blur(6px);transition:opacity 1s var(--ease-out),translate 1s var(--ease-out),filter 1s var(--ease-out);transition-delay:var(--d,0s)}
.js-home [data-reveal].is-in{opacity:1;translate:0 0;filter:none}

footer{border-top-color:var(--glass-line)}

@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes sheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgb(214 239 127 / 0)}100%{box-shadow:0 0 0 0 rgb(214 239 127 / 0)}}
@keyframes bob{50%{transform:translateY(4px)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes eq{0%{transform:scaleY(.35)}100%{transform:scaleY(1)}}




@media(max-width:1100px){.stage .hero{gap:40px;padding-top:130px}}
@media(max-width:760px){
  .site-header{background:rgb(16 19 17 / .78);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom-color:var(--glass-line)}
  .site-header nav{background:rgb(16 19 17 / .96)}
  .stage{min-height:auto}
  .stage .hero{grid-template-columns:1fr;padding-top:120px;gap:36px}
  .stage-shade{background:linear-gradient(to bottom,rgb(12 15 13 / .8),rgb(12 15 13 / .55) 45%,var(--bg) 100%)}
  .hero h1{font-size:clamp(4.2rem,19vw,6.5rem)}
  .hero-actions .button{flex:1 1 auto;justify-content:center;gap:14px}
  .hud{flex-wrap:wrap;gap:10px 18px;font-size:10px}.hud .cue{display:none}
  .tool-strip{flex-wrap:nowrap}.tool-strip>.label{display:none}.tool-strip>a{padding-left:16px;margin-left:0}
  .marquee-track span{font-size:1.25rem}
  .project-card{padding:10px 10px 22px;border-radius:20px}
  .journal-row{padding-inline:6px}.journal-row:hover{padding-inline:6px}
  .music-banner{border-radius:22px}
}
@media(prefers-reduced-motion:reduce){
  .js-home [data-reveal]{opacity:1;translate:none;filter:none}
  .marquee-track{animation:none}
  .glass,.project-card{transform:none}
}