/* =========================================================
   CROMA STUDIO — fx.css  (animaciones; solo con html.fx-ready)
   ========================================================= */

/* Barra de progreso de scroll */
.fx-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--caramel), var(--caramel-2)); }

/* Entrada de página */
html.fx-ready body { animation: fxPageIn .7s var(--ease) both; }
html.fx-leaving body { opacity: 0; transform: translateY(-6px); transition: opacity .28s ease, transform .28s ease; }
@keyframes fxPageIn { from { opacity: 0; } to { opacity: 1; } }

/* Reveal mejorado (app.js añade .in) */
html.fx-ready .reveal { filter: blur(6px); transform: translateY(32px) scale(.985); transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease); transition-delay: var(--d, 0s); }
html.fx-ready .reveal.in { filter: none; transform: none; }

/* Hijos escalonados de grids */
html.fx-ready .fx-stagger > * { opacity: 0; transform: translateY(26px) scale(.97); filter: blur(4px); transition: opacity .9s var(--ease), transform 1s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
html.fx-ready .fx-stagger.fx-in > * { opacity: 1; transform: none; filter: none; }
html.fx-ready .fx-stagger > .reveal { transition-delay: calc(var(--i, 0) * 70ms); }

/* Titular por palabras */
.fx-words .fx-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.fx-words .fx-w > span { display: inline-block; transform: translateY(105%); opacity: 0; transition: transform 1s var(--ease), opacity .8s var(--ease); transition-delay: calc(var(--i, 0) * 85ms + .1s); }
.fx-words.fx-in .fx-w > span { transform: none; opacity: 1; }
.fx-words .script.fx-w > span, .fx-words .fx-w .script { padding-right: .12em; }

/* Encabezados con máscara */
html.fx-ready .fx-mask { clip-path: inset(0 0 100% 0); transform: translateY(18px); transition: clip-path 1.1s var(--ease), transform 1.1s var(--ease); }
html.fx-ready .fx-mask.fx-in { clip-path: inset(0 0 -10% 0); transform: none; }
html.fx-ready .eyebrow.fx-mask::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease) .25s; }
html.fx-ready .eyebrow.fx-mask.fx-in::before { transform: scaleX(1); }

/* Revelado de imágenes */
html.fx-ready .fx-img { clip-path: inset(12% 12% 12% 12% round var(--r-l)); transition: clip-path 1.3s var(--ease); }
html.fx-ready .fx-img img { transform: scale(1.12); transition: transform 1.6s var(--ease); }
html.fx-ready .fx-img.fx-in { clip-path: inset(0 0 0 0 round var(--r-l)); }
html.fx-ready .fx-img.fx-in img { transform: none; }
html.fx-ready .masonry .fx-img, html.fx-ready .masonry .fx-img.fx-in { clip-path: inset(0 0 0 0 round var(--r-m)); }
html.fx-ready .masonry .fx-img:not(.fx-in) { clip-path: inset(8% 8% 8% 8% round var(--r-m)); }

/* Hero: flotación, blob, destellos */
html.fx-ready .hero-visual figure { will-change: transform; }
html.fx-ready .hero-visual .fx-float { animation: fxFloat 7s ease-in-out infinite; }
html.fx-ready .hero-visual .f2 .fx-float, html.fx-ready .hero-visual .f2.fx-float { animation-delay: -2.3s; }
html.fx-ready .hero-visual .f3.fx-float { animation-delay: -4.6s; }
@keyframes fxFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
html.fx-ready .hero-visual .blob { animation: fxBlob 16s ease-in-out infinite; will-change: border-radius, transform; }
@keyframes fxBlob {
  0%, 100% { border-radius: 52% 48% 46% 54% / 44% 50% 50% 56%; }
  33% { border-radius: 44% 56% 58% 42% / 52% 42% 58% 48%; }
  66% { border-radius: 58% 42% 40% 60% / 46% 60% 40% 54%; }
}
html.fx-ready .sparkle { animation: fxTwinkle 3.6s ease-in-out infinite; }
html.fx-ready .sparkle + .sparkle { animation-delay: -1.8s; }
@keyframes fxTwinkle { 0%, 100% { opacity: .9; transform: scale(1) rotate(0); } 50% { opacity: .35; transform: scale(.7) rotate(25deg); } }
html.fx-ready .hero-visual .tag { animation: fxTagIn 1s var(--ease) .9s both; }
@keyframes fxTagIn { from { opacity: 0; transform: translateY(16px); } }
html.fx-ready .hero-visual figure:not(.fx-float) { animation: fxPop 1.1s var(--ease) both; }
html.fx-ready .hero-visual .f1 { animation-delay: .15s; } html.fx-ready .hero-visual .f2 { animation-delay: .3s; } html.fx-ready .hero-visual .f3 { animation-delay: .45s; }
@keyframes fxPop { from { opacity: 0; transform: translateY(30px) scale(.92); } }

/* Tilt 3D + brillo */
.fx-tilt { transform-style: preserve-3d; will-change: transform; }
.fx-tilt.fx-tilting { transition: transform .12s linear, box-shadow .5s var(--ease) !important; }
.fx-glare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .35), transparent 45%); mix-blend-mode: soft-light; z-index: 3; }
.fx-tilt:hover .fx-glare { opacity: 1; }

/* Botones magnéticos */
.fx-mag { will-change: transform; }

/* Spotlight en secciones oscuras */
.fx-spot { position: relative; isolation: isolate; }
.fx-spot::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .5s; border-radius: inherit;
  background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 50%), rgba(201, 162, 126, .16), transparent 60%); }
.fx-spot:hover::before { opacity: 1; }
.fx-spot > * { position: relative; z-index: 1; }
.cta-band.fx-spot > * { z-index: 1; }

/* Marquee: pausa al pasar */
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Pasos / timeline: línea que crece */
html.fx-ready .steps .step::before, html.fx-ready .timeline .tl-item .year { transition: color .6s, transform .9s var(--ease); }
html.fx-ready .timeline .tl-item { position: relative; }
html.fx-ready .timeline .tl-item::after { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--caramel); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--ease) .1s; }
html.fx-ready .timeline .tl-item.in::after { transform: scaleX(1); }

/* Header que se oculta al bajar */
html.fx-ready .header { transition: transform .45s var(--ease), border-color .3s, background .3s; }
html.fx-ready .header.fx-hide { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .fx-progress { display: none; }
  html.fx-ready body, html.fx-leaving body { animation: none; opacity: 1; transform: none; }
}