/* ============================================================ SITW — Capa de efectos cinematográficos (compartida) Se aplica en todas las páginas públicas de marketing. - Reveals al scroll (con failsafe en JS) - Aurora de fondo + spotlight que sigue el cursor - Parallax, tilt de tarjetas, brillo en botones - Barra de progreso de scroll Todo se desactiva con prefers-reduced-motion o sin JS. ============================================================ */ /* Variables de la capa FX (no pisan el theme) */ :root { --fx-violet: #9b30ff; --fx-violet-2: #7c4dff; --fx-cyan: #36e3ff; --fx-ease: cubic-bezier(.22, .61, .36, 1); } /* ---------- 1. Reveals al scroll ---------- Solo se ocultan cuando el JS marcó . Sin JS, todo queda visible (no rompe nada). */ html.sitw-fx [data-fx] { opacity: 0; transition: opacity .9s var(--fx-ease), transform .9s var(--fx-ease), filter .9s var(--fx-ease); will-change: opacity, transform; } html.sitw-fx [data-fx="up"] { transform: translateY(46px); } html.sitw-fx [data-fx="down"] { transform: translateY(-46px); } html.sitw-fx [data-fx="left"] { transform: translateX(-54px); } html.sitw-fx [data-fx="right"] { transform: translateX(54px); } html.sitw-fx [data-fx="scale"] { transform: scale(.9); } html.sitw-fx [data-fx="blur"] { filter: blur(14px); opacity: 0; } html.sitw-fx [data-fx].is-in { opacity: 1; transform: none; filter: none; } /* ---------- 2. Aurora de fondo (capa fija detrás del contenido) ---------- */ .sitw-fx-aurora { position: fixed; inset: -20vmax; z-index: 0; pointer-events: none; opacity: .55; background: radial-gradient(38vmax 38vmax at 18% 12%, rgba(124, 77, 255, .22), transparent 60%), radial-gradient(32vmax 32vmax at 86% 24%, rgba(54, 227, 255, .12), transparent 62%), radial-gradient(40vmax 40vmax at 60% 96%, rgba(155, 48, 255, .16), transparent 60%); filter: blur(8px); animation: sitw-aurora 26s ease-in-out infinite alternate; } @keyframes sitw-aurora { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(2%, -2%, 0) scale(1.08); } 100% { transform: translate3d(-2%, 1%, 0) scale(1.04); } } /* Mantener el contenido del sitio por encima de la aurora. OJO: NO incluir .sitw-mega-header — tiene su propio position:fixed/z-index y pisarlo la rompía (se renderiza al final del DOM vía wp_footer). */ #page, .site, .ast-container, .site-content, .sitw-pt { position: relative; z-index: 1; } /* ---------- 3. (Spotlight de cursor eliminado: recargaba el sitio) ---------- */ /* ---------- 4. Barra de progreso de scroll ---------- */ .sitw-fx-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 9999; pointer-events: none; background: linear-gradient(90deg, var(--fx-violet), var(--fx-cyan)); box-shadow: 0 0 12px rgba(155, 48, 255, .7); } /* ---------- 5. Tilt + glow en tarjetas ---------- */ html.sitw-fx .sitw-card, html.sitw-fx .sitw-pers-block, html.sitw-fx [data-fx-tilt] { transition: transform .35s var(--fx-ease), box-shadow .35s var(--fx-ease); transform-style: preserve-3d; } html.sitw-fx .sitw-card:hover, html.sitw-fx [data-fx-tilt]:hover { box-shadow: 0 24px 60px rgba(124, 77, 255, .28); } /* ---------- 6. Brillo deslizante en botones / CTAs ---------- */ html.sitw-fx .sitw-cta, html.sitw-fx .sitw-mega-cta, html.sitw-fx .sitw-pers-cta, html.sitw-fx [data-fx-shine] { position: relative; overflow: hidden; isolation: isolate; } html.sitw-fx .sitw-cta::after, html.sitw-fx .sitw-mega-cta::after, html.sitw-fx .sitw-pers-cta::after, html.sitw-fx [data-fx-shine]::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s var(--fx-ease); } html.sitw-fx .sitw-cta:hover::after, html.sitw-fx .sitw-mega-cta:hover::after, html.sitw-fx .sitw-pers-cta:hover::after, html.sitw-fx [data-fx-shine]:hover::after { transform: translateX(120%); } /* ---------- 7. Magnético (lo posiciona el JS) ---------- */ html.sitw-fx [data-fx-magnet] { transition: transform .25s var(--fx-ease); will-change: transform; } /* ---------- Accesibilidad / fallback ---------- */ @media (prefers-reduced-motion: reduce) { html.sitw-fx [data-fx] { opacity: 1 !important; transform: none !important; filter: none !important; } .sitw-fx-aurora, .sitw-fx-progress { display: none !important; } }