========================================================= */
/* =========================================================
7) BLUR (Opción premium, pero cuidado)
---------------------------------------------------------
⚠️ Blur usa filter → más pesado que transform/opacity.
Recomendación:
- Úsalo en textos y bloques
- NO lo pongas en imágenes grandes full screen
- NO lo encadenes masivamente en grids de 40 elementos
Ej in-view:
Ej auto:
========================================================= */
/* =========================================================
8) ESTADO INTERNO
---------------------------------------------------------
- .is-active la añade SOLO el JS (config-fx.js)
- Nunca escribir manualmente en HTML
- Es el “gatillo” para modos auto/inview
========================================================= */
/* =========================================================
9) ANTI-PATRONES & BUENAS PRÁCTICAS
========================================================= */
/* ---------------------------------------------------------
❌ No encadenar efectos pesados masivamente
---------------------------------------------------------
- No aplicar fx-blur a grids grandes (30+ elementos).
- No usar fx-shine--auto en múltiples tarjetas simultáneamente.
- Evita animaciones infinitas en listados largos.
*/
/* ---------------------------------------------------------
❌ No mezclar transform conflictivos en el mismo nodo
---------------------------------------------------------
- No combinar fx-shift + fx-fade en el mismo elemento.
- No mezclar transform propios inline con fx-shift.
- Si necesitas composición → encapsular en divs anidados.
*/
/* ---------------------------------------------------------
⚠️ Blur es costoso (usa filter)
---------------------------------------------------------
- Usarlo en texto o bloques pequeños.
- No aplicarlo sobre imágenes full screen.
- No usar fx-blur--strong en hero o fondos grandes.
*/
/* ---------------------------------------------------------
⚠️ Shine infinito solo para zonas clave
---------------------------------------------------------
- fx-shine--auto está pensado para:
· Hero principal
· Elemento destacado
- No usarlo en grids de posters.
*/
/* ---------------------------------------------------------
✅ Preferencias de uso recomendadas
---------------------------------------------------------
- Hero principal → fx-fade + fx-shift encapsulados
- Cards → fx-shift hover
- Posters destacados → fx-shine hover
- Secciones al hacer scroll → fx-fade + fx-inview
*/
/* ---------------------------------------------------------
🎯 Regla de oro
---------------------------------------------------------
Si dudas:
- Movimiento fuerte → fx-shift
- Aparición elegante → fx-fade
- Brillo premium → fx-shine
- Suavidad extra → fx-blur (con moderación)
*/
/* ======================
FX core: delays globales
====================== */
.fx-delay-0 { --fx-delay: 0ms; }
.fx-delay-200 { --fx-delay: 200ms; }
.fx-delay-400 { --fx-delay: 400ms; }
.fx-delay-600 { --fx-delay: 600ms; }
.fx-delay-800 { --fx-delay: 800ms; }
.fx-delay-1200 { --fx-delay: 1200ms; }
/* ======================
FX · Color System
- Variable base: --fx-color-rgb
- Reutilizable para cualquier efecto
====================== */
/* Default: blanco */
.fx-shine,
.fx-shift{
--fx-color-rgb: 255,255,255;
}
/* Color utilities (usan tokens de config.css) */
.fx-blue { --fx-color-rgb: var(--ma-blue-rgb); }
.fx-dark-blue { --fx-color-rgb: var(--ma-dark-blue-rgb); }
.fx-aqua { --fx-color-rgb: var(--ma-aqua-rgb); }
.fx-green { --fx-color-rgb: var(--ma-green-rgb); }
.fx-yellow { --fx-color-rgb: var(--ma-yellow-rgb); }
.fx-coral { --fx-color-rgb: var(--ma-coral-rgb); }
/* =========================================
FX · Blur (Utility)
- Se activa con .is-active
- Compatible con fx-auto / fx-inview
========================================= */
.fx-blur{
--fx-blur-amount: 6px;
filter: blur(var(--fx-blur-amount));
transition:
filter var(--fx-blur-dur, 700ms) var(--fx-blur-ease, cubic-bezier(.22,1,.36,1)) var(--fx-delay, 0ms);
}
/* Intensidades */
.fx-blur--light { --fx-blur-amount: 3px; }
.fx-blur--normal { --fx-blur-amount: 6px; }
.fx-blur--strong { --fx-blur-amount: 12px; }
/* Activación */
.fx-blur.is-active{
filter: blur(0);
}
/* Hover default (si NO es auto/inview) */
.fx-blur:not(.fx-auto):not(.fx-inview):hover,
.fx-blur:not(.fx-auto):not(.fx-inview):focus-visible{
filter: blur(0);
}
/* =========================================
FX · Inline Wrapper
- Hace que el contenedor mida lo que mide su contenido
- Ideal para imágenes con shine / scale / tilt
========================================= */
.fx-inline{
display: inline-block;
width: fit-content;
}
.fx-shine{
overflow: hidden;
}
/* Inline Wrapper */
/* Reduce motion */
@media (prefers-reduced-motion: reduce){
.fx-blur{
transition: none !important;
filter: none !important;
}
}
/* =========================================
FX · Shine (System Utility)
- .fx-shine
- .fx-shine--strong
- .fx-shine--auto (CSS-only infinite)
========================================= */
.fx-shine{
position: relative;
overflow: hidden;
isolation: isolate;
transform: translateZ(0);
}
/* Variables base */
.fx-shine{
--shine-opacity: .95;
--shine-core: .55;
--shine-glow: .18;
--shine-blur: .45px;
--shine-mode: screen; /* screen | overlay | normal */
}
/* Variante más intensa */
.fx-shine--strong{
--shine-opacity: 1;
--shine-core: .78;
--shine-glow: .26;
--shine-blur: .35px;
}
/* Usamos ::before para evitar conflictos */
.fx-shine::before{
content:"";
position:absolute;
inset:-70%;
pointer-events:none;
z-index: 4;
background: linear-gradient(
120deg,
rgba(var(--fx-color-rgb), 0) 40%,
rgba(var(--fx-color-rgb), var(--shine-glow)) 46%,
rgba(var(--fx-color-rgb), var(--shine-core)) 49.3%,
rgba(var(--fx-color-rgb), var(--shine-core)) 50.7%,
rgba(var(--fx-color-rgb), var(--shine-glow)) 54%,
rgba(var(--fx-color-rgb), 0) 60%
);
transform: translate3d(-75%, -65%, 0);
opacity: 0;
filter: blur(var(--shine-blur));
mix-blend-mode: var(--shine-mode);
}
/* Hover / Focus (por defecto) — si NO es auto/inview */
.fx-shine:not(.fx-auto):not(.fx-inview):hover::before,
.fx-shine:not(.fx-auto):not(.fx-inview):focus-visible::before{
opacity: var(--shine-opacity);
animation: fxShineSweep 1200ms cubic-bezier(.16,.84,.26,1) 1;
}
/* Activación vía JS (fx-auto / fx-inview) */
.fx-shine.is-active::before{
opacity: var(--shine-opacity);
animation: fxShineSweep 1200ms cubic-bezier(.16,.84,.26,1) 1;
}
/* Auto (para hero u otros casos especiales) */
.fx-shine--auto::before{
opacity: var(--shine-opacity);
animation: fxShineAuto 10.5s cubic-bezier(.16,.84,.26,1) infinite;
}
/* Si alguien mezcla --auto + is-active, mandamos a --auto */
.fx-shine--auto.is-active::before{
animation: fxShineAuto 10.5s cubic-bezier(.16,.84,.26,1) infinite;
}
@keyframes fxShineSweep{
0% { transform: translate3d(-78%, -68%, 0); opacity: 0; }
12% { opacity: var(--shine-opacity); }
100% { transform: translate3d(78%, 68%, 0); opacity: 0; }
}
@keyframes fxShineAuto{
0%, 78% { transform: translate3d(-78%, -68%, 0); opacity: 0; }
80% { opacity: var(--shine-opacity); }
100% { transform: translate3d(78%, 68%, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
.fx-shine::before{
animation:none !important;
opacity:0 !important;
}
}
/* =========================================
FX · Shift (Movement Utility)
- Hover por defecto
- Auto con .fx-auto (+ opcional .fx-delay-*)
- Anula hover cuando hay .fx-auto
- Micro rebote elegante
========================================= */
.fx-shift{
--fx-shift-dist: 200px;
--fx-shift-dur: 520ms;
--fx-shift-ease: cubic-bezier(.18,.89,.32,1.15);
will-change: transform;
transform: translate3d(0,0,0);
transition: transform var(--fx-shift-dur) var(--fx-shift-ease) var(--fx-delay, 0ms);
}
/* Activación:
- hover/focus por defecto (si NO es auto)
- auto: JS añade .is-active
*/
.fx-shift:not(.fx-auto):not(.fx-inview):hover,
.fx-shift:not(.fx-auto):not(.fx-inview):focus-visible{
transform: translate3d(var(--fx-shift-x,0), var(--fx-shift-y,0), 0);
}
.fx-shift.is-active{
transform: translate3d(var(--fx-shift-x,0), var(--fx-shift-y,0), 0);
}
/* Direcciones */
.fx-shift--l { --fx-shift-x: calc(-1 * var(--fx-shift-dist)); --fx-shift-y: 0; }
.fx-shift--r { --fx-shift-x: var(--fx-shift-dist); --fx-shift-y: 0; }
.fx-shift--u { --fx-shift-x: 0; --fx-shift-y: calc(-1 * var(--fx-shift-dist)); }
.fx-shift--d { --fx-shift-x: 0; --fx-shift-y: var(--fx-shift-dist); }
/* Distancias */
.fx-shift--50 { --fx-shift-dist: 50px; }
.fx-shift--100 { --fx-shift-dist: 100px; }
.fx-shift--150 { --fx-shift-dist: 150px; }
.fx-shift--200 { --fx-shift-dist: 200px; }
.fx-shift--250 { --fx-shift-dist: 250px; }
.fx-shift--300 { --fx-shift-dist: 300px; }
/* Velocidad */
.fx-shift--fast { --fx-shift-dur: 360ms; }
.fx-shift--normal { --fx-shift-dur: 520ms; }
.fx-shift--slow { --fx-shift-dur: 700ms; }
/* Curvas */
.fx-shift--ease-stop{
--fx-shift-ease: cubic-bezier(.22,1,.36,1);
}
.fx-shift--ease-bounce{
--fx-shift-ease: cubic-bezier(.18,.89,.32,1.15);
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce){
.fx-shift{
transition: none !important;
}
.fx-shift.is-active,
.fx-shift:not(.fx-auto):not(.fx-inview):hover{
transform: none !important;
}
}
/* =========================================
FX · Fade (Reveal Utility)
- Aparición con desvanecimiento
- Distancia corta
- Lento “despacio, no lento”
- Hover por defecto
- Auto con .fx-auto / .fx-inview (+ fx-delay-*)
- Reutilizable en texto, imágenes, secciones
========================================= */
.fx-fade{
/* distancia corta por defecto */
--fx-fade-dist: 22px;
/* timing: despacio/limpio */
--fx-fade-dur: 640ms;
--fx-fade-ease: cubic-bezier(.16,.84,.26,1);
/* estado inicial (antes de activar) */
opacity: 0;
transform: translate3d(var(--fx-fade-x, 0), var(--fx-fade-y, 0), 0);
will-change: transform, opacity;
transition:
opacity var(--fx-fade-dur) var(--fx-fade-ease) var(--fx-delay, 0ms),
transform var(--fx-fade-dur) var(--fx-fade-ease) var(--fx-delay, 0ms);
}
/* Activación:
- Hover/focus por defecto (si NO auto/inview)
- Auto/inview: JS añade .is-active
*/
.fx-fade:not(.fx-auto):not(.fx-inview):hover,
.fx-fade:not(.fx-auto):not(.fx-inview):focus-visible,
.fx-fade.is-active{
opacity: 1;
transform: translate3d(0,0,0);
}
/* ----------------------
Direcciones
(distancia corta)
---------------------- */
.fx-fade--l { --fx-fade-x: calc(-1 * var(--fx-fade-dist)); --fx-fade-y: 0; }
.fx-fade--r { --fx-fade-x: var(--fx-fade-dist); --fx-fade-y: 0; }
.fx-fade--u { --fx-fade-x: 0; --fx-fade-y: calc(-1 * var(--fx-fade-dist)); }
.fx-fade--d { --fx-fade-x: 0; --fx-fade-y: var(--fx-fade-dist); }
/* ----------------------
Distancias cortas
---------------------- */
.fx-fade--8 { --fx-fade-dist: 8px; }
.fx-fade--12 { --fx-fade-dist: 12px; }
.fx-fade--18 { --fx-fade-dist: 18px; }
.fx-fade--22 { --fx-fade-dist: 22px; } /* default */
.fx-fade--28 { --fx-fade-dist: 28px; }
.fx-fade--36 { --fx-fade-dist: 36px; }
/* ----------------------
Velocidad
---------------------- */
.fx-fade--fast { --fx-fade-dur: 420ms; } /* rápido (pero no veloz) */
.fx-fade--normal { --fx-fade-dur: 640ms; } /* default */
.fx-fade--slow { --fx-fade-dur: 820ms; } /* lento elegante */
/* ----------------------
Reduce motion
---------------------- */
@media (prefers-reduced-motion: reduce){
.fx-fade{
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* =========================================
FX · Scale (Micro Zoom elegante)
- Hover por defecto (in/out)
- Auto/Inview con .is-active (se queda IN)
- Bajo coste: transform
========================================= */
.fx-scale{
--fx-scale-in: 1.045; /* zoom al activar */
--fx-scale-dur: 520ms;
--fx-scale-ease-in: cubic-bezier(.16,.84,.26,1);
--fx-scale-ease-out: cubic-bezier(.22,1,.36,1);
will-change: transform;
transform: translateZ(0) scale(1);
transition:
transform var(--fx-scale-dur) var(--fx-scale-ease-out) var(--fx-delay, 0ms);
}
/* Intensidades */
.fx-scale--subtle { --fx-scale-in: 1.025; }
.fx-scale--normal { --fx-scale-in: 1.045; }
.fx-scale--strong { --fx-scale-in: 1.070; }
/* Velocidad */
.fx-scale--fast { --fx-scale-dur: 360ms; }
.fx-scale--slow { --fx-scale-dur: 700ms; }
/* Activación:
- Hover/focus por defecto (si NO auto/inview) -> IN mientras hover
- Auto/Inview: .is-active -> IN (persistente)
*/
.fx-scale:not(.fx-auto):not(.fx-inview):hover,
.fx-scale:not(.fx-auto):not(.fx-inview):focus-visible{
transform: translateZ(0) scale(var(--fx-scale-in));
transition-timing-function: var(--fx-scale-ease-in);
}
.fx-scale.is-active{
transform: translateZ(0) scale(var(--fx-scale-in));
transition-timing-function: var(--fx-scale-ease-in);
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce){
.fx-scale{
transition: none !important;
transform: none !important;
}
}
/* =========================================
FX · Tilt (Micro perspectiva)
- Hover por defecto (micro tilt)
- Auto/Inview con .is-active
- Bajo coste: transform (perspective + rotate)
========================================= */
.fx-tilt{
--fx-tilt-persp: 900px;
--fx-tilt-x: 3deg; /* vertical (rotateX) */
--fx-tilt-y: 6deg; /* lateral (rotateY) */
--fx-tilt-dur: 520ms;
--fx-tilt-ease: cubic-bezier(.16,.84,.26,1);
transform-style: preserve-3d;
will-change: transform;
transform:
perspective(var(--fx-tilt-persp))
rotateX(0deg)
rotateY(0deg)
translateZ(0);
transition:
transform var(--fx-tilt-dur) var(--fx-tilt-ease) var(--fx-delay, 0ms);
}
/* Intensidades */
.fx-tilt--subtle { --fx-tilt-x: 2deg; --fx-tilt-y: 4deg; }
.fx-tilt--normal { --fx-tilt-x: 3deg; --fx-tilt-y: 6deg; }
.fx-tilt--strong { --fx-tilt-x: 4deg; --fx-tilt-y: 9deg; }
/* Direcciones (tilt fijo, útil para composición) */
.fx-tilt--l{ --fx-tilt-sign: -1; }
.fx-tilt--r{ --fx-tilt-sign: 1; }
.fx-tilt--u{ --fx-tilt-vsign: -1; }
.fx-tilt--d{ --fx-tilt-vsign: 1; }
/* defaults signos */
.fx-tilt{ --fx-tilt-sign: 1; --fx-tilt-vsign: 1; }
/* Activación */
.fx-tilt:not(.fx-auto):not(.fx-inview):hover,
.fx-tilt:not(.fx-auto):not(.fx-inview):focus-visible,
.fx-tilt.is-active{
transform:
perspective(var(--fx-tilt-persp))
rotateX(calc(var(--fx-tilt-x) * var(--fx-tilt-vsign) * -1))
rotateY(calc(var(--fx-tilt-y) * var(--fx-tilt-sign)))
translateZ(0);
}
/* =========================================
FX · Tilt Mouse Tracking
- Activar con: .fx-tilt fx-tilt--m
- No depende de .is-active
========================================= */
.fx-tilt--m{
--fx-tilt-persp: 900px;
--fx-tilt-max-x: 6deg; /* vertical */
--fx-tilt-max-y: 10deg; /* lateral */
--fx-tilt-scale: 1.02; /* micro zoom al mover */
transform:
perspective(var(--fx-tilt-persp))
rotateX(0deg)
rotateY(0deg)
scale(1)
translateZ(0);
}
/* Mientras esté activo por JS */
.fx-tilt--m.is-tracking{
transition: transform 80ms linear;
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce){
.fx-tilt{
transition: none !important;
transform: none !important;
}
}
/* =========================================
FX · Parallax Lite (CSS vars)
- Muy ligero
- Requiere JS (futuro): escribe --fx-px / --fx-py
- Sin JS: no pasa nada (queda neutro)
- Uso: para pequeños “float”/depth, NO fondos gigantes
========================================= */
.fx-parallax-lite{
--fx-parallax-strength: 14px; /* recorrido máximo */
--fx-px: 0; /* -1..1 (JS) */
--fx-py: 0; /* -1..1 (JS) */
will-change: transform;
transform: translate3d(
calc(var(--fx-px) * var(--fx-parallax-strength)),
calc(var(--fx-py) * var(--fx-parallax-strength)),
0
);
transition:
transform 420ms cubic-bezier(.16,.84,.26,1);
}
/* Intensidades */
.fx-parallax-lite--subtle{ --fx-parallax-strength: 10px; }
.fx-parallax-lite--strong{ --fx-parallax-strength: 22px; }
/* Reduce motion */
@media (prefers-reduced-motion: reduce){
.fx-parallax-lite{
transition: none !important;
transform: none !important;
}
}