:root {
  --bg: #000000;          /* = QUALITY.background en js/config.js */
  --ink: #eeebe4;         /* blanco hueso de la tipografía de la tapa */
  --ink-dim: rgb(238 235 228 / 0.55);
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", "Times New Roman", serif;
  --gutter: clamp(16px, 4vw, 56px);
  /* Lado del "cuadrado de tapa" centrado en la pantalla: la composición se arma dentro de él */
  --square: min(100vw, 100dvh);
  --fade: 900ms;
  color-scheme: dark;

  /* ---- Textos ----
     Tamaños y distancias en fracción del cuadrado de tapa (--square); tracking en em.
     --w-*: pantallas anchas. --n-*: celular (pantallas de hasta 600px de ancho). */
  --w-title-size: 0.072;   --n-title-size: 0.072;
  --w-title-tracking: 0.02; --n-title-tracking: 0.02;
  --w-title-top:-0.033;    --n-title-top: 0.025;
  --w-logo-size: 50;       --n-logo-size: 50;        /* px */
  --w-logo-gap: 0.012;     --n-logo-gap: 0.02;
  --w-logo-opacity: 1;     --n-logo-opacity: 1;
  --w-single-size: 0.022;  --n-single-size: 0.045;
  --w-single-tracking: 0.18; --n-single-tracking: 0.18;
  --w-cd-size: 0.067;      --n-cd-size: 0.115;
  --w-cd-gap: 0.044;       --n-cd-gap: 0.06;
  --w-cd-label-size: 0.0128; --n-cd-label-size: 0.029;
  --w-cd-label-tracking: 0.28; --n-cd-label-tracking: 0.28;
  --w-links-size: 0.015;   --n-links-size: 0.031;
  --w-links-tracking: 0.28; --n-links-tracking: 0.28;
  --w-links-gap: 2.2;      --n-links-gap: 2.2;
  --w-bottom-gap: 0.024;   --n-bottom-gap: 0.037;
  --w-bottom-lift: 0;      --n-bottom-lift: 0;

  --title-size: var(--w-title-size);
  --title-tracking: var(--w-title-tracking);
  --title-top: var(--w-title-top);
  --logo-size: var(--w-logo-size);
  --logo-gap: var(--w-logo-gap);
  --logo-opacity: var(--w-logo-opacity);
  --single-size: var(--w-single-size);
  --single-tracking: var(--w-single-tracking);
  --cd-size: var(--w-cd-size);
  --cd-gap: var(--w-cd-gap);
  --cd-label-size: var(--w-cd-label-size);
  --cd-label-tracking: var(--w-cd-label-tracking);
  --links-size: var(--w-links-size);
  --links-tracking: var(--w-links-tracking);
  --links-gap: var(--w-links-gap);
  --bottom-gap: var(--w-bottom-gap);
  --bottom-lift: var(--w-bottom-lift);
}
@media (max-width: 600px) {
  :root {
    --title-size: var(--n-title-size);
    --title-tracking: var(--n-title-tracking);
    --title-top: var(--n-title-top);
    --logo-size: var(--n-logo-size);
    --logo-gap: var(--n-logo-gap);
    --logo-opacity: var(--n-logo-opacity);
    --single-size: var(--n-single-size);
    --single-tracking: var(--n-single-tracking);
    --cd-size: var(--n-cd-size);
    --cd-gap: var(--n-cd-gap);
    --cd-label-size: var(--n-cd-label-size);
    --cd-label-tracking: var(--n-cd-label-tracking);
    --links-size: var(--n-links-size);
    --links-tracking: var(--n-links-tracking);
    --links-gap: var(--n-links-gap);
    --bottom-gap: var(--n-bottom-gap);
    --bottom-lift: var(--n-bottom-lift);
  }
}

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

/* Página sin scroll: el splat ocupa todo el viewport */
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Escenario ---------- */
.stage {
  position: fixed;
  inset: 0;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}

#splat {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* El placeholder se escala siempre por la altura, igual que la cámara (su campo de visión es
   vertical): así la muñeca queda del mismo tamaño y en el mismo lugar que en el canvas, sea cual
   sea la proporción de la pantalla. Lo que sobra a los costados se recorta; lo que falta es negro. */
.placeholder {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  filter: blur(18px);
  transition: opacity var(--fade) ease, filter var(--fade) ease;
  user-select: none;
  pointer-events: none;
}

#splat {
  display: block;
  opacity: 0;
  transition: opacity var(--fade) ease, filter var(--fade) ease;
  touch-action: none; /* el canvas maneja drag/pinch; sin scroll ni zoom del navegador */
  cursor: grab;
}
#splat:active { cursor: grabbing; }

/* Preview: la versión mínima del splat, desenfocada como el placeholder pero moviéndose */
[data-state="preview"] #splat {
  opacity: 1;
  filter: blur(14px);
}
[data-state="preview"] .placeholder,
[data-state="ready"] .placeholder { opacity: 0; }
[data-state="ready"] #splat { opacity: 1; }

/* Velo que "respira" mientras carga (oscurece y aclara el desenfocado). Sólo opacidad: lo
   resuelve el compositor, sin costo en el celular. Al terminar, js/main.js (setReady) lo
   funde desde donde estaba. */
.veil {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
}
[data-state="loading"] .veil,
[data-state="preview"] .veil { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.45; }
}

/* Indicador de carga: un arco fino que gira, en el centro */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 1px solid rgb(238 235 228 / 0.18);
  border-top-color: var(--ink);
  animation: spin 1.1s linear infinite;
  transition: opacity 500ms ease;
  pointer-events: none;
}
@keyframes spin { to { transform: rotate(1turn); } }
[data-state="ready"] .loader,
[data-state="fallback"] .loader { opacity: 0; animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  [data-state] .veil { animation: none; }
  .loader { animation-duration: 3s; }
}

/* Sin WebGL2 / error: placeholder nítido, sin canvas */
[data-state="fallback"] .placeholder { opacity: 1; filter: none; }
[data-state="fallback"] #splat,
[data-state="fallback"] .veil,
[data-state="fallback"] .progress { display: none; }

/* Barra de progreso de descarga (1px arriba) */
.progress {
  --p: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: var(--ink);
  transform-origin: left;
  transform: scaleX(var(--p));
  transition: transform 200ms linear, opacity 400ms ease;
  pointer-events: none;
}
[data-state="ready"] .progress { opacity: 0; }

/* ---------- Grano de la tapa ---------- */
.grain {
  position: fixed;
  inset: -50%;
  pointer-events: none;
  opacity: 0.16;
  will-change: transform; /* se mueve con la muñeca (js/main.js → moveGrain) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Capa de UI ---------- */
.ui {
  position: fixed;
  inset: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding:
    max(var(--gutter), env(safe-area-inset-top))
    max(var(--gutter), env(safe-area-inset-right))
    max(calc(var(--gutter) * 0.75), env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-left));
  pointer-events: none; /* los eventos pasan al canvas... */
}
.ui a { pointer-events: auto; } /* ...salvo en los links */

/* Logo + TRISOMIA, centrados arriba */
.titles {
  margin-top: calc(var(--square) * var(--title-top));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--square) * var(--logo-gap));
}
.logo {
  display: block;
  width: calc(var(--logo-size) * 1px);
  height: auto;
  opacity: var(--logo-opacity);
  user-select: none;
}
.title {
  margin: 0;
  font-weight: 400;
  font-size: calc(var(--square) * var(--title-size));
  line-height: 1;
  letter-spacing: calc(var(--title-tracking) * 1em);
  text-transform: uppercase;
  font-variation-settings: "opsz" 96;
}

.bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--square) * var(--bottom-gap));
  text-align: center;
  margin-bottom: calc(var(--square) * var(--bottom-lift));
}

/* Nombre del single, arriba del countdown */
.single {
  margin: 0;
  font-size: calc(var(--square) * var(--single-size));
  letter-spacing: calc(var(--single-tracking) * 1em);
  text-transform: uppercase;
  font-style: italic;
  line-height: 1;
}

/* Countdown al lanzamiento */
.countdown {
  display: flex;
  gap: calc(var(--square) * var(--cd-gap));
  font-variant-numeric: tabular-nums lining-nums;
}
.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 2.2ch;
}
.cd-num {
  font-size: calc(var(--square) * var(--cd-size));
  line-height: 1;
  font-variation-settings: "opsz" 96;
}
.cd-label {
  font-size: max(9px, calc(var(--square) * var(--cd-label-size)));
  letter-spacing: calc(var(--cd-label-tracking) * 1em);
  text-transform: uppercase;
  color: var(--ink-dim);
}
.countdown.is-done {
  font-size: clamp(1.2rem, 2.6vw, 2rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.links {
  display: flex;
  gap: calc(var(--links-gap) * 1em);
  font-size: max(10px, calc(var(--square) * var(--links-size)));
  letter-spacing: calc(var(--links-tracking) * 1em);
  text-transform: uppercase;
}
.links a {
  color: var(--ink);
  text-decoration: none;
  padding: 12px 0; /* área táctil ≥ 44px */
  background: linear-gradient(currentColor, currentColor) left calc(100% - 8px) / 0 1px no-repeat;
  transition: background-size 300ms ease;
}
.links a:hover,
.links a:focus-visible { background-size: 100% 1px; outline: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 1ms !important; }
}