/* =====================================================================
   Animaciones de las portadas modernas (Aurora, Cinemático, Arquitectura).
   El contenido solo se oculta cuando el JS marcó <html class="fx-on">:
   sin JavaScript (o si falla) todo se ve normal.
   ===================================================================== */

/* ---- Aparición al entrar en pantalla ---- */
.fx-on [data-fx] { transition: opacity .9s cubic-bezier(.2,.75,.2,1), transform 1s cubic-bezier(.2,.75,.2,1), clip-path 1.2s cubic-bezier(.7,0,.2,1), filter .9s ease; transition-delay: var(--d, 0s); }
.fx-on [data-fx="up"]:not(.in)    { opacity: 0; transform: translateY(46px); }
.fx-on [data-fx="down"]:not(.in)  { opacity: 0; transform: translateY(-30px); }
.fx-on [data-fx="left"]:not(.in)  { opacity: 0; transform: translateX(-60px); }
.fx-on [data-fx="right"]:not(.in) { opacity: 0; transform: translateX(60px); }
.fx-on [data-fx="zoom"]:not(.in)  { opacity: 0; transform: scale(.88); }
.fx-on [data-fx="fade"]:not(.in)  { opacity: 0; }
.fx-on [data-fx="blur"]:not(.in)  { opacity: 0; filter: blur(14px); transform: scale(1.04); }
.fx-on [data-fx="clip"]:not(.in)  { clip-path: inset(0 0 100% 0); }
.fx-on [data-fx="clip-x"]:not(.in){ clip-path: inset(0 100% 0 0); }
[data-fx="clip"].in, [data-fx="clip-x"].in { clip-path: inset(0 0 0 0); }
.fx-on [data-fx="clip"] img, .fx-on [data-fx="clip-x"] img { transform: scale(1.25); transition: transform 1.6s cubic-bezier(.2,.75,.2,1); transition-delay: var(--d, 0s); }
[data-fx="clip"].in img, [data-fx="clip-x"].in img { transform: scale(1); }

/* ---- Título que aparece palabra por palabra ---- */
.fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.fx-w > span { display: inline-block; transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity 1s; transition-delay: calc(var(--d, 0s) + var(--i) * 70ms); }
.fx-on [data-fx="words"]:not(.in) .fx-w > span { transform: translateY(110%) rotate(4deg); opacity: 0; }

/* ---- Degradado animado en el texto ---- */
.fx-grad { background: linear-gradient(100deg, color-mix(in srgb, var(--pub) 40%, #fff), var(--gold), color-mix(in srgb, var(--gold) 45%, #fff), color-mix(in srgb, var(--pub) 40%, #fff)); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: fxGrad 8s ease-in-out infinite; }
@keyframes fxGrad { 50% { background-position: 100% 0; } }

/* ---- Fondo «aurora»: manchas de color que flotan ---- */
.fx-aurora { position: absolute; inset: -20%; overflow: hidden; pointer-events: none; }
.fx-aurora i { position: absolute; width: 46vw; height: 46vw; min-width: 340px; min-height: 340px; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen; }
.fx-aurora i:nth-child(1) { background: var(--pub); top: 0; left: 5%; animation: fxBlob1 18s ease-in-out infinite; }
.fx-aurora i:nth-child(2) { background: var(--gold); top: 25%; right: 0; animation: fxBlob2 22s ease-in-out infinite; opacity: .4; }
.fx-aurora i:nth-child(3) { background: color-mix(in srgb, var(--pub) 50%, #3BC9DB); bottom: -10%; left: 30%; animation: fxBlob3 26s ease-in-out infinite; }
@keyframes fxBlob1 { 50% { transform: translate(18vw, 12vh) scale(1.2); } }
@keyframes fxBlob2 { 50% { transform: translate(-22vw, -8vh) scale(.85); } }
@keyframes fxBlob3 { 50% { transform: translate(10vw, -18vh) scale(1.15); } }
.fx-grain { position: absolute; inset: 0; pointer-events: none; opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.fx-gridbg { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); }

/* ---- Vidrio ---- */
.fx-glass { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
.fx-glass-l { background: color-mix(in srgb, var(--surface) 72%, transparent); border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }

/* ---- Flotar ---- */
.fx-float { animation: fxFloat 7s ease-in-out infinite; animation-delay: var(--fd, 0s); }
@keyframes fxFloat { 50% { transform: translateY(-16px); } }
.fx-pulse { position: relative; }
.fx-pulse::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: fxPulse 2s ease-out infinite; }
@keyframes fxPulse { to { transform: scale(2.6); opacity: 0; } }
.fx-spin { animation: fxSpin 22s linear infinite; }
@keyframes fxSpin { to { transform: rotate(360deg); } }

/* ---- Cinta infinita ---- */
.fx-marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.fx-marquee > div { display: flex; flex: none; gap: 3rem; padding-right: 3rem; animation: fxMarquee var(--mq, 36s) linear infinite; }
.fx-marquee:hover > div { animation-play-state: paused; }
@keyframes fxMarquee { to { transform: translateX(-100%); } }

/* ---- Inclinación 3D ---- */
[data-tilt] { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1); will-change: transform; }
[data-tilt] .fx-shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.35), transparent 55%); }
[data-tilt]:hover .fx-shine { opacity: 1; }

/* ---- Carrusel cinematográfico ---- */
.fx-slides { position: relative; overflow: hidden; }
.fx-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.4s ease, visibility 0s 1.4s; }
.fx-slide.on { opacity: 1; visibility: visible; transition: opacity 1.4s ease; z-index: 1; }
.fx-slide .fx-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.18); }
.fx-slide.on .fx-bg { animation: fxKen 9s ease-out forwards; }
@keyframes fxKen { from { transform: scale(1.18) translate(1.5%, 1%); } to { transform: scale(1.02) translate(0, 0); } }
.fx-slide .fx-cap > * { opacity: 0; transform: translateY(40px); transition: opacity .9s, transform 1s cubic-bezier(.2,.8,.2,1); }
.fx-slide.on .fx-cap > * { opacity: 1; transform: none; }
.fx-slide.on .fx-cap > *:nth-child(2) { transition-delay: .25s; }
.fx-slide.on .fx-cap > *:nth-child(3) { transition-delay: .45s; }
.fx-slide.on .fx-cap > *:nth-child(4) { transition-delay: .65s; }
.fx-bar { height: 3px; background: rgba(255,255,255,.25); border-radius: 3px; overflow: hidden; }
.fx-bar > i { display: block; height: 100%; width: 0; background: #fff; }
.fx-bar.on > i { animation: fxBar var(--dur, 7s) linear forwards; }
.fx-bar.done > i { width: 100%; }
@keyframes fxBar { to { width: 100%; } }

/* ---- Galería que se arrastra ---- */
[data-drag] { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; }
[data-drag]::-webkit-scrollbar { display: none; }
[data-drag].dragging { cursor: grabbing; scroll-snap-type: none; }
[data-drag].dragging * { pointer-events: none; }
[data-drag] > * { scroll-snap-align: start; }

/* ---- Burbuja que sigue al cursor ---- */
.fx-cursor { position: fixed; left: 0; top: 0; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; z-index: 60; pointer-events: none;
  display: grid; place-items: center; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background: var(--pub); transform: scale(0); transition: transform .35s cubic-bezier(.2,.8,.2,1); mix-blend-mode: normal; }
.fx-cursor.on { transform: scale(1); }

/* ---- Imagen que sigue al cursor (lista de tipos) ---- */
.fx-peek { position: fixed; left: 0; top: 0; width: 280px; height: 200px; border-radius: 18px; overflow: hidden; z-index: 55; pointer-events: none;
  opacity: 0; transform: scale(.7) rotate(-6deg); transition: opacity .3s, transform .45s cubic-bezier(.2,.8,.2,1); box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); }
.fx-peek.on { opacity: 1; transform: scale(1) rotate(-3deg); }
.fx-peek img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Subrayado animado ---- */
.fx-link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .45s cubic-bezier(.2,.8,.2,1); padding-bottom: 2px; }
.fx-link:hover { background-size: 100% 2px; }

/* ---- Barra de progreso de lectura ---- */
.fx-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 70; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--pub), var(--gold)); }

@media (prefers-reduced-motion: reduce) {
  .fx-on [data-fx] { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
  .fx-on [data-fx="words"] .fx-w > span { transform: none !important; opacity: 1 !important; }
  .fx-aurora i, .fx-float, .fx-spin, .fx-grad, .fx-marquee > div, .fx-slide.on .fx-bg, .fx-pulse::after { animation: none !important; }
  .fx-cursor, .fx-peek { display: none !important; }
}
@media (hover: none) { .fx-cursor, .fx-peek { display: none !important; } }

/* Títulos dentro de bloques oscuros (ui.css les da el color de texto del tema) */
.text-white :is(h1, h2, h3, h4, h5, h6) { color: inherit; }