/* * Polaris FW – Animate on Scroll (AOS) * Compiled from the original SCSS partial. * Text Domain: polaris-fw */ :root { --aos-distance: 25px; --aos-duration: 1s; --aos-delay: .25s; --aos-ease: ease; --aos-scale-grow-start: 0.9; --aos-scale-shrink-start: 1.1; --aos-flip-start: -90deg; --aos-3d-perspective: 800px; --aos-tada-duration: 1s; } /* JS-in-head adds .js on . Hide before paint to prevent FOUC. */ .js .animate-on-scroll { opacity: 0; visibility: hidden; } /* If parent only hosts child targets, JS adds this to unhide the container immediately. */ .js .animate-on-scroll.aos-prepped-children { opacity: 1; visibility: visible; } /* Hidden (prep) states — added automatically by JS to actual targets */ .aos-init { opacity: 0; visibility: hidden; will-change: opacity, transform; transition: none !important; } /* Directional/scale/flip prep offsets (JS chooses the right one) */ .aos-init--up { transform: translateY(var(--aos-distance)); } .aos-init--down { transform: translateY(calc(var(--aos-distance) * -1)); } .aos-init--left { transform: translateX(calc(var(--aos-distance) * -1)); } .aos-init--right { transform: translateX(var(--aos-distance)); } .aos-init--grow { transform: scale(var(--aos-scale-grow-start)); } .aos-init--shrink { transform: scale(var(--aos-scale-shrink-start)); } .aos-init--flip { transform: rotateY(var(--aos-flip-start)); transform-style: preserve-3d; backface-visibility: hidden; } @media (prefers-reduced-motion: reduce) { .aos-init--up, .aos-init--down, .aos-init--left, .aos-init--right, .aos-init--grow, .aos-init--shrink, .aos-init--flip { transform: none; } } /* * AOS takes ownership of opacity inside animation targets (descendants only). * Do NOT target the AOS target itself, only lazyloaded descendants. */ .aos-managed .lazyload, .aos-managed .lazyloading, .aos-managed .lazyloaded { opacity: 1 !important; transition: opacity 0s !important; } /* === Final animation classes (added by JS at the moment of reveal) ========= */ /* 1) Fade In */ .animate-on-scroll.fade-in, .fade-in { opacity: 1; visibility: visible; transition-property: opacity; transition-duration: var(--aos-duration); transition-timing-function: var(--aos-ease); transition-delay: var(--aos-delay); } @media (prefers-reduced-motion: reduce) { .animate-on-scroll.fade-in, .fade-in { transition: none; } } /* 2) Fade In + Slide Up */ .animate-on-scroll.fade-in-up, .fade-in-up { opacity: 1; visibility: visible; transform: translateY(0); transition-property: opacity, transform; transition-duration: var(--aos-duration); transition-timing-function: var(--aos-ease); transition-delay: var(--aos-delay); } @media (prefers-reduced-motion: reduce) { .animate-on-scroll.fade-in-up, .fade-in-up { transition: none; transform: none; } } /* 3) Fade In + Slide Down */ .animate-on-scroll.fade-in-down, .fade-in-down { opacity: 1; visibility: visible; transform: translateY(0); transition-property: opacity, transform; transition-duration: var(--aos-duration); transition-timing-function: var(--aos-ease); transition-delay: var(--aos-delay); } @media (prefers-reduced-motion: reduce) { .animate-on-scroll.fade-in-down, .fade-in-down { transition: none; transform: none; } } /* 4) Fade In + Slide Left→Right */ .animate-on-scroll.fade-in-left, .fade-in-left { opacity: 1; visibility: visible; transform: translateX(0); transition-property: opacity, transform; transition-duration: var(--aos-duration); transition-timing-function: var(--aos-ease); transition-delay: var(--aos-delay); } @media (prefers-reduced-motion: reduce) { .animate-on-scroll.fade-in-left, .fade-in-left { transition: none; transform: none; } } /* 5) Fade In + Slide Right→Left */ .animate-on-scroll.fade-in-right, .fade-in-right { opacity: 1; visibility: visible; transform: translateX(0); transition-property: opacity, transform; transition-duration: var(--aos-duration); transition-timing-function: var(--aos-ease); transition-delay: var(--aos-delay); } @media (prefers-reduced-motion: reduce) { .animate-on-scroll.fade-in-right, .fade-in-right { transition: none; transform: none; } } /* 6) Fade In + Grow (to 1) */ .animate-on-scroll.fade-in-grow, .fade-in-grow { opacity: 1; visibility: visible; transform: scale(1); transition-property: opacity, transform; transition-duration: var(--aos-duration); transition-timing-function: var(--aos-ease); transition-delay: var(--aos-delay); } @media (prefers-reduced-motion: reduce) { .animate-on-scroll.fade-in-grow, .fade-in-grow { transition: none; transform: none; } } /* 7) Fade In + Shrink (to 1) */ .animate-on-scroll.fade-in-shrink, .fade-in-shrink { opacity: 1; visibility: visible; transform: scale(1); transition-property: opacity, transform; transition-duration: var(--aos-duration); transition-timing-function: var(--aos-ease); transition-delay: var(--aos-delay); } @media (prefers-reduced-motion: reduce) { .animate-on-scroll.fade-in-shrink, .fade-in-shrink { transition: none; transform: none; } } /* 8) Flip (3D rotate into place) */ .animate-on-scroll.flip, .flip { opacity: 1; visibility: visible; transform: rotateY(0deg); transform-style: preserve-3d; backface-visibility: hidden; perspective: var(--aos-3d-perspective); transition-property: opacity, transform; transition-duration: var(--aos-duration); transition-timing-function: var(--aos-ease); transition-delay: var(--aos-delay); } @media (prefers-reduced-motion: reduce) { .animate-on-scroll.flip, .flip { transition: none; transform: none; } } /* 9) Tada (keyframes) */ @keyframes aos-tada { 0% { transform: scale(1) rotate(0deg); } 10% { transform: scale(0.95) rotate(-3deg); } 20% { transform: scale(1.05) rotate(3deg); } 30% { transform: scale(0.97) rotate(-3deg); } 40% { transform: scale(1.04) rotate(3deg); } 50% { transform: scale(0.98) rotate(-2deg); } 60% { transform: scale(1.03) rotate(2deg); } 70%, 100% { transform: scale(1) rotate(0deg); } } .animate-on-scroll.tada, .tada { opacity: 1; visibility: visible; animation: aos-tada var(--aos-tada-duration) ease-in-out both; transition-property: opacity; transition-duration: var(--aos-duration); transition-timing-function: var(--aos-ease); transition-delay: var(--aos-delay); } @media (prefers-reduced-motion: reduce) { .animate-on-scroll.tada, .tada { animation: none; transition: none; } }