/* ==========================================================================
   Stenko — reset y capa base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--bone);
  font-family: var(--font-text);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 240ms linear;
}

/* El horizonte y el cielo: un velo cálido que JS enciende con el scroll,
   igual que el gradiente del arco. Nunca un blob difuso genérico.

   Va POR ENCIMA del lienzo 3D (z-index 2 contra el 1 de .flow-layer), y esto
   no es un detalle: el planeta del eclipse es una esfera opaca. Con el velo
   detrás, el planeta lo tapaba y aparecia un borde circular enorme justo donde
   terminaba su silueta — visible sobre todo al final del scroll, que es cuando
   --dawn llega a 1 y el velo esta a plena intensidad. Pintandolo encima, cubre
   por igual el planeta y el fondo, y el borde desaparece. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(120% 65% at 50% 110%, rgba(255, 165, 62, 0.085) 0%, rgba(255, 165, 62, 0) 60%),
    radial-gradient(90% 50% at 50% -8%, rgba(79, 209, 197, 0.045) 0%, rgba(79, 209, 197, 0) 58%);
  opacity: var(--dawn, 0);
  transition: opacity 300ms linear;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a {
  color: inherit;
  text-decoration: none;
}

img, svg { display: block; max-width: 100%; }

button { font: inherit; color: inherit; }

::selection {
  background: var(--amber);
  color: var(--night);
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Layout ---- */

#app { position: relative; z-index: 3; } /* por encima del velo (2) y del lienzo (1) */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; padding-block: var(--section-y); }

/* ---- Capa 3D ---- */

.flow-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms var(--ease-arc);
}

/* El lienzo debe cubrir la capa entera SIEMPRE. Si el buffer de WebGL se queda
   con un tamano viejo (una ventana que cambia antes de que el observer
   reaccione), el elemento seguia midiendo lo de antes y aparecia un corte
   vertical duro contra el fondo de la pagina. Con 100% el buffer podra ir un
   frame por detras, pero nunca habra costura. */
.flow-layer canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.flow-layer.is-ready { opacity: 1; }

/* ---- Utilidades ---- */

.u-mono {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-42);
  font-variant-numeric: tabular-nums;
}

.u-lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: rgba(245, 246, 248, 0.82);
  letter-spacing: -0.015em;
}

.u-muted { color: var(--bone-60); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.noscript {
  position: relative;
  z-index: 3;
  padding: 4rem var(--gutter);
  max-width: 40rem;
  margin-inline: auto;
}
.noscript h1 { font-size: var(--step-4); letter-spacing: -0.05em; margin-bottom: 1rem; }
.noscript p { margin-bottom: 1rem; color: var(--bone-60); }

/* ---- Preferencia de movimiento reducido ---- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}