/* =========================================
   Motor Carrusel 3D (compartido, no en actos/[slug]/)
   extraCSS: DESPUÉS de llamada.css y ANTES de narrativa-e1.css.
   .carrusel-3d = sizer. .carrusel-3d-escena = perspectiva. Caras al 100 %.
   API de clases: docs/carrusel-3d.md. JS: carrusel-3d.js.
   ========================================= */

.carrusel-3d-escena {
  position: relative;
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: none;
  background-color: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.carrusel-3d-escena.sombra {
  filter: drop-shadow(var(--sombra-narrativa));
}

.narrativa .carrusel-3d-escena:not(.carrusel-3d-escena--armado) {
  visibility: hidden;
}

.carrusel-3d-reserva {
  visibility: hidden;
  pointer-events: none;
}

.carrusel-3d-rotor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: center center center;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  will-change: transform;
}

.carrusel-3d-cara {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  backface-visibility: visible;
}

.carrusel-3d-cara > * {
  visibility: visible;
}

@keyframes carrusel-giro-izquierda {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-360deg); }
}

@keyframes carrusel-giro-derecha {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

@keyframes carrusel-giro-arriba {
  from { transform: rotateX(0deg); }
  to { transform: rotateX(360deg); }
}

@keyframes carrusel-giro-abajo {
  from { transform: rotateX(0deg); }
  to { transform: rotateX(-360deg); }
}