/* ========================================== BERR. ANIMATION SYSTEM Philosophy: Quiet. Purposeful. Earned. Easing: exponential ease-out throughout. ========================================== */ :root { /* --ease-expo is unique here; --ease-out-quart/quint live in design-system.css */ --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); } /* ========================================== PAGE ENTRANCE Soft fade on every navigation arrival. ========================================== */ @keyframes berrPageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .js-init #main-content { animation: berrPageIn 0.65s var(--ease-out-quint) both; } /* ========================================== KEYFRAMES ========================================== */ @keyframes berrFade { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: blur(0); } } /* ========================================== MICRO-INTERACTIONS & UTILITIES ========================================== */ .hover-lift { transition: transform 0.4s var(--ease-out-quint), box-shadow 0.4s var(--ease-out-quint); } .hover-lift:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 12px 24px rgba(28, 25, 23, 0.08); } .hover-scale { transition: transform 0.4s var(--ease-out-quint); } .hover-scale:hover { transform: scale(1.03); } /* ========================================== SCROLL-REVEAL SYSTEM JS (partials.js) uses IntersectionObserver to add .is-visible when element enters viewport. Observer unobserves after firing. ========================================== */ /* Base: hidden until observed — only when JS confirmed running (.js-init on ) */ .js-init [data-reveal] { opacity: 0; will-change: opacity, transform; transition: opacity 0.85s var(--ease-out-quint), transform 0.85s var(--ease-out-quint); } /* default variant: rise up */ .js-init [data-reveal], .js-init [data-reveal="rise"] { transform: translateY(32px) scale(0.98); } /* slide in from left */ .js-init [data-reveal="left"] { transform: translateX(-24px); } /* fade only — no translate */ .js-init [data-reveal="fade"] { transform: none; transition: opacity 0.85s var(--ease-out-quint); } /* scale up subtly */ .js-init [data-reveal="scale"] { transform: scale(0.95); } /* Revealed — all variants settle here */ [data-reveal].is-visible { opacity: 1; transform: none; } /* ========================================== STAGGER SYSTEM JS adds .is-visible to each child with sequential setTimeout delays. ========================================== */ .js-init [data-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity 0.75s var(--ease-out-quint), transform 0.75s var(--ease-out-quint); will-change: opacity, transform; } .js-init [data-stagger] > *.is-visible { opacity: 1; transform: none; } /* ========================================== BERR. LOADER Shared by shop overlay + global berrLoader. A scanning gold beam beneath the wordmark. ========================================== */ @keyframes berrBeam { 0% { transform: translateX(-100%); } 68% { transform: translateX(310%); } 68.01% { transform: translateX(-100%); } 100% { transform: translateX(-100%); } } .berr-loader { display: flex; flex-direction: column; align-items: center; gap: 9px; --loader-text: var(--berr-text); --loader-track: var(--berr-border-subtle); } /* Inverted: for dark full-screen overlays */ .berr-loader--inverted { --loader-text: oklch(95% 0.006 80); --loader-track: oklch(95% 0.006 80 / 0.15); } .berr-loader-word { font-family: var(--berr-font-display); font-size: 0.82rem; letter-spacing: 0.14em; color: var(--loader-text); opacity: 0.55; user-select: none; } .berr-loader-track { width: 52px; height: 1px; background: var(--loader-track); position: relative; overflow: hidden; } .berr-loader-beam { position: absolute; inset: 0; width: 36%; background: var(--berr-gold); animation: berrBeam 1.6s linear infinite; } .berr-loader-label { font-family: var(--berr-font-body); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--loader-text); opacity: 0.4; margin-top: 4px; } /* ========================================== REDUCED MOTION — WCAG 2.1 AA ========================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .js-init [data-reveal], .js-init [data-stagger] > * { opacity: 1; transform: none; transition: none; } .js-init #main-content { animation: none; } .berr-loader-beam { animation: none; transform: translateX(0); width: 100%; opacity: 0.5; } }