/* ============================================================
   elcodo — Engineered Glass
   ============================================================ */

:root {
  /* surfaces — cool graphite/indigo, very low chroma */
  --bg-0: oklch(0.13 0.018 275);
  --bg-1: oklch(0.16 0.022 278);
  --bg-2: oklch(0.19 0.026 280);
  --ink:  oklch(0.97 0.006 280);
  --ink-dim: oklch(0.78 0.012 280);
  --ink-faint: oklch(0.60 0.014 280);
  --hairline: oklch(0.99 0 0 / 0.10);

  /* accent — iridescent cyan -> violet (overridable per [data-accent]) */
  --a1: oklch(0.82 0.14 205);   /* cyan */
  --a2: oklch(0.72 0.16 295);   /* violet */
  --a-mid: oklch(0.77 0.15 250);
  --glow: oklch(0.80 0.15 230 / 0.55);

  /* glass */
  --glass-fill: oklch(0.80 0.04 280 / 0.06);
  --glass-stroke: oklch(1 0 0 / 0.14);
  --glass-hi: oklch(1 0 0 / 0.40);
  --glass-blur: 18px;

  /* motion scale (overridable per [data-motion]) */
  --m: 1;

  --maxw: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* accent variants -------------------------------------------------- */
[data-accent="violet"] {
  --a1: oklch(0.74 0.16 300); --a2: oklch(0.66 0.17 330);
  --a-mid: oklch(0.70 0.16 315); --glow: oklch(0.70 0.17 310 / 0.55);
}
[data-accent="green"] {
  --a1: oklch(0.84 0.15 165); --a2: oklch(0.80 0.15 200);
  --a-mid: oklch(0.82 0.15 182); --glow: oklch(0.82 0.16 175 / 0.5);
}
[data-accent="spectrum"] {
  --a1: oklch(0.82 0.14 205); --a2: oklch(0.72 0.16 330);
  --a-mid: oklch(0.78 0.16 270); --glow: oklch(0.80 0.16 270 / 0.55);
}

/* motion variants -------------------------------------------------- */
[data-motion="subtle"] { --m: 0.45; }
[data-motion="max"]    { --m: 1.35; }

@media (prefers-reduced-motion: reduce) {
  :root { --m: 0; }
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   base
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-display);
  background: var(--bg-0);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.5;
  position: relative;
}

/* deep ambient field behind everything */
body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -3;
  background:
    radial-gradient(60vmax 60vmax at 18% 8%,  oklch(0.30 0.07 250 / 0.55), transparent 60%),
    radial-gradient(55vmax 55vmax at 86% 22%, oklch(0.26 0.08 320 / 0.45), transparent 62%),
    radial-gradient(70vmax 70vmax at 60% 100%, oklch(0.24 0.06 200 / 0.40), transparent 60%),
    var(--bg-0);
}

/* fine grain / dither to kill banding */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
}

::selection { background: oklch(0.82 0.14 250 / 0.30); color: var(--ink); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 32px; }

/* ============================================================
   floating liquid-glass blobs (global, fixed)
   ============================================================ */
.field { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px) saturate(1.3);
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform;
}
.blob.b1 { width: 46vmax; height: 46vmax; left: -8vmax; top: -6vmax;
  background: radial-gradient(circle at 35% 35%, var(--a1), transparent 70%);
  animation: drift1 calc(26s / var(--m, 1)) var(--ease) infinite alternate; }
.blob.b2 { width: 40vmax; height: 40vmax; right: -8vmax; top: 6vmax;
  background: radial-gradient(circle at 60% 40%, var(--a2), transparent 70%);
  animation: drift2 calc(32s / var(--m, 1)) var(--ease) infinite alternate; }
.blob.b3 { width: 52vmax; height: 52vmax; left: 30%; bottom: -22vmax;
  background: radial-gradient(circle at 50% 50%, var(--a-mid), transparent 68%);
  animation: drift3 calc(38s / var(--m, 1)) var(--ease) infinite alternate; }

@keyframes drift1 { to { transform: translate3d(8vmax, 6vmax, 0) scale(1.12) rotate(18deg); } }
@keyframes drift2 { to { transform: translate3d(-7vmax, 9vmax, 0) scale(1.08) rotate(-14deg); } }
@keyframes drift3 { to { transform: translate3d(-6vmax, -8vmax, 0) scale(1.15); } }

/* ============================================================
   glass primitive
   ============================================================ */
.glass {
  position: relative;
  background: var(--glass-fill);
  border: 1px solid var(--glass-stroke);
  border-radius: 22px;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  box-shadow:
    0 1px 0 0 var(--glass-hi) inset,
    0 -1px 0 0 oklch(0 0 0 / 0.25) inset,
    0 30px 80px -30px oklch(0 0 0 / 0.7);
  overflow: hidden;
}
/* top sheen */
.glass::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(150deg, oklch(1 0 0 / 0.18), transparent 40%);
  pointer-events: none;
}
/* specular edge glow that travels (subtle) */
.glass::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(130deg, var(--a1), transparent 35%, transparent 65%, var(--a2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.4;
  pointer-events: none;
}

.refract { backdrop-filter: blur(var(--glass-blur)) saturate(1.6) url(#liquid); }

/* ============================================================
   nav
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: oklch(0.13 0.018 275 / 0.55);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--hairline);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }

.brand { display: flex; align-items: center; gap: 12px; font-weight: 600; letter-spacing: -0.02em; font-size: 21px; }
.brand .mark {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(140deg, var(--a1), var(--a2));
  box-shadow: 0 0 18px var(--glow), 0 1px 0 oklch(1 0 0 / .5) inset;
  position: relative;
}
.brand .mark::after {
  content: ""; position: absolute; inset: 5px; border-radius: 4px;
  background: oklch(0.13 0.018 275 / 0.55);
  box-shadow: 0 0 0 1px oklch(1 0 0 / .12) inset;
}
.brand b { font-weight: 600; }
.brand .dot { color: var(--a1); }

.nav-links { display: flex; gap: 34px; align-items: center; }
.nav-links a { font-size: 14px; color: var(--ink-dim); transition: color .25s; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
.nav-links .mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: -0.02em; }

/* buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 14px 22px; border-radius: 14px;
  border: 1px solid var(--glass-stroke);
  background: var(--glass-fill);
  backdrop-filter: blur(10px);
  color: var(--ink);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.btn:hover { transform: translateY(-2px); border-color: oklch(1 0 0 / 0.3); box-shadow: 0 12px 40px -12px var(--glow); }
.btn .arr { transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

.btn-primary {
  border: none;
  color: oklch(0.14 0.02 275);
  background: linear-gradient(135deg, var(--a1), var(--a2));
  box-shadow: 0 0 0 1px oklch(1 0 0 / .25) inset, 0 10px 40px -8px var(--glow);
  font-weight: 600;
}
.btn-primary:hover { box-shadow: 0 0 0 1px oklch(1 0 0 / .35) inset, 0 18px 60px -10px var(--glow); }

/* ============================================================
   shared section scaffolding
   ============================================================ */
section { position: relative; }
.kicker {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--a1);
  display: inline-flex; align-items: center; gap: 10px;
}
.kicker::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, var(--a1), transparent); }

h1, h2, h3 { letter-spacing: -0.035em; line-height: 1.02; font-weight: 600; }

/* ============================================================
   reveal animations
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); filter: blur(8px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; filter: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }

/* word-by-word manifest reveal */
.r-word { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(8px);
  transition: opacity .6s var(--ease), filter .6s var(--ease), transform .6s var(--ease); }
.r-word.in { opacity: 1; filter: none; transform: none; }