/* Animations base — scroll reveal, hover lifts, parallax helpers
 * Cargado globalmente. Las clases las aplican animations.js o el template directamente.
 */

/* ── Hero load animation — CSS-only, cascada al cargar la página ─── */
@keyframes bm-hero-rise {
	from {
		opacity: 0;
		transform: translate3d(0, 28px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
@keyframes bm-hero-rise-right {
	from {
		opacity: 0;
		transform: translate3d(40px, 0, 0) scale(0.97);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}
@keyframes bm-hero-bg-zoom {
	from { transform: scale(1.08); }
	to   { transform: scale(1); }
}

/* Cada elemento del hero entra escalonado.
 * `both` mantiene el estado final tras la animación; el inicial está antes
 * (opacity:0) así no hay flash de contenido inicial visible. */
.bm-section-hero .bm-w-eyebrow,
.bm-section-hero .bm-hero__title,
.bm-section-hero .bm-hero__sub,
.bm-section-hero .bm-hero__ctas,
.bm-section-hero .bm-hero__socials-wrap,
.bm-section-hero .bm-hero__aside {
	animation: bm-hero-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bm-section-hero .bm-w-eyebrow        { animation-delay: 0.15s; }
.bm-section-hero .bm-hero__title      { animation-delay: 0.30s; }
.bm-section-hero .bm-hero__sub        { animation-delay: 0.45s; }
.bm-section-hero .bm-hero__ctas       { animation-delay: 0.60s; }
.bm-section-hero .bm-hero__socials-wrap { animation-delay: 0.75s; }
.bm-section-hero .bm-hero__aside {
	animation: bm-hero-rise-right 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}
/* Video del fondo: zoom muy sutil */
.bm-section-hero > .bm-hero-bg-video {
	animation: bm-hero-bg-zoom 8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	.bm-section-hero .bm-w-eyebrow,
	.bm-section-hero .bm-hero__title,
	.bm-section-hero .bm-hero__sub,
	.bm-section-hero .bm-hero__ctas,
	.bm-section-hero .bm-hero__socials-wrap,
	.bm-section-hero .bm-hero__aside,
	.bm-section-hero > .bm-hero-bg-video {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ── Heroes del resto de páginas — misma cascada CSS-only que la home
 * Aplica a: estajos, contacte, legal, tornejos, camps (Elementor) + single
 * torneo/camp + archives. Delays: eyebrow → title → lead/sub → meta/CTAs. */
.bm-section-estajos-hero .bm-w-eyebrow,
.bm-section-contacte-hero .bm-w-eyebrow,
.bm-section-legal-hero .bm-w-eyebrow,
.bm-section-tornejos-hero .bm-w-eyebrow,
.bm-section-camps-hero .bm-w-eyebrow,
.bm-hero-torneo .bm-w-eyebrow,
.bm-archive__head .bm-w-eyebrow,
.bm-section-estajos-hero .bm-w-title,
.bm-section-contacte-hero .bm-w-title,
.bm-section-legal-hero .bm-w-title,
.bm-section-tornejos-hero .bm-w-title,
.bm-section-camps-hero .bm-w-title,
.bm-hero-torneo .bm-w-title,
.bm-archive__head .bm-w-title,
.bm-section-estajos-hero .bm-w-lead,
.bm-section-contacte-hero .bm-w-lead,
.bm-section-tornejos-hero .bm-w-lead,
.bm-section-camps-hero .bm-w-lead,
.bm-archive__head .bm-w-lead {
	animation: bm-hero-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bm-section-estajos-hero .bm-w-eyebrow,
.bm-section-contacte-hero .bm-w-eyebrow,
.bm-section-legal-hero .bm-w-eyebrow,
.bm-section-tornejos-hero .bm-w-eyebrow,
.bm-section-camps-hero .bm-w-eyebrow,
.bm-hero-torneo .bm-w-eyebrow,
.bm-archive__head .bm-w-eyebrow { animation-delay: 0.15s; }
.bm-section-estajos-hero .bm-w-title,
.bm-section-contacte-hero .bm-w-title,
.bm-section-legal-hero .bm-w-title,
.bm-section-tornejos-hero .bm-w-title,
.bm-section-camps-hero .bm-w-title,
.bm-hero-torneo .bm-w-title,
.bm-archive__head .bm-w-title { animation-delay: 0.30s; }
.bm-section-estajos-hero .bm-w-lead,
.bm-section-contacte-hero .bm-w-lead,
.bm-section-tornejos-hero .bm-w-lead,
.bm-section-camps-hero .bm-w-lead,
.bm-archive__head .bm-w-lead { animation-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
	.bm-section-estajos-hero .bm-w-eyebrow,
	.bm-section-estajos-hero .bm-w-title,
	.bm-section-estajos-hero .bm-w-lead,
	.bm-section-contacte-hero .bm-w-eyebrow,
	.bm-section-contacte-hero .bm-w-title,
	.bm-section-contacte-hero .bm-w-lead,
	.bm-section-legal-hero .bm-w-eyebrow,
	.bm-section-legal-hero .bm-w-title,
	.bm-section-tornejos-hero .bm-w-eyebrow,
	.bm-section-tornejos-hero .bm-w-title,
	.bm-section-tornejos-hero .bm-w-lead,
	.bm-section-camps-hero .bm-w-eyebrow,
	.bm-section-camps-hero .bm-w-title,
	.bm-section-camps-hero .bm-w-lead,
	.bm-hero-torneo .bm-w-eyebrow,
	.bm-hero-torneo .bm-w-title,
	.bm-archive__head .bm-w-eyebrow,
	.bm-archive__head .bm-w-title,
	.bm-archive__head .bm-w-lead {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ──────────────────────────────────────────────────────────────────────
 *  SISTEMA DE REVEAL POR ROL — 5 vocabularios de motion
 *  ────────────────────────────────────────────────────
 *
 *  El sistema legacy (`.bm-reveal`) sigue activo como fallback. Encima hay
 *  4 vocabularios especializados que el JS aplica según el rol semántico
 *  del elemento — así cada tipo de cosa entra a su manera, no todas igual.
 *
 *  - `.bm-reveal`         → fade + translate corto (genérico, fallback)
 *  - `.bm-reveal-head`    → section head: eyebrow → title → lead en cascada
 *  - `.bm-reveal-clip`    → títulos H2 grandes: clip-path mask desde abajo
 *  - `.bm-reveal-card`    → cards (events, tornejos, camps): scale + fade
 *  - `.bm-reveal-image`   → imágenes: mask reveal + zoom interno 1.12→1
 *
 *  Variables compartidas:
 *  - Easing canónico: `cubic-bezier(0.22, 1, 0.36, 1)` (ease-out fuerte)
 *  - Easing mask:     `cubic-bezier(0.83, 0, 0.17, 1)` (in-out drástico)
 *  ──────────────────────────────────────────────────────────────────── */

/* ── Scroll reveal base (genérico/fallback) ───────────────────────────
 * Distancia corta (14px) para que el "rise" se sienta como un settle elegante,
 * no como un salto. Duración 520ms con ease-out fuerte: la mayor parte del
 * movimiento ocurre en los primeros 200ms, así el ojo sí registra el fade. */
.bm-reveal {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition:
		opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}
.bm-reveal.is-revealed {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	will-change: auto;
}

/* will-change solo mientras el elemento está pending o transitioning, no
 * permanentemente — evita layers compositadas sin necesidad. */
.bm-reveal:not(.is-revealed) {
	will-change: opacity, transform;
}

/* Variantes direccionales (también con distancia reducida) */
.bm-reveal--left {
	transform: translate3d(-14px, 0, 0);
}
.bm-reveal--right {
	transform: translate3d(14px, 0, 0);
}
.bm-reveal--scale {
	transform: scale(0.97);
}
.bm-reveal--left.is-revealed,
.bm-reveal--right.is-revealed,
.bm-reveal--scale.is-revealed {
	transform: translate3d(0, 0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.bm-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Section head cascade ─────────────────────────────────────────────
 * Aplicado al contenedor (`.bm-archive__head`, `.bm-doc-section__head`,
 * `.bm-events__head-left`, etc.). El JS le pone `.is-revealed` al entrar
 * en viewport y TODOS los hijos directos entran en secuencia (delays por
 * `:nth-child`), replicando el ritmo del hero. Es universal: funciona con
 * Elementor widgets, prose pura, mezclas (eyebrow + title + lead + CTA),
 * etc. — no depende de clases específicas. */
.bm-reveal-head > * {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition:
		opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.bm-reveal-head.is-revealed > * {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}
.bm-reveal-head.is-revealed > *:nth-child(1) { transition-delay: 0ms; }
.bm-reveal-head.is-revealed > *:nth-child(2) { transition-delay: 100ms; }
.bm-reveal-head.is-revealed > *:nth-child(3) { transition-delay: 200ms; }
.bm-reveal-head.is-revealed > *:nth-child(4) { transition-delay: 300ms; }
.bm-reveal-head.is-revealed > *:nth-child(n+5) { transition-delay: 380ms; }

/* ── Clip-path mask reveal (títulos H2 grandes) ───────────────────────
 * El título se "destapa" de abajo arriba con un mask + sutil rise.
 * Ideal para H2 oversized que abren sección.
 * Importante: clip-path no anima en algunos browsers viejos — fallback
 * vía opacity garantizado. */
.bm-reveal-clip {
	opacity: 0;
	clip-path: inset(0 0 100% 0);
	transform: translate3d(0, 24px, 0);
	transition:
		clip-path 0.9s cubic-bezier(0.83, 0, 0.17, 1),
		transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.4s ease-out;
}
.bm-reveal-clip.is-revealed {
	opacity: 1;
	clip-path: inset(0 0 0 0);
	transform: translate3d(0, 0, 0);
}

/* ── Card reveal (scale + fade + lift) ────────────────────────────────
 * Aplicado a event-cards, cards de tornejos, camps, pistes, seus, etc.
 * El scale sutil (0.96 → 1) da sensación de "asentarse" en su sitio,
 * no de "deslizarse desde fuera". */
.bm-reveal-card {
	opacity: 0;
	transform: translate3d(0, 28px, 0) scale(0.96);
	transition:
		opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.bm-reveal-card.is-revealed {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

/* ── Image reveal (mask sweep + zoom interno + parallax) ──────────────
 * Estructura HTML construida por el JS:
 *   <span class="bm-reveal-image">
 *     <span class="bm-reveal-image__inner">     ← capa parallax (translateY)
 *       <img>                                    ← capa zoom (scale)
 *     </span>
 *   </span>
 *
 * Por qué 3 capas: si el zoom (scale) y el parallax (translate) compartieran
 * el mismo transform, el parallax pisaría la transition del zoom de 1.4s y
 * arruinaría el settle. Separados, cada capa tiene su transition propia:
 *   - .__inner   → translateY rápido (0.2s linear) — actualizado por scroll
 *   - > img      → scale lento (1.4s ease-out) — solo al revelar
 *
 * El JS detecta el background del contenedor padre y lo aplica al overlay
 * (`--bm-img-mask`) para que el mask sweep matchee con el entorno. */
.bm-reveal-image {
	position: relative;
	display: block;
	overflow: hidden;
	--bm-img-mask: var(--bm-color-bg, #F8F8F7);
	--bm-img-parallax: 0px;
}
.bm-reveal-image__inner {
	display: block;
	transform: translate3d(0, var(--bm-img-parallax), 0);
	transition: transform 0.2s linear;
	will-change: transform;
}
.bm-reveal-image > .bm-reveal-image__inner > img,
.bm-reveal-image > .bm-reveal-image__inner > picture > img {
	display: block;
	width: 100%;
	height: auto;
	transform: scale(1.12);
	transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}
.bm-reveal-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--bm-img-mask);
	transform-origin: top;
	transform: scaleY(1);
	transition: transform 0.95s cubic-bezier(0.83, 0, 0.17, 1);
	pointer-events: none;
	z-index: 2;
}
.bm-reveal-image.is-revealed > .bm-reveal-image__inner > img,
.bm-reveal-image.is-revealed > .bm-reveal-image__inner > picture > img {
	transform: scale(1.04); /* leve overscale residual: deja margen para el parallax sin descubrir bordes */
}
.bm-reveal-image.is-revealed::after {
	transform-origin: bottom;
	transform: scaleY(0);
}

/* ── Counter scale-pulse ──────────────────────────────────────────────
 * Cuando el counter llega al target, el JS le añade `.bm-counter-pulse`
 * por 400ms. Microsalto de escala como acento celebratorio. */
@keyframes bm-counter-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.08); }
	100% { transform: scale(1); }
}
.bm-counter-pulse {
	animation: bm-counter-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	display: inline-block;
	transform-origin: 50% 70%;
}

/* ── Reduced-motion: desactivar TODOS los reveals especializados ────── */
@media (prefers-reduced-motion: reduce) {
	.bm-reveal-head > *,
	.bm-reveal-clip,
	.bm-reveal-card {
		opacity: 1;
		clip-path: none;
		transform: none;
		transition: none;
	}
	.bm-reveal-image__inner,
	.bm-reveal-image > .bm-reveal-image__inner > img,
	.bm-reveal-image > .bm-reveal-image__inner > picture > img {
		transform: none;
		transition: none;
	}
	.bm-reveal-image::after {
		display: none;
	}
	.bm-counter-pulse {
		animation: none;
	}
}

/* ── Parallax hero — soporte del transform aplicado por JS ────────── */
.bm-parallax-hero {
	--bm-parallax-y: 0px;
}
.bm-parallax-hero::before {
	transform: translate3d(0, var(--bm-parallax-y), 0);
	transition: transform 0.05s linear;
	will-change: transform;
}