/* =================================================================
   THE WHEEL LAB — FX SCENES (fondos canvas en secciones reales)
   Paleta: naranja #ff6a00 / #e76301 / #ff7a1a · negro #08080a
   ================================================================= */

/* contenedor con fondo FX: capa de aislamiento propia */
[data-twl-fx] {
  position: relative;
  isolation: isolate;
}

/* canvas insertado por twl-fx-scenes.js */
.twl-fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* sección de demo lista para usar en home (partial fx-section.php) */
.twl-fx-section {
  position: relative;
  background: #08080a;
  color: #f4f4f5;
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 5vw, 5rem);
  overflow: hidden;
}

.twl-fx-section__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.twl-fx-section__desc {
  margin: .6rem 0 0;
  color: #bcbcc2;
  font-size: .95rem;
}

/* -----------------------------------------------------------------
   Footer: el contenido de .twl-footer-final por encima del canvas FX
   sin romper su layout (canvas detrás vía z-index del propio canvas).
   ----------------------------------------------------------------- */
.twl-footer-final[data-twl-fx] {
  position: relative;
  isolation: isolate;
}

.twl-footer-final[data-twl-fx] > .twl-fx-canvas {
  z-index: 0;
}

.twl-footer-final[data-twl-fx] > *:not(.twl-fx-canvas) {
  position: relative;
  z-index: 1;
}

/* -----------------------------------------------------------------
   Reduced motion: el JS dibuja un único frame estático (sin bucle).
   No hay animación CSS aquí; el guard queda como salvaguarda futura.
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .twl-fx-canvas {
    /* sin transiciones/animaciones CSS dependientes de movimiento */
    animation: none !important;
    transition: none !important;
  }
}