/* =====================================================================
   IAGO GARCIA BÄRTSCH - clean editorial portfolio
   Cool neutral monochrome · one type family · scroll-driven, restrained.
   ===================================================================== */

/* ----------  TOKENS  ---------- */
:root {
  --font-display: "Geist", system-ui, -apple-system, sans-serif;
  --font-body:    "Geist", system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", monospace;

  --accent: oklch(0.52 0.10 195);          /* deep teal (default) */
  --accent-ink: oklch(0.98 0.01 195);

  /* derived companion hues - share L/C with --accent, swing the hue.
     fallback first (plain) so older engines just reuse --accent. */
  --accent-2: var(--accent);
  --accent-2: oklch(from var(--accent) l calc(c + 0.015) calc(h + 62));
  --accent-3: var(--accent);
  --accent-3: oklch(from var(--accent) l calc(c + 0.015) calc(h - 58));
  --accent-glow: var(--accent);
  --accent-glow: oklch(from var(--accent) calc(l + 0.06) calc(c + 0.07) h);

  --aurora-strength: 0.38;  /* 0-1.6, driven by Tweaks */

  --wip: oklch(0.68 0.13 68);              /* amber - "in progress" status */
  --hover-red: oklch(0.58 0.21 25);        /* warm red hover glow, independent of --accent */

  --pad: clamp(20px, 5vw, 104px);
  --maxw: 1500px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --snap: cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="light"] {
  --bg:     oklch(0.985 0.002 260);
  --bg-soft:oklch(0.962 0.003 260);
  --line:   oklch(0.885 0.004 260);
  --line-2: oklch(0.93 0.004 260);
  --fg:     oklch(0.205 0.010 265);
  --fg-dim: oklch(0.535 0.010 265);
  --ph-a:   oklch(0.945 0.004 260);
  --ph-b:   oklch(0.915 0.005 260);
}
:root[data-theme="dark"] {
  --bg:     oklch(0.165 0.006 265);
  --bg-soft:oklch(0.205 0.008 265);
  --line:   oklch(0.31 0.009 265);
  --line-2: oklch(0.25 0.008 265);
  --fg:     oklch(0.955 0.006 260);
  --fg-dim: oklch(0.66 0.010 265);
  --ph-a:   oklch(0.235 0.008 265);
  --ph-b:   oklch(0.275 0.009 265);
}

/* ----------  RESET  ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.55;
  overflow-x: clip;
  transition: background .5s var(--ease), color .5s var(--ease);
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
.mono {
  font-family: var(--font-mono); font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; font-size: .7rem;
}
::selection { background: var(--accent); color: var(--accent-ink); }
image-slot, img { display: block; }

/* ----------  SCROLL PROGRESS  ---------- */
.progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 200; background: transparent; }
.progress__bar { display: block; height: 100%; width: 100%; background: var(--fg); transform: scaleX(0); transform-origin: left; will-change: transform; }

/* ----------  SECTION COUNTER  ---------- */
.seccount {
  position: fixed; left: var(--pad); bottom: clamp(18px, 3vw, 34px); z-index: 90;
  display: flex; align-items: baseline; gap: 5px; color: var(--fg-dim);
  pointer-events: none; opacity: 0; transform: translateY(6px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.seccount.show { opacity: 1; transform: none; }
.seccount__cur { color: var(--fg); font-weight: 500; }
.seccount__name { margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--line); }
@media (max-width: 640px) { .seccount { display: none; } }

/* ----------  NAV  ---------- */
.nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(18px, 2vw, 28px) var(--pad);
  transition: transform .45s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--line);
}
.nav.is-hidden { transform: translateY(-102%); }
.nav__status { display: flex; align-items: center; gap: 7px; color: var(--fg-dim); font-size: .84rem; transition: color .3s var(--ease); }
.nav__status:hover { color: var(--fg); }
.nav__status .dot { flex-shrink: 0; }
.nav__links { display: flex; gap: clamp(16px, 2.2vw, 36px); }
.nav__links a { position: relative; color: var(--fg-dim); font-size: .84rem; white-space: nowrap; transition: color .3s var(--ease), text-shadow .3s var(--ease); }
.nav__links a:hover { color: var(--fg); text-shadow: 0 0 18px color-mix(in oklab, var(--hover-red) 45%, transparent); }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: var(--hover-red); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 5px; vertical-align: middle; }

/* ----------  SHELL  ---------- */
section { position: relative; padding: clamp(80px, 11vw, 168px) var(--pad); max-width: var(--maxw); margin: 0 auto; }
.rowhead { display: flex; align-items: baseline; gap: 16px; padding-bottom: clamp(26px, 3.4vw, 44px); margin-bottom: clamp(44px, 6vw, 84px); position: relative; }
.rowhead::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease); }
.rowhead.in::after { transform: scaleX(1); }
/* staggered entrance: idx nudges up first, kick follows */
.rowhead .idx { color: var(--accent); opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.rowhead.in .idx { opacity: 1; transform: none; }
.rowhead .kick { color: var(--fg-dim); opacity: 0; transform: translateY(10px); transition: opacity 0.7s var(--ease) 0.09s, transform 0.7s var(--ease) 0.09s; }
.rowhead.in .kick { opacity: 1; transform: none; }

/* ----------  HERO  ---------- */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; max-width: none;
  /* paddings mirror the .hero__grid insets so the centered name + lead can never
     collide with the absolutely-anchored meta rows on short viewports */
  padding-top: clamp(118px, 14vh, 160px); padding-bottom: clamp(138px, 17vh, 186px); }
.hero__grid { position: absolute; inset: clamp(96px, 12vh, 130px) var(--pad) clamp(110px, 14vh, 150px); pointer-events: none; z-index: 0; }
.hero__meta { position: absolute; top: 0; left: 0; color: var(--fg-dim); opacity: 0; animation: metaIn .9s var(--ease) forwards; }
.hero__meta--r { left: auto; right: 0; text-align: right; animation-delay: .15s; }
.hero__meta--b { top: auto; bottom: 0; animation-delay: .3s; }
.hero__meta--br { top: auto; bottom: 0; left: auto; right: 0; text-align: right; color: var(--fg); animation-delay: .45s; }
@keyframes metaIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hero__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.6rem, min(11vw, 14vh), 10.5rem); line-height: 0.9; letter-spacing: -0.045em;
  display: flex; flex-direction: column; will-change: transform; position: relative; z-index: 1;
  /* composable via CSS vars: --hero-ty (main.js scroll parallax) + --hero-sk (effects.js velocity) */
  transform: translateY(var(--hero-ty, 0px)) skewX(var(--hero-sk, 0deg));
}
.hero__name .line { overflow: hidden; padding-top: 0.05em; padding-bottom: 0.24em; margin-bottom: -0.24em; }
.hero__name .line:nth-child(2) { text-indent: clamp(0.4rem, 7vw, 6.5rem); }
.line__in { display: block; transform: translateY(112%); will-change: transform; }
/* CSS-only fallback reveal - skipped when .gsap-hero is added (GSAP owns the transform then) */
.hero:not(.gsap-hero) .line__in { transition: transform 1.05s var(--ease); }
.hero:not(.gsap-hero).in .line__in { transform: translateY(0); }
.hero:not(.gsap-hero).in .line:nth-child(2) .line__in { transition-delay: .09s; }
.hero:not(.gsap-hero).in .line:nth-child(3) .line__in { transition-delay: .18s; }

.hero__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: clamp(30px, 4vw, 52px); }
.hero__lead { max-width: 36ch; font-size: clamp(1rem, 1.45vw, 1.28rem); color: var(--fg); line-height: 1.5; text-wrap: pretty; opacity: 0; animation: metaIn 1s var(--ease) .55s forwards; }
.scrollcue { display: flex; align-items: center; gap: 12px; color: var(--fg-dim); white-space: nowrap; opacity: 0; animation: metaIn 1s var(--ease) .7s forwards; }
.scrollcue__line { display: inline-block; width: 56px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.scrollcue__line::after { content: ""; position: absolute; inset: 0; background: var(--fg-dim); transform: translateX(-100%); animation: cue 2.6s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateX(-100%); } 55% { transform: translateX(0); } 100% { transform: translateX(100%); } }
@media (max-width: 720px) { .hero__foot { flex-direction: column; align-items: flex-start; gap: 20px; } }

/* ----------  ABOUT / SCRUB  ---------- */
.about { max-width: var(--maxw); }
.about__grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(28px, 4vw, 64px); align-items: end; }
.about__photo {
  position: relative; z-index: 75; /* above .glow, same as .contact__photo */
  width: clamp(190px, 20vw, 270px); aspect-ratio: 1 / 1.08;
  overflow: hidden; border-radius: 8px; border: 1px solid var(--line);
  margin: 0;
  background:
    radial-gradient(120% 80% at 50% 100%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 72%),
    linear-gradient(var(--bg-soft), var(--bg));
}
/* cutout anchored past the card's bottom edge so the frame crops the
   shirt print mid-chest - keeps the full head, hides the logo text.
   The mask fades the chest out before the frame edge so there is no
   hard cut line against the card background. */
.about__photo img, .contact__photo img {
  position: absolute; left: -4%; bottom: -14%; width: 108%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 66%, transparent 92%);
}
@media (max-width: 820px) { .about__grid { grid-template-columns: 1fr; } .about__photo { justify-self: start; } }
.manifesto {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.7rem, 4.3vw, 3.7rem); line-height: 1.16; letter-spacing: -0.025em;
  max-width: 22ch; text-wrap: pretty;
}
.manifesto .w { display: inline-block; opacity: .16; transform: translateY(0.16em); transition: opacity .25s linear, transform .5s var(--ease); }
.manifesto .w.lit { opacity: 1; transform: none; }
.manifesto .w.accentw.lit { color: var(--accent); }

/* ----------  STATS  ---------- */
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 64px); }
.stat { display: flex; flex-direction: column; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); }
.stat__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(3rem, 9vw, 7.2rem); line-height: .9; letter-spacing: -0.045em; }
.stat__label { color: var(--fg-dim); max-width: 20ch; line-height: 1.45; }
/* scroll-triggered accent rule that draws in left→right under each big number */
.stat__rule { display: block; height: 1px; width: 100%; background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 40%, transparent) 60%, transparent); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) 0.1s; }
.stat.in .stat__rule { transform: scaleX(1); }
.stats__grid > .stat:nth-child(2).in .stat__rule { transition-delay: 0.22s; }
.stats__grid > .stat:nth-child(3).in .stat__rule { transition-delay: 0.34s; }
/* stat entrance: gentle lift + barely-there scale settle */
.stats__grid > .stat.reveal { transform: translateY(26px) scale(0.97); transform-origin: bottom center; }
.stats__grid > .stat.reveal.in { transform: none; }
@media (max-width: 680px) { .stats__grid { grid-template-columns: 1fr; gap: 30px; } }

/* ----------  WORK - sticky stack  ---------- */
.work { max-width: none; padding-left: 0; padding-right: 0; padding-bottom: 0; }
.work__head { max-width: var(--maxw); margin-left: auto; margin-right: auto; padding-left: var(--pad); padding-right: var(--pad); }
.stack { position: relative; }
.panel {
  position: sticky; top: 0; min-height: 100vh;
  display: flex; align-items: center;
  padding: clamp(96px, 13vh, 150px) var(--pad) clamp(52px, 8vh, 92px);
  background: var(--bg); border-top: 1px solid var(--line);
}
.panel__inner { width: 100%; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(30px, 5vw, 84px); align-items: center; }
.panel__inner:has(.panel__text:only-child) { grid-template-columns: 1fr; max-width: 74ch; }
.panel__text { max-width: 60ch; }
@media (max-width: 860px) {
  .panel__inner { grid-template-columns: 1fr; gap: 28px; }
  .panel__inner .ph { order: -1; }
}
.panel__num { position: absolute; top: clamp(64px, 9vh, 116px); right: var(--pad); font-family: var(--font-display); font-weight: 600; font-size: clamp(4rem, 12vw, 12rem); line-height: 1; letter-spacing: -0.045em; color: transparent; -webkit-text-stroke: 1px color-mix(in oklab, var(--fg) 20%, transparent); pointer-events: none; will-change: transform; }
.panel__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.panel__status { display: inline-flex; align-items: center; gap: 7px; color: var(--fg-dim); }
.panel__status .dot { background: var(--accent); margin: 0; }
.panel.is-soon .panel__status .dot { background: var(--fg-dim); }
.panel.is-wip .panel__status .dot, .wrow.is-wip .wrow__status .dot { --dotc: var(--wip); background: var(--wip); }
.panel__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4.5vw, 4rem); line-height: 1.02; letter-spacing: -0.035em; margin-bottom: 22px; }
.panel__desc { font-size: clamp(.98rem, 1.25vw, 1.16rem); color: var(--fg-dim); max-width: 46ch; line-height: 1.6; margin-bottom: 28px; }
.panel__tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.panel__tools span { font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; padding: 6px 12px; border: 1px solid var(--line); border-radius: 2px; color: var(--fg-dim); }
.panel__link { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg); }
.panel__link .ar { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s; }
.panel__link:hover .ar { background: var(--fg); color: var(--bg); border-color: var(--fg); transform: translate(3px, -3px); }
.panel.is-soon .panel__link { color: var(--fg-dim); }

/* ----------  WORK - index layout (scalable alternative)  ---------- */
.work__index { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) clamp(60px, 9vw, 120px); }
.windex { border-top: 1px solid var(--line); }
.wrow { position: relative; display: grid; grid-template-columns: clamp(58px, 8vw, 104px) 1fr auto; gap: clamp(16px, 2.4vw, 44px); align-items: center; padding: clamp(24px, 3.6vw, 52px) 0; border-bottom: 1px solid var(--line); transition: padding-left .6s var(--ease), background-color .5s var(--ease); }
.wrow:hover { padding-left: clamp(14px, 2vw, 40px); background-color: color-mix(in oklab, var(--accent) 4%, var(--bg)); box-shadow: inset 0 0 60px -32px color-mix(in oklab, var(--hover-red) 55%, transparent); }
/* cool index numeral: big outlined ghost figure that fills with accent on hover */
.wrow__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3.4vw, 2.8rem); line-height: 1; letter-spacing: -0.04em; font-feature-settings: "tnum" 1;
  color: color-mix(in oklab, var(--fg) 32%, transparent);
  transition: color .5s var(--ease), transform .6s var(--ease); }
.wrow:hover .wrow__num { color: var(--accent); transform: translateY(-2px); }
.wrow__main { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.wrow__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 3rem); letter-spacing: -0.035em; line-height: 1; transition: color .5s var(--ease), transform .6s var(--ease); }
.wrow:hover .wrow__title { color: var(--accent); transform: translateX(4px); }
.wrow__tools { color: var(--fg-dim); }
.wrow__status { display: inline-flex; align-items: center; gap: 7px; color: var(--fg-dim); white-space: nowrap; transition: color .5s var(--ease); }
.wrow.is-soon .wrow__status .dot { background: var(--fg-dim); }
/* left edge accent bar grows in on hover */
.wrow::before { content: ""; position: absolute; left: calc(var(--pad) * -1 + 0px); top: 8%; bottom: 8%; width: 2px; background: var(--accent);
  transform: scaleY(0); transform-origin: center; transition: transform .55s var(--ease); }
.work__index .wrow::before { left: -18px; }
.wrow:hover::before { transform: scaleY(1); }
@media (max-width: 760px) {
  .wrow { grid-template-columns: 40px 1fr; row-gap: 6px; padding-right: clamp(10px, 3vw, 20px); }
  .wrow__status { grid-column: 2; }
}

/* panel text - staggered reveal when panel scrolls into view (.in); depth scale is JS-driven */
.panel__inner { transform-origin: center 46%; transition: transform .5s var(--ease); }
.panel__text > * { opacity: 0; transform: translateY(8px); transition: opacity 1.4s var(--ease), transform 1.5s var(--snap); }
.panel.in .panel__text > * { opacity: 1; transform: none; }
.panel.in .panel__text > *:nth-child(1) { transition-delay: .08s; }
.panel.in .panel__text > *:nth-child(2) { transition-delay: .22s; }
.panel.in .panel__text > *:nth-child(3) { transition-delay: .36s; }
.panel.in .panel__text > *:nth-child(4) { transition-delay: .50s; }
.panel.in .panel__text > *:nth-child(5) { transition-delay: .64s; }

/* image placeholder + clip reveal (used by project panels) */
.ph { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); background-color: var(--ph-a);
  background-image: repeating-linear-gradient(135deg, var(--ph-a) 0 13px, var(--ph-b) 13px 26px);
  clip-path: inset(0 0 100% 0); transition: clip-path 1.7s var(--snap) .22s; }
.ph__cap { position: absolute; left: 14px; bottom: 12px; font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-dim); background: var(--bg); padding: 5px 9px; border: 1px solid var(--line); }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.panel.in .ph { clip-path: inset(0 0 0 0); }
@media (max-width: 860px) {
  .panel { min-height: auto; padding-top: clamp(84px, 12vh, 124px); }
  .panel__num { position: static; text-align: left; margin-bottom: 10px; font-size: clamp(3rem, 16vw, 6rem); }
}

/* ---- work image: 3D tilt + travelling sheen on hover (pointer only) ---- */
@media (hover: hover) {
  .panel__inner .ph { transition: clip-path 1.1s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
    transform-style: preserve-3d; will-change: transform; }
  .panel__inner .ph::after { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
    background: radial-gradient(420px 420px at var(--gx, 50%) var(--gy, 50%),
      color-mix(in oklab, var(--accent-glow) 60%, transparent), transparent 60%);
    mix-blend-mode: soft-light; transition: opacity .4s var(--ease); }
  .panel.in .ph:hover { box-shadow: 0 26px 60px -28px color-mix(in oklab, var(--accent) 55%, transparent),
      0 4px 18px -10px rgba(0,0,0,.25); }
  .panel.in .ph:hover::after { opacity: 1; }
}

/* ----------  SKILLS - marquee carousel  ---------- */
.skills { max-width: none; padding-left: 0; padding-right: 0; }
.skills__head { max-width: var(--maxw); margin-left: auto; margin-right: auto; padding-left: var(--pad); padding-right: var(--pad); }
.marquee { display: flex; flex-direction: column; gap: clamp(4px, 1vw, 14px); }
.marquee__row { overflow: hidden; }
.marquee__track { display: flex; align-items: center; width: max-content; gap: clamp(20px, 3vw, 54px); will-change: transform; }
.mq__item { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 6vw, 5rem); letter-spacing: -0.04em; line-height: 1.08; white-space: nowrap; color: var(--fg); }
.marquee__row--stroke .mq__item { color: transparent; -webkit-text-stroke: 1px var(--line); }
.mq__sep { color: var(--accent); font-size: clamp(.8rem, 1.8vw, 1.5rem); transform: translateY(-0.15em); }
.mq__item { transition: color .12s var(--ease), -webkit-text-fill-color .12s var(--ease); }
.mq__item.mq--flash { color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; }
.marquee__row--stroke .mq__item.mq--flash { -webkit-text-stroke-color: transparent !important; }

/* ----------  CONTACT  ---------- */
.contact__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 104px); align-items: start; }
.contact__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 5.2vw, 4.4rem); line-height: 1; letter-spacing: -0.04em; margin-bottom: 18px; }
.contact__sub { color: var(--fg-dim); }
.contact__photo {
  position: relative; z-index: 75; /* above .glow (z-index: 70) so its blend mode can't tint the photo */
  width: clamp(200px, 22vw, 290px); aspect-ratio: 1 / 1.08;
  margin-top: clamp(34px, 5vw, 60px);
  overflow: hidden; border-radius: 8px; border: 1px solid var(--line);
  background:
    radial-gradient(120% 80% at 50% 100%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 72%),
    linear-gradient(var(--bg-soft), var(--bg));
}
/* crop + fade shared with .about__photo (rule lives there) */
.contact__links a { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 16px; padding: clamp(18px, 2.4vw, 30px) 0; border-top: 1px solid var(--line); font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 3.3vw, 2.9rem); letter-spacing: -0.035em; transition: padding-left .4s var(--ease), color .4s var(--ease); }
/* contact list items: slide from the right rather than from below */
.contact__links li.reveal { transform: translateX(34px); }
.contact__links li.reveal.in { transform: none; } /* must outrank the line above, .reveal.in alone loses on specificity */
.contact__links li:last-child a { border-bottom: 1px solid var(--line); }
.contact__links a:hover { padding-left: clamp(10px, 1.8vw, 28px); color: var(--fg); background: linear-gradient(90deg, color-mix(in oklab, var(--hover-red) 8%, transparent), transparent 60%); }
.contact__no { font-family: var(--font-mono); font-weight: 400; font-size: .72rem; color: var(--fg-dim); transition: color .45s var(--ease); }
.contact__links a:hover .contact__no { color: var(--fg); }
.contact__arrow { font-size: 1.25rem; display: inline-block; transform: rotate(var(--ar, 0deg)); transition: transform .5s var(--ease); }
.contact__links a:hover .contact__arrow { transform: rotate(var(--ar, 0deg)) translate(7px, -7px); }
@media (max-width: 820px) { .contact__grid { grid-template-columns: 1fr; } .contact__photo { display: none; } }

/* ----------  FOOTER  ---------- */
.footer { border-top: 1px solid var(--line); padding: clamp(76px, 11vw, 156px) var(--pad) clamp(28px, 4vw, 46px); max-width: var(--maxw); margin: 0 auto; overflow: hidden; }
.footer__big { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 13vw, 11.5rem); line-height: .9; letter-spacing: -0.05em; will-change: transform; }
/* letter-spacing contracts from open → tight as the wipe reveals */
.footer__big.wipe { letter-spacing: 0.07em; transition: clip-path 1.1s var(--ease), opacity .7s var(--ease), letter-spacing 1.25s var(--ease); }
.footer__big.wipe.in { letter-spacing: -0.05em; }
.footer__big .accentdot { color: var(--accent); }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-top: clamp(40px, 6vw, 76px); color: var(--fg-dim); }

/* ----------  INTRO CURTAIN  ---------- */
.loader { position: fixed; inset: 0; z-index: 1000; background: var(--fg); color: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(22px, 4.5vh, 46px); will-change: transform, filter; animation: ldOut .85s var(--snap) 1.6s forwards; }
.loader__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 3.6vw, 2.3rem); letter-spacing: -0.03em; color: var(--bg); opacity: 0; transform: translateY(14px); animation: ldFade .8s var(--ease) .1s forwards; }
.loader__count { color: color-mix(in oklab, var(--bg) 58%, var(--fg)); font-size: .82rem; opacity: 0; transform: translateY(14px); animation: ldFade .8s var(--ease) .25s forwards; }
.loader__count .num { color: var(--bg); }
.loader__bar { width: min(300px, 62vw); height: 1px; background: color-mix(in oklab, var(--bg) 28%, transparent); position: relative; overflow: hidden; }
.loader__barfill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--accent); animation: ldBar 1.4s var(--snap) .1s forwards; box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 0%, transparent); }
@keyframes ldBar { to { transform: scaleX(1); box-shadow: 0 0 18px 1px color-mix(in oklab, var(--accent) 65%, transparent); } }
@keyframes ldFade { to { opacity: 1; transform: none; } }
@keyframes ldOut { to { transform: translateY(-101%) scale(1.035); filter: blur(3px); visibility: hidden; } }

/* ----------  REVEAL  ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
/* index rows cascade in - a calm slide-up, no scale snap, generous easing */
.windex .wrow.reveal { transform: translateY(26px);
  transition: opacity 1.15s var(--ease), transform 1.15s var(--ease); }
.windex .wrow.reveal.in:nth-child(1) { transition-delay: .05s; }
.windex .wrow.reveal.in:nth-child(2) { transition-delay: .16s; }
.windex .wrow.reveal.in:nth-child(3) { transition-delay: .27s; }
.windex .wrow.reveal.in:nth-child(4) { transition-delay: .38s; }
.windex .wrow.reveal.in:nth-child(5) { transition-delay: .49s; }
.windex .wrow.reveal.in:nth-child(n+6) { transition-delay: .60s; }

/* mask-wipe reveal for large headings */
.wipe { clip-path: inset(0 0 108% 0); opacity: .001; transition: clip-path 1.05s var(--ease), opacity .7s var(--ease); }
.wipe.in { clip-path: inset(0 0 -8% 0); opacity: 1; }

/* ----------  GHOST SECTION INDEX NUMBERS  ---------- */
/* Large outlined numerals injected by effects.js - absolute within each section,
   parallaxed at ~55% scroll rate so they float behind content as a depth layer. */
.ghost-num {
  position: absolute;
  right: var(--pad);
  top: clamp(40px, 8%, 100px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(8rem, 20vw, 18rem);
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--fg) 16%, transparent);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  will-change: transform;
  opacity: 0.45;
}
:root[data-theme="dark"] .ghost-num {
  opacity: 0.32;
  -webkit-text-stroke-color: color-mix(in oklab, var(--fg) 14%, transparent);
}
@media (max-width: 640px) {
  .ghost-num { font-size: clamp(4rem, 26vw, 7rem); opacity: 0.28; right: calc(var(--pad) * 0.5); }
  /* phone nav: drop the status badge, tighten links so nothing wraps */
  .nav__status { display: none; }
  .nav__links { gap: 13px; margin-left: auto; }
  .nav__links a { font-size: .76rem; }
  /* project page nav: keep only "← Portfolio" + theme toggle */
  .nav:has(.proj-back) .nav__links a { display: none; }
  /* contact rows: slimmer number column so long names + arrow fit */
  .contact__links a { grid-template-columns: 30px 1fr auto; gap: 12px; }
  /* project panels: tool tags wrap into a wall of chips on narrow screens */
  .panel__tools { display: none; }
  /* hero: drop the clock, keep just the role label + copyright so the
     small viewport isn't fighting three separate meta rows */
  .hero__meta--r { display: none; }
  /* ambient fx read as noise on small screens - keep the corner aurora,
     drop the two extra drifting blobs and tone the rest down */
  .aurora__b { display: none; }
  .aurora::before, .aurora::after { opacity: calc(var(--aurora-strength) * 0.28); }
}

/* =====================================================================
   ✦ AMBIENT FX - aurora field, cursor light, gradient type, tilt/sheen
   Layered behind the editorial system; every effect is tweak-gated.
   ===================================================================== */

/* ---- aurora: colour anchored to opposite corners so the centre of the
   page stays clean. Two soft presences gently breathe + drift. ---- */
.aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  opacity: 0; transition: opacity 1.4s var(--ease);
  transform: translate3d(0, calc(var(--sy, 0) * -30px), 0); }
html[data-aurora="on"] .aurora { opacity: 1; }
.aurora::before, .aurora::after { content: ""; position: absolute; width: 60vmax; height: 60vmax;
  border-radius: 50%; filter: blur(60px); will-change: transform; }
.aurora::before { top: -26vmax; left: -24vmax;
  background: radial-gradient(circle at 50% 50%, var(--accent-glow), var(--accent-2) 44%, transparent 70%);
  opacity: calc(var(--aurora-strength) * 0.5);
  animation: auroraCornerA 28s ease-in-out infinite; }
.aurora::after { right: -24vmax; bottom: -28vmax;
  background: radial-gradient(circle at 50% 50%, var(--accent-3), var(--accent-glow) 46%, transparent 70%);
  opacity: calc(var(--aurora-strength) * 0.42);
  animation: auroraCornerB 34s ease-in-out infinite; }
:root[data-theme="dark"] .aurora::before, :root[data-theme="dark"] .aurora::after {
  mix-blend-mode: screen; filter: blur(68px);
  opacity: calc(var(--aurora-strength) * 0.46); }
@keyframes auroraCornerA { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(7vmax, 5vmax, 0) scale(1.14); } }
@keyframes auroraCornerB { 0%, 100% { transform: translate3d(0,0,0) scale(1.08); } 50% { transform: translate3d(-7vmax, -5vmax, 0) scale(.92); } }

/* extra aurora blobs (c = mid-right, d = lower-left) */
.aurora__b {
  position: absolute; border-radius: 50%;
  width: 52vmax; height: 52vmax;
  filter: blur(60px); will-change: transform; pointer-events: none;
}
.aurora__b--c {
  top: 28%; right: -18vmax;
  background: radial-gradient(circle at 50% 50%, var(--accent-2), var(--accent-glow) 42%, transparent 68%);
  opacity: calc(var(--aurora-strength) * 0.38);
  animation: auroraCornerB 24s ease-in-out infinite; animation-delay: -6s;
}
.aurora__b--d {
  bottom: 20%; left: -16vmax;
  background: radial-gradient(circle at 50% 50%, var(--accent-3), var(--accent-glow) 44%, transparent 68%);
  opacity: calc(var(--aurora-strength) * 0.30);
  animation: auroraCornerA 31s ease-in-out infinite; animation-delay: -14s;
}
:root[data-theme="dark"] .aurora__b { filter: blur(68px); mix-blend-mode: screen; opacity: calc(var(--aurora-strength) * 0.38); }

/* ---- cursor-tracked light (gentle, blend-safe over text).
   Fixed-size element moved via transform = GPU compositing, no per-frame
   repaint of the gradient. ---- */
.glow { position: fixed; top: 0; left: 0; width: 720px; height: 720px; z-index: 70; pointer-events: none;
  opacity: 0; transition: opacity 1s var(--ease);
  background: radial-gradient(circle at center, var(--accent-glow), transparent 68%);
  mix-blend-mode: soft-light; will-change: transform; transform: translate3d(-1200px, -1200px, 0); }
html[data-glow="on"] .glow { opacity: .95; }
:root[data-theme="dark"] .glow { mix-blend-mode: screen;
  background: radial-gradient(circle at center, var(--accent-glow), transparent 22%); }
:root[data-theme="dark"] html[data-glow="on"] .glow { opacity: .3; }
@media (hover: none) { .glow { display: none; } }

/* ---- fine film grain: a static fractal-noise texture over everything,
   very low opacity so it reads as paper tooth, not noise. No animation. ---- */
.grain { position: fixed; inset: 0; z-index: 80; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: .03; }
:root[data-theme="dark"] .grain { opacity: .04; }

/* ---- gradient-sweep headline (clip must live on the text element) ---- */
html[data-gradname="on"] .hero__name .line__in {
  background-image: linear-gradient(101deg,
    var(--fg) 0%, var(--fg) 26%, var(--accent) 44%,
    var(--accent-2) 56%, var(--accent-3) 64%, var(--fg) 84%);
  background-size: 260% 100%; background-position: 0% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: nameSheen 11s ease-in-out infinite; }
.hero__name .line:nth-child(2) .line__in { animation-delay: -1.6s; }
.hero__name .line:nth-child(3) .line__in { animation-delay: -3.4s; }
@keyframes nameSheen { 0%, 100% { background-position: 8% 0; } 50% { background-position: 100% 0; } }

/* footer big word picks up the same gradient when names are gradient'd */
html[data-gradname="on"] .footer__big {
  background-image: linear-gradient(101deg, var(--fg) 12%, var(--accent-2) 52%, var(--fg) 84%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: nameSheen 13s ease-in-out infinite; }
html[data-gradname="on"] .footer__big .accentdot { -webkit-text-fill-color: var(--accent); }

/* ---- stat numbers: accent gradient fill for a pop of color ---- */
.stat__num { background-image: linear-gradient(160deg, var(--fg) 38%, var(--accent));
  background-size: 100% 200%; background-position: 0 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transition: background-position .6s var(--ease); }
.stat.in .stat__num { background-position: 0 100%; }

/* ---- contact linktree: monochrome + restrained. Quick, snappy hover -
   the row snaps right with an overshoot, a thin bar snaps across the top,
   the arrow kicks. No colour wash, no gradient flow. ---- */
.contact__links a { position: relative; isolation: isolate;
  transition: padding-left .5s var(--ease), color .5s var(--ease); }
.contact__links a > * { position: relative; z-index: 1; }
/* thin bar glides across the top border on hover */
.contact__links a::after { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; z-index: 2;
  background: var(--fg);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease); }
.contact__links a:hover::after { transform: scaleX(1); }
/* split text: each character rolls up to an identical copy, staggered into
   a left-to-right cascade (per-char delay set in JS). ---- */
.contact__name { display: inline-block; vertical-align: bottom; }
.char { display: inline-block; overflow: hidden; height: 1.05em; line-height: 1.05; vertical-align: bottom; }
.char--space { overflow: visible; width: .28em; }
.char__faces { display: block; transition: transform .52s var(--ease); transition-delay: var(--char-delay, 0ms); }
.char__face { display: block; line-height: 1.05; }
.contact__links a:hover .char__faces { transform: translateY(-50%); }
/* nav links: same per-character roll on hover */
.nav__txt { display: inline-block; vertical-align: bottom; }
.nav__links a:hover .char__faces { transform: translateY(-50%); }

/* ---- accent dot gets a soft live pulse ---- */
.hero__meta--br .dot, .panel__status .dot, .nav__status .dot, .wrow.is-wip .wrow__status .dot { box-shadow: 0 0 0 0 color-mix(in oklab, var(--dotc, var(--accent)) 70%, transparent);
  animation: dotPulse 2.6s ease-out infinite; }
.panel.is-soon .panel__status .dot, .wrow.is-soon .wrow__status .dot { animation: none; box-shadow: none; }
@keyframes dotPulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--dotc, var(--accent)) 60%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; } }

/* ---- per-word stagger reveal (contact title) ---- */
.wstag-word { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 1.22; }
.wstag-word__in { display: block; transform: translateY(108%); transition: transform .85s var(--snap); }
.wstag-trigger.in .wstag-word__in { transform: translateY(0); }

/* ---- hero lead word dim (scroll-driven) ---- */
.hlw { display: inline; transition: opacity .42s var(--ease); }

/* ---- per-section scroll-progress line ---- */
.sec-progress-line {
  position: absolute; bottom: 0;
  left: var(--pad); right: var(--pad);
  height: 1px; pointer-events: none; transform-origin: left;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 28%, transparent));
  transform: scaleX(0);
}

/* ----------  BACK TO TOP  ---------- */
.totop {
  position: fixed; bottom: clamp(22px, 3vw, 38px); right: var(--pad);
  z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--fg-dim);
  opacity: 0; pointer-events: none;
  transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease),
              background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.totop.show { opacity: 1; pointer-events: auto; transform: none; }
.totop:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); box-shadow: 0 0 24px -4px color-mix(in oklab, var(--hover-red) 60%, transparent); }
.totop__arrow { transition: transform .35s var(--ease); }
.totop:hover .totop__arrow { transform: translateY(-3px); }

/* ---- page leave / enter transitions ---- */
body.is-leaving { animation: pageLeave .42s var(--ease) both; pointer-events: none; }
@keyframes pageLeave { to { opacity: 0; transform: translateY(-12px); } }