/** * Ziko.co.il - Animations * Smooth entrance animations and effects */ /* =================================================== FADE IN ANIMATIONS =================================================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* #102611 — from-side motion removed: these now fade in place (no translateX), so any legacy .animate-fade-left / .animate-fade-right usage no longer slides in from the side. */ @keyframes fadeInLeft { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInRight { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* =================================================== ANIMATION CLASSES (Triggered by JS) =================================================== */ /* #102611 — content must NEVER depend on JS to be visible. The old rule hid every .animate-on-scroll at opacity:0 unconditionally and relied on homepage.js's IntersectionObserver to reveal it — so on slow mobile connections (script loads last), in-app browsers, blocked/failed JS, print, or full-page rendering, the ENTIRE middle of the homepage was blank. Now the hidden state only applies when the inline head script has stamped (i.e. JS is definitely running); no JS → fully visible page, and homepage.js also carries a reveal-all fallback. */ html.js-anim .animate-on-scroll { opacity: 0; } .animate-on-scroll.animated { opacity: 1; /* .animated always means visible, even if no keyframe class is attached */ animation-duration: 0.6s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } .animate-fade-up.animated { animation-name: fadeInUp; } .animate-fade-left.animated { animation-name: fadeInLeft; } .animate-fade-right.animated { animation-name: fadeInRight; } .animate-fade.animated { animation-name: fadeIn; } .animate-scale.animated { animation-name: scaleIn; } /* Stagger delays for grid items */ .animate-delay-1 { animation-delay: 0.1s; } .animate-delay-2 { animation-delay: 0.2s; } .animate-delay-3 { animation-delay: 0.3s; } .animate-delay-4 { animation-delay: 0.4s; } .animate-delay-5 { animation-delay: 0.5s; } .animate-delay-6 { animation-delay: 0.6s; } /* =================================================== HERO SPECIFIC ANIMATIONS =================================================== */ /* #102611 — no from-side (slide-in) motion, per operator. Hero is static: it renders in place with no horizontal slide, which is also the fastest LCP (#547 — never hide the hero at opacity:0). */ .hero-content { animation: none; } .hero-visual, .hero-demo { animation: none; opacity: 1; } /* =================================================== COUNTER ANIMATION STYLES =================================================== */ .stat-counter { display: inline-block; font-variant-numeric: tabular-nums; } /* Pulse effect when counter finishes */ @keyframes counterPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .counter-done { animation: counterPulse 0.3s ease-out; } /* =================================================== CARD HOVER ENHANCEMENTS =================================================== */ .risk-card, .check-card, .included-card { transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease, border-color 0.3s ease; } /* =================================================== REDUCED MOTION =================================================== */ @media (prefers-reduced-motion: reduce) { /* must match/beat the html.js-anim gate's specificity so reduced-motion users always see content */ html.js-anim .animate-on-scroll, .animate-on-scroll, .hero-content, .hero-visual { animation: none; opacity: 1; transform: none; } html.js-anim .animate-on-scroll.animated, .animate-on-scroll.animated { animation: none; opacity: 1; } }