/* ============================================================================ Imperica Motion Kit — utilidades de movimiento 2026 ---------------------------------------------------------------------------- Principio rector: el CONTENIDO siempre es visible por defecto. Los efectos solo se activan cuando hay JS y `prefers-reduced-motion: no-preference` (clase `.im-on` añadida en por el kit). Sin JS o con movimiento reducido → todo se ve, nada se oculta. Esto protege CWV, SEO y accesibilidad. Aplicación en Elementor: Avanzado → "Clases de CSS" para las clases, y Avanzado → Atributos personalizados para las custom props, p.ej. `style|--im-shift: 100px` o `style|--im-delay: .15s`. ============================================================================ */ /* ---- 1. Reveal al hacer scroll (universal, vía IntersectionObserver) -------- */ .im-reveal { transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--im-delay, 0s); /* para stagger entre tarjetas */ will-change: opacity, transform; } .im-on .im-reveal { opacity: 0; transform: translateY(40px); } .im-on .im-reveal--left { transform: translateX(-40px); } .im-on .im-reveal--right { transform: translateX(40px); } .im-on .im-reveal--zoom { transform: scale(.92); } /* estado final (lo pone motion.js al entrar en viewport) */ .im-on .im-reveal.is-inview { opacity: 1; transform: none; } /* ---- 2. Parallax nativo (scroll-driven, continuo, 0 JS) -------------------- */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .im-parallax { animation: im-parallax-kf linear both; animation-timeline: view(); animation-range: cover; will-change: transform; } @keyframes im-parallax-kf { from { transform: translateY(calc(var(--im-shift, 60px) * -1)); } to { transform: translateY(var(--im-shift, 60px)); } } } } /* ---- 3. Barra de progreso de lectura (scroll-driven) ----------------------- */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { .im-progress { transform-origin: 0 50%; animation: im-progress-kf linear both; animation-timeline: scroll(root block); } @keyframes im-progress-kf { from { transform: scaleX(0); } to { transform: scaleX(1); } } } } /* ---- 4. Bento grid (composición modular tipo Apple) ------------------------ */ .im-bento { display: grid; gap: clamp(.75rem, 2vw, 1.25rem); grid-template-columns: repeat(12, 1fr); } .im-bento > * { grid-column: span 12; } /* móvil: apilado */ @media (min-width: 768px) { .im-bento--3 > * { grid-column: span 4; } /* 3 columnas */ .im-bento--4 > * { grid-column: span 3; } /* 4 columnas */ .im-span-wide { grid-column: span 6 !important; } /* celda doble ancho */ .im-span-tall { grid-row: span 2; } /* celda doble alto */ } /* ---- 5. Tipografía fluida / kinética --------------------------------------- */ .im-fluid-title { font-size: clamp(2rem, 6vw + 1rem, 6rem); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; } /* ---- 6. Micro-interacciones ------------------------------------------------ */ .im-lift { transition: transform .3s ease, box-shadow .3s ease; } .im-on .im-lift:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, .12); } /* ---- 7. Glassmorphism (úsalo sobre fondos con textura/gradiente) ----------- */ .im-glass { background: rgba(255, 255, 255, .08); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border: 1px solid rgba(255, 255, 255, .18); } /* ---- 8. Salvaguarda global de accesibilidad -------------------------------- */ @media (prefers-reduced-motion: reduce) { .im-reveal, .im-parallax, .im-progress, .im-lift { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; } }