/* ============================================================ ANIMATIONS.CSS — Scroll Animations, Keyframes, Transitions Paradosso Production Website ============================================================ */ /* ---------- SCROLL-TRIGGERED: FADE IN ---------- Only hidden when JS is active (js-ready class on ). Without JS the elements are fully visible by default. ------------------------------------------------- */ .js-ready .fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .js-ready .fade-in.visible { opacity: 1; transform: translateY(0); } /* ---------- SCROLL-TRIGGERED: STAGGER CHILDREN ---------- */ .js-ready .stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .js-ready .stagger.visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.05s; } .js-ready .stagger.visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.15s; } .js-ready .stagger.visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.25s; } .js-ready .stagger.visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.35s; } .js-ready .stagger.visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.45s; } .js-ready .stagger.visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.55s; } /* ---------- KEYFRAME: PULSE GLOW (hero badge dot) ---------- */ @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 8px #818cf8; } 50% { box-shadow: 0 0 16px #818cf8, 0 0 24px rgba(129, 140, 248, 0.4); } } .hero-badge::before { animation: pulseGlow 2.4s ease-in-out infinite; } /* ---------- KEYFRAME: FLOAT (decorative elements) ---------- */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } /* ---------- REDUCED MOTION: respect system preference ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .fade-in, .stagger > * { opacity: 1; transform: none; } }