/* Tema Carreras: día en el autódromo, rojo de carrera, amarillo de bandera y celeste */
:root {
  --paper: #f7f4ee;
  --paper-2: #e7ecf3;
  --heading: #1a2033;
  --deep: #3a4155;
  --c1: #e23b2e; /* el rojo del carrito (el boleto, los botones) */
  --c2: #2bb3ef; /* el celeste del cielo (los links, los aros) */
  --c3: #3c7a35; /* el pasto de la orilla */
  --accent: #ffd23f;
  --soft: #b9c6da;
  --ink: #1f2638;
  --script: "Racing Sans One", "Arial Black", sans-serif;
  --gate-bg:
    radial-gradient(circle at 20% 15%, rgba(255,210,63,.22), transparent 42%),
    radial-gradient(circle at 80% 85%, rgba(226,59,46,.28), transparent 46%),
    var(--deep);
  --intro-bg: linear-gradient(#2a9ad8, #7fd0f2 52%, #cdeeff);
  --game-bg: linear-gradient(#5ec8f2, #c9ecfb 55%, #d9efc9);
  --invite-bg:
    radial-gradient(circle at 0% 0%, rgba(43,179,239,.18), transparent 40%),
    radial-gradient(circle at 100% 28%, rgba(226,59,46,.14), transparent 40%),
    var(--paper);
}

/* La escena es ancha y baja (la pista se abre hacia la cámara), así que se agranda un poco
   respecto al default (min(92vw, 560px)). El techo en vh evita que se meta con el título. */
.scene-art { width: min(104vw, 640px, 58vh); }

/* Las rayitas del centro de la carretera: las cinco figuras están dibujadas una encima de
   otra en el punto de fuga, y esta animación las trae hacia la cámara (baja + crece). La
   curva acelerando es lo que da la sensación de perspectiva. Arrancan a los 5,2 s, cuando
   el semáforo pone verde: antes la pista está quieta, como debe ser en la salida. */
.dashes path { transform-box: fill-box; transform-origin: 50% 0%; opacity: 0; }
#intro.run .dashes path { animation: rc-dash 1.25s 5.2s cubic-bezier(.5,0,.85,.55) infinite; }
#intro.run .dashes path:nth-child(2) { animation-delay: 5.45s; }
#intro.run .dashes path:nth-child(3) { animation-delay: 5.7s; }
#intro.run .dashes path:nth-child(4) { animation-delay: 5.95s; }
#intro.run .dashes path:nth-child(5) { animation-delay: 6.2s; }
@keyframes rc-dash {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(152px) scale(3.1); opacity: 1; }
}

/* El semáforo de arrancada: dos rojas que van prendiendo y la verde a los 5,2 s, el mismo
   instante en que aparece el título y el motor pega el arrancón. */
.rc-l1, .rc-l2, .rc-go-light { opacity: .16; }
#intro.run .rc-l1 { animation: rc-on .15s 2.2s forwards; }
#intro.run .rc-l2 { animation: rc-on .15s 3.4s forwards; }
#intro.run .rc-go-light { animation: rc-on .15s 5.2s forwards, rc-pulse 1.1s 5.35s ease-in-out infinite; }
@keyframes rc-on { to { opacity: 1; filter: drop-shadow(0 0 6px currentColor); } }
@keyframes rc-pulse { 50% { opacity: .55; } }

/* El carrito: tiembla en la salida (el motor en ralentí) y pega el arrancón a los 5,2 s.
   Van en dos <g> anidados a propósito: dos animaciones sobre el mismo transform se pisan. */
.rc-idle { transform-box: fill-box; transform-origin: 50% 100%; }
#intro.run .rc-idle { animation: rc-shake .11s infinite alternate; }
@keyframes rc-shake { to { transform: translate(.8px, -.8px); } }
.rc-go { transform-box: fill-box; transform-origin: 50% 100%; }
#intro.run .rc-go { animation: rc-launch 1.2s 5.2s cubic-bezier(.25,.9,.35,1) forwards; }
/* Solo crece, apoyado en su borde de abajo: así se siente que viene hacia la cámara sin
   salirse de la pantalla. Con un translateY se iba por el borde de abajo y se le cortaban
   el alerón y las llantas traseras. */
@keyframes rc-launch { to { transform: scale(1.1); } }

/* Las banderas de los postes, ondeando */
.rc-flag { transform-box: fill-box; transform-origin: 0% 50%; }
#intro.run .rc-flag { animation: rc-wave 1.6s ease-in-out infinite; }
@keyframes rc-wave { 50% { transform: skewY(-7deg) scaleX(.92); } }

.gate-sub { color: var(--accent); font-family: var(--ui); font-style: normal; font-weight: 600; }
/* El cielo de la intro es CLARO: en blanco esto desaparecía. Va oscuro, como los
   titulares de la landing. */
.intro-presents { font-family: var(--ui); font-style: normal; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #15304a; }

/* Letras del logo: tipo rótulo de carrera, con el contorno oscuro para que se lean sobre el cielo */
.logo-text { font-size: clamp(1.9rem, 10vw, 3.9rem); }
.logo-text .w span { color: #fff; text-shadow: 0 2px 0 #1a2033, 0 0 18px rgba(26,32,51,.5); }
.logo-text .w span:nth-child(2n) { color: var(--accent); }
.logo-tag { color: #fff; text-shadow: 0 1px 6px rgba(26,32,51,.6); letter-spacing: .04em; }

/* En el juego las caritas van sobre el asfalto oscuro: el marcador va claro */
#game .hud-score { background: rgba(255,255,255,.92); }

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