/* Purpose: Home/site reveal-on-scroll + page-load reveals, plus subtle hover micro-interactions. Reveal base (hidden) states apply ONLY under .motion — a class added to by a tiny head script when JS is on and prefers-reduced-motion is not set. This prevents FOUC and keeps all content visible if JS is off or motion is reduced. IntersectionObserver (animations.js) adds .is-revealed; CSS below runs the transition using design-system tokens. */ /* ============================================================ Reveal system ============================================================ */ .motion [data-reveal], .motion .reveal, .motion [data-reveal-group] > * { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); will-change: opacity, transform; } /* Direction variants (default = up) */ .motion [data-reveal="fade"] { transform: none; } .motion [data-reveal="left"] { transform: translateX(-28px); } .motion [data-reveal="right"] { transform: translateX(28px); } /* Staggered children of a group — index set per child by JS via --reveal-i */ .motion [data-reveal-group] > * { transition-delay: calc(var(--reveal-i, 0) * 90ms); } /* Revealed — group children carry their own .is-revealed now (revealed individually as they enter view, so lower rows don't animate before you scroll to them). */ .motion [data-reveal].is-revealed, .motion .reveal.is-revealed, .motion [data-reveal-group] > *.is-revealed { opacity: 1; transform: none; } /* Free the compositor once settled */ .motion .is-revealed { will-change: auto; } /* ============================================================ Hover micro-interactions (image zoom / button colours already live in components.css + pages/home.css — these are additive) ============================================================ */ /* Category + product cards: lift + soft shadow (About page cards share this) */ .cat-card, .pcard, .about-cat-card { transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .cat-card:hover, .pcard:hover, .about-cat-card:hover { transform: translateY(-4px); /* Soft, tucked-under shadow (negative spread) — no hard side/bottom edge */ box-shadow: 0 14px 28px -12px rgba(11, 30, 56, 0.22); } /* The carousel scroller uses overflow-x:auto, which makes overflow-y compute to auto too — that shears the card hover-lift + shadow into a hard line at the track's bottom edge. Pad the scrollport so the shadow has room, then cancel the padding with equal negative margin so surrounding layout/spacing is unchanged. */ .pcarousel__track { padding-block: 12px 32px; margin-block: -12px -32px; } /* Buttons: smooth colour/background transition on hover (no vertical lift) */ .btn { transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } /* Trust + financing + About value icons: gentle spring scale */ .trust__icon, .financing__icon, .about-values__icon { transition: transform var(--duration-base) var(--ease-spring); } .trust__item:hover .trust__icon, .financing__item:hover .financing__icon, .about-values__card:hover .about-values__icon { transform: scale(1.08); } /* ============================================================ Reduced motion — kill hover transforms/transitions. (Reveal hidden states are already inert: .motion is never added.) ============================================================ */ @media (prefers-reduced-motion: reduce) { .cat-card, .pcard, .about-cat-card, .about-values__card, .btn, .trust__icon, .financing__icon, .about-values__icon { transition: none; } .cat-card:hover, .pcard:hover, .about-cat-card:hover, .about-values__card:hover, .trust__item:hover .trust__icon, .financing__item:hover .financing__icon, .about-values__card:hover .about-values__icon { transform: none; box-shadow: none; background: none; } }