/* Tema Caperucita: bosque de día, verde y la capucha roja como protagonista.
   La primera versión era de noche y quedaba halloweenesca —y le competía a la temática de
   Halloween, que ya existe. Para un cumpleaños el cuento va soleado. */
:root {
  --paper: #fdf6ea;
  --paper-2: #eee0c8;
  --heading: #96582c;
  /* claro, no oscuro: es el fondo del <body> y la base del gate */
  --deep: #eaf5dd;
  --c1: #c92f3b; /* el rojo de la capucha (el boleto, los acentos) */
  /* ⚠️ --c2 NO es verde a propósito. Pinta botones, bordes, títulos y el boleto (ver
     base.css), así que rojo + verde dejaba TODO el flujo con cara de Navidad — y ya hay
     dos temáticas navideñas. El verde se queda en el DIBUJO, que es donde es naturaleza;
     la interfaz va en el mimbre de la canasta, que es del cuento igual.
     Medido sobre el papel crema: 5,24:1 (el mimbre claro #b5763a daba 3,48 y no pasaba). */
  --c2: #96582c; /* el mimbre de la canasta (los links, los aros, el boleto) */
  --c3: #5f9e62; /* el verde del bosque, ya solo de acento */
  --accent: #e0a32a; /* dorado del sendero; oscurecido para que lea sobre claro */
  --soft: #7d6a4f;
  --ink: #3b2a24;
  --script: "Berkshire Swash", "Georgia", serif;
  --gate-bg:
    radial-gradient(circle at 22% 16%, rgba(150,88,44,.16), transparent 46%),
    radial-gradient(circle at 78% 82%, rgba(201,47,59,.16), transparent 46%),
    var(--deep);
  /* La raya recta que se veía NO estaba en el dibujo: era la costura entre el fondo de la
     página y el borde de arriba del SVG, que arranca con cielo azul mientras el fondo ahí
     ya era verde pálido.
     Por eso de 30% para abajo este degradado se queda QUIETO en el mismo azul con el que
     empieza el cielo del SVG (#a8dcf5). La escena se apoya abajo y su borde superior cae
     a distinta altura según la pantalla, así que la única forma de que nunca se note es
     que toda esa franja sea un color plano igual al del dibujo.
     ⚠️ Si se cambia el azul de arriba del SVG (gradiente cpc), cambiar también este. */
  --intro-bg: linear-gradient(#cdeaf8 0%, #a8dcf5 30%, #a8dcf5 100%);
  --game-bg: linear-gradient(#cdeaf8, #bfe3b4 55%, var(--paper));
  --invite-bg:
    radial-gradient(circle at 0% 0%, rgba(150,88,44,.12), transparent 40%),
    radial-gradient(circle at 100% 28%, rgba(201,47,59,.12), transparent 40%),
    var(--paper);
}

/* Caperucita CAMINA por el sendero hasta la casita durante el intro.
 *
 * El recorrido va de donde arranca (96,300) hasta la puerta (~248,212): +152 en X, −88 en
 * Y. Se achica a la vez (de 1 a .34) porque se aleja: sin eso parecería que flota de lado.
 * `transform-origin: 0 0` deja el ancla en sus pies, así que encoge hacia el suelo y no
 * hacia su propio centro.
 *
 * Llega a los ~4,9 s, justo antes del revealAt (5,2): primero llega, y entonces asoma el
 * lobo. Ese es el chiste del cuento, y además calza con el título.
 *
 * ⚠️ Son dos animaciones separadas en dos <g> anidados porque las dos tocan `transform` y
 * no se pueden combinar en el mismo elemento. */
.cap-walk { transform-origin: 0 0; }
#intro.run .cap-walk { animation: cp-caminar 3.9s 1s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes cp-caminar { to { transform: translate(152px, -88px) scale(.34); } }

/* El saltito de los pasos: corto y rápido, para que se lea como caminar y no como flotar */
#intro.run .cap-bob { animation: cp-pasos .42s 1s ease-in-out 9; }
@keyframes cp-pasos { 50% { transform: translateY(-4px); } }

/* La abuelita y el leñador salen a los 5,6 s, medio segundo después del lobo. Suben un
   poquito al aparecer para que se lea como "salieron de la casa" y no como un recorte
   pegado encima. */
.final { opacity: 0; }
#intro.run .final { animation: cp-final .6s 5.6s cubic-bezier(.2,.9,.3,1.3) forwards; }
@keyframes cp-final { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* El lobo asoma por el costado del tronco a los 5,2 s, que es el revealAt: el mismo
   instante en que entra el título. Se esconde detrás del tronco (translate en X) y sale.
   ⚠️ El <g> de afuera ya trae transform="translate(…)" del SVG; animar ESE con CSS lo
   mandaría al 0,0. Por eso la animación va en el <g> de adentro, en coordenadas locales. */
.lobo-in { transform: translateX(26px); opacity: 0; }
#intro.run .lobo-in { animation: cp-lobo .75s 5.2s cubic-bezier(.2,.9,.3,1.2) forwards; }
@keyframes cp-lobo { to { transform: translateX(0); opacity: 1; } }

/* El cielo del intro es CLARO, así que estos van OSCUROS: copiados de una temática de
   noche desaparecían (nos pasó con Granja, Carreras y el árbol de Navidad). */
.gate-sub { color: var(--c1); font-family: var(--ui); font-style: normal; font-weight: 600; }
.intro-presents { font-family: var(--ui); font-style: normal; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }

/* Logo TODO en rojo capucha. Antes alternaba rojo y verde y daba vibra navideña —
   justo la paleta de las dos temáticas de Navidad, que ya existen. El rojo solo también
   es más fiel: en este cuento el rojo es de ella, el verde es del bosque. */
.logo-text .w span { color: #c92f3b; text-shadow: 0 2px 0 rgba(255,255,255,.75), 0 4px 14px rgba(150,88,44,.25); }
.logo-tag { color: var(--c1); letter-spacing: .04em; }

/* El juego es claro: el marcador vuelve al papel con borde, como las temáticas de día */
#game .hud-score { background: var(--paper); }

.tc-stub { background: var(--c1); }
.ticket-card { border-color: var(--c2); }