/* ========================================================================== SAHRI SKIN — Animations Scroll reveals (IntersectionObserver toggles .reveal--active), hero intro, keyframe loops. All motion is CSS-driven; JS only toggles classes. ========================================================================== */ /* -------------------------------------------------------------------------- Scroll reveal base. JS adds .js-observe on supported browsers; without JS (or without IntersectionObserver) elements stay fully visible. -------------------------------------------------------------------------- */ .js-observe .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: var(--d, 0ms); will-change: opacity, transform; } /* Scale-in variant for product / category cards */ .js-observe .reveal--scale { transform: translateY(28px) scale(0.96); } .js-observe .reveal.reveal--active { opacity: 1; transform: translateY(0) scale(1); } /* When GSAP is active (gsap-anim.js adds .gsap-on) it is the sole animator. Drop the CSS transition so the two engines don't double-animate; the initial hidden state above still prevents any flash before GSAP runs. */ .gsap-on .reveal { transition: none !important; } .gsap-on .sahri-float, .gsap-on .sahri-hero__product { animation: none !important; } /* Respect users who prefer no motion */ @media (prefers-reduced-motion: reduce) { .js-observe .reveal, .js-observe .reveal--scale { opacity: 1 !important; transform: none !important; transition: none !important; } .sahri-float { animation: none !important; } html { scroll-behavior: auto; } } /* -------------------------------------------------------------------------- Hero intro — staggered fade-up per element, starting 0.4s after load. JS adds .is-loaded to on DOMContentLoaded. -------------------------------------------------------------------------- */ [data-hero] { opacity: 0; transform: translateY(20px); } /* LCP hero image — visible on first paint; GSAP animates transform only */ [data-hero="5"] { opacity: 1; transform: none; } .is-loaded [data-hero="5"] { animation: none !important; opacity: 1; transform: none; } .is-loaded [data-hero] { animation: sahri-hero-in 0.9s var(--ease) forwards; } .is-loaded [data-hero="1"] { animation-delay: 0.40s; } .is-loaded [data-hero="2"] { animation-delay: 0.52s; } .is-loaded [data-hero="3"] { animation-delay: 0.64s; } .is-loaded [data-hero="4"] { animation-delay: 0.76s; } .is-loaded [data-hero="5"] { animation-delay: 0.30s; } @keyframes sahri-hero-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Headline words can stagger individually once the title block reveals */ .is-loaded .sahri-hero__title .sahri-word { opacity: 0; transform: translateY(0); animation: sahri-word-in 0.7s var(--ease) forwards; } .is-loaded .sahri-hero__title .sahri-word:nth-child(1) { animation-delay: 0.60s; } .is-loaded .sahri-hero__title .sahri-word:nth-child(2) { animation-delay: 0.68s; } .is-loaded .sahri-hero__title .sahri-word:nth-child(4) { animation-delay: 0.76s; } .is-loaded .sahri-hero__title .sahri-word:nth-child(5) { animation-delay: 0.84s; } /* Word reveal: fade up + slight upward translate (0 -> -20px overshoot) */ @keyframes sahri-word-in { 0% { opacity: 0; transform: translateY(20px); } 60% { opacity: 1; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { [data-hero], .sahri-hero__title .sahri-word { opacity: 1 !important; transform: none !important; animation: none !important; } } /* Mobile prioritizes immediate LCP and stable content over entrance effects. */ @media (max-width: 768px) { [data-hero], .is-loaded [data-hero], .is-loaded .sahri-hero__title .sahri-word { opacity: 1 !important; transform: none !important; animation: none !important; } } /* -------------------------------------------------------------------------- Hero product float — 6s loop, Y ±12px -------------------------------------------------------------------------- */ .sahri-float { animation: sahri-float 6s var(--ease) infinite; } @keyframes sahri-float { 0%, 100% { transform: translateY(-12px); } 50% { transform: translateY(12px); } } /* -------------------------------------------------------------------------- Announcement marquee — only animated on mobile (see responsive.css) -------------------------------------------------------------------------- */ @keyframes sahri-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }