/* Tema "Pequeños héroes": ciudad de cómic al atardecer, capa teal y tinta morada.
   Paleta medida contra el papel (#f6f1ea) antes de elegirla: el teal de la capa
   (#17c2b1) da 1.99:1 y NO sirve para texto, así que vive solo como relleno y los
   links usan su versión oscura. */
:root {
  --paper: #f6f1ea;
  --paper-2: #efe6f3;
  --heading: #2a1350;
  --deep: #1b0d3a;
  --c1: #c42a63; /* magenta de viñeta: boleto y botones (4.84:1) */
  --c2: #15707e; /* el teal de la capa, oscurecido para que sirva de texto (5.12:1) */
  --c3: #7b3fa0; /* el morado de la ciudad (6.11:1) */
  --accent: #ffc247; /* dorado de ventana encendida: SOLO relleno, da 1.43:1 */
  --soft: #cbb8dd;
  --ink: #241038;
  --script: "Bangers", "Impact", sans-serif;
  --gate-bg:
    radial-gradient(circle at 22% 18%, rgba(196,42,99,.32), transparent 46%),
    radial-gradient(circle at 78% 82%, rgba(23,194,177,.22), transparent 48%),
    var(--deep);
  /* Termina EXACTO en el #3a1f6b con el que arranca el cielo del SVG: si no, queda la
     costura horizontal que se vio en Caperucita. */
  /* Llega a #3a1f6b en el 66% y SE QUEDA ahí. Medido en el navegador: el borde de arriba
     de la escena cae al ~71% de la altura, y con el degradado terminando en 100% ese punto
     valía #31195d contra el #3a1f6b con el que arranca el cielo del SVG — un escalón
     visible. Terminar el degradado en el borde de la pantalla no sirve: tiene que terminar
     ANTES de donde empieza la escena. */
  --intro-bg: linear-gradient(#150a30 0%, #2a1350 40%, #3a1f6b 66%, #3a1f6b 100%);
  --game-bg: linear-gradient(#2a1350, #6d2a6b 62%, #c9553f);
  --invite-bg:
    radial-gradient(circle at 0% 0%, rgba(123,63,160,.16), transparent 42%),
    radial-gradient(circle at 100% 24%, rgba(196,42,99,.12), transparent 42%),
    var(--paper);
}

/* --- Intro: todo sobre cielo OSCURO, así que los textos van claros --- */
.gate-kicker { color: #ffb6d0; }
.gate-title { text-shadow: 0 0 26px rgba(196,42,99,.45), 0 3px 0 rgba(0,0,0,.5); }
.intro-presents { font-family: var(--ui); font-style: normal; font-weight: 600; color: #ffe0c2; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.logo-text { column-gap: .3em; }
.logo-text .w { gap: .01em; }
/* Letra de cómic: relleno dorado y doble sombra dura, como una portada entintada */
.logo-text .w span {
  color: #ffd36e;
  text-shadow: 0 3px 0 #c42a63, 0 6px 0 #241038, 0 0 26px rgba(255,211,110,.5);
}
.logo-tag { color: #ffe0c2; text-shadow: 0 2px 8px rgba(0,0,0,.6); }

/* --- La ciudad --- */
/* Las ventanas de los edificios medios se encienden al empezar */
.hc-luces { opacity: 0; }
#intro.run .hc-luces { animation: hc-on 1.1s .4s ease forwards; }
@keyframes hc-on { to { opacity: 1; } }

/* El golpe de despegue. transform-origin va en coordenadas LOCALES del SVG. */
.hc-impacto { transform-origin: 76px 240px; }
#intro.run .hc-impacto { animation: hc-pow .6s 2.4s ease-out forwards; }
@keyframes hc-pow {
  0%   { opacity: 0; transform: scale(.3) rotate(-18deg); }
  35%  { opacity: 1; transform: scale(1.15) rotate(4deg); }
  100% { opacity: 0; transform: scale(1.45) rotate(12deg); }
}

/* El salto: horizontal y vertical van en <g> SEPARADOS porque dos animaciones sobre
   transform no se combinan en un mismo elemento (se pisan). El eje X es lineal y el Y
   hace la parábola: así se ve como un salto y no como un arrastre en diagonal. */
#intro.run .hr-salto { animation: hc-x 1.8s 2.4s linear forwards; }
@keyframes hc-x { to { transform: translateX(219px); } }
#intro.run .hr-pose { animation: hc-y 1.8s 2.4s ease-in-out forwards; }
@keyframes hc-y {
  0%   { transform: translateY(0); }
  45%  { transform: translateY(-104px); }
  100% { transform: translateY(-58px); }
}

/* La capa ondea siempre, con el origen en el hombro (coordenadas locales) */
.hr-capa { transform-origin: 0px -26px; }
#intro.run .hr-capa { animation: hc-capa .68s ease-in-out infinite alternate; }
@keyframes hc-capa { to { transform: rotate(-10deg); } }

@media (prefers-reduced-motion: reduce) {
  #intro.run .hr-salto, #intro.run .hr-pose, #intro.run .hr-capa, #intro.run .hc-impacto { animation: none; }
  .hc-luces { opacity: 1; }
}

/* Sin el halo de `.scene-art`: esta escena pinta un CIELO RECTANGULAR OPACO, y un
   drop-shadow sobre un rectángulo dibuja el contorno del rectángulo — se veía el borde
   de la escena recortado contra el fondo de la página. Sobre las escenas que son silueta
   (castillo, árboles) el mismo halo queda lindo, por eso sigue siendo el default. */
.scene-art { filter: none; }