/* Scroll-reveal & load animations. Initial hidden state is only applied when .reveal-init is on (added by reveal.js). If JS fails, page stays visible. */ @media (prefers-reduced-motion: reduce) { .reveal-init .reveal-section, .reveal-init .reveal-stagger, .reveal-init .reveal-scale, .reveal-init .reveal-headline .reveal-mask-inner, .reveal-init .reveal-hero-headline, .reveal-init .reveal-hero-cta { opacity: 1 !important; transform: none !important; transition: none !important; } } /* --- Whole-section fade+rise (used only when section has no staggered children) --- */ .reveal-init .reveal-section:not(.reveal-has-stagger) { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(.16, .8, .4, 1), transform 0.7s cubic-bezier(.16, .8, .4, 1); will-change: opacity, transform; } .reveal-init .reveal-section.is-in-view:not(.reveal-has-stagger) { opacity: 1; transform: none; } /* --- Staggered children (product cards, feature/promo cards, footer columns) --- */ .reveal-init .reveal-section.reveal-has-stagger .reveal-stagger { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(.16, .8, .4, 1) var(--reveal-delay, 0ms), transform 0.7s cubic-bezier(.16, .8, .4, 1) var(--reveal-delay, 0ms); will-change: opacity, transform; } .reveal-init .reveal-section.reveal-has-stagger.is-in-view .reveal-stagger { opacity: 1; transform: none; } /* Opt-out: the "Our Collection" section-list heading was fading in AFTER the user had scrolled to it, so the heading felt missing. Force any .reveal-stagger inside a .section-resource-list__header to stay visible from the start — the tabs + cards below still animate. */ .reveal-init .section-resource-list__header .reveal-stagger { opacity: 1 !important; transform: none !important; transition: none !important; } /* --- Product card hover lift (only added if theme has no existing hover) --- */ .reveal-init .product-card { transition: transform 0.25s cubic-bezier(.16, .8, .4, 1), box-shadow 0.25s cubic-bezier(.16, .8, .4, 1); } .reveal-init .product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); } /* --- Banner/split section media: slight scale settle --- */ .reveal-init .reveal-scale { transform: scale(1.04); transition: transform 0.9s cubic-bezier(.16, .8, .4, 1); will-change: transform; } .reveal-init .reveal-section.is-in-view .reveal-scale { transform: scale(1); } /* --- Stack-up headlines (line mask reveal) --- */ .reveal-init .reveal-headline .reveal-mask { display: block; overflow: hidden; /* Preserve any inherited alignment; do not add padding/margin so layout is unchanged. Inner span carries the actual glyphs and metrics. */ } .reveal-init .reveal-headline .reveal-mask-inner { display: inline-block; transform: translateY(110%); opacity: 0; transition: transform 0.65s cubic-bezier(.16, .8, .4, 1), opacity 0.65s cubic-bezier(.16, .8, .4, 1); transition-delay: inherit; will-change: transform, opacity; } .reveal-init .reveal-section.is-in-view .reveal-headline .reveal-mask-inner { transform: none; opacity: 1; } /* Whole-headline fallback if line-splitting was unsafe */ .reveal-init .reveal-headline-fallback { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(.16, .8, .4, 1), transform 0.7s cubic-bezier(.16, .8, .4, 1); } .reveal-init .reveal-section.is-in-view .reveal-headline-fallback { opacity: 1; transform: none; } /* Paragraph under a stack-up headline: fade-up shortly after last line lands */ .reveal-init .reveal-desc { opacity: 0; transform: translateY(16px); transition: opacity 0.6s cubic-bezier(.16, .8, .4, 1) var(--reveal-desc-delay, 0ms), transform 0.6s cubic-bezier(.16, .8, .4, 1) var(--reveal-desc-delay, 0ms); } .reveal-init .reveal-section.is-in-view .reveal-desc { opacity: 1; transform: none; } /* --- Hero (revealed on DOMContentLoaded, not on scroll) --- */ .reveal-init .reveal-hero-headline, .reveal-init .reveal-hero-cta { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(.16, .8, .4, 1), transform 0.7s cubic-bezier(.16, .8, .4, 1); } .reveal-init .reveal-hero-cta { transition-delay: 200ms; } .reveal-init .reveal-hero.is-in-view .reveal-hero-headline, .reveal-init .reveal-hero.is-in-view .reveal-hero-cta { opacity: 1; transform: none; }