/* =========================================================
   INFERNUM — scrollfx.css
   Solo se carga en la Home. Todo depende de .fx-on
   ========================================================= */

/* --------------------------- Base sticky ----------------- */
/* main.css usa overflow-x:hidden en body, lo que rompe position:sticky.
   overflow:clip recorta igual sin crear contenedor de scroll. */
body.fx-on{overflow-x:clip}
@supports not (overflow:clip){body.fx-on{overflow-x:visible}}

/* --------------------------- Barra de progreso ----------- */
.fx-progress{
	position:fixed;top:0;left:0;width:100%;height:3px;z-index:9998;
	background:linear-gradient(90deg,var(--inf-accent),var(--inf-accent2));
	transform:scaleX(var(--sp,0));transform-origin:0 50%;
	will-change:transform;pointer-events:none;
}

/* --------------------------- Cabecera autohide ----------- */
.fx-on .site-header{transition:transform .45s cubic-bezier(.2,.8,.2,1),background .3s}
.fx-on .site-header.is-hidden{transform:translateY(-100%)}

/* --------------------------- Marquee reactivo ------------ */
.fx-on .marquee{transform:skewY(var(--mq-skew,0deg));transition:transform .35s ease-out;will-change:transform}

/* --------------------------- Texto por palabras ---------- */
.fx-split .fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.fx-split .fx-w > i{
	display:inline-block;font-style:inherit;transform:translateY(110%);
	transition:transform .9s cubic-bezier(.16,1,.3,1);will-change:transform;
}
.fx-split.is-in .fx-w > i{transform:none}

/* --------------------------- HERO fijado ----------------- */
.fx-on .hero{
	min-height:0;height:var(--fx-hero-h,220vh);padding:0;display:block;overflow:visible;
}
.fx-on .hero.has-img{background-color:#000}
.fx-on .fx-hero__stage{
	position:sticky;top:0;height:100vh;height:100svh;min-height:560px;
	display:flex;align-items:flex-end;overflow:hidden;
	padding-block:6rem 5rem;
}
.fx-on .fx-hero__bg{
	position:absolute;inset:-2%;background:center/cover no-repeat;z-index:0;
	transform:scale(calc(1.16 - .16 * var(--p,0))) translate3d(0,calc(var(--p,0) * 5vh),0);
	transform-origin:50% 62%;
	filter:saturate(calc(1 - .4 * var(--p,0))) contrast(1.05);
	will-change:transform;
}
.fx-on .hero__veil{z-index:1}
.fx-on .fx-hero__fade{
	position:absolute;inset:0;z-index:2;background:var(--inf-bg);
	opacity:calc(var(--p,0) * .9);pointer-events:none;
}
.fx-on .fx-hero__ghost{
	position:absolute;left:50%;top:46%;z-index:1;
	font-family:var(--f-display);font-weight:900;line-height:.8;
	font-size:clamp(9rem,26vw,24rem);white-space:nowrap;text-transform:uppercase;
	color:transparent;-webkit-text-stroke:1px rgba(237,232,225,.09);
	transform:translate3d(calc(-50% - var(--p,0) * 26vw),-50%,0);
	pointer-events:none;will-change:transform;
}
.fx-on .hero__in{
	position:relative;z-index:3;width:100%;
	transform:translate3d(0,calc(var(--p,0) * -12vh),0);
	opacity:calc(1 - var(--p,0) * 1.4);
	will-change:transform,opacity;
}
.fx-on .fx-hero__cue{
	position:absolute;left:50%;bottom:2.2rem;z-index:3;translate:-50% 0;
	display:flex;flex-direction:column;align-items:center;gap:.7rem;
	font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--inf-muted);
	opacity:calc(1 - var(--p,0) * 3);pointer-events:none;
}
.fx-on .fx-hero__cue i{display:block;width:1px;height:52px;background:linear-gradient(var(--inf-accent),transparent);animation:fxCue 1.9s ease-in-out infinite}
@keyframes fxCue{0%,100%{transform:scaleY(.35);transform-origin:50% 0}50%{transform:scaleY(1);transform-origin:50% 0}}

/* --------------------------- SCROLLY (beats) ------------- */
.fx-scrolly{position:relative;height:calc(var(--fx-beats,3) * 92vh + 50vh);background:var(--inf-bg)}
.fx-scrolly__stage{
	position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
	display:grid;place-items:center;
}
.fx-scrolly__bg{
	position:absolute;inset:-5%;background:center/cover no-repeat;
	transform:scale(calc(1.02 + .22 * var(--p,0))) translate3d(0,calc(var(--p,0) * -4vh),0);
	filter:grayscale(.35) contrast(1.1) brightness(.5);
	will-change:transform;
}
.fx-scrolly__bg::after{
	content:'';position:absolute;inset:0;
	background:radial-gradient(90% 70% at 50% 50%,transparent,rgba(0,0,0,.8));
}
.fx-scrolly__rail{
	position:absolute;left:2.2rem;top:0;bottom:0;width:1px;background:var(--inf-line);z-index:3;
}
.fx-scrolly__rail::after{
	content:'';position:absolute;left:0;top:0;width:1px;height:calc(var(--p,0) * 100%);
	background:var(--inf-accent);
}
.fx-scrolly__beats{position:relative;z-index:4;width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.fx-beat{
	position:absolute;left:0;right:0;top:50%;max-width:640px;
	transform:translate3d(0,calc(-50% + 46px),0);opacity:0;
	transition:opacity .5s ease,transform .8s cubic-bezier(.16,1,.3,1),filter .5s;
	filter:blur(6px);pointer-events:none;
}
.fx-beat.is-active{opacity:1;transform:translate3d(0,-50%,0);filter:none;pointer-events:auto}
.fx-beat__num{
	display:block;font-family:var(--f-display);font-weight:900;font-size:5rem;line-height:.8;
	color:transparent;-webkit-text-stroke:1px var(--inf-accent);margin-bottom:.6rem;
}
.fx-beat__title{font-size:clamp(2.2rem,5.5vw,4rem);margin:0 0 .5rem}
.fx-beat__text{color:var(--inf-text);font-size:1.05rem;margin:0;max-width:52ch}
.fx-scrolly__kicker{position:absolute;top:2rem;left:0;z-index:4}

/* --------------------------- SCRUB (canvas/video) -------- */
.fx-scrub{position:relative;height:var(--fx-scrub-h,300vh);background:#000}
.fx-scrub__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.fx-scrub canvas,.fx-scrub video{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000;
}
.fx-scrub__stage::after{
	content:'';position:absolute;inset:0;pointer-events:none;
	background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 30%,transparent 55%,rgba(0,0,0,.9));
}
.fx-scrub__cap{
	position:absolute;left:0;right:0;bottom:10vh;z-index:3;
	transform:translate3d(0,calc(var(--p,0) * -6vh),0);
}
.fx-scrub__title{font-size:clamp(2.4rem,7vw,6rem);margin:0 0 .4rem}
.fx-scrub__text{color:var(--inf-muted);max-width:56ch;margin:0}

/* --------------------------- Parallax genérico ----------- */
.fx-on [data-fx-parallax]{transform:translate3d(0,var(--ty,0px),0) scale(var(--fx-scale,1));will-change:transform}
.fx-on .split__media{overflow:hidden}
.fx-on .split__media img{--fx-scale:1.16}

/* --------------------------- Tarjetas con profundidad ---- */
.fx-on .card{transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .3s}
.fx-on .card:hover{transform:translateY(-10px)}

/* --------------------------- Responsive ------------------ */
@media (max-width:860px){
	.fx-on .hero{height:var(--fx-hero-h-m,170vh)}
	.fx-on .fx-hero__ghost{font-size:34vw}
	.fx-scrolly{height:calc(var(--fx-beats,3) * 85vh + 40vh)}
	.fx-scrolly__rail{left:1rem}
	.fx-beat__num{font-size:3.4rem}
	.fx-scrub{height:var(--fx-scrub-h-m,220vh)}
	.fx-on .marquee{transform:none}
}

/* --------------------------- Accesibilidad --------------- */
@media (prefers-reduced-motion:reduce){
	.fx-on .hero{height:auto}
	.fx-on .fx-hero__stage{position:static;height:auto;min-height:70vh}
	.fx-on .fx-hero__bg,.fx-on .hero__in,.fx-on .fx-hero__ghost{transform:none;opacity:1;filter:none}
	.fx-on .fx-hero__fade,.fx-on .fx-hero__cue{display:none}
	.fx-scrolly,.fx-scrub{height:auto}
	.fx-scrolly__stage,.fx-scrub__stage{position:static;height:auto;min-height:0;padding-block:4rem}
	.fx-scrolly__beats{position:static}
	.fx-beat{position:static;opacity:1;transform:none;filter:none;margin-bottom:3rem;max-width:none}
	.fx-split .fx-w > i{transform:none}
	.fx-progress{display:none}
	.fx-on .marquee,.fx-on .marquee__track{animation:none;transform:none}
}