/* Tema "Monster trucks": arena techada de noche, naranja y lima sobre tierra.
   Paleta medida contra el papel (#f4f1ec) antes de elegirla: el lima clásico de monster
   truck (#a8d820) da 1.49:1 y NO sirve para texto — vive solo como relleno. */
:root {
  --paper: #f4f1ec;
  --paper-2: #e8e2d6;
  --heading: #241a3a;
  --deep: #140d22;
  --c1: #d4521a; /* el naranja del truck: boleto y botones (texto blanco, grande) */
  --c2: #1d6b63; /* verde azulado para links (5.59:1) */
  --c3: #7a4b28; /* la tierra de la pista (6.51:1) */
  --accent: #a8d820; /* lima de los rines: SOLO relleno, da 1.49:1 */
  --soft: #c3b9a8;
  --ink: #241a1a;
  --script: "Black Ops One", "Impact", sans-serif;
  --gate-bg:
    radial-gradient(circle at 20% 15%, rgba(212,82,26,.3), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(168,216,32,.16), transparent 48%),
    var(--deep);
  /* Llega a #140d22 en el 64% y SE QUEDA: el borde de arriba de la escena cae por ahí, y
     si el degradado terminara en el borde de la pantalla quedaría un escalón de color. */
  --intro-bg: linear-gradient(#070410 0%, #140d22 64%, #140d22 100%);
  --game-bg: linear-gradient(#140d22, #3a2a44 58%, #6b4526);
  --invite-bg:
    radial-gradient(circle at 0% 0%, rgba(212,82,26,.14), transparent 42%),
    radial-gradient(circle at 100% 26%, rgba(122,75,40,.14), transparent 42%),
    var(--paper);
}

/* --- Intro: cielo de arena OSCURO, así que los textos van claros --- */
.gate-kicker { color: #c6e86a; }
.gate-title { text-shadow: 0 0 24px rgba(212,82,26,.5), 0 3px 0 rgba(0,0,0,.55); }
.intro-presents { font-family: var(--ui); font-style: normal; font-weight: 600; color: #f0e4cc; text-shadow: 0 2px 10px rgba(0,0,0,.65); }
.logo-text { column-gap: .26em; }
.logo-text .w { gap: .01em; }
/* Letra de cartel de arena: lima con doble sombra dura */
.logo-text .w span {
  color: #c6e86a;
  text-shadow: 0 3px 0 #7a3a10, 0 6px 0 #241a1a, 0 0 26px rgba(168,216,32,.45);
}
.logo-tag { color: #f0e4cc; text-shadow: 0 2px 8px rgba(0,0,0,.6); }

/* Escena de cielo rectangular opaco: el halo de base.css dibujaría el borde del rectángulo. */
.scene-art { filter: none; }

/* --- La arena --- */
/* Los reflectores laten, como los de verdad cuando arranca el show */
#intro.run .mt-focos { animation: mt-luces 2.6s ease-in-out infinite alternate; }
@keyframes mt-luces { from { opacity: .72; } to { opacity: 1; } }

/* El público salta cuando el truck despega */
#intro.run .mt-publico { animation: mt-salta .34s ease-in-out 2.6s 6; }
@keyframes mt-salta { 50% { transform: translateY(-5px); } }

/* El salto. X lineal y Y en parábola, en <g> SEPARADOS: dos animaciones sobre transform
   en el mismo elemento se pisan. El giro va en un tercero para que no pelee con la Y. */
#intro.run .mt-x { animation: mt-avanza 3.4s 1.2s cubic-bezier(.35,0,.5,1) forwards; }
@keyframes mt-avanza { to { transform: translateX(252px); } }
#intro.run .mt-y { animation: mt-vuela 3.4s 1.2s ease-in-out forwards; }
@keyframes mt-vuela {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-14px); }  /* subiendo la rampa */
  62%  { transform: translateY(-92px); }  /* el punto más alto del salto */
  100% { transform: translateY(0); }      /* aterriza */
}
#intro.run .mt-giro { animation: mt-inclina 3.4s 1.2s ease-in-out forwards; }
@keyframes mt-inclina {
  0% { transform: rotate(0deg); }
  45% { transform: rotate(-16deg); }
  70% { transform: rotate(-6deg); }
  100% { transform: rotate(0deg); }
}
/* Las ruedas giran todo el rato (origen en coordenadas LOCALES del SVG) */
.mt-rueda-a { transform-origin: -18px 4px; }
.mt-rueda-b { transform-origin: 22px 4px; }
#intro.run .mt-rueda-a, #intro.run .mt-rueda-b { animation: mt-gira .42s linear infinite; }
@keyframes mt-gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  #intro.run .mt-x, #intro.run .mt-y, #intro.run .mt-giro,
  #intro.run .mt-rueda-a, #intro.run .mt-rueda-b,
  #intro.run .mt-publico, #intro.run .mt-focos { animation: none; }
}