/* ==========================================================================
   GOKUL VAMSHI — PORTFOLIO STYLESHEET
   "NEON NOIR · CINEMATIC BRUTALISM"
   --------------------------------------------------------------------------
   TABLE OF CONTENTS  (Ctrl+F any "SECTION:" line to jump)
     SECTION: Design Tokens (:root)      — re-skin the whole site from here
     SECTION: Reset & Base
     SECTION: Typography Utilities
     SECTION: Layout Primitives
     SECTION: Atmosphere Layers
     SECTION: Custom Cursor
     SECTION: Scroll Progress
     SECTION: Preloader
     SECTION: Buttons & Links
     SECTION: Navigation
     SECTION: Mobile Menu
     SECTION: Hero
     SECTION: Floating 3D Geometry
     SECTION: Section Furniture (headers, watermarks)
     SECTION: Reveal Animations
     SECTION: About
     SECTION: Stats Counters
     SECTION: Skills
     SECTION: Projects
     SECTION: Achievements Timeline
     SECTION: Experience & Education
     SECTION: Testimonials
     SECTION: Contact & Form
     SECTION: Footer
     SECTION: Back To Top / Easter Egg
     SECTION: Responsive Breakpoints
     SECTION: Accessibility (reduced motion / reduced glow)
   ========================================================================== */


/* ==========================================================================
   SECTION: Design Tokens (:root)
   Change a value here and it propagates everywhere. This is the theme.
   ========================================================================== */
:root{
  /* ---- Base blacks (the canvas) ---- */
  --bg-000:#030303;          /* deepest black */
  --bg-010:#070708;
  --bg-020:#0a0a0c;
  --bg-030:#111114;
  --bg-040:#17171c;

  /* ---- The neon trinity (primary accents) ---- */
  --cyan:#00f0ff;            /* energy / tech / light */
  --magenta:#ff2d75;         /* emotion / creativity */
  --gold:#f5a623;            /* mastery / luxury */

  /* ---- Support tints ---- */
  --blue:#4d7cff;
  --violet:#a78bfa;
  --ink:#e8e8ea;             /* off-white body text */
  --ink-dim:#9a9aa6;         /* secondary text */
  --ink-faint:#5c5c6a;       /* tertiary / labels */

  /* ---- Tier colours (skills) ---- */
  --tier-mastered:var(--gold);
  --tier-proficient:var(--cyan);
  --tier-competent:var(--blue);
  --tier-learning:var(--magenta);

  /* ---- Signature gradients ---- */
  --grad-trinity:linear-gradient(100deg,var(--cyan) 0%,var(--violet) 38%,var(--magenta) 66%,var(--gold) 100%);
  --grad-cyan-magenta:linear-gradient(120deg,var(--cyan),var(--magenta));
  --grad-hairline:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);

  /* ---- Glass surfaces ---- */
  --glass-bg:rgba(255,255,255,.028);
  --glass-bg-2:rgba(255,255,255,.05);
  --glass-brd:rgba(255,255,255,.09);
  --glass-brd-hi:rgba(255,255,255,.2);
  --blur:16px;

  /* ---- Typography ---- */
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;

  /* fluid type scale */
  --fs-hero:clamp(3rem,15vw,16rem);
  --fs-h2:clamp(2rem,5.2vw,4.4rem);
  --fs-h3:clamp(1.15rem,2vw,1.6rem);
  --fs-body:clamp(.95rem,1.05vw,1.06rem);
  --fs-small:clamp(.72rem,.85vw,.8rem);

  /* ---- Spacing ---- */
  --sp-1:.35rem; --sp-2:.7rem;  --sp-3:1.1rem; --sp-4:1.7rem;
  --sp-5:2.6rem; --sp-6:4rem;   --sp-7:6rem;   --sp-8:9rem;
  --section-y:clamp(4.5rem,9vw,8rem);
  --gutter:clamp(1.1rem,4vw,3rem);
  --maxw:1320px;

  /* ---- Radii & borders ---- */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px;
  --brd-hard:2px solid var(--ink);

  /* ---- Shadows & glows ---- */
  --sh-lift:0 24px 60px -24px rgba(0,0,0,.9);
  --sh-deep:0 40px 100px -40px rgba(0,0,0,1);
  --glow-cyan:0 0 40px rgba(0,240,255,.28);
  --glow-magenta:0 0 40px rgba(255,45,117,.28);
  --glow-gold:0 0 40px rgba(245,166,35,.28);
  /* master glow multiplier — the "reduce glow" toggle sets this to 0 */
  --glow-strength:1;

  /* ---- Motion ---- */
  --t-fast:.18s;
  --t-med:.38s;
  --t-slow:.7s;
  --ease:cubic-bezier(.22,1,.36,1);           /* expo-out, the house curve */
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);

  /* ---- Z-index ladder ---- */
  --z-atmos:0; --z-content:2; --z-menu:90; --z-nav:95;
  --z-cursor:9999; --z-preload:10000;

  /* ---- Runtime values written by JS ---- */
  --mx:50vw;   /* mouse X (spotlight) */
  --my:50vh;   /* mouse Y (spotlight) */
  --scroll:0;  /* 0→1 page scroll progress */
}


/* ==========================================================================
   SECTION: Reset & Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;          /* so anchors clear the fixed navbar */
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}

body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.7;
  color:var(--ink);
  background:var(--bg-000);
  overflow-x:clip;                  /* NEVER a horizontal scrollbar */
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Lock scrolling while the preloader is up or the mobile menu is open */
body.is-locked{overflow:hidden}

img,svg,video{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}
button{cursor:pointer}

/* Keyboard focus ring — visible, on-brand, never removed */
:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}

/* Text selection */
::selection{background:var(--magenta);color:#fff}

/* Custom scrollbar (WebKit) */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-010)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--cyan),var(--magenta));
  border-radius:99px;border:2px solid var(--bg-010);
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--magenta),var(--gold))}


/* ==========================================================================
   SECTION: Typography Utilities
   ========================================================================== */
.mono{
  font-family:var(--font-mono);
  font-size:var(--fs-small);
  letter-spacing:.16em;
  text-transform:uppercase;
}

h1,h2,h3,h4{font-family:var(--font-display);line-height:1.04;font-weight:700;letter-spacing:-.02em}

/* Gradient text helper — animated sweep across the trinity */
.grad-text{
  background:var(--grad-trinity);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:gradSweep 12s linear infinite;
}
@keyframes gradSweep{to{background-position:280% 50%}}

code{
  font-family:var(--font-mono);font-size:.88em;
  padding:.12em .4em;border-radius:5px;
  background:rgba(0,240,255,.09);color:var(--cyan);
  border:1px solid rgba(0,240,255,.16);
}


/* ==========================================================================
   SECTION: Layout Primitives
   ========================================================================== */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative;
  z-index:var(--z-content);
}

.section{
  position:relative;
  padding-block:var(--section-y);
  isolation:isolate;
  /* every section is its own 3D stage */
  perspective:1400px;
  perspective-origin:50% 40%;
}

/* Hairline separator drawn above each section */
.section::before{
  content:'';position:absolute;inset-inline:0;top:0;height:1px;
  background:var(--grad-hairline);opacity:.5;
}
.hero::before{display:none}


/* ==========================================================================
   SECTION: Atmosphere Layers
   Fixed, non-interactive layers that make the page feel like a lit stage.
   ========================================================================== */
.atmosphere{
  position:fixed;inset:0;
  pointer-events:none;
  z-index:var(--z-atmos);
  overflow:hidden;
}

/* --- Atmosphere: animated aurora / nebula mesh --- */
.atmosphere__aurora{
  position:absolute;inset:-25%;
  background:
    radial-gradient(38% 46% at 18% 22%, rgba(0,240,255,.20), transparent 62%),
    radial-gradient(34% 40% at 82% 16%, rgba(255,45,117,.17), transparent 64%),
    radial-gradient(44% 48% at 70% 78%, rgba(167,139,250,.15), transparent 66%),
    radial-gradient(30% 34% at 30% 86%, rgba(245,166,35,.12), transparent 66%),
    conic-gradient(from 210deg at 50% 50%, rgba(77,124,255,.10), transparent 28%, rgba(255,45,117,.09) 55%, transparent 78%);
  filter:blur(70px) saturate(140%);
  opacity:calc(.85 * var(--glow-strength));
  animation:auroraDrift 34s ease-in-out infinite alternate;
  /* scroll-driven hue rotation — signature effect #11 */
  transform:translateZ(0) rotate(calc(var(--scroll) * 22deg)) scale(1.05);
  will-change:transform,filter;
}
@keyframes auroraDrift{
  0%  {background-position:0% 0%,100% 0%,50% 100%,0% 100%,50% 50%;}
  50% {background-position:14% 8%,86% 12%,42% 88%,10% 92%,50% 50%;}
  100%{background-position:4% 14%,94% 4%,58% 82%,4% 86%,50% 50%;}
}

/* --- Atmosphere: engineering grid overlay --- */
.atmosphere__grid{
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg,   rgba(255,255,255,.055) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(90deg,  rgba(255,255,255,.055) 0 1px, transparent 1px 76px);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
  opacity:.5;
}

/* --- Atmosphere: drifting fog bands (depth of field) --- */
.atmosphere__fog{
  position:absolute;left:-50%;width:200%;height:38vh;
  background:linear-gradient(90deg,transparent,rgba(200,220,255,.05),rgba(255,255,255,.03),transparent);
  filter:blur(40px);
  opacity:calc(.9 * var(--glow-strength));
}
.fog-a{top:22%;animation:fogDrift 46s linear infinite}
.fog-b{top:64%;animation:fogDrift 62s linear infinite reverse;opacity:.55}
@keyframes fogDrift{
  0%{transform:translate3d(-16%,0,0)}
  100%{transform:translate3d(16%,0,0)}
}

/* --- Atmosphere: film grain (tiny base64 noise tile, 3% opacity) --- */
.atmosphere__grain{
  position:absolute;inset:-200%;
  width:400%;height:400%;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.035;
  animation:grainShift .6s steps(3) infinite;
}
@keyframes grainShift{
  0%  {transform:translate3d(0,0,0)}
  33% {transform:translate3d(-1.5%,1%,0)}
  66% {transform:translate3d(1%,-1.5%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* --- Atmosphere: vignette (stage lighting) --- */
.atmosphere__vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 78% 66% at 50% 42%, transparent 42%, rgba(0,0,0,.55) 82%, rgba(0,0,0,.9) 100%);
}

/* --- Global mouse-following spotlight ("the lamp") --- */
.spotlight{
  position:fixed;top:0;left:0;
  width:900px;height:900px;
  margin:-450px 0 0 -450px;
  border-radius:50%;
  pointer-events:none;
  z-index:1;
  background:radial-gradient(circle,
      rgba(0,240,255,.10) 0%,
      rgba(167,139,250,.07) 32%,
      rgba(255,45,117,.045) 55%,
      transparent 72%);
  filter:blur(20px);
  opacity:calc(var(--glow-strength) * 1);
  transform:translate3d(var(--mx),var(--my),0);
  transition:opacity .5s ease;
  will-change:transform;
}


/* ==========================================================================
   SECTION: Custom Cursor
   Dot follows instantly, ring lerps behind it (see script.js).
   Both are hidden on touch devices via the media query at the bottom.
   ========================================================================== */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;
  pointer-events:none;
  z-index:var(--z-cursor);
  border-radius:50%;
  opacity:0;
  transition:opacity .3s ease;
}
body.cursor-ready .cursor-dot,
body.cursor-ready .cursor-ring{opacity:1}

.cursor-dot{
  width:6px;height:6px;
  margin:-3px 0 0 -3px;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);
}

.cursor-ring{
  width:38px;height:38px;
  margin:-19px 0 0 -19px;
  border:1px solid rgba(255,255,255,.45);
  display:grid;place-items:center;
  backdrop-filter:invert(4%);
  transition:width .3s var(--ease),height .3s var(--ease),
             border-color .3s ease,background .3s ease,opacity .3s ease;
}

/* Ring grows + fills when hovering an interactive element */
body.cursor-hover .cursor-ring{
  width:70px;height:70px;margin:-35px 0 0 -35px;
  border-color:rgba(0,240,255,.75);
  background:rgba(0,240,255,.08);
  backdrop-filter:blur(1px) brightness(1.4);
}
body.cursor-hover .cursor-dot{opacity:0}

/* Optional label inside the ring, fed by [data-cursor="..."] */
.cursor-ring__label{
  font-size:.5rem;letter-spacing:.1em;
  color:var(--cyan);opacity:0;transform:scale(.6);
  transition:opacity .25s ease,transform .25s var(--ease-bounce);
  white-space:nowrap;
}
body.cursor-hover .cursor-ring__label{opacity:1;transform:scale(1)}

/* Click pulse */
body.cursor-down .cursor-ring{transform:scale(.82)}


/* ==========================================================================
   SECTION: Scroll Progress (top hairline)
   ========================================================================== */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;
  z-index:calc(var(--z-nav) + 5);
  background:rgba(255,255,255,.05);
}
.scroll-progress__bar{
  display:block;height:100%;width:0%;
  background:var(--grad-trinity);
  background-size:200% 100%;
  box-shadow:0 0 14px rgba(0,240,255,.8),0 0 26px rgba(255,45,117,.45);
  animation:gradSweep 6s linear infinite;
}


/* ==========================================================================
   SECTION: Preloader
   ========================================================================== */
.preloader{
  position:fixed;inset:0;
  z-index:var(--z-preload);
  display:grid;place-items:center;
  background:
    radial-gradient(60% 60% at 50% 45%, #0b0b10 0%, #030303 70%);
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s cubic-bezier(.76,0,.24,1),opacity .5s ease .55s;
}
/* Cinematic exit — the overlay splits upward, revealing the site */
.preloader.is-done{
  clip-path:inset(0 0 100% 0);
  opacity:0;
  pointer-events:none;
}
.preloader__inner{display:grid;justify-items:center;gap:1.1rem;padding:2rem;width:min(92vw,520px)}

/* Preloader: SVG monogram stroke draw */
.preloader__mark{width:min(58vw,260px);overflow:visible}
.preloader__path{
  fill:none;stroke:url(#pl-grad);stroke-width:5;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:400;stroke-dashoffset:400;
  filter:drop-shadow(0 0 12px rgba(0,240,255,.55));
  animation:drawMark 1.7s var(--ease) forwards;
}
.preloader__path:nth-child(2){animation-delay:.22s}
@keyframes drawMark{to{stroke-dashoffset:0}}

.preloader__name{
  font-family:var(--font-display);
  font-size:clamp(.9rem,3.4vw,1.4rem);
  letter-spacing:.55em;text-indent:.55em;
  color:var(--ink);opacity:0;
  animation:fadeIn .7s ease .9s forwards;
}
.preloader__status{color:var(--ink-faint);font-size:.62rem;opacity:0;animation:fadeIn .6s ease 1.1s forwards}
@keyframes fadeIn{to{opacity:1}}

.preloader__bar{
  width:min(78vw,340px);height:2px;
  background:rgba(255,255,255,.09);
  overflow:hidden;border-radius:2px;
}
.preloader__fill{
  display:block;height:100%;width:0%;
  background:var(--grad-trinity);
  box-shadow:0 0 16px rgba(0,240,255,.7);
}
.preloader__pct{
  font-size:.7rem;color:var(--cyan);
  font-variant-numeric:tabular-nums;
}
.preloader__pct span{color:var(--ink-faint)}


/* ==========================================================================
   SECTION: Buttons & Links
   ========================================================================== */
.btn{
  --btn-accent:var(--cyan);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.7rem;
  min-height:48px;                       /* comfortable tap target */
  font-family:var(--font-display);
  font-size:.95rem;font-weight:600;letter-spacing:.01em;
  border-radius:var(--r-pill);
  isolation:isolate;overflow:hidden;
  transition:transform var(--t-med) var(--ease),
             box-shadow var(--t-med) var(--ease),
             color var(--t-med) ease,border-color var(--t-med) ease;
  will-change:transform;
}
.btn i{transition:transform var(--t-med) var(--ease)}
.btn:hover i{transform:translateX(4px)}
.btn:active{transform:scale(.97)}

/* Primary: gradient fill + volumetric glow */
.btn--primary{
  color:#04070a;
  background:var(--grad-trinity);
  background-size:200% 100%;
  box-shadow:0 10px 30px -10px rgba(0,240,255,calc(.6*var(--glow-strength))),
             0 0 0 1px rgba(255,255,255,.14) inset;
  animation:gradSweep 8s linear infinite;
}
.btn--primary:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 46px -12px rgba(255,45,117,calc(.65*var(--glow-strength))),
             0 0 34px rgba(0,240,255,calc(.4*var(--glow-strength))),
             0 0 0 1px rgba(255,255,255,.2) inset;
}

/* Ghost: outlined with a border-draw + fill sweep on hover */
.btn--ghost{
  color:var(--ink);
  border:1px solid var(--glass-brd-hi);
  background:var(--glass-bg);
  backdrop-filter:blur(var(--blur));
}
.btn--ghost::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--grad-cyan-magenta);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-med) var(--ease);
}
.btn--ghost:hover{color:#04070a;border-color:transparent;transform:translateY(-3px)}
.btn--ghost:hover::before{transform:scaleX(1)}

.btn--sm{padding:.6rem 1.1rem;font-size:.82rem;min-height:40px}
.btn--block{width:100%}

/* Submit-button loading spinner (toggled by .is-loading in script.js) */
.btn__spinner{
  position:absolute;width:18px;height:18px;
  border:2px solid rgba(0,0,0,.25);border-top-color:#04070a;
  border-radius:50%;opacity:0;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.is-loading .btn__label,
.btn.is-loading > i{opacity:0}
.btn.is-loading .btn__spinner{opacity:1}
.btn.is-loading{pointer-events:none}

/* Inline arrow link with a growing gradient underline */
.link-arrow{
  position:relative;
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-mono);
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-dim);
  padding-bottom:3px;
  transition:color var(--t-fast) ease;
}
.link-arrow::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--grad-cyan-magenta);
  transition:width var(--t-med) var(--ease);
}
.link-arrow:hover{color:var(--cyan)}
.link-arrow:hover::after{width:100%}
.link-arrow i{transition:transform var(--t-med) var(--ease)}
.link-arrow:hover i{transform:translateX(3px)}


/* ==========================================================================
   SECTION: Navigation
   ========================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;
  z-index:var(--z-nav);
  transition:transform var(--t-med) var(--ease),
             background var(--t-med) ease,
             border-color var(--t-med) ease,
             backdrop-filter var(--t-med) ease;
  border-bottom:1px solid transparent;
}
/* Frosted glass state after scrolling past the hero */
.nav.is-solid{
  background:rgba(6,6,9,.62);
  backdrop-filter:blur(20px) saturate(150%);
  border-bottom-color:var(--glass-brd);
  box-shadow:0 18px 50px -30px rgba(0,0,0,.9);
}
/* Smart navbar: slide away on scroll-down */
.nav.is-hidden{transform:translateY(-110%)}

.nav__inner{
  max-width:var(--maxw);margin-inline:auto;
  padding:.85rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}

/* --- Nav: logo / monogram --- */
.logo{display:inline-flex;align-items:center;gap:.7rem;position:relative}
.logo__mark{
  position:relative;
  display:grid;place-items:center;
  width:42px;height:42px;
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  border:1px solid var(--glass-brd-hi);
  border-radius:12px;
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  backdrop-filter:blur(10px);
  overflow:hidden;
  transition:transform var(--t-med) var(--ease-bounce),box-shadow var(--t-med) ease;
}
.logo__mark::after{ /* rotating conic sheen inside the monogram tile */
  content:'';position:absolute;inset:-60%;
  background:conic-gradient(from 0deg,transparent,rgba(0,240,255,.5),transparent 40%);
  animation:spin 6s linear infinite;opacity:.5;
}
.logo__g,.logo__v{position:relative;z-index:1}
.logo__g{color:var(--cyan)}
.logo__v{color:var(--magenta);margin-left:-1px}
.logo:hover .logo__mark{
  transform:rotate(-8deg) scale(1.06);
  box-shadow:0 0 26px rgba(0,240,255,calc(.5*var(--glow-strength)));
}
.logo__text{display:grid;line-height:1.15}
.logo__name{font-family:var(--font-display);font-weight:700;font-size:.9rem;letter-spacing:.06em}
.logo__role{font-size:.55rem;color:var(--ink-faint);letter-spacing:.22em}

/* --- Nav: desktop links --- */
.nav__links{display:flex;align-items:center;gap:.2rem}
.nav__link{
  position:relative;
  display:inline-flex;align-items:baseline;gap:.4rem;
  padding:.55rem .8rem;
  font-size:.88rem;font-weight:500;
  color:var(--ink-dim);
  border-radius:var(--r-sm);
  transition:color var(--t-fast) ease;
}
.nav__idx{font-size:.52rem;color:var(--ink-faint);transition:color var(--t-fast) ease}
/* Animated gradient underline grows 0 → 100% */
.nav__link::after{
  content:'';position:absolute;left:.8rem;right:.8rem;bottom:.28rem;
  height:1px;background:var(--grad-cyan-magenta);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-med) var(--ease);
}
.nav__link:hover,.nav__link.is-active{color:var(--ink)}
.nav__link:hover .nav__idx,.nav__link.is-active .nav__idx{color:var(--cyan)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link.is-active{text-shadow:0 0 18px rgba(0,240,255,calc(.6*var(--glow-strength)))}

/* --- Nav: utilities --- */
.nav__utils{display:flex;align-items:center;gap:.6rem}

.glow-toggle{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .8rem;min-height:40px;
  border:1px solid var(--glass-brd);
  border-radius:var(--r-pill);
  background:var(--glass-bg);
  color:var(--ink-dim);
  font-size:.72rem;
  transition:color var(--t-fast) ease,border-color var(--t-fast) ease,background var(--t-fast) ease;
}
.glow-toggle:hover{color:var(--gold);border-color:rgba(245,166,35,.4)}
.glow-toggle[aria-pressed="true"]{color:var(--ink-faint)}
.glow-toggle[aria-pressed="true"] .glow-toggle__txt::after{content:' OFF'}
.glow-toggle__txt{font-size:.55rem;letter-spacing:.2em}

/* --- Nav: hamburger (mobile) --- */
.burger{
  display:none;
  width:46px;height:46px;
  border:1px solid var(--glass-brd);
  border-radius:12px;
  background:var(--glass-bg);
  backdrop-filter:blur(10px);
  position:relative;
}
.burger span{
  position:absolute;left:50%;width:20px;height:2px;
  background:var(--ink);border-radius:2px;
  transform:translateX(-50%);
  transition:transform var(--t-med) var(--ease),opacity var(--t-fast) ease,background var(--t-fast) ease;
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
/* Morph into an X */
.burger.is-open span:nth-child(1){top:22px;transform:translateX(-50%) rotate(45deg);background:var(--cyan)}
.burger.is-open span:nth-child(2){opacity:0;transform:translateX(-50%) scaleX(0)}
.burger.is-open span:nth-child(3){top:22px;transform:translateX(-50%) rotate(-45deg);background:var(--magenta)}


/* ==========================================================================
   SECTION: Mobile Menu (full-screen overlay, slides from the right)
   ========================================================================== */
.mobile-menu{
  position:fixed;inset:0;
  z-index:var(--z-menu);
  display:flex;flex-direction:column;justify-content:center;gap:2rem;
  padding:6rem var(--gutter) 3rem;
  background:rgba(3,3,3,.82);
  backdrop-filter:blur(26px) saturate(140%);
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .6s var(--ease),visibility 0s linear .6s;
}
.mobile-menu.is-open{transform:translateX(0);visibility:visible;transition:transform .6s var(--ease),visibility 0s}
/* While the overlay is open the navbar stays on top (so the X is tappable)
   but drops its own glass background so the two don't fight visually. */
body.menu-open .nav,
body.menu-open .nav.is-solid{
  background:transparent;
  backdrop-filter:none;
  border-bottom-color:transparent;
  box-shadow:none;
}
.mobile-menu__glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(45% 35% at 90% 12%, rgba(255,45,117,.20), transparent 70%),
    radial-gradient(50% 40% at 10% 88%, rgba(0,240,255,.16), transparent 70%);
  opacity:var(--glow-strength);
}
.mobile-menu__list{display:grid;gap:.2rem;position:relative}
.mobile-menu__link{
  display:flex;align-items:baseline;gap:1rem;
  padding:.5rem 0;min-height:48px;
  font-family:var(--font-display);
  font-size:clamp(1.7rem,8vw,2.9rem);
  font-weight:700;letter-spacing:-.02em;
  color:var(--ink);
  opacity:0;transform:translateX(40px);
  transition:color var(--t-fast) ease;
}
.mobile-menu__link .mono{font-size:.6rem;color:var(--cyan);opacity:.7}
.mobile-menu.is-open .mobile-menu__link{
  animation:menuIn .55s var(--ease) forwards;
  animation-delay:calc(.1s + var(--i) * .06s);
}
@keyframes menuIn{to{opacity:1;transform:translateX(0)}}
.mobile-menu__link:active{color:var(--cyan)}
.mobile-menu__socials{display:flex;gap:.8rem;position:relative}
.mobile-menu__socials a{
  display:grid;place-items:center;width:48px;height:48px;
  border:1px solid var(--glass-brd);border-radius:14px;
  background:var(--glass-bg);color:var(--ink-dim);
}


/* ==========================================================================
   SECTION: Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding-block:clamp(7rem,14vh,10rem) clamp(6rem,10vh,8rem);
  overflow:hidden;
  perspective:1200px;
  isolation:isolate;
}
.hero__inner{
  display:grid;justify-items:start;gap:clamp(.9rem,2vw,1.4rem);
  transform-style:preserve-3d;
}

/* --- Hero: parallax orb + blob layer --- */
.hero__layers{position:absolute;inset:0;pointer-events:none;z-index:-1}
.orb{
  position:absolute;border-radius:50%;
  filter:blur(90px);
  opacity:calc(.55 * var(--glow-strength));
  will-change:transform;
}
.orb--cyan   {width:44vw;height:44vw;left:-8vw;top:6vh;background:radial-gradient(circle,rgba(0,240,255,.55),transparent 68%)}
.orb--magenta{width:38vw;height:38vw;right:-6vw;top:2vh;background:radial-gradient(circle,rgba(255,45,117,.5),transparent 68%)}
.orb--gold   {width:30vw;height:30vw;right:18vw;bottom:-8vh;background:radial-gradient(circle,rgba(245,166,35,.42),transparent 68%)}

/* Morphing backlit blobs — continuous border-radius morph */
.blob{
  position:absolute;
  width:clamp(180px,26vw,420px);aspect-ratio:1;
  background:linear-gradient(135deg,rgba(0,240,255,.14),rgba(255,45,117,.12));
  filter:blur(30px);
  opacity:calc(.7 * var(--glow-strength));
  animation:blobMorph 18s ease-in-out infinite;
  will-change:transform,border-radius;
}
.blob--1{left:8%;bottom:12%}
.blob--2{right:6%;top:18%;animation-delay:-7s;animation-duration:23s;
         background:linear-gradient(135deg,rgba(167,139,250,.14),rgba(245,166,35,.11))}
@keyframes blobMorph{
  0%,100%{border-radius:30% 70% 70% 30% / 30% 30% 70% 70%;transform:rotate(0deg) scale(1)}
  25%    {border-radius:58% 42% 33% 67% / 63% 32% 68% 37%;transform:rotate(28deg) scale(1.08)}
  50%    {border-radius:70% 30% 46% 54% / 30% 68% 32% 70%;transform:rotate(-14deg) scale(.94)}
  75%    {border-radius:38% 62% 63% 37% / 47% 44% 56% 53%;transform:rotate(18deg) scale(1.05)}
}

/* --- Hero: status chip + live clock --- */
.hero__chip{
  display:inline-flex;align-items:center;gap:.65rem;flex-wrap:wrap;
  padding:.42rem .95rem;
  border:1px solid var(--glass-brd);
  border-radius:var(--r-pill);
  background:var(--glass-bg);
  backdrop-filter:blur(var(--blur));
  font-size:.6rem;color:var(--ink-dim);
}
.hero__chip .mono{font-size:.58rem}
.hero__clock{color:var(--cyan);font-variant-numeric:tabular-nums;
             padding-left:.65rem;border-left:1px solid var(--glass-brd)}
.dot-pulse{
  width:7px;height:7px;border-radius:50%;
  background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.7);
  animation:dotPulse 2.2s ease-out infinite;flex:none;
}
@keyframes dotPulse{
  70% {box-shadow:0 0 0 9px rgba(61,220,132,0)}
  100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}
}

/* --- Hero: eyebrow --- */
.hero__eyebrow{
  display:flex;align-items:center;gap:.7rem;
  color:var(--ink-faint);font-size:.62rem;
}
.hero__eyebrow-line{width:clamp(24px,6vw,64px);height:1px;background:var(--grad-cyan-magenta)}
.hero__year{color:var(--cyan)}

/* --- Hero: the massive name --- */
.hero__name{
  font-size:var(--fs-hero);
  font-weight:700;
  line-height:.82;
  letter-spacing:-.045em;
  display:grid;
  width:100%;
  transform-style:preserve-3d;
}
.hero__name-line{
  position:relative;
  display:block;
  background:var(--grad-trinity);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:gradSweep 11s linear infinite;
  /* subtle Z separation between the two lines = real depth */
  transform:translateZ(30px);
}
.hero__name-line--2{
  transform:translateZ(0) translateX(clamp(.5rem,4vw,4.5rem));
  animation-delay:-3s;
  filter:drop-shadow(0 0 30px rgba(255,45,117,calc(.22*var(--glow-strength))));
}

/* Glitch: two clipped colour-channel copies driven by data-text */
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute;inset:0;
  background:inherit;background-size:inherit;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  opacity:0;pointer-events:none;
}
.glitch::before{text-shadow:-2px 0 rgba(255,45,117,.9);clip-path:inset(0 0 62% 0)}
.glitch::after {text-shadow: 2px 0 rgba(0,240,255,.9);clip-path:inset(58% 0 0 0)}
/* .is-glitching is added periodically by script.js */
.glitch.is-glitching::before{opacity:1;animation:glitchA .38s steps(2,end)}
.glitch.is-glitching::after {opacity:1;animation:glitchB .38s steps(2,end)}
.glitch.is-glitching .glitch__base{animation:glitchBase .38s steps(2,end)}
@keyframes glitchA{
  0%{transform:translate3d(0,0,0);clip-path:inset(0 0 62% 0)}
  25%{transform:translate3d(-6px,-2px,0);clip-path:inset(12% 0 48% 0)}
  50%{transform:translate3d(5px,1px,0);clip-path:inset(38% 0 30% 0)}
  75%{transform:translate3d(-3px,2px,0);clip-path:inset(4% 0 70% 0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes glitchB{
  0%{transform:translate3d(0,0,0);clip-path:inset(58% 0 0 0)}
  25%{transform:translate3d(6px,2px,0);clip-path:inset(70% 0 6% 0)}
  50%{transform:translate3d(-5px,-1px,0);clip-path:inset(44% 0 26% 0)}
  75%{transform:translate3d(4px,-2px,0);clip-path:inset(80% 0 2% 0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes glitchBase{
  0%,100%{transform:translate3d(0,0,0);opacity:1}
  40%{transform:translate3d(2px,0,0);opacity:.86}
  60%{transform:translate3d(-2px,0,0);opacity:.94}
}

/* --- Hero: typing rotator --- */
.hero__role{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  font-family:var(--font-display);
  font-size:clamp(1.05rem,3.2vw,2rem);
  font-weight:500;
  min-height:1.6em;
}
.hero__role-prefix{color:var(--magenta);font-size:.8em}
.hero__typed{
  background:linear-gradient(90deg,var(--ink),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__caret{
  display:inline-block;width:2px;height:1.05em;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);
  animation:caretBlink 1s steps(1) infinite;
  translate:0 .12em;
}
@keyframes caretBlink{50%{opacity:0}}

/* --- Hero: intro line --- */
.hero__intro{
  max-width:52ch;color:var(--ink-dim);
  font-size:clamp(.95rem,1.4vw,1.15rem);
}

/* --- Hero: CTA row --- */
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.5rem}

/* --- Hero / global: social rail --- */
.social-rail{display:flex;gap:.7rem;margin-top:.6rem}
.social-rail a{
  position:relative;
  display:grid;place-items:center;
  width:46px;height:46px;
  border:1px solid var(--glass-brd);
  border-radius:14px;
  background:var(--glass-bg);
  backdrop-filter:blur(var(--blur));
  color:var(--ink-dim);font-size:1rem;
  overflow:hidden;
  transition:color var(--t-med) ease,transform var(--t-med) var(--ease-bounce),
             border-color var(--t-med) ease,box-shadow var(--t-med) ease;
}
.social-rail a::before{ /* fill sweep from the bottom */
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--grad-cyan-magenta);
  transform:translateY(101%);
  transition:transform var(--t-med) var(--ease);
}
.social-rail a:hover{
  color:#05080b;transform:translateY(-5px) rotate(-5deg);
  border-color:transparent;
  box-shadow:0 14px 30px -12px rgba(0,240,255,calc(.8*var(--glow-strength)));
}
.social-rail a:hover::before{transform:translateY(0)}
.social-rail--inline{margin-top:1.2rem}

/* --- Hero: scroll indicator --- */
.scroll-hint{
  position:absolute;left:50%;bottom:clamp(3.6rem,7vh,5rem);
  transform:translateX(-50%);
  display:grid;justify-items:center;gap:.5rem;
  color:var(--ink-faint);z-index:3;
}
.scroll-hint__txt{font-size:.52rem}
.scroll-hint__rail{
  width:22px;height:36px;border:1px solid var(--glass-brd-hi);
  border-radius:var(--r-pill);position:relative;
}
.scroll-hint__bead{
  position:absolute;left:50%;top:7px;
  width:3px;height:7px;border-radius:2px;
  background:var(--cyan);box-shadow:0 0 8px var(--cyan);
  transform:translateX(-50%);
  animation:beadFall 1.9s var(--ease) infinite;
}
@keyframes beadFall{
  0%{transform:translate(-50%,0);opacity:0}
  25%{opacity:1}
  75%{transform:translate(-50%,16px);opacity:0}
  100%{opacity:0}
}
.scroll-hint:hover{color:var(--cyan)}

/* --- Hero: infinite ticker at the very bottom --- */
.ticker{
  position:absolute;left:0;right:0;bottom:0;
  border-top:1px solid var(--glass-brd);
  border-bottom:1px solid var(--glass-brd);
  background:rgba(255,255,255,.015);
  backdrop-filter:blur(6px);
  overflow:hidden;padding:.55rem 0;z-index:2;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__track{
  display:flex;align-items:center;gap:1.6rem;width:max-content;
  animation:tickerRun 38s linear infinite;
}
.ticker__track span{
  font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint);
  white-space:nowrap;
}
.ticker__sep{color:var(--magenta) !important}
@keyframes tickerRun{to{transform:translateX(-50%)}}


/* ==========================================================================
   SECTION: Floating 3D Geometry (pure CSS, preserve-3d)
   Cube / pyramid / rings / wireframe shell tumbling in the background.
   ========================================================================== */
.geo-field{position:absolute;inset:0;pointer-events:none;z-index:-1;perspective:900px}
.geo{
  position:absolute;
  left:var(--x);top:var(--y);
  transform-style:preserve-3d;
  opacity:calc(.5 * var(--glow-strength));
  scale:var(--s,1);
  will-change:transform;
}

/* --- Geometry: rotating cube --- */
.geo--cube{width:96px;height:96px;animation:tumbleA 26s linear infinite}
.geo--cube .face{
  position:absolute;inset:0;
  border:1px solid rgba(0,240,255,.55);
  background:linear-gradient(135deg,rgba(0,240,255,.07),transparent 70%);
  box-shadow:inset 0 0 22px rgba(0,240,255,.14);
}
.f-front {transform:translateZ(48px)}
.f-back  {transform:rotateY(180deg) translateZ(48px)}
.f-right {transform:rotateY(90deg)  translateZ(48px)}
.f-left  {transform:rotateY(-90deg) translateZ(48px)}
.f-top   {transform:rotateX(90deg)  translateZ(48px)}
.f-bottom{transform:rotateX(-90deg) translateZ(48px)}

/* --- Geometry: pyramid --- */
.geo--pyramid{width:0;height:0;animation:tumbleB 32s linear infinite}
.geo--pyramid .tri{
  position:absolute;width:0;height:0;
  border-left:52px solid transparent;
  border-right:52px solid transparent;
  border-bottom:92px solid rgba(255,45,117,.12);
  transform-origin:50% 100%;
}
.geo--pyramid .t1{transform:translate(-52px,-92px) rotateX(30deg)}
.geo--pyramid .t2{transform:translate(-52px,-92px) rotateY(90deg) rotateX(30deg)}
.geo--pyramid .t3{transform:translate(-52px,-92px) rotateY(180deg) rotateX(30deg)}
.geo--pyramid .t4{transform:translate(-52px,-92px) rotateY(270deg) rotateX(30deg)}

/* --- Geometry: nested torus rings --- */
.geo--rings{width:140px;height:140px;animation:tumbleC 40s linear infinite}
.geo--rings span{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(245,166,35,.4);
}
.geo--rings span:nth-child(1){transform:rotateX(72deg)}
.geo--rings span:nth-child(2){transform:rotateY(72deg);border-color:rgba(0,240,255,.35)}
.geo--rings span:nth-child(3){transform:rotateZ(40deg) rotateX(30deg);border-color:rgba(255,45,117,.3)}

/* --- Geometry: wireframe shell (stacked rotated squares) --- */
.geo--shell{width:120px;height:120px;animation:tumbleB 46s linear infinite reverse}
.geo--shell span{
  position:absolute;inset:0;
  border:1px solid rgba(167,139,250,.34);
  border-radius:14px;
}
.geo--shell span:nth-child(1){transform:rotateY(0deg)}
.geo--shell span:nth-child(2){transform:rotateY(30deg)}
.geo--shell span:nth-child(3){transform:rotateY(60deg)}
.geo--shell span:nth-child(4){transform:rotateY(90deg)}
.geo--shell span:nth-child(5){transform:rotateY(120deg)}
.geo--shell span:nth-child(6){transform:rotateY(150deg)}

@keyframes tumbleA{
  0%{transform:rotateX(0) rotateY(0) rotateZ(0)}
  100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(180deg)}
}
@keyframes tumbleB{
  0%{transform:rotateX(20deg) rotateY(0)}
  100%{transform:rotateX(20deg) rotateY(360deg)}
}
@keyframes tumbleC{
  0%{transform:rotateX(0) rotateZ(0)}
  100%{transform:rotateX(360deg) rotateZ(360deg)}
}


/* ==========================================================================
   SECTION: Section Furniture (kickers, titles, watermarks)
   ========================================================================== */
.section__head{margin-bottom:clamp(2.2rem,4vw,3.4rem);max-width:70ch}
.section__kicker{
  display:flex;align-items:center;gap:.7rem;
  color:var(--cyan);font-size:.62rem;margin-bottom:.9rem;
}
.section__kicker span{width:clamp(22px,4vw,46px);height:1px;background:var(--grad-cyan-magenta)}
.section__title{
  font-size:var(--fs-h2);
  background:linear-gradient(180deg,#fff 25%,#8a8a99 120%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* embossed machined feel */
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.06));
}
.section__sub{margin-top:1rem;color:var(--ink-dim);max-width:56ch}

/* Giant watermark word behind each section */
.watermark{
  position:absolute;
  left:50%;top:clamp(1rem,4vw,3rem);
  translate:-50% 0;               /* independent of `transform` (JS parallax) */
  font-family:var(--font-display);
  font-size:clamp(4rem,17vw,15rem);
  font-weight:700;letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.05);
  white-space:nowrap;pointer-events:none;
  z-index:0;user-select:none;
  will-change:transform;
}


/* ==========================================================================
   SECTION: Reveal Animations (driven by IntersectionObserver in script.js)
   Base state = hidden; .is-visible = final state.
   ========================================================================== */
.reveal{
  opacity:0;
  transition:opacity .9s var(--ease),transform .9s var(--ease),
             filter .9s var(--ease),clip-path 1s var(--ease);
  transition-delay:var(--reveal-delay,0ms);
  will-change:transform,opacity;
}
[data-reveal="fade-up"]   {transform:translateY(46px)}
[data-reveal="fade-right"]{transform:translateX(-40px)}
[data-reveal="fade-left"] {transform:translateX(40px)}
[data-reveal="scale-in"]  {transform:scale(.9);filter:blur(8px)}
[data-reveal="rotate-in"] {transform:perspective(900px) rotateX(-22deg) translateY(40px);transform-origin:top}
[data-reveal="clip"]      {clip-path:inset(100% 0 0 0)}
.reveal.is-visible{
  opacity:1;
  transform:none;
  filter:blur(0);
  clip-path:inset(0 0 0 0);
}

/* Split-text: each word wrapped by JS and lifted into place.
   IMPORTANT: the gradient/background-clip:text must be applied to the animated
   <i> itself. Putting background-clip:text on the parent while the children are
   transformed makes the browser re-paint the clip per layer, which visibly
   stacks the lines on top of each other. */
/* Two-class selectors so these ALWAYS out-rank a section's own heading
   gradient (e.g. .contact__title), whatever the source order. */
.split-text,
.section__title.split-text,
.contact__title.split-text{
  background:none;
  background-image:none;
  -webkit-background-clip:border-box;background-clip:border-box;
  color:var(--ink);
  -webkit-text-fill-color:currentColor;
  animation:none;
  filter:none;
}
.split-text .word{display:inline-block;overflow:hidden;vertical-align:bottom}
.split-text .word > i{
  background:linear-gradient(180deg,#ffffff 18%,#8f8f9e 128%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
/* Contact heading keeps the full neon-trinity sweep */
.contact__title.split-text .word > i{
  background:var(--grad-trinity);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:gradSweep 12s linear infinite;
}
.split-text .word > i{
  display:inline-block;font-style:normal;
  transform:translateY(105%);
  transition:transform .85s var(--ease);
  transition-delay:calc(var(--w) * 55ms);
}
.split-text.is-visible .word > i{transform:translateY(0)}


/* ==========================================================================
   SECTION: Shared card chrome — glass surface + 3D tilt + glare
   Every card in the site inherits from .glass-card / .tilt.
   ========================================================================== */
.tilt{
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s ease;
}
/* Cursor-following glare sheen (JS writes --gx / --gy) */
.tilt__glare{
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(220px circle at var(--gx,50%) var(--gy,50%),
             rgba(255,255,255,.16),transparent 60%);
  transition:opacity .35s ease;
  z-index:3;
}
.tilt:hover .tilt__glare{opacity:calc(1 * var(--glow-strength))}

/* Generic glass panel look used by most cards */
.skill-card,.project-card,.featured,.tl__card,.exp-card,.tst__card,.contact__form-wrap{
  position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--glass-brd);
  border-radius:var(--r-lg);
  backdrop-filter:blur(var(--blur)) saturate(130%);
  box-shadow:var(--sh-lift);
  overflow:hidden;
}
/* Machined hairline along the top edge of each card */
.skill-card::before,.project-card::before,.featured::before,
.tl__card::before,.exp-card::before,.tst__card::before{
  content:'';position:absolute;top:0;left:12%;right:12%;height:1px;
  background:var(--grad-hairline);opacity:.8;
}


/* ==========================================================================
   SECTION: About
   ========================================================================== */
.about__grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.about__lead{
  font-size:clamp(1.05rem,1.7vw,1.35rem);
  color:var(--ink);line-height:1.65;
  margin-bottom:2rem;
}
.about__lead strong{
  background:var(--grad-cyan-magenta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:700;
}
.about__lead em{color:var(--gold);font-style:normal}

.about__blocks{display:grid;gap:1.1rem}
.about__block{
  position:relative;
  padding:1.1rem 1.3rem;
  border-left:2px solid rgba(255,255,255,.08);
  border-radius:0 var(--r-md) var(--r-md) 0;
  background:linear-gradient(90deg,rgba(255,255,255,.035),transparent 80%);
  transition:border-color var(--t-med) ease,background var(--t-med) ease,transform var(--t-med) var(--ease);
}
.about__block:hover{
  border-left-color:var(--cyan);
  background:linear-gradient(90deg,rgba(0,240,255,.07),transparent 80%);
  transform:translateX(6px);
}
.about__block h3{
  display:flex;align-items:center;gap:.5rem;
  font-size:.68rem;color:var(--cyan);margin-bottom:.4rem;
}
.about__block p{color:var(--ink-dim);font-size:.95rem}
.about__cv{margin-top:2rem}

/* --- About: portrait --- */
.about__figure{display:grid;gap:.8rem;justify-items:center}
.portrait{position:relative;width:100%;max-width:400px}
.portrait__frame{
  position:relative;
  padding:14px;
  overflow:hidden;                /* clips the rotating sheen to the frame */
  border-radius:var(--r-xl);
  background:linear-gradient(150deg,rgba(0,240,255,.28),rgba(255,45,117,.2),rgba(245,166,35,.22));
  /* animated dashed border ring */
  box-shadow:0 30px 80px -30px rgba(0,240,255,calc(.5*var(--glow-strength)));
}
/* Static dashed inset — reads as a technical mounting frame */
.portrait__frame::before{
  content:'';position:absolute;inset:5px;
  border:1px dashed rgba(255,255,255,.3);
  border-radius:calc(var(--r-xl) - 4px);
  pointer-events:none;z-index:2;
}
/* Rotating conic sheen travelling around the frame edge (clipped inside it) */
.portrait__frame::after{
  content:'';position:absolute;inset:0;
  border-radius:var(--r-xl);
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.55) 32deg,transparent 76deg);
  animation:dashSpin 8s linear infinite;
  mix-blend-mode:overlay;pointer-events:none;
}
@keyframes dashSpin{to{transform:rotate(360deg)}}
.portrait__img{
  position:relative;
  aspect-ratio:5/6;
  border-radius:calc(var(--r-xl) - 10px);
  background:
    radial-gradient(70% 60% at 50% 22%, rgba(0,240,255,.16), transparent 70%),
    linear-gradient(160deg,#101018,#05050a);
  display:grid;place-items:center;
  overflow:hidden;
}
.portrait__initials{
  font-family:var(--font-display);
  font-size:clamp(3rem,9vw,5.5rem);font-weight:700;
  background:var(--grad-trinity);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradSweep 9s linear infinite;
  opacity:.9;
}
/* Scanning light bar sweeping down the portrait */
.portrait__scan{
  position:absolute;left:0;right:0;height:28%;
  background:linear-gradient(180deg,transparent,rgba(0,240,255,.14),transparent);
  animation:scanDown 4.5s ease-in-out infinite;
}
@keyframes scanDown{
  0%,100%{transform:translateY(-120%)}
  50%{transform:translateY(420%)}
}
/* Brutalist corner brackets */
.portrait__corner{position:absolute;width:22px;height:22px;border:2px solid var(--cyan);z-index:2}
.portrait__corner.tl{top:-4px;left:-4px;border-right:0;border-bottom:0}
.portrait__corner.tr{top:-4px;right:-4px;border-left:0;border-bottom:0;border-color:var(--magenta)}
.portrait__corner.bl{bottom:-4px;left:-4px;border-right:0;border-top:0;border-color:var(--magenta)}
.portrait__corner.br{bottom:-4px;right:-4px;border-left:0;border-top:0}
/* Floating chips */
.portrait__chip{
  position:absolute;
  padding:.4rem .7rem;font-size:.55rem;
  background:rgba(8,8,12,.85);
  border:1px solid var(--glass-brd-hi);
  border-radius:var(--r-pill);
  backdrop-filter:blur(10px);
  color:var(--ink-dim);
  transform:translateZ(60px);
  animation:chipFloat 6s ease-in-out infinite;
}
.chip-a{top:6%;right:-4%}
.chip-b{bottom:9%;left:-4%;animation-delay:-3s;color:var(--gold)}
@keyframes chipFloat{50%{transform:translateZ(60px) translateY(-10px)}}
.about__figure figcaption{color:var(--ink-faint);font-size:.55rem}


/* ==========================================================================
   SECTION: Stats Counters
   ========================================================================== */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-top:clamp(3rem,6vw,5rem);
  background:var(--glass-brd);
  border:1px solid var(--glass-brd);
  border-radius:var(--r-lg);
  overflow:hidden;
  backdrop-filter:blur(var(--blur));
}
.stat{
  position:relative;
  padding:clamp(1.2rem,3vw,2rem);
  background:rgba(6,6,10,.7);
  display:grid;gap:.3rem;place-items:center;text-align:center;
  transition:background var(--t-med) ease;
  overflow:hidden;
}
.stat::after{ /* glow that charges up on hover */
  content:'';position:absolute;inset:auto 0 -60% 0;height:100%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(0,240,255,.22), transparent 70%);
  opacity:0;transition:opacity var(--t-med) ease;
}
.stat:hover::after{opacity:var(--glow-strength)}
.stat:hover{background:rgba(10,10,16,.9)}
.stat__num{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,4.5vw,3.2rem);font-weight:700;
  background:var(--grad-trinity);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradSweep 10s linear infinite;
  font-variant-numeric:tabular-nums;line-height:1;
}
.stat__label{color:var(--ink-faint);font-size:.55rem}


/* ==========================================================================
   SECTION: Skills
   ========================================================================== */
/* --- Skills: filter tabs --- */
.filters{
  position:relative;
  display:flex;flex-wrap:wrap;gap:.4rem;
  padding:.4rem;
  margin-bottom:clamp(1.8rem,4vw,2.8rem);
  border:1px solid var(--glass-brd);
  border-radius:var(--r-pill);
  background:var(--glass-bg);
  backdrop-filter:blur(var(--blur));
  width:fit-content;max-width:100%;
}
.filter{
  position:relative;z-index:1;
  padding:.55rem 1.05rem;min-height:40px;
  border-radius:var(--r-pill);
  font-size:.8rem;font-weight:500;color:var(--ink-dim);
  white-space:nowrap;
  transition:color var(--t-med) ease,transform var(--t-fast) var(--ease);
}
.filter:hover{color:var(--ink);transform:translateY(-1px)}
.filter.is-active{color:#04070a;font-weight:600}
/* Sliding pill that sits behind the active tab (positioned by JS) */
.filters__pill{
  position:absolute;top:.4rem;left:0;height:calc(100% - .8rem);
  border-radius:var(--r-pill);
  background:var(--grad-trinity);background-size:200% 100%;
  box-shadow:0 6px 22px -8px rgba(0,240,255,calc(.9*var(--glow-strength)));
  transition:transform .5s var(--ease),width .5s var(--ease);
  animation:gradSweep 8s linear infinite;
  z-index:0;
}

/* --- Skills: grid --- */
.skills__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(.9rem,1.8vw,1.4rem);
}

/* --- Skills: card --- */
.skill-card{
  --tier:var(--cyan);
  padding:1.3rem;
  display:grid;gap:.55rem;align-content:start;
  transition:transform .5s var(--ease),border-color .4s ease,box-shadow .5s var(--ease),
             opacity .45s ease,scale .45s var(--ease);
}
/* Tier colouring — one rule per tier, easy to extend */
.skill-card[data-tier="mastered"]  {--tier:var(--tier-mastered)}
.skill-card[data-tier="proficient"]{--tier:var(--tier-proficient)}
.skill-card[data-tier="competent"] {--tier:var(--tier-competent)}
.skill-card[data-tier="learning"]  {--tier:var(--tier-learning)}

/* Volumetric glow behind the card that "charges up" on hover */
.skill-card__glow{
  position:absolute;inset:-40% -20% auto -20%;height:120%;
  background:radial-gradient(50% 50% at 50% 100%, var(--tier), transparent 70%);
  opacity:0;filter:blur(40px);
  transition:opacity .5s ease;pointer-events:none;
}
.skill-card:hover{
  border-color:color-mix(in srgb,var(--tier) 55%,transparent);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.95),
             0 0 40px -8px color-mix(in srgb,var(--tier) calc(45% * var(--glow-strength)),transparent);
}
.skill-card:hover .skill-card__glow{opacity:calc(.22 * var(--glow-strength))}

.skill-card__top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.skill-card__icon{
  display:grid;place-items:center;
  width:46px;height:46px;border-radius:13px;
  font-size:1.35rem;color:var(--tier);
  background:color-mix(in srgb,var(--tier) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--tier) 30%,transparent);
  text-shadow:0 0 18px color-mix(in srgb,var(--tier) calc(70% * var(--glow-strength)),transparent);
  transition:transform var(--t-med) var(--ease-bounce);
}
.skill-card:hover .skill-card__icon{transform:translateZ(30px) rotate(-8deg) scale(1.08)}
.skill-card__badge{
  font-size:.48rem;padding:.28rem .5rem;
  border-radius:var(--r-pill);
  color:var(--tier);
  background:color-mix(in srgb,var(--tier) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--tier) 26%,transparent);
  white-space:nowrap;
}
.skill-card__name{font-size:1.12rem;letter-spacing:-.01em}
.skill-card__desc{font-size:.82rem;color:var(--ink-dim);line-height:1.55;min-height:2.6em}

/* Level meter */
.meter{
  height:4px;border-radius:4px;
  background:rgba(255,255,255,.07);
  overflow:hidden;margin-top:.35rem;
}
.meter__fill{
  display:block;height:100%;width:0%;
  border-radius:4px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--tier) 45%,transparent),var(--tier));
  box-shadow:0 0 12px color-mix(in srgb,var(--tier) calc(80% * var(--glow-strength)),transparent);
  transition:width 1.2s var(--ease);
}
.skill-card__lvl{
  position:absolute;top:1.3rem;right:1.3rem;
  font-size:.5rem;color:var(--ink-faint);opacity:0;
  transition:opacity var(--t-med) ease;
}
.skill-card__lvl i{font-style:normal;opacity:.55}

/* Filter states: hidden cards collapse smoothly */
.skill-card.is-filtered-out{
  opacity:0;scale:.9;
  pointer-events:none;
  position:absolute;visibility:hidden;
}


/* ==========================================================================
   SECTION: Projects
   ========================================================================== */
/* --- Projects: featured spotlight --- */
.featured{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:0;
  margin-bottom:clamp(1.4rem,3vw,2.2rem);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s ease;
}
.featured:hover{
  border-color:rgba(255,45,117,.4);
  box-shadow:var(--sh-deep),0 0 60px -20px rgba(255,45,117,calc(.55*var(--glow-strength)));
}
.featured__media{position:relative;overflow:hidden;min-height:300px}
.featured__thumb{position:absolute;inset:0;transition:transform .8s var(--ease)}
.featured:hover .featured__thumb{transform:scale(1.06)}
.featured__body{
  padding:clamp(1.4rem,3vw,2.6rem);
  display:grid;gap:.9rem;align-content:center;
}
.featured__flag{
  display:inline-flex;align-items:center;gap:.4rem;width:fit-content;
  font-size:.52rem;color:var(--gold);
  padding:.3rem .65rem;border-radius:var(--r-pill);
  background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.3);
}
.featured__title{font-size:clamp(1.5rem,3.4vw,2.4rem)}
.featured__desc{color:var(--ink-dim);font-size:.95rem;max-width:48ch}

/* Gradient placeholder thumbnails.
   EDIT: swap any of these for a real <img> — the classes are only placeholders. */
.thumb-grad-1{background:linear-gradient(135deg,#00303a 0%,#0b1030 45%,#3a0d2a 100%)}
.thumb-grad-2{background:linear-gradient(135deg,#0b1030 0%,#2a0b3a 55%,#00303a 100%)}
.thumb-grad-3{background:linear-gradient(135deg,#3a1a00 0%,#1a0b2e 60%,#002b33 100%)}
.thumb-grad-4{background:linear-gradient(135deg,#001f3a 0%,#0d0d1a 50%,#33002a 100%)}
.thumb-grad-5{background:linear-gradient(135deg,#2a002a 0%,#0a0a18 55%,#003a33 100%)}
.thumb-grad-6{background:linear-gradient(135deg,#003a2a 0%,#101024 50%,#3a002a 100%)}
.thumb-grad-7{background:linear-gradient(135deg,#1a1a3a 0%,#0a0a12 55%,#3a2a00 100%)}

/* Thumbnails get a grid + scanline treatment so they read as "screens".
   NOTE: do NOT set `position` here — these elements are absolutely positioned
   by the rules above and this shared rule would override that. */
.featured__thumb,.project-card__thumb{
  display:grid;place-items:center;overflow:hidden;
}
.featured__thumb::before,.project-card__thumb::before{
  content:'';position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px);
  mask-image:radial-gradient(ellipse at 50% 50%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000,transparent 78%);
}
.thumb__scan{
  position:absolute;left:0;right:0;height:40%;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.06),transparent);
  animation:scanDown 6s linear infinite;
}
.thumb__label{
  position:relative;z-index:1;
  font-size:.55rem;color:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.14);
  padding:.35rem .7rem;border-radius:var(--r-pill);
  backdrop-filter:blur(4px);
}

/* --- Projects: grid --- */
.projects__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(1rem,2vw,1.6rem);
}
.project-card{
  display:grid;grid-template-rows:auto 1fr;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s ease;
}
.project-card:hover{
  border-color:rgba(0,240,255,.38);
  box-shadow:var(--sh-deep),0 0 46px -18px rgba(0,240,255,calc(.6*var(--glow-strength)));
}
.project-card__media{position:relative;aspect-ratio:16/10;overflow:hidden}
.project-card__thumb{position:absolute;inset:0;transition:transform .8s var(--ease)}
.project-card:hover .project-card__thumb{transform:scale(1.09)}
/* Sliding gradient overlay on hover */
.project-card__overlay{
  position:absolute;inset:0;z-index:2;
  display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(0,240,255,.28),rgba(255,45,117,.3));
  backdrop-filter:blur(3px);
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.project-card:hover .project-card__overlay{transform:translateY(0)}
.project-card__overlay span{
  font-size:.6rem;color:#fff;
  border:1px solid rgba(255,255,255,.6);
  padding:.5rem .9rem;border-radius:var(--r-pill);
}
.project-card__body{padding:1.3rem;display:grid;gap:.6rem;align-content:start}
.project-card__title{font-size:1.2rem}
.project-card__desc{color:var(--ink-dim);font-size:.86rem;line-height:1.6}

/* Tech badges (brutalist chips) */
.badges{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.15rem}
.badges li{
  font-family:var(--font-mono);
  font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .55rem;
  color:var(--ink-dim);
  border:1px solid var(--glass-brd);
  border-radius:6px;
  background:rgba(255,255,255,.03);
  transition:color var(--t-fast) ease,border-color var(--t-fast) ease,transform var(--t-fast) var(--ease);
}
.badges li:hover{color:var(--cyan);border-color:rgba(0,240,255,.4);transform:translateY(-2px)}

.card__actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:.5rem}


/* ==========================================================================
   SECTION: Achievements Timeline
   ========================================================================== */
.tl{position:relative;display:grid;gap:clamp(1.6rem,3.5vw,2.6rem);padding-block:1rem}
/* Central spine with a scroll-linked fill */
.tl__spine{
  position:absolute;left:50%;top:0;bottom:0;width:2px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.07);
  overflow:hidden;border-radius:2px;
}
.tl__spine-fill{
  display:block;width:100%;height:0%;
  background:var(--grad-trinity);
  box-shadow:0 0 18px rgba(0,240,255,calc(.7*var(--glow-strength)));
}
.tl__item{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0}
/* Alternate sides on desktop */
.tl__item:nth-of-type(odd)  .tl__card{grid-column:1;margin-right:clamp(2rem,4vw,3.5rem)}
.tl__item:nth-of-type(even) .tl__card{grid-column:2;margin-left:clamp(2rem,4vw,3.5rem)}

/* Glowing pulsing node on the spine */
.tl__node{
  position:absolute;left:50%;top:2rem;
  width:14px;height:14px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--bg-000);
  border:2px solid var(--cyan);
  box-shadow:0 0 0 4px rgba(0,240,255,.08),0 0 20px rgba(0,240,255,calc(.8*var(--glow-strength)));
  z-index:2;
}
.tl__item.is-visible .tl__node{animation:nodePulse 2.4s ease-out infinite}
@keyframes nodePulse{
  0%  {box-shadow:0 0 0 0 rgba(0,240,255,.5),0 0 20px rgba(0,240,255,.6)}
  70% {box-shadow:0 0 0 16px rgba(0,240,255,0),0 0 20px rgba(0,240,255,.6)}
  100%{box-shadow:0 0 0 0 rgba(0,240,255,0),0 0 20px rgba(0,240,255,.6)}
}
/* Colour-cycle the nodes down the timeline */
.tl__item:nth-of-type(3n+2) .tl__node{border-color:var(--magenta);box-shadow:0 0 0 4px rgba(255,45,117,.08),0 0 20px rgba(255,45,117,.7)}
.tl__item:nth-of-type(3n+3) .tl__node{border-color:var(--gold);box-shadow:0 0 0 4px rgba(245,166,35,.08),0 0 20px rgba(245,166,35,.7)}

.tl__card{padding:1.4rem 1.5rem;display:grid;gap:.5rem;align-content:start}
.tl__card:hover{border-color:rgba(0,240,255,.35)}
.tl__date{
  color:var(--cyan);font-size:.55rem;
  padding:.25rem .55rem;width:fit-content;
  border:1px solid rgba(0,240,255,.25);border-radius:var(--r-pill);
  background:rgba(0,240,255,.06);
}
.tl__title{
  display:flex;align-items:center;gap:.55rem;
  font-size:1.06rem;line-height:1.3;
}
.tl__title i{color:var(--gold);font-size:.9em;flex:none}
.tl__card p{color:var(--ink-dim);font-size:.88rem}
.tl__meta{color:var(--ink-faint);font-size:.5rem}


/* ==========================================================================
   SECTION: Experience & Education
   ========================================================================== */
.exp__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3.5vw,3rem)}
.exp__col{display:grid;gap:1.1rem;align-content:start}
.exp__col-title{
  display:flex;align-items:center;gap:.55rem;
  color:var(--ink-faint);font-size:.6rem;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--glass-brd);
}
.exp__col-title i{color:var(--cyan)}
.exp-card{padding:1.4rem 1.5rem;display:grid;gap:.4rem;align-content:start}
.exp-card:hover{border-color:rgba(167,139,250,.4)}
.exp-card__years{
  color:var(--violet);font-size:.53rem;
  padding:.24rem .55rem;width:fit-content;
  border:1px solid rgba(167,139,250,.28);border-radius:var(--r-pill);
  background:rgba(167,139,250,.07);
}
.exp-card__role{font-size:1.06rem;margin-top:.25rem}
.exp-card__org{color:var(--cyan);font-size:.8rem;font-family:var(--font-mono)}
.exp-card__desc{color:var(--ink-dim);font-size:.87rem;margin-top:.25rem}


/* ==========================================================================
   SECTION: Testimonials (auto-advancing carousel)
   ========================================================================== */
.tst{
  overflow:hidden;
  padding-block:.5rem 1.2rem;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.tst__track{
  display:flex;gap:clamp(1rem,2vw,1.6rem);
  padding-inline:max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter)));
  transition:transform .8s var(--ease);
  will-change:transform;
}
.tst__card{
  flex:0 0 clamp(280px,34vw,430px);
  padding:1.6rem 1.7rem;
  display:grid;gap:1rem;align-content:start;
}
.tst__card:hover{border-color:rgba(255,45,117,.35)}
.tst__quote{font-size:1.5rem;color:var(--magenta);opacity:.55}
.tst__card blockquote p{
  font-style:italic;color:var(--ink);
  font-size:.98rem;line-height:1.7;
}
.tst__who{display:flex;align-items:center;gap:.8rem;margin-top:.2rem}
.tst__avatar{
  display:grid;place-items:center;flex:none;
  width:44px;height:44px;border-radius:50%;
  font-family:var(--font-display);font-weight:700;font-size:.85rem;
  color:#04070a;background:var(--grad-trinity);background-size:200% 100%;
  animation:gradSweep 9s linear infinite;
}
.tst__who strong{display:block;font-size:.92rem;font-family:var(--font-display)}
.tst__who em{display:block;font-style:normal;color:var(--ink-faint);font-size:.52rem}

.tst__controls{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  margin-top:1.4rem;
}
.tst__arrow{
  display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--glass-brd);
  background:var(--glass-bg);
  color:var(--ink-dim);
  backdrop-filter:blur(var(--blur));
  transition:color var(--t-fast) ease,border-color var(--t-fast) ease,transform var(--t-fast) var(--ease);
}
.tst__arrow:hover{color:var(--cyan);border-color:rgba(0,240,255,.45);transform:scale(1.08)}
.tst__dots{display:flex;gap:.45rem}
.tst__dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.18);
  transition:all var(--t-med) var(--ease);
}
.tst__dot.is-active{
  width:26px;border-radius:var(--r-pill);
  background:var(--grad-cyan-magenta);
  box-shadow:0 0 12px rgba(0,240,255,calc(.7*var(--glow-strength)));
}


/* ==========================================================================
   SECTION: Contact & Form
   ========================================================================== */
.contact{padding-top:clamp(3rem,7vw,6rem)}
.divider{position:absolute;top:0;left:0;right:0;height:90px;overflow:hidden;pointer-events:none}
.divider svg{width:100%;height:100%}

.contact__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.contact__title{
  font-size:clamp(2.2rem,5.5vw,4.2rem);
  background:var(--grad-trinity);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradSweep 12s linear infinite;
  margin-bottom:1rem;
}
.contact__msg{color:var(--ink-dim);max-width:44ch}

.contact__list{display:grid;gap:1rem;margin-top:2rem}
.contact__list li{display:flex;align-items:center;gap:.9rem}
.contact__ico{
  display:grid;place-items:center;flex:none;
  width:44px;height:44px;border-radius:13px;
  color:var(--cyan);font-size:1rem;
  background:rgba(0,240,255,.07);
  border:1px solid rgba(0,240,255,.2);
}
.contact__list em{
  display:block;font-style:normal;
  color:var(--ink-faint);font-size:.5rem;
  font-family:var(--font-mono);letter-spacing:.18em;
}
.contact__list a{
  color:var(--ink);position:relative;
  transition:color var(--t-fast) ease;
}
.contact__list a:hover{color:var(--cyan)}

/* --- Contact: the form --- */
.contact__form-wrap{padding:clamp(1.3rem,3vw,2.2rem)}
.form{display:grid;gap:1.5rem}
.form__title{color:var(--ink-faint);font-size:.55rem}

/* Material floating-label field */
.field{position:relative}
.field__input{
  width:100%;
  padding:1.35rem .9rem .6rem;
  background:rgba(255,255,255,.025);
  border:1px solid var(--glass-brd);
  border-radius:var(--r-md);
  color:var(--ink);
  font-size:.94rem;
  transition:border-color var(--t-med) ease,background var(--t-med) ease,box-shadow var(--t-med) ease;
}
.field__input--area{resize:vertical;min-height:130px;line-height:1.6}
.field__label{
  position:absolute;left:.95rem;top:.95rem;
  color:var(--ink-faint);font-size:.92rem;
  pointer-events:none;
  transform-origin:left top;
  transition:transform var(--t-med) var(--ease),color var(--t-med) ease;
}
/* Float the label when focused or filled (placeholder=" " trick) */
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label{
  transform:translateY(-.62rem) scale(.68);
  color:var(--cyan);
}
.field__input:focus{
  border-color:rgba(0,240,255,.55);
  background:rgba(0,240,255,.035);
  box-shadow:0 0 0 4px rgba(0,240,255,.07),
             0 0 26px -8px rgba(0,240,255,calc(.7*var(--glow-strength)));
}
/* Gradient underline that draws in on focus */
.field__line{
  position:absolute;left:12px;right:12px;bottom:0;height:2px;
  background:var(--grad-cyan-magenta);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-med) var(--ease);
  border-radius:2px;
}
.field__input:focus ~ .field__line{transform:scaleX(1)}

/* Error state */
.field__error{
  display:block;min-height:1.1em;
  margin-top:.3rem;padding-left:.2rem;
  color:var(--magenta);
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.06em;
  opacity:0;transform:translateY(-4px);
  transition:opacity var(--t-fast) ease,transform var(--t-fast) ease;
}
.field.has-error .field__error{opacity:1;transform:translateY(0)}
.field.has-error .field__input{
  border-color:rgba(255,45,117,.6);
  background:rgba(255,45,117,.05);
  animation:shake .4s var(--ease);
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)} 40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)} 80%{transform:translateX(3px)}
}
.form__status{min-height:1.2em;font-size:.62rem;color:var(--ink-faint)}
.form__status.is-ok{color:#3ddc84}
.form__status.is-bad{color:var(--magenta)}


/* ==========================================================================
   SECTION: Footer
   ========================================================================== */
.footer{position:relative;padding-top:clamp(3rem,6vw,5rem);overflow:hidden}
.footer__topline{
  position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad-trinity);background-size:220% 100%;
  animation:gradSweep 9s linear infinite;
  box-shadow:0 0 22px rgba(0,240,255,calc(.55*var(--glow-strength)));
}
.footer__grid{
  display:grid;grid-template-columns:1.4fr .8fr .8fr;
  gap:clamp(1.6rem,4vw,3rem);
  padding-bottom:clamp(2rem,4vw,3rem);
}
.footer__tag{color:var(--ink-dim);font-size:.88rem;margin-top:1rem;max-width:34ch}
.footer__nav h3,.footer__social h3{
  color:var(--ink-faint);font-size:.55rem;margin-bottom:1rem;
}
.footer__nav ul{display:grid;gap:.5rem}
.footer__nav a{
  color:var(--ink-dim);font-size:.9rem;position:relative;
  display:inline-block;transition:color var(--t-fast) ease,transform var(--t-fast) var(--ease);
}
.footer__nav a::before{
  content:'→ ';opacity:0;margin-left:-1.2em;
  transition:opacity var(--t-fast) ease;color:var(--cyan);
}
.footer__nav a:hover{color:var(--ink);transform:translateX(1.2em)}
.footer__nav a:hover::before{opacity:1}
.footer__hint{color:var(--ink-faint);font-size:.5rem;margin-top:1rem;opacity:.7}

.footer__bar{
  display:flex;flex-wrap:wrap;gap:.6rem;
  align-items:center;justify-content:space-between;
  padding-block:1.3rem;
  border-top:1px solid var(--glass-brd);
}
.footer__bar p{color:var(--ink-faint);font-size:.55rem}


/* ==========================================================================
   SECTION: Back To Top / Easter Egg / Confetti
   ========================================================================== */
.to-top{
  position:fixed;right:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(8,8,12,.7);
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(14px);
  color:var(--cyan);
  z-index:70;
  opacity:0;transform:translateY(24px) scale(.85);pointer-events:none;
  transition:opacity var(--t-med) ease,transform var(--t-med) var(--ease-bounce),
             box-shadow var(--t-med) ease,border-color var(--t-med) ease;
}
.to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{
  border-color:rgba(0,240,255,.5);
  box-shadow:0 0 28px rgba(0,240,255,calc(.55*var(--glow-strength)));
  transform:translateY(-4px);
}
.to-top i{position:relative;z-index:1;font-size:.85rem;transition:transform var(--t-med) var(--ease)}
.to-top:hover i{transform:translateY(-3px)}
/* Circular scroll-progress ring around the button */
.to-top svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.to-top circle{fill:none;stroke-width:2}
.to-top__track{stroke:rgba(255,255,255,.08)}
.to-top__prog{
  stroke:var(--cyan);
  stroke-linecap:round;
  stroke-dasharray:126;
  stroke-dashoffset:126;
  filter:drop-shadow(0 0 5px rgba(0,240,255,.8));
  transition:stroke-dashoffset .1s linear;
}

/* Confetti canvas (Konami / logo easter eggs) */
.confetti-canvas{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:9500;opacity:0;
  transition:opacity .4s ease;
}
.confetti-canvas.is-live{opacity:1}

/* Easter-egg toast */
.egg-toast{
  position:fixed;left:50%;bottom:2.2rem;
  transform:translate(-50%,140%);
  padding:.8rem 1.3rem;
  border-radius:var(--r-pill);
  background:rgba(8,8,12,.9);
  border:1px solid rgba(0,240,255,.4);
  backdrop-filter:blur(14px);
  color:var(--ink);
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;
  box-shadow:0 0 40px -10px rgba(0,240,255,.6);
  z-index:9600;
  transition:transform .55s var(--ease-bounce);
  white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;
}
.egg-toast.is-shown{transform:translate(-50%,0)}

/* Konami "rave" mode — hue-rotates the whole page for a few seconds */
body.rave-mode{animation:rave 1.6s linear infinite}
@keyframes rave{to{filter:hue-rotate(360deg)}}


/* ==========================================================================
   SECTION: Depth-of-field on scroll
   JS writes --dof (0 → 1) per section; far sections blur slightly, like a lens.
   ========================================================================== */
.section > .container{transition:filter .5s linear,opacity .5s linear}
.section.is-dof > .container{
  filter:blur(calc(var(--dof,0) * 1.4px));
  opacity:calc(1 - var(--dof,0) * .16);
}


/* ==========================================================================
   SECTION: Responsive Breakpoints
   1920+ · 1440 · 1200 · 1024 · 768 · 480 · 360
   ========================================================================== */

/* ---------- ≥1920px : ultra-wide, more air ---------- */
@media (min-width:1920px){
  :root{--maxw:1520px;--section-y:9.5rem}
  .hero__intro{max-width:56ch}
}

/* ---------- ≤1200px : tighten the featured card ---------- */
@media (max-width:1200px){
  .featured{grid-template-columns:1fr}
  .featured__media{min-height:240px;aspect-ratio:16/9}
  .about__grid{gap:2.4rem}
}

/* ---------- ≤1024px : 3-col → 2-col, stack about ---------- */
@media (max-width:1024px){
  :root{--section-y:clamp(4rem,8vw,6.5rem)}
  /* No depth-of-field blur on tablet/phone — pure cost, no payoff */
  .section.is-dof > .container{filter:none;opacity:1}
  .about__grid{grid-template-columns:1fr;justify-items:stretch}
  .about__figure{order:-1;justify-items:start}
  .portrait{max-width:340px}
  .exp__grid{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1 / -1}
  .skills__grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}

/* ---------- ≤900px : nav collapses to hamburger ---------- */
@media (max-width:900px){
  .nav__links{display:none}
  .burger{display:block}
  .glow-toggle .glow-toggle__txt{display:none}
  .glow-toggle{padding:.5rem .7rem}
  .logo__role{display:none}
}

/* ---------- ≤768px : single column everywhere ---------- */
@media (max-width:768px){
  html{scroll-padding-top:80px}
  :root{--blur:12px}

  .hero{min-height:100svh;padding-block:7.5rem 6.5rem}
  .hero__name{line-height:.88}
  .hero__name-line--2{transform:translateX(0)}
  .scroll-hint{display:none}

  .stats{grid-template-columns:repeat(2,1fr)}

  /* Timeline collapses to a single left-aligned rail */
  .tl__spine{left:9px;transform:none}
  .tl__item{grid-template-columns:1fr}
  .tl__item:nth-of-type(odd) .tl__card,
  .tl__item:nth-of-type(even) .tl__card{grid-column:1;margin:0 0 0 2.2rem}
  .tl__node{left:9px;top:1.9rem}

  .projects__grid{grid-template-columns:1fr}
  .tst__card{flex-basis:min(80vw,340px)}
  .footer__grid{grid-template-columns:1fr}

  /* Background geometry gets quieter so text stays readable */
  .geo{opacity:calc(.28 * var(--glow-strength))}
  .watermark{font-size:clamp(3.4rem,22vw,8rem)}
}

/* ---------- ≤480px : phone, ≥44px tap targets ---------- */
@media (max-width:480px){
  :root{--gutter:1.1rem;--r-lg:18px;--r-xl:22px}

  .hero__chip{font-size:.52rem;padding:.38rem .7rem}
  .hero__chip .mono{font-size:.5rem}
  .hero__cta{width:100%}
  .btn{width:100%}
  .btn--sm{width:auto}
  .card__actions .btn{width:auto}

  .social-rail a{width:44px;height:44px}
  .filters{width:100%;justify-content:flex-start;border-radius:var(--r-lg)}
  .filters__pill{border-radius:var(--r-md)}
  .filter{flex:1 1 auto;text-align:center;font-size:.72rem;padding:.55rem .6rem}
  .skills__grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .contact__form-wrap{padding:1.1rem}
  .footer__bar{justify-content:flex-start}
  .tst__controls{gap:.7rem}
}

/* ---------- ≤360px : smallest phones, still beautiful ---------- */
@media (max-width:360px){
  :root{--gutter:.9rem}
  .hero__name{letter-spacing:-.03em}
  .logo__name{font-size:.78rem}
  .logo__mark{width:38px;height:38px}
  .skill-card{padding:1.05rem}
  .stat{padding:1rem .6rem}
}

/* ---------- Landscape phones: keep the hero from overflowing ---------- */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding-block:6.5rem 4rem}
  .ticker{position:static}
}


/* ==========================================================================
   SECTION: Accessibility — touch devices, reduced glow, reduced motion
   ========================================================================== */

/* --- Touch / no-hover devices: hide the custom cursor entirely --- */
@media (hover:none),(pointer:coarse){
  .cursor-dot,.cursor-ring,.spotlight{display:none !important}
  /* Cards stay beautiful flat — tilt never applies (JS also skips it) */
  .tilt{transform:none !important}
  .tilt__glare{display:none}
  /* Non-hover fallbacks: reveal the project overlay label subtly */
  .project-card__overlay{transform:translateY(101%)}
}

/* --- "Reduce glow" accessibility mode (nav toggle, persisted) --- */
body.reduce-glow{--glow-strength:.18}
body.reduce-glow .atmosphere__aurora{filter:blur(90px) saturate(90%);opacity:.35}
body.reduce-glow .spotlight{opacity:.12}
body.reduce-glow .orb,body.reduce-glow .blob{opacity:.18}
body.reduce-glow .atmosphere__grain{opacity:.02}

/* --- prefers-reduced-motion: collapse to simple fades / static states --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.12s !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto}
  .reveal{opacity:1 !important;transform:none !important;filter:none !important;clip-path:none !important}
  .split-text .word > i{transform:none !important}
  .atmosphere__grain,.thumb__scan,.portrait__scan,.ticker__track{display:none}
  .tilt{transform:none !important}
  .section.is-dof > .container{filter:none !important;opacity:1 !important}
  .spotlight{display:none}
}