/* ══════════════════ FX LAYER — shaders + scroll choreography ══════════════════
   Linked after the inline <style> so it wins cascade ties. Visual changes are
   gated on html.fx-on / html.has-gl (set by fx.js) so the page degrades to the
   original design if a CDN or WebGL fails. */

/* ── Lenis smooth scroll ── */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── Scroll progress ── */
.fx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1000;
  background: var(--acc); transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* ── Shader canvases ── */
.fx-gl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity 1.2s ease;
}
.fx-gl.ready { opacity: 1; }
.has-gl #hero .hero-ambient { display: none; }
.has-gl #contact::before, .has-gl #contact::after, .has-gl #contact .cp { display: none; }

/* ── HERO — full viewport, pinned stage ── */
html.fx-on #hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
html.fx-on #hero .hero-inner { margin-top: auto; margin-bottom: auto; padding-top: 4vh; }
html.fx-on .hero-name { font-size: clamp(56px, 9.6vw, 148px); line-height: 1.04; }
#hero .hero-inner, #hero .hero-bar { will-change: transform, opacity; }

/* hint under the hero */
.fx-scroll-hint {
  position: absolute; right: 56px; bottom: 96px; z-index: 1;
  font-family: var(--jb); font-size: 9px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: 12px;
  writing-mode: vertical-rl;
}
.fx-scroll-hint::after {
  content: ''; width: 1px; height: 54px; background: linear-gradient(var(--acc), transparent);
  animation: fxHint 1.8s cubic-bezier(.65,0,.35,1) infinite; transform-origin: top;
}
@keyframes fxHint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ── Marquee is JS-driven (velocity reactive) ── */
html.fx-on .mq-inner { animation: none; will-change: transform; }

/* ── Word-by-word scroll fill (landonorris.com style) ── */
.fx-w { display: inline; opacity: .14; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .fx-w { opacity: 1 !important; }
  html { scroll-behavior: auto !important; }   /* the inline styles ask for smooth anchor jumps */
}

/* Thesis quote reads as a statement, not a pull-quote */
html.fx-on .sys-quote {
  font-size: clamp(24px, 3.4vw, 44px); font-style: normal; font-weight: 600;
  line-height: 1.22; letter-spacing: -.015em; max-width: 980px; color: #fff;
  border-left: none; padding-left: 0;
}

/* ── Photo clip reveal ── */
.fx-mask { overflow: hidden; will-change: clip-path; }

/* ── Giant line between Thesis and Work: pinned full-screen band, phrase scrolls
      its whole length through the view, solid fill sweeps over the outline ── */
.fx-giant {
  position: relative; overflow: hidden; pointer-events: none;
  background: var(--dark);
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
}
.fx-giant-track { position: relative; width: max-content; will-change: transform; }
.fx-giant-track span {
  display: block; white-space: nowrap;
  font-family: var(--sy); font-weight: 800; letter-spacing: -.04em;
  font-size: clamp(96px, 16vw, 260px); line-height: 1; padding-bottom: .08em;
}
.fx-giant-out { color: transparent; -webkit-text-stroke: 1.5px rgba(129,140,248,.5); }
.fx-giant-out em { font-style: normal; color: transparent; }
.fx-giant-fill {
  position: absolute; inset: 0; color: #F5F5F7;
  clip-path: inset(0% 100% 0% 0%); will-change: clip-path;
}
.fx-giant-fill em { font-style: normal; color: #818cf8; }
/* no motion: show the phrase whole, wrapped, already filled */
@media (prefers-reduced-motion: reduce) {
  .fx-giant { min-height: 0; padding: 12vw 20px; }
  .fx-giant-track { width: auto; }
  .fx-giant-track span { white-space: normal; font-size: clamp(56px, 12vw, 160px); }
  .fx-giant-out { display: none; }
  .fx-giant-fill { position: static; clip-path: none; }
}

/* contact content above its shader */
#contact .contact-inner { z-index: 2; }

/* Contact sits on the same surface as the landing hero: page background + the hero's
   contour field, text in the page's own colours. Without WebGL the original indigo band
   (and its white text) stays as the fallback. */
html.has-gl #contact { background: var(--bg); border-top: 1px solid var(--border); }
html.has-gl #contact .contact-label { color: var(--acc); }
html.has-gl #contact .contact-label::after { background: var(--border); }
html.has-gl #contact .contact-hl { color: var(--text); }
html.has-gl #contact .contact-link { color: var(--text); border-color: var(--dim); }
html.has-gl #contact .contact-link:hover { color: var(--acc); border-color: var(--acc); }

/* ── SPACING FIXES ──
   Every band aligns its content to the same 1240px column. The hero had no
   column, so at ≥1350px its copy sat 56px from the edge while every section
   below started at (100vw − 1240px) / 2. Contact padded twice (section +
   inline inner padding) and was indented ~2× the other sections. */

/* anchor links move focus to the section (tabindex=-1) so keyboard nav continues from
   there; the section itself shouldn't draw a focus ring */
section[tabindex="-1"]:focus { outline: none; }

/* .work-item:first-child never matched (the label is the first child), so the
   first row stacked its 48px top padding on top of the label's 52px margin */
.sec-label + .work-item { padding-top: 0; }

/* Touch screens have no pointer: the homepage still drew the custom cursor dot (stuck
   mid-screen, inverting whatever was under it) and hid the native cursor. The projects
   page already had this rule; it lives here now so both pages share it. */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  .cur-dot, .cur-ring { display: none !important; }
}

/* Sound toggle sat at left:22px (22–62px) — inside the 56px desktop gutter's text column
   from 1025–1352px. Tuck it into the gutter. */
.sfx-toggle { left: 12px; bottom: 12px; width: 36px; height: 36px; }

@media (max-width: 1024px) {
  /* the ≤1024 rule that shows the hamburger was declared before the base
     `.nav-hamburger { display:none }`, so it never applied — tablets and phones had
     no way to reach About/Work/Projects/CV */
  .nav-hamburger { display: flex; order: 3; margin-left: 12px; }
  .nav-hamburger ~ .nav-cta { margin-left: auto; }   /* homepage only — projects has no hamburger */
  /* the open menu (z 999) covered the nav (z 900) and with it the close button */
  #mobileMenu { z-index: 899; }
  /* content gutter is 32px here; the fixed sound toggle would sit on top of text */
  .sfx-toggle { display: none !important; }
  /* thesis columns stack: drop the accent indent so Design and Trading share a left edge */
  .sys-col.rv-left { padding-left: 0 !important; }
  .sys-col.rv-left::after { display: none; }
  /* empty "—" tags read as stray dashes once the row stacks */
  .edu-tag[style*="--dim"] { display: none; }
}

@media (max-width: 600px) {
  .sec-label { margin-bottom: 32px; }
  /* three stats → three columns instead of 2 + an orphan */
  .nums-band { grid-template-columns: repeat(3, 1fr) !important; }
  .num-cell { padding: 30px 14px !important; border-right: 1px solid var(--border) !important; border-top: none !important; }
  .num-cell:last-child { border-right: none !important; }
  .num-v { font-size: clamp(26px, 8.2vw, 38px); }
  .num-l { font-size: 8.5px; letter-spacing: .1em; }
  /* "something" is ~7em wide in Syne 800 — keep it inside 335px */
  .contact-hl { font-size: clamp(34px, 11.5vw, 64px); margin-bottom: 40px; }
}

@media (min-width: 1025px) {
  #hero { padding-left: max(56px, calc((100% - 1240px) / 2)); padding-right: max(56px, calc((100% - 1240px) / 2)); }
  .fx-scroll-hint { right: max(56px, calc((100% - 1240px) / 2)); }
  #contact { padding-top: 140px; padding-bottom: 140px; }
}

@media (max-width: 768px) {
  .fx-scroll-hint { display: none; }
  html.fx-on #hero { min-height: 92svh; }
  /* "Yashvender" is ~9.25em wide in Syne 800 — 9.4vw keeps it inside the 20px gutters */
  html .hero-name { font-size: clamp(28px, 9.4vw, 64px) !important; }
}