/* =========================================================
   Comando Nigeria — Landing "Próximamente"
   Mobile-first. Sin dependencias.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Fondo negro opaco (no #000) + capas de profundidad */
  --bg:           #0a0a0a;
  --bg-glow:      #14140f;

  /* Texto: blanco cálido, nunca #fff puro */
  --ink:          #ece9e2;
  --ink-soft:     rgba(236, 233, 226, .62);
  --ink-faint:    rgba(236, 233, 226, .34);
  --line:         rgba(236, 233, 226, .16);

  /* Acento dorado apagado */
  --accent:       #c8b68a;
  --accent-hot:   #f0e2bd;

  /* Curvas de easing: todo suave, nada brusco */
  --ease-out:     cubic-bezier(.22, .61, .36, 1);
  --ease-soft:    cubic-bezier(.4, 0, .2, 1);

  --maxw:         42rem;

  /* Posición del foco de luz, escrita por JS (0–100 %) */
  --spot-x:       50%;
  --spot-y:       42%;
}

/* ---------- 2. Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body, h1, p, figure { margin: 0; }

/* ---------- 3. Base ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  line-height: 1.6;
  overflow: hidden;                 /* la página cabe en una pantalla */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.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;
}

/* =========================================================
   4. Capas de fondo (profundidad sin distraer)
   ========================================================= */

/* 4a. Foco de luz que sigue al puntero.
       JS interpola --spot-x/--spot-y, así que el seguimiento es
       suave sin necesidad de transition. */
.spotlight {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    28rem 28rem at var(--spot-x) var(--spot-y),
    rgba(200, 182, 138, .085) 0%,
    rgba(200, 182, 138, .035) 35%,
    transparent 70%
  );
}

/* 4b. Partículas de luz — canvas dibujado en script.js */
#particles {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* 4c. Grano/ruido: feTurbulence en SVG inline, coste cero en red */
.grain {
  position: fixed; inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: .035;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 8s steps(6) infinite;
}

/* 4d. Viñeta + halo radial tenue: evita el fondo plano */
.vignette {
  position: fixed; inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% 42%, var(--bg-glow) 0%, transparent 70%),
    radial-gradient(120% 100% at 50% 50%, transparent 40%, rgba(0, 0, 0, .55) 100%);
}

/* =========================================================
   5. Composición
   ========================================================= */
.stage {
  position: relative;
  z-index: 4;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  padding: clamp(1.5rem, 5vw, 3rem);
  padding-bottom: max(clamp(1.5rem, 5vw, 3rem), env(safe-area-inset-bottom));
  text-align: center;
}

.hero {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =========================================================
   6. Tipografía
   ========================================================= */

/* Título: serif de peso alto, protagonista, escalado fluido.
   El glow va en filter (no en text-shadow) porque el relleno del
   texto es un degradado recortado y un text-shadow lo delataría. */
.title {
  position: relative;
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 10.5vw, 6rem);
  line-height: 1.05;
  letter-spacing: .01em;
  white-space: nowrap;              /* el cursor nunca cae a otra línea */
  margin: clamp(1.4rem, 4vw, 2.2rem) 0;
  /* "Respiración": glow lento que nunca llega a molestar */
  animation: breathe 6s var(--ease-soft) infinite;
}

/* Barrido de luz: un degradado ancho recortado al texto que cruza
   el título cada 7 s. En reposo el relleno es --ink puro. */
.title__text {
  display: inline-block;
  background-image: linear-gradient(
    100deg,
    var(--ink) 0%, var(--ink) 42%,
    var(--accent-hot) 50%,
    var(--ink) 58%, var(--ink) 100%
  );
  background-size: 280% 100%;
  background-position: 140% 0;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: shine 7s var(--ease-soft) 1.8s infinite;
}

/* Cursor tipo máquina de escribir */
.caret {
  display: inline-block;
  width: .05em;
  height: .78em;
  margin-left: .12em;
  vertical-align: -.04em;
  background: var(--accent);
  opacity: .75;
  animation: blink 1.25s steps(1) infinite;
}

/* Firma secundaria: sans fina, tracking amplio, jerarquía clara */
.signature {
  font-size: clamp(.68rem, 2.4vw, .82rem);
  font-weight: 200;
  letter-spacing: .42em;
  text-indent: .42em;              /* compensa el tracking del último carácter */
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: clamp(1.2rem, 4vw, 1.8rem);
}

/* Líneas decorativas que se dibujan al entrar */
.rule {
  width: min(15rem, 55vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 22%, var(--line) 78%, transparent);
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 1.6s var(--ease-out) var(--delay, 0s);
}
.is-ready .rule { transform: scaleX(1); }

/* =========================================================
   7. Countdown
   ========================================================= */
.countdown {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(.6rem, 3vw, 1.4rem);
  margin-top: clamp(1.8rem, 5vw, 2.6rem);
}
.countdown[hidden] { display: none; }

.countdown__unit { display: flex; flex-direction: column; align-items: center; gap: .35rem; }

.countdown__num {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 5.5vw, 2.1rem);
  font-variant-numeric: lining-nums tabular-nums;   /* cifras alineadas, sin saltos de ancho */
  letter-spacing: .02em;
  color: var(--ink);
}

.countdown__label {
  font-size: .6rem;
  font-weight: 200;
  letter-spacing: .28em;
  text-indent: .28em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.countdown__sep { color: var(--ink-faint); }

/* =========================================================
   8. Sello giratorio
   Anillo de texto en rotación lenta con un punto de luz al centro.
   ========================================================= */
.seal {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(6.5rem, 22vw, 8.5rem);
  aspect-ratio: 1;
  margin-top: clamp(2rem, 6vw, 3rem);
}

.seal__ring {
  width: 100%; height: 100%;
  overflow: visible;
  animation: spin 32s linear infinite;
}

.seal__text {
  fill: var(--ink-faint);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: 2.55px;           /* ajustado para que la vuelta cierre en 452 px de raíl */
  text-transform: uppercase;
}

/* Arco exterior: se dibuja al cargar con stroke-dashoffset */
.seal__arc {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 553;            /* ≈ 2πr con r = 88 */
  stroke-dashoffset: 553;
  transition: stroke-dashoffset 2.4s var(--ease-out) 1.4s;
}
.is-ready .seal__arc { stroke-dashoffset: 0; }

/* Punto de luz central: el latido del conjunto */
.seal__core {
  position: absolute;
  width: .42rem; height: .42rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px 3px rgba(200, 182, 138, .35);
  animation: pulse 3.6s var(--ease-soft) infinite;
}

/* =========================================================
   9. Instagram
   ========================================================= */
.social {
  display: flex;
  justify-content: center;
  gap: clamp(.6rem, 3vw, 1.4rem);
  padding-top: 2rem;
}

.social__link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  border-radius: 2rem;
  color: var(--ink-faint);
  text-decoration: none;
  font-size: .68rem;
  font-weight: 300;
  letter-spacing: .08em;
  transition:
    color .5s var(--ease-soft),
    background-color .5s var(--ease-soft),
    transform .5s var(--ease-soft);
}
.social__link svg { width: 1.05rem; height: 1.05rem; flex: none; }

.social__link:hover,
.social__link:focus-visible {
  color: var(--accent);
  background: rgba(200, 182, 138, .06);
  transform: translateY(-2px);
  outline: none;
}
.social__link:focus-visible { box-shadow: 0 0 0 2px rgba(200, 182, 138, .3); }

/* El @ aparece al pasar por encima; en móvil se queda siempre visible */
.social__handle {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition:
    max-width .6s var(--ease-out),
    opacity .45s var(--ease-soft);
}
.social__link:hover .social__handle,
.social__link:focus-visible .social__handle {
  max-width: 10rem;
  opacity: 1;
}

/* En pantallas táctiles no hay hover que revele el @, así que se queda
   siempre visible. La cuadrícula de abajo se encarga de que quepan. */
@media (hover: none) {
  .social__handle { max-width: 10rem; opacity: .8; }
}

/* Móvil: cuatro perfiles en una fila no caben (461 px de ancho contra
   375 de pantalla). Pasan a rejilla 2×2, que además los hace legibles. */
@media (max-width: 560px) {
  .social {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .3rem .4rem;
    width: 100%;
    max-width: 21rem;
    margin: 0 auto;
    padding-top: 1.25rem;
  }

  .social__link {
    justify-content: center;
    padding: .55rem .5rem;
    font-size: .66rem;
  }

  /* Sin hover que lo ilumine, el enlace necesita más contraste en reposo.
     Va con la especificidad del padre para no depender del orden. */
  .social .social__link { color: var(--ink-soft); }

  .social__handle {
    max-width: 100%;
    opacity: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: none;                /* nada que revelar: aparece ya abierto */
  }

  .social__link svg { width: .95rem; height: .95rem; }

  /* Sin hover, la única respuesta al dedo es el :active */
  .social__link {
    -webkit-tap-highlight-color: transparent;
  }
  .social__link:active {
    color: var(--accent);
    background: rgba(200, 182, 138, .09);
    transform: scale(.98);
  }
}

/* Móviles estrechos (≤360 px): una sola columna, a pantalla completa */
@media (max-width: 360px) {
  .social { grid-template-columns: 1fr; gap: .15rem; max-width: 15rem; }
  .social__link { padding: .45rem .5rem; }
}

/* =========================================================
   10. Animaciones
   ========================================================= */

/* Entrada progresiva: cada elemento lleva su propio --delay */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 1.4s var(--ease-out) var(--delay, 0s),
    transform 1.4s var(--ease-out) var(--delay, 0s);
}
.is-ready .reveal { opacity: 1; transform: none; }
/* Las líneas se dibujan con scaleX, no con translate */
.is-ready .rule { opacity: 1; }

@keyframes breathe {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(236, 233, 226, .07)); }
  50%      { filter: drop-shadow(0 0 34px rgba(236, 233, 226, .18)); }
}

/* El barrido pasa una vez y descansa el resto del ciclo */
@keyframes shine {
  0%        { background-position: 140% 0; }
  38%, 100% { background-position: -60% 0; }
}

@keyframes blink {
  0%, 49%   { opacity: .75; }
  50%, 100% { opacity: 0; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: .75; }
  50%      { transform: scale(1.35); opacity: 1; }
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4%, 3%); }
  40%  { transform: translate(3%, -4%); }
  60%  { transform: translate(-3%, -3%); }
  80%  { transform: translate(4%, 2%); }
  100% { transform: translate(0, 0); }
}

/* =========================================================
   11. Accesibilidad y pantallas pequeñas
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .reveal   { opacity: 1; transform: none; transition: none; }
  .rule     { transform: scaleX(1); transition: none; }
  .seal__arc{ stroke-dashoffset: 0; transition: none; }
  .title, .title__text, .caret, .grain, .seal__ring, .seal__core { animation: none; }
  .title__text { color: var(--ink); background-image: none; }
  .caret    { opacity: .75; }
  .spotlight{ display: none; }
  * { transition-duration: .01ms !important; }
}

/* Móvil: el pie ocupa dos filas, así que hay que devolver ese alto
   al bloque central. El body no hace scroll, si no cabe se recorta. */
@media (max-width: 560px) {
  .countdown { margin-top: 1.5rem; }
  .seal      { margin-top: 1.6rem; width: 5.5rem; }
}

/* Altura reducida (móvil en horizontal): comprime los márgenes */
@media (max-height: 680px) {
  .title    { margin: 1rem 0; }
  .countdown{ margin-top: 1.2rem; }
  .seal     { margin-top: 1.2rem; width: clamp(5rem, 16vw, 6.5rem); }
  .social   { padding-top: 1rem; }
}

/* Móvil en horizontal: caben unos 280 px de alto útiles. El título
   pasa a escalar con la altura (vh) en vez del ancho, que es lo que
   escasea, y todo el ritmo vertical se comprime. */
@media (max-height: 500px) {
  .title       { font-size: clamp(1.5rem, 11vh, 2.6rem); margin: .5rem 0; }
  .signature   { font-size: .6rem; letter-spacing: .3em; text-indent: .3em; margin-top: .7rem; }
  .rule        { width: min(10rem, 38vw); }
  .countdown   { margin-top: .9rem; gap: .8rem; }
  .countdown__num   { font-size: 1.25rem; }
  .countdown__label { font-size: .5rem; }
  .seal        { margin-top: .9rem; width: 3.4rem; }
  .social      { padding-top: .8rem; }
  .social__link{ padding: .35rem .7rem; }
}

@media (prefers-contrast: more) {
  :root { --ink-soft: rgba(236,233,226,.85); --ink-faint: rgba(236,233,226,.65); --line: rgba(236,233,226,.4); }
}