/* =========================================================
   Aditya Padmarajan — Portfolio
   Dark · ambient · warm
   ========================================================= */

:root {
  --bg: #0a0908;
  --bg-soft: #111110;
  --fg: #e8e3d8;
  --fg-dim: #8a857c;
  --muted: #4a463e;
  --line: #1c1b18;
  --accent: #d4a574;
  --accent-soft: #b88a5c;
  --accent-bright: #f0d4a8;
  --accent-deep: #8a6438;
  --live: #6fbf73;

  /* ===== Multi-tone metallic palette ===== */
  --metal-brass: linear-gradient(110deg,
    #8a6438 0%, #b88a5c 18%, #d4a574 35%, #f0d4a8 50%, #d4a574 65%, #b88a5c 82%, #8a6438 100%);
  --metal-steel: linear-gradient(110deg,
    #1e3a5f 0%, #3a608e 18%, #5f8cb8 35%, #a8c8e4 50%, #5f8cb8 65%, #3a608e 82%, #1e3a5f 100%);
  --metal-emerald: linear-gradient(110deg,
    #1a4d3a 0%, #2f7858 18%, #4fa07a 35%, #b8e4ce 50%, #4fa07a 65%, #2f7858 82%, #1a4d3a 100%);
  --metal-violet: linear-gradient(110deg,
    #3a2a5f 0%, #5a4592 18%, #8a6fc8 35%, #c8b3ea 50%, #8a6fc8 65%, #5a4592 82%, #3a2a5f 100%);
  --metal-rose: linear-gradient(110deg,
    #7a3d4a 0%, #b06878 18%, #d49aa6 35%, #f0c8d2 50%, #d49aa6 65%, #b06878 82%, #7a3d4a 100%);
  --metal-pearl: linear-gradient(110deg,
    #8a8a92 0%, #b8b8c0 18%, #e0e0e6 35%, #f8f8fc 50%, #e0e0e6 65%, #b8b8c0 82%, #8a8a92 100%);

  /* Default metal = brass (legacy code) */
  --metal: var(--metal-brass);
  --metal-vertical: linear-gradient(180deg,
    #f0d4a8 0%, #d4a574 35%, #b88a5c 70%, #8a6438 100%);

  /* Solid swatch counterparts (for borders / dots / glows) */
  --metal-brass-mid: #d4a574;
  --metal-steel-mid: #5f8cb8;
  --metal-emerald-mid: #4fa07a;
  --metal-violet-mid: #8a6fc8;
  --metal-rose-mid: #d49aa6;
  --metal-pearl-mid: #e0e0e6;

  /* Light environment tokens */
  --bg-light: #ece8de;
  --bg-light-soft: #f5f1e6;
  --fg-light: #1a1814;
  --fg-light-dim: #5a554a;
  --line-light: rgba(20, 18, 14, 0.10);

  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --maxw: 1440px;
  --gutter: clamp(24px, 4vw, 64px);

  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; background: var(--bg); }
html, body { color: var(--fg); }
body { background: transparent; }

/* ===== Ambient gradient mesh (sitewide) =====
   Deep metallic blobs drifting slowly behind everything.
   Tuned dark — reads as atmosphere, not decoration. */
.gradient-mesh {
  position: fixed;
  inset: -10vmax;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  /* Deep warm vignette base — pulls the whole frame inward */
  background:
    radial-gradient(120vmax 80vmax at 50% 0%,   rgba(8,7,6,0.55), transparent 55%),
    radial-gradient(120vmax 80vmax at 50% 100%, rgba(0,0,0,0.45), transparent 55%),
    radial-gradient(80vmax 60vmax at 50% 50%,   rgba(212,165,116,0.025), transparent 65%);
}
.gradient-mesh .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  mix-blend-mode: screen;
  opacity: 0.32;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.gradient-mesh .b1 {
  width: 58vmax; height: 58vmax;
  left: -16vmax; top: -20vmax;
  background: radial-gradient(circle at 40% 40%, rgba(176,128,76,0.55), rgba(176,128,76,0) 62%);
  animation: meshDrift1 38s var(--ease) infinite alternate;
}
.gradient-mesh .b2 {
  width: 52vmax; height: 52vmax;
  right: -18vmax; top: 14vmax;
  background: radial-gradient(circle at 50% 50%, rgba(58,96,142,0.45), rgba(58,96,142,0) 62%);
  animation: meshDrift2 46s var(--ease) infinite alternate;
}
.gradient-mesh .b3 {
  width: 56vmax; height: 56vmax;
  left: -10vmax; bottom: -22vmax;
  background: radial-gradient(circle at 50% 50%, rgba(47,120,88,0.32), rgba(47,120,88,0) 62%);
  animation: meshDrift3 52s var(--ease) infinite alternate;
}
.gradient-mesh .b4 {
  width: 46vmax; height: 46vmax;
  right: -8vmax; bottom: -16vmax;
  background: radial-gradient(circle at 50% 50%, rgba(90,69,146,0.30), rgba(90,69,146,0) 62%);
  animation: meshDrift4 42s var(--ease) infinite alternate;
}
.gradient-mesh .b5 {
  width: 42vmax; height: 42vmax;
  left: 30vmax; top: 28vmax;
  background: radial-gradient(circle at 50% 50%, rgba(176,104,120,0.22), rgba(176,104,120,0) 62%);
  animation: meshDrift5 58s var(--ease) infinite alternate;
}
/* Vignette + faint grain — depth on top of the mesh */
.gradient-mesh::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 100% 80% at 50% 50%, transparent 40%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}
.gradient-mesh::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.014) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
}

@keyframes meshDrift1 {
  0%   { transform: translate3d(0,    0,    0) scale(1);    }
  50%  { transform: translate3d(8vmax, 6vmax, 0) scale(1.08); }
  100% { transform: translate3d(14vmax, -4vmax, 0) scale(0.96); }
}
@keyframes meshDrift2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-10vmax, 8vmax, 0) scale(1.1); }
  100% { transform: translate3d(-4vmax, 16vmax, 0) scale(0.94); }
}
@keyframes meshDrift3 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(6vmax, -8vmax, 0) scale(1.06); }
  100% { transform: translate3d(14vmax, -14vmax, 0) scale(0.96); }
}
@keyframes meshDrift4 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-8vmax, -6vmax, 0) scale(1.1); }
  100% { transform: translate3d(-14vmax, 4vmax, 0) scale(0.94); }
}
@keyframes meshDrift5 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-12vmax, 8vmax, 0) scale(1.12); }
  100% { transform: translate3d(8vmax, 14vmax, 0) scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-mesh .blob { animation: none; }
}
@media (max-width: 720px) {
  .gradient-mesh .blob { filter: blur(60px); opacity: 0.45; }
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
  overflow-x: hidden;
  min-height: 100vh;
  cursor: none;
}

@media (hover: none), (max-width: 900px) {
  body { cursor: auto; }
}

/* Film grain overlay — gives the ambient ASMR feel */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Page load veil */
.veil {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9999;
  transform-origin: top;
  pointer-events: none;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }

::selection { background: var(--accent); color: var(--bg); }

/* ========== Type ========== */

.serif { font-family: var(--font-display); font-weight: 400; }
.mono  { font-family: var(--font-mono); font-weight: 400; }
.italic { font-style: italic; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.h-display {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(56px, 12vw, 200px);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.h-section {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
}

/* ========== Layout shell ========== */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

.hairline { height: 1px; background: var(--line); width: 100%; }

/* ========== Navigation ========== */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  mix-blend-mode: difference;
}
.nav > * { pointer-events: auto; }
.nav .mark {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav .mark .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 12px var(--live);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}
.nav .links {
  display: flex;
  gap: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #fff;
  text-transform: lowercase;
}
.nav .links a { position: relative; opacity: 0.9; transition: opacity .3s; }
.nav .links a:hover { opacity: 1; }
.nav .links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.nav .links a:hover::after { transform: scaleX(1); }

/* Hamburger toggle — hidden on desktop */
.nav-toggle {
  display: none;
  position: relative;
  width: 36px; height: 36px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  z-index: 102;
}
.nav-toggle span {
  position: absolute;
  left: 8px; right: 8px;
  height: 1.5px;
  background: currentColor;
  transition: top .3s var(--ease), transform .4s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav.is-open .nav-toggle span:nth-child(1) { top: 17px; transform: rotate(45deg); }
.nav.is-open .nav-toggle span:nth-child(2) { top: 17px; transform: rotate(-45deg); }

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .nav .mark { z-index: 102; }

  .nav .links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 36px;
    padding: 80px var(--gutter) 40px;
    background: rgba(8, 8, 10, 0.96);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    font-size: 22px;
    letter-spacing: 0.06em;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s var(--ease), visibility .35s var(--ease);
    z-index: 101;
  }
  .nav .links a { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
  .nav.is-open .links { opacity: 1; visibility: visible; pointer-events: auto; }
  .nav.is-open .links a { opacity: 1; transform: none; transition-delay: .12s; }
  .nav.is-open .links a:nth-child(2) { transition-delay: .18s; }
  .nav.is-open .links a:nth-child(3) { transition-delay: .24s; }
  .nav.is-open .links a:nth-child(4) { transition-delay: .30s; }

  /* When the panel is open, drop the topbar's difference-blend so the overlay reads correctly */
  .nav.is-open { mix-blend-mode: normal; }

  /* Override section-light link color while the dark overlay is showing */
  .section-light .nav.is-open .links a { color: #fff; }

  body.menu-open { overflow: hidden; }
}

/* ========== Cursor ========== */

.cursor {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9997;
  will-change: transform;
}
.cursor .cursor-dot,
.cursor .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  will-change: transform;
}
.cursor .cursor-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fg);
  mix-blend-mode: difference;
  z-index: 9998;
  transition: width .25s var(--ease-out), height .25s var(--ease-out),
              background .25s var(--ease), opacity .25s var(--ease);
}
.cursor .cursor-ring { display: none; }

/* ========== Footer ========== */

.foot {
  padding: 80px var(--gutter) 32px;
  border-top: 1px solid transparent;
  margin-top: 120px;
  position: relative;
  overflow: hidden;
}
/* Brass metallic top divider */
.foot::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 165, 116, 0.15) 20%,
    var(--accent) 50%,
    rgba(212, 165, 116, 0.15) 80%,
    transparent 100%);
}

/* Massive signature watermark */
.foot-signature {
  position: absolute;
  left: -2%;
  bottom: -8%;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(180px, 24vw, 360px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(232, 227, 216, 0.04);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}
.foot-signature em {
  font-family: var(--font-display);
  font-style: italic;
  background: var(--metal-brass);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  animation: metalShine 9s linear infinite;
  margin-left: -0.05em;
}

.foot .row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 80px;
}
.foot h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 18px;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 10px;
}
.foot h3 .h3-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--metal-brass);
  background-size: 200% 100%;
  animation: metalShine 6s linear infinite;
  box-shadow: 0 0 8px rgba(212, 165, 116, 0.5);
}
.foot ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.foot ul a, .foot ul li {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  font-size: 14px;
  transition: color .3s;
}
.foot ul a {
  background-image: linear-gradient(90deg, var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: color .3s, background-size .5s var(--ease-out);
}
.foot a:hover {
  color: var(--accent);
  background-size: 100% 1px;
}
.foot .legal {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.foot .legal .legal-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
}
.foot .legal .legal-meta {
  color: var(--fg);
  opacity: 0.7;
}
@media (max-width: 720px) {
  .foot .row { grid-template-columns: 1fr; gap: 32px; }
  .foot .legal {
    flex-direction: column;
    gap: 10px;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .foot .legal .legal-sep { display: none; }
  .foot-signature { font-size: clamp(140px, 38vw, 220px); bottom: -6%; }
}

/* ========== Page entrance animations (initial state) ========== */

[data-anim="rise"] { opacity: 0; transform: translateY(40px); }
[data-anim="fade"] { opacity: 0; }
.split-line { overflow: hidden; display: block; padding-bottom: 0.18em; margin-bottom: -0.18em; }
.split-line > .inner { display: block; will-change: transform; }

/* ========== Buttons ========== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn .arrow { transition: transform .4s var(--ease); }
.btn:hover .arrow { transform: translate(2px, -2px); }

.btn-circle {
  width: 132px; height: 132px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform .5s var(--ease-out), background .4s;
}
.btn-circle:hover { transform: scale(1.08); background: var(--fg); }
@media (max-width: 720px) {
  .btn-circle { width: 96px; height: 96px; font-size: 10px; }
}

/* ============================================================
   METALLIC ACCENT SYSTEM
   ============================================================ */

/* Brushed brass shimmer applied to italic display accents */
.hero-title em,
.h-section em,
.proj-head h1 em,
.cv-head h1 em,
.project-row .name em,
.section-head .title em,
.cv-section .head h2 em,
.contact-block .big em,
.next-block a em,
.page-head h1 em,
.proj-card h3 em,
.cv-entry .where em,
.dl-card .meta .file em,
.mar-card.pr .time {
  background: var(--metal);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: metalShine 9s linear infinite;
}

/* Subtle metallic sheen also on the project win badge text */
.project-row .badge {
  background: var(--metal);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: metalShine 11s linear infinite;
}
.project-row .badge .star,
.project-row .badge .sep {
  /* keep the icon/separator solid metallic, not text-clipped */
  -webkit-text-fill-color: var(--accent);
  color: var(--accent);
}

/* Marathon PR card glyph metallic */
.mar-card.pr .top .glyph {
  background: var(--metal);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.55;
  animation: metalShine 10s linear infinite;
}

@keyframes metalShine {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Hairline gradient — used as section dividers */
.metal-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-deep) 20%, var(--accent-bright) 50%, var(--accent-deep) 80%, transparent);
  opacity: 0.4;
}

/* ============================================================
   AMBIENT SPOTLIGHT (cursor-following glow)
   ============================================================ */
.spotlight {
  position: fixed;
  top: 0; left: 0;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle at center,
    rgba(212, 165, 116, 0.10) 0%,
    rgba(212, 165, 116, 0.05) 30%,
    transparent 65%);
  filter: blur(40px);
  transform: translate(-50%, -50%);
  transition: opacity .6s var(--ease);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
@media (hover: none), (max-width: 900px) {
  .spotlight { display: none; }
}

/* Sticky ambient orb fixed at bottom of viewport for depth */
.ambient-orb {
  position: fixed;
  bottom: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 165, 116, 0.06), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: orbDrift 18s ease-in-out infinite alternate;
}
@keyframes orbDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-200px, -100px) scale(1.2); }
}

/* ============================================================
   PROJECT ROW METALLIC SHIMMER ON HOVER
   ============================================================ */
.project-row::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--metal);
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--ease-out);
  animation: metalShine 6s linear infinite;
}
.project-row:hover::after { transform: scaleX(1); }

/* Project row name — metallic glow on hover */
.project-row:hover .name {
  background: var(--metal);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: metalShine 4s linear infinite;
}
.project-row .name { transition: opacity .4s; }

/* ============================================================
   PAGE TRANSITION (exit veil)
   ============================================================ */
.page-veil {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9999;
  transform: scaleY(0);
  transform-origin: top;
  pointer-events: none;
  will-change: transform;
}

/* ============================================================
   ENHANCED MARQUEE WITH METAL SEPARATORS
   ============================================================ */
.marquee-track .sep.metal {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--metal-vertical);
  box-shadow: 0 0 24px rgba(212, 165, 116, 0.4);
}

/* ============================================================
   MARATHON CARDS — metallic edge & PR sheen
   ============================================================ */
.mar-card {
  will-change: transform;
}
.mar-card.pr {
  border-color: var(--accent-deep);
  position: relative;
}
.mar-card.pr::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 10px;
  padding: 1px;
  background: var(--metal);
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: metalShine 8s linear infinite;
  pointer-events: none;
}
.mar-card.pr .top .pr-tag {
  background: var(--metal);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: metalShine 6s linear infinite;
  border-color: var(--accent);
}

/* ============================================================
   STAT NUM — metallic for big numbers
   ============================================================ */
.stat .num em {
  /* already styled by .h-section em rule above — reinforced */
  background: var(--metal);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: metalShine 8s linear infinite;
}

/* ============================================================
   NAV LIVE DOT — metallic ring
   ============================================================ */
.nav .mark .dot {
  background: var(--live);
  box-shadow: 0 0 0 1px rgba(111, 191, 115, 0.3), 0 0 12px var(--live);
}

/* ============================================================
   PROGRESS BAR — metallic fill
   ============================================================ */
.marathon-h-scroll .progress-bar .fill {
  background: var(--metal);
  background-size: 200% 100%;
  animation: metalShine 6s linear infinite;
}

/* ============================================================
   BUTTON PRIMARY METALLIC VARIANT
   ============================================================ */
.btn-metal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--metal);
  background-size: 200% 100%;
  animation: metalShine 8s linear infinite;
  transition: transform .4s var(--ease-out), filter .4s;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--accent);
}
.btn-metal:hover { transform: scale(1.04); filter: brightness(1.1); }
/* Stronger specificity to defeat .btn:hover when both classes are applied */
.btn.btn-metal {
  padding: 18px 28px;
  background: var(--metal);
  background-size: 200% 100%;
  color: var(--bg);
  border: 1px solid var(--accent);
  animation: metalShine 8s linear infinite;
  box-shadow: 0 10px 30px -12px rgba(212, 165, 116, 0.55);
}
.btn.btn-metal:hover {
  background: var(--metal);
  background-size: 200% 100%;
  color: var(--bg);
  border-color: var(--accent-bright);
  transform: scale(1.04) translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 16px 40px -10px rgba(212, 165, 116, 0.7);
}
.btn.btn-metal .arrow { color: var(--bg); }

/* ============================================================
   GLYPH PADDING — italic + metallic text needs inline-block
   with padding so the italic slant + bg-clip don't clip glyphs
   ============================================================ */
.hero-title em,
.h-section em,
.h-display em,
.proj-head h1 em,
.cv-head h1 em,
.contact-block .big em,
.next-block a em,
.page-head h1 em,
.section-head .title em,
.stat .num em,
.project-row .name em,
.proj-card h3 em,
.cv-entry .where em,
.cv-section .head h2 em,
.dl-card .meta .file em,
.proj-body h2 em,
.highlights h2 em,
.mar-card .time,
.next-block a em,
.btn .arrow,
[data-count] {
  display: inline-block;
  padding: 0.02em 0.08em 0.12em 0.02em;
  line-height: 1.05;
  vertical-align: baseline;
}

.stat .num,
.cv-head h1,
.proj-head h1,
.hero-title,
.section-head .title,
.contact-block .big,
.page-head h1,
.h-section,
.next-block a {
  /* allow descenders / italic slant to render fully */
  padding-bottom: 0.05em;
  overflow: visible;
}

/* Marathon card body — keep the time number tight & complete */
.mar-card .time {
  padding: 0 0.1em 0.15em 0;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .ambient-orb, .nav .mark .dot { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   MULTI-COLOR METAL UTILITIES
   Use as text classes: <span class="metal-text metal-steel">...
   Or apply to icons/dots: <span class="metal-dot metal-emerald">
   ============================================================ */
.metal-text {
  background: var(--metal);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: metalShine 9s linear infinite;
}
.metal-text.brass   { background: var(--metal-brass);   background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.metal-text.steel   { background: var(--metal-steel);   background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.metal-text.emerald { background: var(--metal-emerald); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.metal-text.violet  { background: var(--metal-violet);  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.metal-text.rose    { background: var(--metal-rose);    background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.metal-text.pearl   { background: var(--metal-pearl);   background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.metal-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--metal-brass);
  box-shadow: 0 0 18px rgba(212,165,116,0.4);
}
.metal-dot.steel   { background: var(--metal-steel);   box-shadow: 0 0 18px rgba(95, 140, 184, 0.4); }
.metal-dot.emerald { background: var(--metal-emerald); box-shadow: 0 0 18px rgba(79, 160, 122, 0.4); }
.metal-dot.violet  { background: var(--metal-violet);  box-shadow: 0 0 18px rgba(138, 111, 200, 0.4); }
.metal-dot.rose    { background: var(--metal-rose);    box-shadow: 0 0 18px rgba(212, 154, 166, 0.4); }
.metal-dot.pearl   { background: var(--metal-pearl);   box-shadow: 0 0 18px rgba(224, 224, 230, 0.4); }

/* ============================================================
   PER-PROJECT METAL OVERRIDES
   <a class="project-row" data-metal="steel|emerald|brass|violet">
   ============================================================ */
.project-row[data-metal="steel"]   { --row-metal: var(--metal-steel);   --row-metal-mid: var(--metal-steel-mid); }
.project-row[data-metal="emerald"] { --row-metal: var(--metal-emerald); --row-metal-mid: var(--metal-emerald-mid); }
.project-row[data-metal="brass"]   { --row-metal: var(--metal-brass);   --row-metal-mid: var(--metal-brass-mid); }
.project-row[data-metal="violet"]  { --row-metal: var(--metal-violet);  --row-metal-mid: var(--metal-violet-mid); }
.project-row[data-metal="rose"]    { --row-metal: var(--metal-rose);    --row-metal-mid: var(--metal-rose-mid); }

.project-row[data-metal] .badge {
  background: var(--row-metal);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.project-row[data-metal] .badge .star,
.project-row[data-metal] .badge .sep {
  -webkit-text-fill-color: var(--row-metal-mid);
  color: var(--row-metal-mid);
  background: var(--row-metal-mid);
}
.project-row[data-metal] .badge .star {
  /* circle stays solid mid-color */
  border-color: var(--row-metal-mid);
  background: transparent;
  -webkit-text-fill-color: var(--row-metal-mid);
}
.project-row[data-metal] .name em {
  background: var(--row-metal);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.project-row[data-metal]:hover .name {
  background: var(--row-metal);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.project-row[data-metal]::after {
  background: var(--row-metal);
  background-size: 200% 100%;
}
.project-row[data-metal]:hover .view {
  color: var(--row-metal-mid);
}
.project-row[data-metal]:hover .idx {
  color: var(--row-metal-mid);
}

/* ============================================================
   PER-CARD METAL OVERRIDES (projects.html grid)
   ============================================================ */
.proj-card[data-metal="steel"]   { --row-metal: var(--metal-steel);   --row-metal-mid: var(--metal-steel-mid); }
.proj-card[data-metal="emerald"] { --row-metal: var(--metal-emerald); --row-metal-mid: var(--metal-emerald-mid); }
.proj-card[data-metal="brass"]   { --row-metal: var(--metal-brass);   --row-metal-mid: var(--metal-brass-mid); }
.proj-card[data-metal="violet"]  { --row-metal: var(--metal-violet);  --row-metal-mid: var(--metal-violet-mid); }
.proj-card[data-metal="rose"]    { --row-metal: var(--metal-rose);    --row-metal-mid: var(--metal-rose-mid); }

.proj-card[data-metal] h3 em {
  background: var(--row-metal);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: metalShine 8s linear infinite;
}
.proj-card[data-metal]:hover h3 {
  background: var(--row-metal);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: metalShine 4s linear infinite;
}
.proj-card[data-metal] .visual .corner::before { background: var(--row-metal-mid); }
.proj-card[data-metal] .visual .center {
  background: var(--row-metal);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.5;
  animation: metalShine 10s linear infinite;
}
.proj-card[data-metal]:hover .visual .center { opacity: 0.9; }

/* ============================================================
   HERO ROSE-GOLD OVERRIDE
   ============================================================ */
.hero-title em.rose {
  background: var(--metal-rose) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ============================================================
   MARQUEE — alternating metal dots
   ============================================================ */
.marquee-track .sep.metal {
  width: 14px; height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(212, 165, 116, 0.3);
}
.marquee-track .sep.metal.brass   { background: var(--metal-brass);   box-shadow: 0 0 20px rgba(212,165,116,0.4); }
.marquee-track .sep.metal.steel   { background: var(--metal-steel);   box-shadow: 0 0 20px rgba(95,140,184,0.4); }
.marquee-track .sep.metal.emerald { background: var(--metal-emerald); box-shadow: 0 0 20px rgba(79,160,122,0.4); }
.marquee-track .sep.metal.violet  { background: var(--metal-violet);  box-shadow: 0 0 20px rgba(138,111,200,0.4); }
.marquee-track .sep.metal.rose    { background: var(--metal-rose);    box-shadow: 0 0 20px rgba(212,154,166,0.4); }

/* ============================================================
   LIGHT SECTION ENVIRONMENT (Pearl bg + dark text)
   Apply <section class="section-light"> for full invert.
   ============================================================ */
.section-light {
  background: var(--bg-light);
  color: var(--fg-light);
  position: relative;
  padding-top: 80px;
  padding-bottom: 80px;
  overflow: hidden;
  isolation: isolate;
}
/* Animated warm pastel mesh for light sections — same DNA, inverted palette.
   Layered radial-gradients with independently-animated background-positions. */
.section-light::before {
  content: "";
  position: absolute;
  inset: -10vmax;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(38vmax 38vmax, rgba(212,165,116,0.28), rgba(212,165,116,0) 60%),
    radial-gradient(32vmax 32vmax, rgba(95,140,184,0.22), rgba(95,140,184,0) 60%),
    radial-gradient(36vmax 36vmax, rgba(176,104,120,0.18), rgba(176,104,120,0) 60%),
    radial-gradient(30vmax 30vmax, rgba(79,160,122,0.15), rgba(79,160,122,0) 60%),
    radial-gradient(28vmax 28vmax, rgba(138,111,200,0.14), rgba(138,111,200,0) 60%),
    linear-gradient(180deg, var(--bg-light-soft), var(--bg-light) 50%, var(--bg-light));
  background-repeat: no-repeat;
  background-size:
    72vmax 72vmax,
    64vmax 64vmax,
    70vmax 70vmax,
    60vmax 60vmax,
    56vmax 56vmax,
    100% 100%;
  background-position:
    10% 15%,
    80% 75%,
    70% 20%,
    20% 85%,
    50% 50%,
    0 0;
  filter: blur(40px);
  animation: lightMeshDrift 36s var(--ease) infinite alternate;
}
/* Paper-grain on top of the light mesh */
.section-light::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.section-light > * { position: relative; z-index: 1; }

@keyframes lightMeshDrift {
  0% {
    background-position:
      10% 15%, 80% 75%, 70% 20%, 20% 85%, 50% 50%, 0 0;
  }
  50% {
    background-position:
      25% 35%, 65% 60%, 55% 35%, 35% 70%, 60% 40%, 0 0;
  }
  100% {
    background-position:
      18% 25%, 75% 80%, 80% 12%, 12% 78%, 45% 58%, 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .section-light::before { animation: none; }
}
.section-light .section-head .lbl { color: var(--fg-light-dim); }
.section-light .section-head .title { color: var(--fg-light); }
.section-light .marathon-stats { border-bottom-color: var(--line-light); }
.section-light .stat .num { color: var(--fg-light); }
.section-light .stat .lbl { color: var(--fg-light-dim); }
.section-light .note { color: var(--fg-light-dim) !important; }
.section-light .nav .mark,
.section-light .nav .links { color: var(--fg-light); }
/* Section dividers within light section */
.section-light .hairline { background: var(--line-light); }

/* ============================================================
   MARATHON SECTION — section-light specific tweaks
   ============================================================ */
.section-light .mar-card {
  background: var(--bg-soft);
  border-color: rgba(20,18,14,0.15);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.25),
    0 10px 24px -12px rgba(0,0,0,0.15);
  color: var(--fg);  /* keep cards dark-themed */
}
.section-light .mar-card .race,
.section-light .mar-card .time,
.section-light .mar-card .strava { color: var(--fg); }
.section-light .mar-card .loc,
.section-light .mar-card .date,
.section-light .mar-card .km,
.section-light .mar-card .num { color: var(--fg-dim); }
.section-light .mar-card .body { border-top-color: var(--line); }
.section-light .mar-card .foot { border-top-color: var(--line); }
.section-light .mar-card:hover {
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.35),
    0 14px 28px -12px rgba(0,0,0,0.2);
}
.section-light .marathon-h-scroll .progress-bar { background: rgba(20,18,14,0.12); }
.section-light .marathon-h-scroll .marker { color: var(--fg-light-dim); }
.section-light .marathon-h-scroll .marker .arrow-cue { color: var(--metal-brass-mid); }

/* Decorative oversize section number for marathon section */
.section-light .deco-num {
  position: absolute;
  top: 20px; right: var(--gutter);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(120px, 18vw, 240px);
  line-height: 1;
  color: rgba(20,18,14,0.06);
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   MARATHON STAT — multi-metal mix
   Each stat .num gets a unique metal accent
   ============================================================ */
.section-light .stat[data-metal="brass"]   .num em,
.section-light .stat[data-metal="steel"]   .num em,
.section-light .stat[data-metal="emerald"] .num em,
.section-light .stat[data-metal="rose"]    .num em {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 220% 100%;
  animation: metalShine 8s linear infinite;
}
.stat[data-metal="brass"]   .num em { background: var(--metal-brass);   background-size: 220% 100%; }
.stat[data-metal="steel"]   .num em { background: var(--metal-steel);   background-size: 220% 100%; }
.stat[data-metal="emerald"] .num em { background: var(--metal-emerald); background-size: 220% 100%; }
.stat[data-metal="rose"]    .num em { background: var(--metal-rose);    background-size: 220% 100%; }

/* ============================================================
   SECTION TRANSITION — fade gradient between sections
   ============================================================ */
.section-fade-top {
  position: relative;
}
.section-fade-top::before {
  content: "";
  position: absolute;
  top: -80px; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent, var(--bg-light));
  pointer-events: none;
}
.section-fade-bottom::after {
  content: "";
  position: absolute;
  bottom: -80px; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(0deg, transparent, var(--bg-light));
  pointer-events: none;
}

/* ============================================================
   CONTACT BLOCK — violet glow background
   ============================================================ */
.contact-block {
  background:
    radial-gradient(ellipse 80% 60% at 30% 50%, rgba(138,111,200,0.06), transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 50%, rgba(212,165,116,0.05), transparent 60%);
  border-radius: 24px;
  margin-top: 60px;
}

/* Contact "Send it." — keep brass for warmth */
.contact-block .big em { /* uses --metal default = brass */ }

/* ============================================================
   FOOTER — subtle dark gradient
   ============================================================ */
.foot {
  background: linear-gradient(180deg, var(--bg) 0%, #050504 100%);
}

/* ============================================================
   MOBILE / TOUCH PERFORMANCE PASS
   Disables the expensive GPU-bound effects (blur filters,
   mix-blend-mode, continuous transform/background animations,
   backdrop-filter) on touch devices and narrow viewports.
   These were causing phone heating, lag, and slow paint.
   The cinematic register survives on desktop where the GPU
   can handle it.
   ============================================================ */
@media (hover: none), (max-width: 900px) {
  /* --- Sitewide ambient effects (the biggest GPU offenders) --- */
  .gradient-mesh .blob {
    animation: none !important;
    filter: none !important;          /* blur(110px/60px) is the worst on phones */
    mix-blend-mode: normal !important; /* screen blend is GPU-heavy */
    opacity: 0.55;
  }
  .gradient-mesh .b5 { display: none; } /* drop one of five blobs to cut paint cost */
  .gradient-mesh::after { display: none; } /* grain dot pattern overlay */

  /* Film grain noise overlay — mix-blend-mode is expensive */
  body::before { display: none !important; }

  /* Spotlight + ambient orb — fixed-position blurred elements */
  .spotlight { display: none !important; }
  .ambient-orb { animation: none !important; filter: blur(40px); opacity: 0.5; }

  /* Backdrop-filter is one of the heaviest mobile operations */
  .hero-card,
  .marathon-photo .photo-tag,
  .trophy-badge,
  .project-preview .pv-cap,
  .contact-status,
  .hero-intro .hero-status {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* --- Hero --- */
  .hero-figure img {
    animation: none !important;
    /* Lighter drop shadow — phones repaint this every frame during scroll */
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.45)) !important;
  }
  .hero-figure .figure-glow { animation: none !important; opacity: 0.55; }

  /* --- Marathon cards --- */
  .mar-card::before,
  .mar-card .top .glyph,
  .mar-card .time,
  .mar-card.pr::after,
  .trophy-badge,
  .trophy-badge .trophy-glow,
  .marathon-photo .photo-tag .t-dot {
    animation: none !important;
  }
  .mar-card .top .glyph { opacity: 0.18; } /* compensate for no shimmer */

  /* --- Award badges --- */
  .award-gold { animation: none !important; }

  /* --- Project rows --- */
  .project-row.winner-row::before,
  .project-row.winner-row .name,
  .project-row::after {
    animation: none !important;
  }

  /* --- Contact --- */
  .contact-status .status-dot,
  .contact-block .email .email-dot,
  .contact-block .email .email-text,
  .foot h3 .h3-dot,
  .foot-signature em {
    animation: none !important;
  }

  /* --- Hero status pill --- */
  .hero-intro .hero-status .status-dot,
  .hero-intro .hero-title em.t-line {
    animation: none !important;
  }

  /* --- Marathon section watermark numerals are heavy paint targets --- */
  .project-row .big-num-wrap { display: none; }

  /* --- Buttons --- */
  .btn-metal,
  .btn.btn-metal {
    animation: none !important;
  }

  /* Remove will-change on idle elements (reserves GPU memory) */
  .gradient-mesh .blob,
  .hero-figure img,
  .marathon-h-scroll .scroll-track {
    will-change: auto;
  }
}

/* Honor user's reduced-motion preference everywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .spotlight, .ambient-orb, body::before { display: none !important; }
}