/* ============================================================================= CC MOTION — estados de reveal + animación ambiental ----------------------------------------------------------------------------- Pareja de core/motion.js. Este archivo define CÓMO se ve el movimiento; el JS solo decide CUÁNDO. ANTI-FOUC — el estado oculto vive bajo .cc-js, clase que un snippet inline en añade a . Si el JavaScript falla, está bloqueado o el usuario lo desactiva, ninguna de estas reglas aplica y el contenido se ve completo. Nunca una página en blanco por un reveal que no disparó. Todos los valores estéticos (duración, easing, distancia) salen de tokens. Los fallbacks existen para que el plugin funcione sin el tema hijo instalado. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. ESTADO BASE DEL REVEAL -------------------------------------------------------------------------- */ .cc-js [data-cc-reveal] { opacity: 0; transform: translate3d(0, var(--cc-reveal-distance, var(--cc-reveal-y, 32px)), 0); transition-property: opacity, transform, filter, clip-path; transition-duration: var(--cc-reveal-duration, var(--cc-dur, 600ms)); transition-timing-function: var(--cc-ease, ease-out); transition-delay: var(--cc-reveal-delay, 0ms); will-change: opacity, transform; } .cc-js [data-cc-reveal].is-revealed { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); will-change: auto; } /* ----------------------------------------------------------------------------- 2. VARIANTES El nombre indica de DÓNDE viene el elemento. -------------------------------------------------------------------------- */ /* up (default) — sube desde abajo. Declarado explícito por legibilidad. */ .cc-js [data-cc-reveal="up"] { transform: translate3d(0, var(--cc-reveal-distance, var(--cc-reveal-y, 32px)), 0); } .cc-js [data-cc-reveal="down"] { transform: translate3d(0, calc(var(--cc-reveal-distance, var(--cc-reveal-y, 32px)) * -1), 0); } .cc-js [data-cc-reveal="left"] { transform: translate3d(calc(var(--cc-reveal-distance, var(--cc-reveal-y, 32px)) * -1), 0, 0); } .cc-js [data-cc-reveal="right"] { transform: translate3d(var(--cc-reveal-distance, var(--cc-reveal-y, 32px)), 0, 0); } .cc-js [data-cc-reveal="fade"] { transform: none; } .cc-js [data-cc-reveal="scale"] { transform: scale(0.94); } .cc-js [data-cc-reveal="blur"] { transform: translate3d(0, calc(var(--cc-reveal-distance, var(--cc-reveal-y, 32px)) * 0.5), 0); filter: blur(12px); } /* Cortina vertical: se descubre de arriba hacia abajo */ .cc-js [data-cc-reveal="clip"] { transform: none; opacity: 1; clip-path: inset(0 0 100% 0); } /* ----------------------------------------------------------------------------- 3. ANIMACIÓN AMBIENTAL Movimiento continuo para orbes, gradientes y elementos decorativos que en el flujo anterior vivían en keyframes inyectados por JS. Aquí son CSS real. Cada clase expone su propia duración como custom property, por si una pieza firma necesita afinarla inline:
-------------------------------------------------------------------------- */ @keyframes cc-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, var(--cc-float-distance, -18px), 0); } } @keyframes cc-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 33% { transform: translate3d(var(--cc-drift-x, 24px), var(--cc-drift-y, -20px), 0) scale(1.04); } 66% { transform: translate3d(calc(var(--cc-drift-x, 24px) * -0.7), var(--cc-drift-y, -20px), 0) scale(0.97); } 100% { transform: translate3d(0, 0, 0) scale(1); } } @keyframes cc-pulse { 0%, 100% { opacity: var(--cc-pulse-min, 0.45); transform: scale(1); } 50% { opacity: var(--cc-pulse-max, 1); transform: scale(var(--cc-pulse-scale, 1.06)); } } @keyframes cc-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes cc-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .cc-float { animation: cc-float var(--cc-float-dur, 7s) var(--cc-ease, ease-in-out) infinite; animation-play-state: var(--cc-anim-state, running); } .cc-drift { animation: cc-drift var(--cc-drift-dur, 18s) var(--cc-ease, ease-in-out) infinite; animation-play-state: var(--cc-anim-state, running); } .cc-pulse { animation: cc-pulse var(--cc-pulse-dur, 4s) var(--cc-ease, ease-in-out) infinite; animation-play-state: var(--cc-anim-state, running); } .cc-spin { animation: cc-spin var(--cc-spin-dur, 24s) linear infinite; animation-play-state: var(--cc-anim-state, running); } .cc-marquee { animation: cc-marquee var(--cc-marquee-dur, 30s) linear infinite; animation-play-state: var(--cc-anim-state, running); } /* Desfase para que varios elementos ambientales no laten al unísono */ .cc-anim-delay-1 { animation-delay: calc(var(--cc-dur-slow, 1s) * -1); } .cc-anim-delay-2 { animation-delay: calc(var(--cc-dur-slow, 1s) * -2.5); } .cc-anim-delay-3 { animation-delay: calc(var(--cc-dur-slow, 1s) * -4); } /* ----------------------------------------------------------------------------- 4. PAUSA DE ANIMACIONES CONTINUAS Gestionada por core/motion.js: · .cc-paused lo pone y quita el observer según el elemento esté o no en el viewport. Se activa con data-cc-pause en el HTML. · .cc-tab-hidden lo pone en el listener de visibilitychange. No se usa `animation-play-state: paused` directo porque perdería por especificidad contra cualquier regla de una sección. En su lugar se hereda una custom property: cualquier animación que quiera poder pausarse declara animation-play-state: var(--cc-anim-state, running); y queda gobernada por estas dos clases sin un solo !important. -------------------------------------------------------------------------- */ .cc-paused, .cc-tab-hidden { --cc-anim-state: paused; } /* ----------------------------------------------------------------------------- 5. PREFERS-REDUCED-MOTION Va al final a propósito: misma especificidad que las variantes de arriba, así que gana por orden. Ni un !important en todo el archivo. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .cc-js [data-cc-reveal] { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; will-change: auto; } .cc-float, .cc-drift, .cc-pulse, .cc-spin, .cc-marquee { animation: none; } }