*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--obsidian); color: var(--ice);
  font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--violet); color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--ice); color: var(--ink); padding: .7rem 1rem; }
.skip:focus { left: 1rem; top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Capas fijas: luz volumétrica + grano + escultura ---- */
.aurora { position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; }
.aurora i { position: absolute; border-radius: 50%; opacity: .5; }
/* Haces de luz cenitales (estáticos, sin coste de render) */
.aurora::after { content: ""; position: absolute; inset: 0 0 40% 0; opacity: .5; background: repeating-conic-gradient(from 270deg at 50% -8%, rgba(40,120,255,.0) 0deg 4deg, rgba(40,120,255,.16) 6deg 8deg, rgba(40,120,255,0) 10deg 14deg); -webkit-mask: radial-gradient(ellipse 70% 100% at 50% 0%, #000, transparent 75%); mask: radial-gradient(ellipse 70% 100% at 50% 0%, #000, transparent 75%); }
.aurora i:nth-child(1) { width: 56vw; height: 56vw; left: -14vw; top: -22vw; background: radial-gradient(circle, #0f2c63 0%, transparent 68%); }
.aurora i:nth-child(2) { width: 46vw; height: 46vw; right: -12vw; top: 12vh; background: radial-gradient(circle, #0c2146 0%, transparent 68%); }
.aurora i:nth-child(3) { width: 38vw; height: 38vw; left: 28vw; bottom: -20vw; background: radial-gradient(circle, rgba(117,201,232,.55) 0%, transparent 70%); opacity: .28; }

.grain {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none; }

/* Foco que sigue al cursor en zonas oscuras */
.spot { position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 30%), rgba(40,120,255,.14), transparent 60%); }

/* Fallback sin WebGL: anillo luminoso estático */
.no-webgl #scene { display: none; }
.no-webgl .hero__fallback { display: block; }
.hero__fallback { display: none; position: absolute; right: 6vw; top: 50%; width: min(46vw, 560px); aspect-ratio: 1; translate: 0 -50%;
  border-radius: 50%; background: conic-gradient(from 200deg, #2878ff, #75c9e8, #aab5c2, #2878ff);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%, #000 66%, transparent 67%); mask: radial-gradient(circle, transparent 54%, #000 55%, #000 66%, transparent 67%);
  filter: drop-shadow(0 0 40px rgba(40,120,255,.6)); }

/* ---- Texto ---- */
.grad { color: var(--electric); }

.label { font-family: var(--f-display); font-size: var(--fs-label); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--silver); }
.label b { color: var(--cyan); font-weight: 600; }
.display { font-family: var(--f-display); font-weight: 700; letter-spacing: -.045em; line-height: .92; text-transform: uppercase; }
.title { font-family: var(--f-display); font-weight: 700; letter-spacing: -.04em; line-height: 1; font-size: var(--fs-l); }
.lead { font-family: var(--f-sora); font-weight: 300; font-size: var(--fs-m); line-height: 1.45; color: var(--silver); letter-spacing: -.01em; }

/* Revelación con máscara: cada línea sube desde un contenedor recortado */
.mask { display: block; overflow: hidden; padding: 0 .04em .1em; margin-bottom: -.1em; }
.mask > span { display: block; transform: translateY(112%); transition: transform 1.15s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.is-in .mask > span, .mask.is-in > span { transform: none; }
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mask > span, [data-reveal] { transform: none !important; opacity: 1 !important; transition: none !important; }
  .aurora i, .grad { animation: none !important; }
}