/*
 * Meridian — Scroll-Driven Entrance Animations
 *
 * Implements CSS-only scroll-triggered animations via:
 *   - @keyframes (opacity, transform)
 *   - animation-timeline: view()   — element enters/exits the viewport
 *   - animation-range: entry 0% entry 30%  — triggers on first 30% of entry
 *
 * Targets:
 *   - .animate-fade-up   — translates from below, fades in (headings, CTAs, trust items)
 *   - .animate-fade-in   — pure opacity fade (full-bleed bands, editorial images)
 *   - .product-card      — cards receive staggered fade-up via nth-child delay
 *
 * Accessibility:
 *   - @media (prefers-reduced-motion: reduce) disables ALL animations and
 *     transitions defined in this file so users who have opted out of motion
 *     see no movement whatsoever.
 *
 * Browser support note:
 *   animation-timeline: view() is supported in Chrome 115+ and Firefox 128+
 *   (behind a flag). Safari support is tracked as upcoming. The fallback is a
 *   plain visible element — content is always readable without animations.
 */

/* =========================================================================
 * Keyframes
 * ====================================================================== */

@keyframes meridianFadeUp {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes meridianFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* =========================================================================
 * Scroll-driven entrance — fade up
 *
 * Applied to: section headings, trust bar columns, product cards, CTA groups,
 * and any element that carries the .animate-fade-up utility class.
 * ====================================================================== */

.animate-fade-up,
.section-categories .wp-block-heading,
.section-featured-products .wp-block-heading,
.section-brand-story .wp-block-heading,
.section-newsletter .wp-block-heading,
.lookbook-spread__text-col .wp-block-heading,
.lookbook-spotlight .wp-block-heading,
.landing-products .wp-block-heading,
.landing-cta-close .wp-block-heading {
	animation: meridianFadeUp linear both;
	animation-timeline: view();
	animation-range: entry 0% entry 30%;
}

/* =========================================================================
 * Scroll-driven entrance — fade in (no translate)
 *
 * Applied to: full-bleed image covers, editorial strips, lookbook covers
 * where translating the element would create a jarring edge artifact.
 * ====================================================================== */

.animate-fade-in,
.editorial-strip,
.lookbook-spread__cover,
.lookbook-opener,
.landing-editorial-band {
	animation: meridianFadeIn linear both;
	animation-timeline: view();
	animation-range: entry 0% entry 25%;
}

/* =========================================================================
 * Product card stagger
 *
 * Each card in a product collection gets a mild animation-delay based on
 * its position so they cascade in rather than all appearing simultaneously.
 * The delay is very small so performance feels instant.
 * ====================================================================== */

.product-card {
	animation: meridianFadeUp linear both;
	animation-timeline: view();
	animation-range: entry 0% entry 35%;
}

.product-card:nth-child(1) { animation-delay: 0ms; }
.product-card:nth-child(2) { animation-delay: 60ms; }
.product-card:nth-child(3) { animation-delay: 120ms; }
.product-card:nth-child(4) { animation-delay: 180ms; }
.product-card:nth-child(5) { animation-delay: 60ms; }
.product-card:nth-child(6) { animation-delay: 120ms; }

/* =========================================================================
 * Category tiles — scale hover (CSS only, no JS)
 * Defined here alongside the animation system for coherence.
 * ====================================================================== */

.category-tile {
	overflow: hidden;
	border-radius: var(--wp--preset--spacing--8, 8px);
	transition: box-shadow 0.25s ease;
}

.category-tile .wp-block-cover__image-background,
.category-tile .wp-block-cover__video-background {
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.category-tile:hover .wp-block-cover__image-background,
.category-tile:hover .wp-block-cover__video-background {
	transform: scale(1.04);
}

.category-tile:hover {
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.category-tile__link {
	display: inline-block;
	color: inherit;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-decoration: none;
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
}

.category-tile:hover .category-tile__link {
	opacity: 1;
	transform: translateY(0);
}

/* =========================================================================
 * Landing page — specific layout helpers
 * ====================================================================== */

.landing-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--neutral-100);
}

.landing-trust__item {
	text-align: center;
}

.landing-pullquote {
	text-align: center;
	border: none !important;
	padding-left: 0 !important;
	color: var(--wp--preset--color--surface);
}

.landing-footer {
	background-color: var(--wp--preset--color--surface);
}

/* =========================================================================
 * Lookbook-specific layout helpers
 * ====================================================================== */

.lookbook-spread {
	position: relative;
}

.lookbook-spread__image-col {
	overflow: hidden;
}

.lookbook-spread__cover {
	width: 100%;
	height: 100%;
	min-height: 640px;
}

/* On mobile, stacks to full-width, minimum height reduced */
@media (max-width: 781px) {
	.lookbook-spread .wp-block-columns {
		flex-direction: column;
	}
	.lookbook-spread__image-col,
	.lookbook-spread__text-col {
		width: 100% !important;
		flex-basis: 100% !important;
	}
	.lookbook-spread__cover {
		min-height: 380px;
	}
}

/* =========================================================================
 * prefers-reduced-motion — kill everything in this file
 *
 * Any user who has requested reduced motion sees zero animation. Elements
 * are immediately visible; no delay, no transform, no opacity transition.
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.animate-fade-up,
	.animate-fade-in,
	.product-card,
	.editorial-strip,
	.lookbook-spread__cover,
	.lookbook-opener,
	.landing-editorial-band,
	.section-categories .wp-block-heading,
	.section-featured-products .wp-block-heading,
	.section-brand-story .wp-block-heading,
	.section-newsletter .wp-block-heading,
	.lookbook-spread__text-col .wp-block-heading,
	.lookbook-spotlight .wp-block-heading,
	.landing-products .wp-block-heading,
	.landing-cta-close .wp-block-heading {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.category-tile .wp-block-cover__image-background,
	.category-tile .wp-block-cover__video-background,
	.category-tile,
	.category-tile__link {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}

	.landing-header {
		transition: none !important;
	}
}