/* ===================================================================== FLYLAND — REFERENCE-EXACT ENTRANCE ANIMATIONS --------------------------------------------------------------------- Replicates the Arafiq reference (Elementor + Animate.css) scroll-entrance system 1:1. Every value below was extracted from the reference's OWN CSS, not guessed: • Start state : .elementor-invisible { visibility:hidden } • On viewport-entry, Elementor's IntersectionObserver removes that and adds `animated ` (one-shot). -> animations.js • .animated { animation-duration: 1.25s } • .animated-slow { animation-duration: 2s } • animation-fill-mode: both (animate.css base) • animation-timing-function: ease (reference declares none = default) • animation-delay : 0 (no _animation_delay in the kit) • Effects found : fadeInUp ×47, fadeInLeft ×5, fadeInRight ×4, fadeIn ×1 Keyframes below are copied verbatim from: elementor/assets/lib/animations/animations.min.css Loaded in AFTER style.css + refinement.css so it owns the reveal. The hidden start state is gated on `html.js` so content stays visible if JS never runs (no-JS fallback). ===================================================================== */ /* ---- exact Animate.css keyframes (verbatim from the reference) ---- */ @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } } @keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ---- start state (mirrors .elementor-invisible), JS-gated ---- */ html.js .reveal:not(.animated) { visibility: hidden; } /* ---- revealed: exact reference timing ---- */ .reveal.animated { visibility: visible; animation-duration: 1.25s; /* .animated */ animation-fill-mode: both; /* animate.css base */ animation-timing-function: ease; /* reference = default */ } .reveal.animated.is-slow { animation-duration: 2s; } /* .animated-slow */ /* ---- effect = animation-name (added alongside .animated by the JS) ---- */ .reveal.fadeInUp.animated { animation-name: fadeInUp; } .reveal.fadeInLeft.animated { animation-name: fadeInLeft; } .reveal.fadeInRight.animated { animation-name: fadeInRight; } .reveal.fadeIn.animated { animation-name: fadeIn; } /* ---- reduced motion — matches the reference's own rule, and guarantees content is shown (never trapped at visibility:hidden) ---- */ @media (prefers-reduced-motion: reduce) { html.js .reveal, .reveal.animated { visibility: visible !important; animation: none !important; } }