/* ==========================================================================
   Stormhorn — keyframe animations & premium motion layer
   Loads after main.css, so motion overrides live here.
   ========================================================================== */

/* Marquee ticker */
@keyframes ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Bouncing scroll-hint chevron */
@keyframes hint-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(9px); }
}

/* Hero tilted product card: slow vertical bob (keeps its -6deg tilt) */
@keyframes hero-float {
	0%, 100% { transform: rotate(-6deg) translateY(0); }
	50%      { transform: rotate(-6deg) translateY(-14px); }
}

/* Floating glass chips around the hero card */
@keyframes chip-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}

/* Offer roundel gentle bob + tiny sway */
@keyframes roundel-bob {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-8px) rotate(5deg); }
}

/* Slow Ken Burns drift inside the floating hero card */
@keyframes hero-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.1); }
}
.hero-card img { animation: hero-kenburns 24s ease-in-out infinite alternate; will-change: transform; }

/* Fade up utility */
@keyframes fade-up {
	from { opacity: 0; transform: translateY(32px); }
	to   { opacity: 1; transform: translateY(0); }
}
.anim-fade-up {
	animation: fade-up 0.7s var(--ease-out-expo) forwards;
	opacity: 0;
}

/* Skeleton loading shimmer — used for media placeholders where no
   photography exists yet (never plain grey boxes) */
@keyframes shimmer {
	from { background-position: -200% 0; }
	to   { background-position: 200% 0; }
}
.skeleton,
.placeholder-media {
	background: linear-gradient(90deg, #1E2530 25%, #2B3240 50%, #1E2530 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	position: relative;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Premium motion layer
   -------------------------------------------------------------------------- */

/* Brand mark micro-interaction */
.site-nav__logo { width: 34px; height: auto; transition: transform 0.5s var(--ease-out-expo); }
.site-nav__brand:hover .site-nav__logo { transform: rotate(-8deg) scale(1.08); }
.nav-overlay__logo { width: 52px; height: auto; margin-bottom: 10px; }
.footer-brand__mark { width: 30px; height: auto; }

/* Hero headline: split-text character rise (spans injected by main.js).
   If the split never runs, the headline falls back to the block reveal. */
html.js .hero__headline .char {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.55em) rotate(4deg);
	transform-origin: 0 100%;
	transition: opacity 0.45s ease, transform 0.75s var(--ease-out-expo);
	transition-delay: calc(120ms + 28ms * var(--ci, 0));
	will-change: transform;
}
html.js #hero-inner.is-in .hero__headline .char {
	opacity: 1;
	transform: none;
}
/* Once split into chars, the block-level hide/slide is redundant */
html.js .hero__headline.is-split { opacity: 1 !important; transform: none !important; }

/* Reveal upgrade: blur settles as elements arrive */
html.js .reveal { filter: blur(10px); }
html.js .reveal.is-visible {
	filter: blur(0);
	transition:
		opacity 0.8s var(--ease-out-expo),
		transform 0.8s var(--ease-out-expo),
		filter 0.7s ease;
}

/* Imagery inside revealing tiles settles from a gentle overscale */
html.js .cat-tile.reveal:not(.is-visible) .cat-tile__img img { transform: scale(1.14); }

/* Product-card media: damped 3D tilt (transform driven by main.js) */
.product-card__media {
	transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s ease;
	transform-style: preserve-3d;
	will-change: transform;
}

/* Nav hides on scroll down, returns on scroll up */
.site-nav { will-change: transform; }
.site-nav.is-hidden { transform: translateY(-110%) !important; }

/* Cart badge pop after quick-add */
@keyframes badge-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.5); }
	100% { transform: scale(1); }
}
.cart-count.pop { animation: badge-pop 0.45s var(--ease-out-expo); }

/* Buttons: magnetic offset is applied inline by main.js */
.hero__ctas .btn,
.site-nav .btn--pill { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
	.anim-fade-up { animation: none; opacity: 1; }
	.skeleton,
	.placeholder-media { animation: none; }
	.hero-card img { animation: none; }
	.cart-count.pop { animation: none; }
	html.js .hero__headline .char { opacity: 1; transform: none; transition: none; }
	html.js .reveal { filter: none; }
	html.js .cat-tile.reveal:not(.is-visible) .cat-tile__img img { transform: none; }
	.site-nav.is-hidden { transform: none !important; }
}