/* =========================================================
   Centinelas — Sistema gráfico decorativo
   Blobs, garabatos y animaciones.
   Documentación: Docs/Sistema-Grafico-Decorativo.md
   ========================================================= */

/* ---------- 1. Tokens ---------- */

:root {
  /* Paleta extraída de la maqueta de referencia */
  --c-morado:       #6B1AF7;
  --c-azul:         #3AABF7;
  --c-coral:        #F85030;
  --c-lima:         #C8F800;
  --c-amarillo:     #FAC903;
  --c-morado-claro: #A855F7;

  --c-fondo:        #08080F;
  --c-superficie:   #101018;
  --c-texto:        #FFFFFF;
  --c-texto-suave:  #A8ACB8;

  /* Tipografía — ver Docs/Tipografias-Referencia-Landing.md */
  --font-display: 'Permanent Marker', cursive;
  --font-heading: 'Permanent Marker', cursive;
  --font-body:    'Poppins', system-ui, sans-serif;
}

/* ---------- 2. Base común de elementos decorativos ---------- */

/* La decoración se manda al fondo con z-index negativo. Así el contenido
   queda por encima sin necesidad de tocarlo: no hace falta posicionar
   cada hijo del contenedor, que es justo lo que rompía cualquier elemento
   con posicionamiento propio (una imagen absoluta, un menú desplegable). */
.blob,
.doodle {
  position: absolute;
  z-index: -1;
  pointer-events: none;   /* crítico: si no, bloquean los clics de los botones */
  user-select: none;
}

/* El contenedor recorta los blobs que se salen por los bordes.
   `isolation` crea un contexto de apilamiento propio, para que el
   z-index negativo de la decoración no se escape por detrás del fondo
   de la página. */
.deco-contenedor {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Utilidad opcional: solo para contenido que necesite un nivel explícito
   por encima de otros elementos posicionados (no para el caso normal). */
.deco-encima {
  position: relative;
  z-index: 1;
}

/* ---------- 3. Blobs ---------- */

.blob {
  width: clamp(180px, 35vw, 420px);
  height: auto;
}

.blob--sup-izq { top: -8%;  left: -12%; }
.blob--izq     { top: 30%;  left: -15%; }
.blob--der     { top: 12%;  right: -10%; }
.blob--inf-der { bottom: -6%; right: -8%; }

/* ---------- 4. Garabatos ---------- */

.doodle {
  width: clamp(28px, 5vw, 64px);
  height: auto;
  color: var(--c-lima);   /* los SVG usan currentColor donde procede */
}

.doodle--sm { width: clamp(20px, 3vw, 36px); }
.doodle--lg { width: clamp(48px, 8vw, 110px); }

/* Variantes de color: sobreescriben el color propio del archivo */
.doodle--lima     { color: var(--c-lima); }
.doodle--morado   { color: var(--c-morado-claro); }
.doodle--azul     { color: var(--c-azul); }
.doodle--coral    { color: var(--c-coral); }
.doodle--amarillo { color: var(--c-amarillo); }
.doodle--blanco   { color: #FFFFFF; }

/* El subrayado gestual es un caso aparte: va bajo un texto, en flujo.
   Colócalo como último hijo de un titular con `display:inline-block`,
   para que herede el ancho exacto del texto.
   Ajusta `margin-top` según el `line-height` del titular: con valores
   muy cerrados (0.9–1) el trazo se monta sobre las letras. */
.subrayado {
  display: block;
  width: 100%;
  height: 0.22em;
  margin-top: 0.12em;
  color: var(--c-lima);
}

/* ---------- 5. Animación: flotación ---------- */

.doodle--flota {
  animation: flotar 4s ease-in-out infinite;
  will-change: transform;
}

/* Desfase para que no floten sincronizados (se vería mecánico) */
.doodle--flota:nth-of-type(2n)   { animation-delay: -1.3s; animation-duration: 5.2s; }
.doodle--flota:nth-of-type(3n)   { animation-delay: -2.7s; animation-duration: 4.6s; }
.doodle--flota:nth-of-type(5n)   { animation-delay: -0.8s; animation-duration: 6.1s; }

@keyframes flotar {
  50% { transform: translateY(-10px) rotate(4deg); }
}

/* Rotación lenta, para estrellas y confeti */
.doodle--gira {
  animation: girar 14s linear infinite;
  will-change: transform;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

/* Pulso de escala, para el rayo y la carita */
.doodle--pulsa {
  animation: pulsar 3s ease-in-out infinite;
  will-change: transform;
}

@keyframes pulsar {
  50% { transform: scale(1.12); }
}

/* ---------- 6. Animación: trazado al entrar en pantalla ---------- */

/* Se activa añadiendo .visible con un IntersectionObserver.
   Requiere que el SVG use stroke (no fill). */
.doodle--trazo path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 1.2s ease-out;
}

.doodle--trazo.visible path {
  stroke-dashoffset: 0;
}

/* Escalonado entre trazos de un mismo bloque */
.doodle--trazo.visible path:nth-child(2) { transition-delay: 0.15s; }
.doodle--trazo.visible path:nth-child(3) { transition-delay: 0.30s; }
.doodle--trazo.visible path:nth-child(4) { transition-delay: 0.45s; }

/* ---------- 7. Responsive ---------- */

/* En móvil: máximo 3 garabatos por pantalla.
   Los blobs sí se quedan (van al fondo y no estorban la lectura). */
.doodle--secundario { display: none; }

@media (min-width: 768px) {
  .doodle--secundario { display: block; }
}

/* ---------- 8. Movimiento reducido (obligatorio) ---------- */

@media (prefers-reduced-motion: reduce) {
  .doodle--flota,
  .doodle--gira,
  .doodle--pulsa {
    animation: none !important;
  }
  .doodle--trazo path {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}