/* ============================================================
   SPLASH — entrada de marca: la firma «se escribe»
   Overlay de papel sobre la portada con la firma real de la autora.
   Se muestra SOLO en la primera visita y SOLO en la portada; el gate
   lo hace assets/js/splash.js (localStorage + prefers-reduced-motion),
   que añade .sr-splash-on / .sr-splash-lock a <html> antes del paint.

   Sin JS, sin la clase → el overlay nunca se muestra (display: none),
   así que un fallo de JS no puede dejar la web tapada.

   Técnica igual que el hero (@keyframes sr-sign) y que la splash de
   aguero_web: barrido clip-path izquierda→derecha sobre el trazo
   relleno. La firma está escrita de izquierda a derecha, así que el
   barrido lee como mano que escribe.

   Línea de tiempo (total 2,55 s). La escritura va SOLAPADA con la entrada
   a propósito: si el barrido empezara después, el blur y la escala se
   animarían sobre un trazo todavía recortado, o sea invisibles.
     0,00 → 0,60  entrada: blur 12px → 0, escala 0,82 → 1,04, giro -4° → 1,5°
     0,12 → 1,57  escritura: clip-path inset(0 100% 0 0) → inset(0)
     0,60 → 1,00  asentado: escala 1,04 → 1, giro 1,5° → 0°
     1,57 → 2,05  pausa
     2,05 → 2,55  salida: opacidad 1 → 0 (+ visibility hidden al final)
   ============================================================ */

.sr-splash { display: none; }

/* Bloqueo de scroll mientras dura la animación. Lo quita splash.js
   (animationend + timeout de seguridad); .sr-splash-on se queda para
   las reglas de coreografía de abajo. */
.sr-splash-lock,
.sr-splash-lock body { overflow: hidden; }

.sr-splash-on .sr-splash {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 100000; /* por encima del menú móvil (9999) */
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--sr-surface);
  animation: sr-splash-out 0.5s var(--sr-ease) 2.05s forwards;
}

/* visibility interpola de forma discreta pero se mantiene `visible`
   mientras el otro extremo lo sea: al terminar queda hidden, así que
   el overlay deja de capturar clics y foco aunque el JS no lo retire. */
@keyframes sr-splash-out {
  from { opacity: 1; visibility: visible; }
  to   { opacity: 0; visibility: hidden; }
}

/* Entrada (dos animaciones sobre transform: la segunda solo `forwards`
   para que durante su retardo no pise a la primera). */
.sr-splash__mark {
  width: min(560px, 82vw);
  color: var(--sr-ink);
  transform-origin: center center;
  animation:
    sr-splash-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    sr-splash-settle 0.4s var(--sr-ease) 0.6s forwards;
}

@keyframes sr-splash-in {
  from { opacity: 0.3; filter: blur(12px); transform: scale(0.82) rotate(-4deg); }
  to   { opacity: 1;   filter: blur(0);    transform: scale(1.04) rotate(1.5deg); }
}

@keyframes sr-splash-settle {
  from { transform: scale(1.04) rotate(1.5deg); }
  to   { transform: scale(1) rotate(0deg); }
}

/* Escritura */
.sr-splash__ink {
  display: block;
  line-height: 0;
  clip-path: inset(0 100% 0 0);
  animation: sr-splash-write 1.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.12s forwards;
}
.sr-splash__ink svg { display: block; width: 100%; height: auto; fill: currentColor; }

@keyframes sr-splash-write {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ---- Coreografía: la portada arranca cuando el splash se retira ----
   Solo el hero (siempre visible al cargar). Los reveals de más abajo
   los dispara el IntersectionObserver al hacer scroll, ya sin splash,
   y no deben heredar este retardo. */
@media (prefers-reduced-motion: no-preference) {
  .sr-splash-on .sr-hero .sr-signature-svg { animation-delay: 2.95s; }
  .sr-splash-on .sr-hero [data-reveal].is-in { transition-delay: 2.5s; }
  .sr-splash-on .sr-hero [data-reveal-stagger].is-in > * {
    transition-delay: calc(2.5s + var(--i, 0) * 80ms);
  }
  .sr-splash-on .sr-hero__media img { animation-delay: 3.9s; }
}

/* Red de seguridad: si el usuario pide reducir movimiento, sin splash.
   (splash.js ya sale antes de añadir la clase; esto cubre el caso de
   que cambie la preferencia con la página abierta.) */
@media (prefers-reduced-motion: reduce) {
  .sr-splash-on .sr-splash { display: none; }
  .sr-splash-lock,
  .sr-splash-lock body { overflow: visible; }
}