:root {
  --bg: #05070f;
  --fg: #e6ecf5;
  --faint: rgba(230, 236, 245, 0.45);
  --cyan: #4fe3ff;
  --violet: #8b5cf6;
  --orange: #ffb45c;
  --p: 0; /* scroll progress through the dive, written by main.js */
}

* { box-sizing: border-box; }
/* Root size follows viewport width so the UI reads the same on a 1280px laptop and a 4K monitor:
   ~15px at 1280, 16px at 1440, ~18.5px at 1920, ~22px at 2560, capped at 26px. Everything below is in rem. */
html { font-size: clamp(15px, 0.52vw + 8.5px, 26px); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 1rem/1.55 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
a[href=""] { color: var(--faint); pointer-events: none; text-decoration: line-through; } /* link not filled in yet */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.9rem 1.5rem;
  background: linear-gradient(rgba(5, 7, 15, 0.85), rgba(5, 7, 15, 0));
}
.nav-brand { font-weight: 700; letter-spacing: 0.2em; color: var(--fg); }
.nav-links { display: flex; gap: 1.1rem; margin-left: auto; }
.nav-links a { color: var(--faint); font-size: 0.875rem; }
.nav-links a:hover { color: var(--fg); text-decoration: none; }
/* between the last project and the name card (p 0.85–0.95) the links slide right into the space
   the Skip button leaves behind; --skip-w is measured by main.js */
.nav-links, .nav-github { transform: translateX(calc(var(--skip-w, 0px) * clamp(0, (var(--p) - 0.85) * 10, 1))); }
.nav.measure .nav-links, .nav.measure .nav-github { transform: none; }
.nav-github { display: inline-flex; color: var(--faint); line-height: 0; }
.nav-github:hover { color: var(--fg); text-decoration: none; }
.nav-skip {
  font-size: 0.8rem; padding: 0.4rem 0.75rem; border: 1px solid rgba(79, 227, 255, 0.35); border-radius: 999px;
  opacity: calc(1 - var(--p) * 1.4);
  pointer-events: none;
}
.nav-skip.on { pointer-events: auto; }
@media (max-width: 720px) { .nav-links { display: none; } }

/* ---------- acts 1–5 ---------- */
.dive { height: 950vh; position: relative; }
.pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.pin canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hero {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  padding: 0 1.5rem; pointer-events: none;
  opacity: calc(1 - var(--p) * 14);
  transform: translateY(calc(var(--p) * -300px)) scale(calc(1 + var(--p) * 1.5));
}
.hero .eyebrow { color: var(--cyan); margin: 0 0 0.75rem; }
.hero h1 {
  margin: 0; font-size: clamp(2.5rem, 6.5vw, 6.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  text-shadow: 0 0 30px rgba(79, 227, 255, 0.45);
}
.hero .tagline { margin: 1.1rem 0 0; font-size: clamp(1rem, 1.6vw, 1.5rem); color: var(--faint); }
.hero .hint { margin-top: 3.5rem; color: var(--faint); animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }

.hud {
  position: absolute; left: 1.5rem; bottom: 1.25rem; display: flex; gap: 1.4rem; color: var(--faint);
  opacity: calc(var(--p) * 8);
}
.hud b { color: var(--cyan); font-weight: 500; }

/* overlay elements tethered to 3D anchors (main.js sets transform + opacity) */
.overlay { position: absolute; inset: 0; pointer-events: none; }
.overlay > * { position: absolute; left: 0; top: 0; opacity: 0; transform: translate(-50%, -50%); display: none; }
.overlay > .on { display: block; }
.card {
  width: 15rem; padding: 0.875rem 1rem;
  background: rgba(8, 12, 24, 0.72); border: 1px solid rgba(79, 227, 255, 0.28); border-radius: 0.6rem;
  backdrop-filter: blur(6px);
}
.card.on { pointer-events: auto; }
.card-tag { color: var(--orange); }
.card h3 { margin: 0.4rem 0 0.4rem; font-size: 1rem; }
.card p { margin: 0 0 0.6rem; font-size: 0.8125rem; color: var(--faint); }
.card-links { display: flex; gap: 0.75rem; font-size: 0.8125rem; }
.tag {
  padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.8125rem; white-space: nowrap;
  background: rgba(8, 12, 24, 0.7); border: 1px solid rgba(79, 227, 255, 0.35); color: var(--fg);
  box-shadow: 0 0 18px rgba(79, 227, 255, 0.18);
}
.layer-title { z-index: 2; margin: 0; font-size: clamp(1.4rem, 2.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.01em; text-align: center; white-space: nowrap; text-shadow: 0 0 24px rgba(79, 227, 255, 0.35); }
.layer-title .mono { display: block; color: var(--cyan); font-weight: 500; margin-bottom: 0.25rem; }
@media (max-width: 720px) {
  .card { width: 9.5rem; padding: 0.6rem 0.75rem; }
  .card h3 { font-size: 0.875rem; }
  .card p { display: none; }
  .card-links { gap: 0.5rem; font-size: 0.75rem; }
}

.veil {
  position: absolute; inset: 0; z-index: 3; background: var(--bg); pointer-events: none; /* above every overlay element, titles included */
  opacity: calc((var(--p) - 0.88) * 12.5);
}

/* landing card over the veil */
.outro {
  position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; text-align: center;
  padding: 16vh 1.5rem 0; pointer-events: none; /* sits low so the next section follows closely as the curtain lifts */
  opacity: calc((var(--p) - 0.93) * 14);
  transform: translateY(calc((1 - var(--p)) * 400px));
}
.outro.on { pointer-events: auto; }
.outro .eyebrow { color: var(--cyan); margin: 0 0 0.9rem; }
.outro h2 { margin: 0 0 1rem; font-size: clamp(2.25rem, 4.5vw, 5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1; text-shadow: 0 0 30px rgba(79, 227, 255, 0.4); }
.outro-line { margin: 0 0 0.4rem; font-size: clamp(0.875rem, 1.1vw, 1.25rem); color: var(--fg); }
.outro-line.faint { color: var(--faint); }
.outro-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.4rem; margin: 1.4rem 0 0; font-size: 0.95rem; }
.outro .hint { margin-top: 3rem; color: var(--faint); }

/* ---------- act 6: the readable page is the backward pass ----------
   A spine runs down the left edge; each section is one layer with a node on it, and gradient dots
   fall from the top (output, Experience) through every node to the bottom (input, Contact). */
.portfolio { position: relative; background: var(--bg); max-width: 60rem; margin: 0 auto; padding: 6rem 1.5rem 4rem 5rem; } /* top gap: nothing peeks under the name card */
.portfolio section { position: relative; padding: 3rem 0; border-top: 1px solid rgba(230, 236, 245, 0.08); }
.portfolio section:first-of-type { border-top: 0; }
.portfolio section::before { /* layer node on the spine, aligned with the heading */
  content: ""; position: absolute; box-sizing: border-box; left: calc(-3.5rem - 0.3rem); top: 3.15rem; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--bg); border: 2px solid rgba(79, 227, 255, 0.5); transition: background 0.4s, box-shadow 0.4s, border-color 0.4s;
}
.portfolio section.active::before { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 16px var(--orange); }
.portfolio h2 { margin: 0 0 1.5rem; font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); }
.portfolio h2 .layer-no { display: block; color: var(--orange); font-size: 0.7rem; margin-bottom: 0.4rem; opacity: 0.8; }
.spine { position: absolute; left: 1.5rem; top: 4.5rem; bottom: 3rem; width: 0; }
.spine-line { position: absolute; left: -0.5px; top: 1.5rem; bottom: 1.5rem; width: 1px; background: linear-gradient(rgba(79, 227, 255, 0), rgba(79, 227, 255, 0.35) 8%, rgba(79, 227, 255, 0.35) 92%, rgba(79, 227, 255, 0)); }
.spine-end { position: absolute; left: -0.45rem; bottom: 1rem; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--orange); box-shadow: 0 0 22px var(--orange), 0 0 60px rgba(255, 180, 92, 0.35); animation: breathe 2.4s ease-in-out infinite; }
.spine-cap { position: absolute; left: 50%; transform: translateX(-50%); top: 0; color: var(--faint); white-space: nowrap; }
.spine-cap-end { top: auto; bottom: -0.4rem; color: var(--orange); }
.spine-dot {
  position: absolute; left: calc(var(--size) / -2); top: 1.5rem; width: var(--size); height: var(--size); border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 8px var(--orange); opacity: 0;
  animation: fall var(--dur) linear var(--delay) infinite;
}
@keyframes fall { 0% { transform: translateY(0); opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { transform: translateY(calc(var(--spine-h, 2000px) - 3rem)); opacity: 0; } }
@keyframes breathe { 50% { transform: scale(1.25); } }
@media (max-width: 600px) { .portfolio { padding-left: 1.5rem; } .spine, .portfolio section::before { display: none; } }
.portfolio h3 { margin: 0 0 0.25rem; font-size: 1.125rem; }
.portfolio p { margin: 0; color: var(--faint); }
.row { display: grid; grid-template-columns: 8.75rem 1fr; gap: 1rem; margin-bottom: 1.75rem; }
.when { color: var(--faint); padding-top: 0.25rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.grid article { padding: 1.1rem; border: 1px solid rgba(230, 236, 245, 0.1); border-radius: 0.6rem; }
.links { margin-top: 0.6rem !important; }
.links.big { font-size: 1.125rem; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li { padding: 0.4rem 0.75rem; border: 1px solid rgba(79, 227, 255, 0.25); border-radius: 999px; font-size: 0.875rem; }
footer { padding-top: 3rem; color: var(--faint); }

/* scroll reveal on the readable page: items start a little low and tilted back, then settle as they
   enter the viewport (main.js adds .in via IntersectionObserver, with a small stagger per item) */
.portfolio .reveal { opacity: 0; transform: perspective(60rem) translateY(1.2rem) rotateX(7deg); transform-origin: 50% 0; transition: opacity 0.55s ease, transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1); }
.portfolio .reveal.in { opacity: 1; transform: none; }
@media (max-width: 600px) { .row { grid-template-columns: 1fr; gap: 0.25rem; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .hint { animation: none; }
  .portfolio .reveal { opacity: 1; transform: none; transition: none; }
}