/* ====================================================================
   BAJLUM DIVI — Intro animada (overlay de portada)
   Puerta ancestral → tallado del enjarrado de adobe → estallido →
   liberación del espíritu, que se convierte en la transición hacia el
   resto de la página armada en Divi. Solo se carga en la portada.
   Reutiliza el cursor jaguar del tema (bajlum-divi.css); aquí solo se
   agregan sus dos gráficos (cincel/jaguar) — ver bajlum-intro.js.
   ==================================================================== */

/* ==================== BOTÓN SALTAR INTRO ==================== */
.bajlum-skip-intro{
	position:fixed;
	top:2rem; right:2rem;
	z-index:100020; /* por encima del header de Divi (99999) */
	background:rgba(255,170,0,.08);
	border:1px solid rgba(255,170,0,.3);
	color:var(--bajlum-amber);
	padding:.55rem 1.1rem;
	border-radius:4px;
	font-family:Georgia,'Times New Roman',serif;
	font-size:.8rem;
	letter-spacing:.12em;
	opacity:0;
	pointer-events:none;
	transition:opacity .6s ease, background .3s ease, border-color .3s ease;
	backdrop-filter:blur(10px);
	cursor:pointer;
}
.bajlum-skip-intro.visible{ opacity:1; pointer-events:auto; }
.bajlum-skip-intro:hover{ background:rgba(255,170,0,.2); border-color:var(--bajlum-amber); }

/* ==================== INTRO (ESTÁTICA, ESCENAS 01–04) ==================== */
body.bajlum-intro-mode{ overflow:hidden; }

.bajlum-intro{
	position:fixed;
	inset:0;
	z-index:100010; /* por encima del header de Divi (99999) */
	background:#000;
	overflow:hidden;
}
.bajlum-intro.hidden{
	opacity:0;
	pointer-events:none;
	transition:opacity 1.2s ease;
}

.bajlum-intro .bajlum-intro-layer{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	will-change:opacity,transform;
}

/* --- Escena 01: La Puerta Ancestral --- */
.scene-door{ opacity:1; }
.scene-door .door-img{
	position:absolute;
	inset:-6%;
	background:url('../assets/img/Puerta-ancestral.webp') center 42%/cover no-repeat;
	filter:brightness(.5) saturate(.85);
	will-change:transform,filter;
}
.scene-door .door-vignette{
	position:absolute; inset:0;
	background:
		radial-gradient(ellipse 62% 55% at 50% 48%, transparent 30%, rgba(0,0,0,.88) 78%, #000 100%),
		linear-gradient(180deg, rgba(0,0,0,.75) 0%, transparent 25%, transparent 70%, rgba(0,0,0,.9) 100%);
}
.jaguar-eyes{
	position:absolute;
	top:47.5%; left:50%;
	transform:translate(-50%,-50%);
	display:flex;
	gap:26px;
	filter:blur(.4px);
}
.jaguar-eyes .eye{
	width:16px; height:9px;
	background:radial-gradient(ellipse at center, #ffd76a 0%, #ffaa00 55%, rgba(255,102,0,0) 100%);
	border-radius:50%;
	box-shadow:0 0 18px 6px rgba(255,170,0,.5), 0 0 45px 14px rgba(255,120,0,.22);
	animation:bajlumEyeFlicker 4.6s infinite ease-in-out;
}
.jaguar-eyes .eye:last-child{ animation-delay:.15s; }
@keyframes bajlumEyeFlicker{
	0%,100%{ opacity:.95; transform:scaleY(1); }
	46%{ opacity:1; }
	48%{ opacity:.1; transform:scaleY(.15); }
	50%{ opacity:.95; transform:scaleY(1); }
	77%{ opacity:.75; }
}

/* --- Escena 02: El Tallado --- */
.scene-stone{ opacity:0; }
.stone-wrap{
	position:relative;
	width:min(72vh,86vw);
	aspect-ratio:1/1;
	will-change:transform;
}
.stone-wrap img{
	width:100%; height:100%;
	display:block;
	object-fit:contain;
	filter:brightness(.28) saturate(.4) contrast(1.05);
	will-change:filter;
}
.crust{
	position:absolute; inset:0;
	pointer-events:none;
}
.adobe-tile{
	position:absolute; inset:0;
	background:url('../assets/img/bajlum-adobe-matched.webp') center/100% 100% no-repeat;
	will-change:transform,opacity;
}
.stone-veil{
	position:absolute;
	inset:0;
	pointer-events:none;
	will-change:background;
}
.burst-flash{
	position:absolute;
	inset:0;
	margin:auto;
	width:130vmin; height:130vmin;
	border-radius:50%;
	background:radial-gradient(circle,
		rgba(255,225,150,.98) 0%,
		rgba(255,180,50,.75) 35%,
		rgba(255,120,10,.35) 55%,
		transparent 72%);
	filter:blur(4px);
	opacity:0;
	pointer-events:none;
	will-change:transform,opacity;
}
.bajlum-spark{
	position:absolute;
	width:3px; height:3px;
	background:#ffd76a;
	border-radius:50%;
	pointer-events:none;
	box-shadow:0 0 8px 2px rgba(255,170,0,.8);
	animation:bajlumSparkFly .7s ease-out forwards;
}
@keyframes bajlumSparkFly{
	0%{ transform:translate(0,0) scale(1); opacity:1; }
	100%{ transform:translate(var(--sx),var(--sy)) scale(.2); opacity:0; }
}
.bajlum-dust{
	position:absolute;
	width:26px; height:26px;
	background:radial-gradient(circle, rgba(150,120,85,.5) 0%, transparent 70%);
	border-radius:50%;
	pointer-events:none;
	animation:bajlumDustPuff 1.1s ease-out forwards;
}
@keyframes bajlumDustPuff{
	0%{ transform:translate(0,0) scale(.4); opacity:.8; }
	100%{ transform:translate(var(--sx),var(--sy)) scale(2.4); opacity:0; }
}

/* --- Escena 03: El Despertar (alma dorada) --- */
.scene-soul{ opacity:0; }
.scene-soul .glow-core,
.scene-soul .light-rays{
	position:absolute;
	inset:0;
	margin:auto;
}
.glow-core{
	position:absolute;
	width:60vmin; height:60vmin;
	border-radius:50%;
	background:radial-gradient(circle, rgba(255,200,90,.55) 0%, rgba(255,150,20,.28) 38%, rgba(255,100,0,.1) 60%, transparent 75%);
	filter:blur(6px);
	animation:bajlumCoreBreath 3.2s infinite ease-in-out;
	will-change:transform,opacity;
}
@keyframes bajlumCoreBreath{
	0%,100%{ transform:scale(1); opacity:.85; }
	50%{ transform:scale(1.12); opacity:1; }
}
.light-rays{
	position:absolute;
	width:90vmin; height:90vmin;
	background:conic-gradient(
		from 0deg,
		transparent 0deg, rgba(255,180,60,.14) 8deg, transparent 22deg,
		transparent 60deg, rgba(255,180,60,.1) 70deg, transparent 85deg,
		transparent 130deg, rgba(255,180,60,.13) 140deg, transparent 155deg,
		transparent 200deg, rgba(255,180,60,.1) 212deg, transparent 226deg,
		transparent 270deg, rgba(255,180,60,.12) 282deg, transparent 297deg,
		transparent 330deg, rgba(255,180,60,.09) 342deg, transparent 356deg);
	border-radius:50%;
	-webkit-mask:radial-gradient(circle, #000 25%, transparent 66%);
	mask:radial-gradient(circle, #000 25%, transparent 66%);
	animation:bajlumRaysSpin 26s linear infinite;
	will-change:transform;
}
@keyframes bajlumRaysSpin{ to{ transform:rotate(360deg); } }

.soul-face{
	position:absolute;
	top:50%; left:50%;
	width:min(44vh,64vw);
	opacity:0;
	will-change:transform,filter,opacity;
}

/* --- Textos de la intro --- */
.bajlum-intro-text{
	position:absolute;
	left:50%; bottom:14vh;
	transform:translateX(-50%) translateY(14px);
	width:90%;
	text-align:center;
	font-size:clamp(1.05rem,2.4vw,1.5rem);
	font-style:italic;
	letter-spacing:.18em;
	color:var(--bajlum-ink);
	text-shadow:0 2px 14px rgba(0,0,0,.9);
	opacity:0;
	will-change:opacity,transform;
}
.bajlum-intro-text em{
	font-style:normal;
	color:var(--bajlum-amber);
}

/* --- Indicador / hint --- */
.bajlum-intro-hint{
	position:absolute;
	left:50%; bottom:4.5vh;
	transform:translateX(-50%);
	text-align:center;
	font-size:.72rem;
	letter-spacing:.32em;
	text-transform:uppercase;
	color:rgba(224,213,192,.55);
	animation:bajlumHintPulse 2.4s infinite ease-in-out;
	transition:opacity .6s ease;
}
.bajlum-intro-hint .chevron{
	display:block;
	margin:.5rem auto 0;
	width:14px; height:14px;
	border-right:1px solid rgba(255,170,0,.7);
	border-bottom:1px solid rgba(255,170,0,.7);
	transform:rotate(45deg);
}
@keyframes bajlumHintPulse{
	0%,100%{ opacity:.5; }
	50%{ opacity:1; }
}
.bajlum-intro-hint.off{
	opacity:0 !important;
	animation:none;
}

/* --- Barra de progreso --- */
.bajlum-intro-progress{
	position:absolute;
	bottom:0; left:0;
	width:100%; height:2px;
	background:rgba(255,170,0,.12);
}
.bajlum-intro-progress .bar{
	height:100%; width:0%;
	background:linear-gradient(90deg, var(--bajlum-lava), var(--bajlum-amber));
	box-shadow:0 0 12px rgba(255,170,0,.7);
	will-change:width;
}

/* ==================== TRANSICIÓN: ZOOM DEL JAGUAR + RESPLANDOR ==================== */
.bajlum-transition-zoom{
	position:fixed;
	inset:0;
	z-index:100015; /* por encima del header de Divi (99999) */
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	pointer-events:none;
	opacity:0;
	visibility:hidden;
}
.bajlum-transition-zoom.run{
	visibility:visible;
	animation:bajlumJtOverlay 1.7s ease forwards;
}
.bajlum-transition-zoom .light-rays{
	position:absolute;
	inset:0;
	margin:auto;
	width:150vmax; height:150vmax;
	opacity:0;
	filter:brightness(1.8) saturate(1.3);
}
.bajlum-transition-zoom.run .light-rays{
	animation:bajlumRaysSpin 26s linear infinite, bajlumJtRays 1.7s ease forwards;
}
.jt-bloom{
	position:absolute;
	inset:-20%;
	background:radial-gradient(circle at 50% 50%,
		rgba(255,228,160,1) 0%,
		rgba(255,195,80,.96) 22%,
		rgba(255,150,30,.8) 42%,
		rgba(150,80,10,.55) 62%,
		rgba(15,8,0,.92) 85%);
	opacity:0;
	transform:scale(.3);
}
.bajlum-transition-zoom.run .jt-bloom{
	animation:bajlumJtBloom 1.7s var(--bajlum-ease) forwards;
}
@keyframes bajlumJtOverlay{
	0%{ opacity:0; }
	10%{ opacity:1; }
	80%{ opacity:1; }
	100%{ opacity:0; }
}
@keyframes bajlumJtBloom{
	0%{ opacity:0; transform:scale(.3); }
	45%{ opacity:1; }
	100%{ opacity:1; transform:scale(1.5); }
}
@keyframes bajlumJtRays{
	0%{ opacity:0; }
	55%{ opacity:.95; }
	100%{ opacity:.75; }
}
/* El rostro de la liberación acelera hacia la cámara al finalizar.
   Sin keyframe inicial: CSS empalma desde su estado actual. */
.bajlum-intro.finishing .soul-face{
	animation:bajlumSoulZoom 1.1s cubic-bezier(.55,0,.85,.4) forwards;
}
@keyframes bajlumSoulZoom{
	100%{ transform:translate(-50%,-50%) scale(11); opacity:1; }
}

@media (max-width:768px){
	.bajlum-skip-intro{ top:1rem; right:1rem; }
	.bajlum-intro-text{ bottom:17vh; letter-spacing:.1em; }
}
@media (prefers-reduced-motion:reduce){
	.bajlum-intro *{ animation-duration:.01s !important; transition-duration:.01s !important; }
}