/* ================================================================= File: 18-animations.css Purpose: Reveal animations, keyframes, and motion utilities. Pair with /assets/js/core/reveal.js which adds .is-revealed. All animations are skipped automatically when data-reduced-motion is present on . ================================================================= */ /* Default reveal: fade + small lift */ [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease); filter: blur(4px); will-change: opacity, transform, filter; } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); filter: blur(0); } /* Variants — apply alongside [data-reveal] */ [data-reveal="from-left"]:not(.is-revealed) { transform: translateX(-24px); } [data-reveal="from-right"]:not(.is-revealed) { transform: translateX(24px); } [data-reveal="zoom"]:not(.is-revealed) { transform: scale(0.95); } [data-reveal="fade"]:not(.is-revealed) { transform: none; filter: none; } /* Stagger delays — set on parent or item */ [data-reveal="delay-1"] { transition-delay: 80ms; } [data-reveal="delay-2"] { transition-delay: 160ms; } [data-reveal="delay-3"] { transition-delay: 240ms; } [data-reveal="delay-4"] { transition-delay: 320ms; } [data-reveal="delay-5"] { transition-delay: 400ms; } /* Keyframe library */ @keyframes liqui-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes liqui-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes liqui-glass-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes liqui-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } @keyframes liqui-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Utilities */ .liqui-anim-fade-in { animation: liqui-fade-in var(--dur-slow) var(--ease) both; } .liqui-anim-fade-up { animation: liqui-fade-up var(--dur-slow) var(--ease) both; } .liqui-anim-pulse { animation: liqui-pulse 2.4s ease-in-out infinite; } .liqui-anim-float { animation: liqui-float 4s ease-in-out infinite; } /* Skeleton shimmer for loading states */ .liqui-skeleton { background: linear-gradient(90deg, var(--c-surface-2) 0%, var(--c-line) 50%, var(--c-surface-2) 100%); background-size: 200% 100%; animation: liqui-glass-shimmer 1.4s linear infinite; border-radius: var(--radius-sm); } /* Reduced motion keeps short non-spatial feedback but removes movement and looping. The explicit "off" option remains fully static. */ html[data-reduced-motion] *, html[data-reduced-motion] *::before, html[data-reduced-motion] *::after { animation: none !important; transition-duration: 80ms !important; transition-property: color, background-color, border-color, box-shadow, opacity !important; } html[data-animations-off] *, html[data-animations-off] *::before, html[data-animations-off] *::after { animation: none !important; transition: none !important; }