/* ==========================================================================
   Ghost Rider FX · capa de animación (css/ghost-rider.css)
   Todo lo animado usa transform/opacity. Las capas no reciben clics ni alteran
   el layout: son position:fixed y quedan fuera del flujo de la página.
   ========================================================================== */

:root {
  --gr-accent: #d8331c;          /* rojo de tu botón/acento */
  --gr-fire-1: #fff2c2;          /* núcleo del destello */
  --gr-fire-2: #ffb02e;
  --gr-fire-3: #ff5a14;
  --gr-z: 9999;                  /* por encima de todo el contenido */
}

/* --- Capa raíz ---------------------------------------------------------- */
#gr-fx {
  position: fixed;
  inset: 0;
  z-index: var(--gr-z);
  overflow: hidden;
  pointer-events: none;          /* NUNCA intercepta clics */
  visibility: hidden;            /* invisible salvo durante la animación */
  contain: layout paint size;    /* aísla el repintado del resto de la página */
}
#gr-fx.is-fx { visibility: visible; }
#gr-fx * { pointer-events: none; -webkit-user-select: none; user-select: none; }

/* --- Motorista (<img> transparente independiente) ----------------------- */
#gr-rider {
  position: absolute;
  left: 0; top: 0;
  max-width: none;
  height: auto;
  -webkit-user-drag: none;
  filter: drop-shadow(0 18px 22px rgba(24, 10, 4, .28));
  transform: translate3d(110vw, 0, 0);   /* fuera de pantalla, a la derecha */
}

/* --- Cadena (SVG independiente) ------------------------------------------ */
#gr-chain {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 5px rgba(255, 96, 24, .85));
}
#gr-chain .gr-guide { fill: none; stroke: none; }   /* rutas guía de MotionPath */
#gr-chain .gr-link  { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* --- Destello, anillo y chispas ------------------------------------------ */
#gr-flash, #gr-ring {
  position: absolute;
  left: 0; top: 0;
  opacity: 0;
  border-radius: 50%;
}
#gr-flash {
  width: 320px; height: 320px;
  background: radial-gradient(circle,
    var(--gr-fire-1) 0%, var(--gr-fire-2) 22%,
    rgba(255, 90, 20, .62) 44%, rgba(255, 90, 20, 0) 70%);
}
#gr-ring {
  width: 150px; height: 150px;
  border: 3px solid rgba(255, 120, 40, .95);
  box-shadow: 0 0 22px rgba(255, 90, 20, .8), inset 0 0 18px rgba(255, 90, 20, .45);
}
.gr-spark {
  position: absolute;
  left: 0; top: 0;
  width: 7px; height: 7px;
  margin: 0;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #fff6d0 0%, #ffb02e 45%, #ff4a10 100%);
  box-shadow: 0 0 9px 2px rgba(255, 90, 20, .8);
}

/* --- will-change SOLO mientras dura la animación ------------------------- */
#gr-fx.is-fx #gr-rider,
#gr-fx.is-fx #gr-flash,
#gr-fx.is-fx #gr-ring,
#gr-fx.is-fx .gr-spark { will-change: transform, opacity; }
#characters-toggle.gr-animating { will-change: transform; }

/* --- Botón: solo ajustes que no cambian su tamaño ------------------------ */
#characters-toggle { cursor: pointer; }
#characters-toggle .plus { display: inline-block; transition: transform .3s cubic-bezier(.2,.9,.25,1); }
#characters-toggle.is-open .plus { transform: rotate(45deg); }   /* el + se convierte en × al abrir */

/* --- Desplegable (sin JS de alturas: grid 0fr -> 1fr) -------------------- */
#characters-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .45s cubic-bezier(.2, .9, .25, 1), visibility 0s .45s;
}
#characters-panel.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .45s cubic-bezier(.2, .9, .25, 1), visibility 0s;
}
#characters-panel > .panel-inner { min-height: 0; overflow: hidden; }

/* --- Responsive: en móvil la escena ocupa casi todo el ancho -------------- */
@media (max-width: 700px) {
  :root { --gr-z: 9999; }
}

/* --- Accesibilidad: sin escena si el usuario pide menos movimiento ------- */
@media (prefers-reduced-motion: reduce) {
  #gr-fx { display: none !important; }
  #characters-panel,
  #characters-panel.is-open { transition: none; }
}