/* ==========================================================================
   bl-drum — Tambor 3D: frases en un cilindro invisible (blomon-base)

   Las frases se colocan en las caras de un cilindro y el scroll lo hace girar:
   cada línea sube desde abajo, pasa por el centro de cara al lector y se pliega
   al llegar arriba. Requiere GSAP + ScrollTrigger (la rotación la lleva el JS).

   El escenario se queda fijo (`position: sticky`) mientras dura el giro, como
   el `pin-height` + `container` del efecto original: nada de pin de
   ScrollTrigger, que se lleva mal con Lenis.

   Estructura en Elementor:
     Contenedor            <- clase: bl-drum   (+ modificadores)
       ├─ Contenedor       <- frase 1  (texto, o texto + imagen + texto)
       ├─ Contenedor       <- frase 2
       └─ Contenedor       <- frase 3 ...
   (También vale el marcador <div data-bl-drum> en un widget HTML dentro.)

   Cada frase puede llevar varias piezas (palabras e imágenes): se colocan en
   fila y centradas, así la imagen queda incrustada en mitad de la frase y gira
   en el mismo plano 3D que el texto.

   MEDIDAS:
     --bl-drum-h            alto del escenario (100vh)
     --bl-drum-top          offset si hay cabecera fija
     --bl-drum-step         grados entre una frase y la siguiente (30deg)
     --bl-drum-perspective  profundidad del 3D: menos = más exagerado (1200px)
     --bl-drum-gap          separación entre las piezas de una frase
     --bl-drum-bg           fondo del escenario

   Sin JS, o con "reducir movimiento", las frases se muestran apiladas como una
   sección normal: no se marca ninguna clase de trabajo.
   ========================================================================== */

.bl-drum__pin {
	position: relative;        /* el alto lo calcula el JS */
	--bl-drum-h: 100vh;
	--bl-drum-top: 0px;
	--bl-drum-perspective: 1200px;
	--bl-drum-gap: 0.4em;

	/* Que un contenedor flex padre no lo encoja (mismo caso que bl-reel). */
	flex: 0 0 auto !important;
	align-self: stretch;
	width: 100%;
}

@supports (height: 100dvh) {
	.bl-drum__pin { --bl-drum-h: 100dvh; }
}

/* Escenario fijo con la perspectiva del 3D. */
.bl-drum__stage {
	position: -webkit-sticky;
	position: sticky;
	top: var(--bl-drum-top, 0px);
	height: var(--bl-drum-h, 100vh);
	overflow: hidden;
	background: var(--bl-drum-bg, transparent);
	perspective: var(--bl-drum-perspective, 1200px);
	-webkit-perspective: var(--bl-drum-perspective, 1200px);
}

/* El cilindro. Las caras viven en su espacio 3D. */
.bl-drum__roll {
	position: absolute !important;
	inset: 0 !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	padding: 0 !important;
	display: block !important;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	will-change: transform;
}

/* Cada frase: una cara del cilindro, centrada y del tamaño de su contenido.
   El JS le pone el transform (posición en el cilindro). */
.bl-drum__line {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: auto !important;
	max-width: 92vw !important;
	height: auto !important;
	margin: 0 !important;

	/* Las piezas de la frase (palabras e imágenes) en fila y centradas, para
	   que una imagen pueda ir incrustada en mitad del texto. */
	display: flex !important;
	flex-direction: var(--bl-drum-dir, row) !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: center !important;
	gap: var(--bl-drum-gap, 0.4em) !important;

	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform-style: preserve-3d;
	will-change: transform, opacity;
}

/* Las imágenes incrustadas acompañan al tamaño del texto. */
.bl-drum__line img {
	display: block;
	height: var(--bl-drum-img-h, 1.1em);
	width: auto;
	max-width: none;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	.bl-drum__roll, .bl-drum__line { transition: none !important; }
}