/* ===================== Efectos globales (Colores y tipografía > Animaciones) =====================
   Se activan con clases en <body>: fx-float, fx-shine, fx-aurora, fx-parallax, fx-progress, fx-titles.
   Usan las propiedades translate/scale (no transform) para no pisar las rotaciones e inclinaciones del tema. */

/* Flotar: fotos destacadas y stickers suben y bajan suavemente, sin parar */
@keyframes cxfx-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
.fx-float .cx-hsplit-media img,
.fx-float .cx-it-media img,
.fx-float .story-media img,
.fx-float .steps-media img.shot,
.fx-float .grill-sticker,
.fx-float .cta-sticker,
.fx-float .cx-col-ico,
.fx-float .ca-badge{animation:cxfx-float 7s ease-in-out infinite}
.fx-float .steps-media img.shot:nth-child(2),
.fx-float .cx-col:nth-child(2n) .cx-col-ico{animation-delay:-3.5s}

/* Brillo: un reflejo de luz recorre los botones principales cada pocos segundos */
@keyframes cxfx-shine{0%,72%{translate:-130% 0}100%{translate:130% 0}}
.fx-shine .btn:not(.btn-ink){position:relative;overflow:hidden;isolation:isolate}
.fx-shine .btn:not(.btn-ink)::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);
  animation:cxfx-shine 4.5s ease-in-out infinite;
}

/* Fondo vivo: manchas de color del tema que se mueven lento detrás de portadas y fondos oscuros */
@keyframes cxfx-aurora{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}50%{transform:translate3d(4%,-3%,0) rotate(8deg) scale(1.08)}100%{transform:translate3d(-3%,4%,0) rotate(-6deg) scale(1)}}
.fx-aurora .cx-hsplit,
.fx-aurora .sec-ink,
.fx-aurora .sec-red,
.fx-aurora .statbar{position:relative;isolation:isolate;overflow:hidden}
.fx-aurora .cx-hsplit::before,
.fx-aurora .sec-ink::before,
.fx-aurora .sec-red::before,
.fx-aurora .statbar::before{
  content:"";position:absolute;inset:-25%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(closest-side,color-mix(in srgb,var(--red) 34%,transparent),transparent) 18% 28%/48% 58% no-repeat,
    radial-gradient(closest-side,color-mix(in srgb,var(--orange) 30%,transparent),transparent) 82% 22%/44% 54% no-repeat,
    radial-gradient(closest-side,color-mix(in srgb,var(--green) 26%,transparent),transparent) 58% 88%/50% 60% no-repeat;
  filter:blur(28px);animation:cxfx-aurora 18s ease-in-out infinite alternate;
}
.fx-aurora .sec-red::before{background:
  radial-gradient(closest-side,rgba(255,255,255,.22),transparent) 20% 30%/50% 60% no-repeat,
  radial-gradient(closest-side,color-mix(in srgb,var(--orange) 45%,transparent),transparent) 80% 70%/50% 60% no-repeat}

/* Parallax: las fotos se desplazan un poco más lento que la página (lo mueve site.js con --py) */
.fx-parallax [data-fx-par]{translate:0 var(--py,0px);will-change:translate}

/* Barra de progreso de lectura */
.cx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;transform-origin:0 50%;transform:scaleX(0);background:var(--red);pointer-events:none}

/* Títulos que se revelan al aparecer en pantalla */
.cx-js .fx-titles .cx-secwrap:not(.is-seen) :is(h1,h2){clip-path:inset(0 0 100% 0);translate:0 .35em}
.cx-js .fx-titles .cx-secwrap :is(h1,h2){transition:clip-path .9s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1)}

@media(prefers-reduced-motion:reduce){
  [class*="fx-"] *,[class*="fx-"] *::before,[class*="fx-"] *::after{animation:none!important}
  .fx-parallax [data-fx-par]{translate:none!important}
  .cx-js .fx-titles .cx-secwrap :is(h1,h2){clip-path:none!important;translate:none!important}
  .cx-progress{display:none}
}