/* GOOSEBUMP animations.css — subtle motion layer for the static site.
* Respects prefers-reduced-motion. No libraries, no CDN, pure CSS.
* Load with:
*/
/* ── On-load body fade ─────────────────────────────────────────── */
html.anim-ready body {
animation: body-fade-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes body-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* ── Page-leaving fade (triggered by JS on link click) ───────────── */
html.anim-leaving body {
animation: body-fade-out 0.28s cubic-bezier(0.55, 0.06, 0.68, 0.19) both;
pointer-events: none;
}
@keyframes body-fade-out {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-6px); }
}
/* ── Scroll-reveal primitive ─────────────────────────────────────
* Any element with .reveal starts invisible and eases in when it
* enters the viewport (JS adds .reveal--in).
*/
.reveal {
opacity: 0;
transform: translateY(36px) scale(0.985);
transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.reveal--in { transform: translateY(0) scale(1); }
.reveal--in {
opacity: 1;
transform: translateY(0);
}
/* Staggered children via CSS variable (--i) — JS sets these per card. */
.reveal[style*="--i:0"] { transition-delay: 0ms; }
.reveal[style*="--i:1"] { transition-delay: 60ms; }
.reveal[style*="--i:2"] { transition-delay: 120ms; }
.reveal[style*="--i:3"] { transition-delay: 180ms; }
.reveal[style*="--i:4"] { transition-delay: 240ms; }
.reveal[style*="--i:5"] { transition-delay: 300ms; }
.reveal[style*="--i:6"] { transition-delay: 360ms; }
.reveal[style*="--i:7"] { transition-delay: 420ms; }
.reveal[style*="--i:8"] { transition-delay: 480ms; }
.reveal[style*="--i:9"] { transition-delay: 540ms; }
/* ── Product-card hover lift (all category grids) ──────────────── */
a.card,
.scary-card,
.exam-card,
[class*="product-card"] {
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.3s ease;
will-change: transform;
}
a.card:hover,
.scary-card:hover,
.exam-card:hover,
[class*="product-card"]:hover {
transform: translateY(-10px);
box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(200, 165, 94, 0.3);
}
a.card img,
.scary-card img,
[class*="product-card"] img {
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
a.card:hover img,
.scary-card:hover img,
[class*="product-card"]:hover img {
transform: scale(1.08);
}
/* ── Ken Burns on hero images ──────────────────────────────────── */
.hero-bg,
.scary-hero,
[class*="hero-image"] img,
.hero img,
section.hero img,
[class*="owl"] img,
.splash img,
main > section:first-child img {
animation: ken-burns 14s ease-in-out infinite alternate;
}
@keyframes ken-burns {
from { transform: scale(1); transform-origin: 45% 55%; }
to { transform: scale(1.14); transform-origin: 55% 45%; }
}
/* ── Headline shimmer (used on scary hero and any .shimmer) ── */
.scary-hero h1,
main h1.hero-title,
.shimmer {
background: linear-gradient(
90deg,
currentColor 0%,
currentColor 38%,
rgba(255, 245, 225, 1) 50%,
currentColor 62%,
currentColor 100%
);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: inherit;
animation: shimmer-sweep 5s ease-in-out infinite;
}
@keyframes shimmer-sweep {
0%, 15% { background-position: 110% 0; }
55%, 100% { background-position: -110% 0; }
}
/* ── Hero arrow / scroll cue bounce ──────────────────────────────
* Any element with .scroll-cue or a "Scroll" text node inside a
* small element gently bounces up/down so the eye moves down.
*/
.scroll-cue,
[class*="scroll-hint"],
main [class*="scroll"]:not([class*="scrolled"]) {
animation: scroll-bounce 2s ease-in-out infinite;
}
@keyframes scroll-bounce {
0%, 100% { transform: translateY(0); opacity: 0.9; }
50% { transform: translateY(6px); opacity: 0.55; }
}
/* ── After-dark marquee (category page) ─────────────────────────── */
.marquee-row {
overflow: hidden;
white-space: nowrap;
}
.marquee-row > * {
display: inline-block;
animation: marquee 28s linear infinite;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ── Nav logo pulse so the owl icon feels alive ────────────────── */
nav .mark, .nav .mark, .nav-logo .mark {
animation: owl-breathe 3.5s ease-in-out infinite;
transform-origin: center;
}
@keyframes owl-breathe {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.08); opacity: 0.85; }
}
/* ── Nav — background opacity increases on scroll ────────────────
* JS toggles .nav--scrolled when scrollY > 40.
*/
nav, .nav {
transition: background-color 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
}
.nav--scrolled nav,
.nav--scrolled .nav {
background: rgba(7, 7, 8, 0.92) !important;
backdrop-filter: blur(16px);
border-bottom-color: rgba(30, 30, 34, 0.8);
}
/* ── Buttons — subtle press feedback ────────────────────────────── */
.btn, .add-cta, .cta, button.primary, button[class*="cta"] {
transition: transform 0.12s ease, background 0.2s ease, color 0.2s ease;
will-change: transform;
}
.btn:active, .add-cta:active, .cta:active, button.primary:active {
transform: scale(0.97);
}
/* ── Swatch select — gentle bounce when chosen ──────────────────── */
.sw-pick.active,
[class*="swatch"].active {
animation: swatch-pulse 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes swatch-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.18); }
100% { transform: scale(1); }
}
/* ── Reduced-motion users get NO animations ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1 !important; transform: none !important; }
}