/**
 * Animation System: Linen & Oak
 *
 * CSS-first animation approach. Transitions are slow, linear,
 * and "heavy" — like a solid oak door closing.
 * IntersectionObserver triggers .visible class for scroll reveals.
 */

/* ============================================
   1. Scroll Reveal
   ============================================ */

.reveal-on-scroll {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.visible {
	opacity: 1;
	transform: translateY(0);
}

.reveal-on-scroll.reveal-delay-1 { transition-delay: 200ms; }
.reveal-on-scroll.reveal-delay-2 { transition-delay: 400ms; }
.reveal-on-scroll.reveal-delay-3 { transition-delay: 600ms; }

/* ============================================
   2. Hero Stagger Animations
   ============================================ */

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

.hero-fade-in {
	animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-delay-1 {
	animation-delay: 0.2s;
	opacity: 0;
}

.hero-delay-2 {
	animation-delay: 0.4s;
	opacity: 0;
}

.hero-delay-3 {
	animation-delay: 0.6s;
	opacity: 0;
}

/* Category hero image — fade in from right */
@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translateX(40px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.lo-category-hero .lo-category-hero__image {
	animation: fadeInRight 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
	opacity: 0;
}

/* ============================================
   3. Ken Burns Effect
   ============================================ */

@keyframes kenBurns {
	from { transform: scale(1); }
	to { transform: scale(1.1); }
}

.ken-burns-bg,
.is-style-ken-burns img {
	animation: kenBurns 20s ease-out forwards;
}

/* Page heroes — a continuous, perceptible drift. A one-shot 10%/20s zoom read
   as static (~0.5%/s), so this oscillates to ~12% and back with ease-in-out:
   slow enough to feel ambient, large enough to actually be seen. Driven by CSS
   so it survives Site-Editor DB overrides. Covers the flooring featured-image
   cover plus BOTH cabinet category-hero render paths — the decomposed
   parts/category-hero.html thumbnail and the live sc/category-hero composite
   image. Each wrapper clips the overflow and its img is object-fit:cover. */
@keyframes heroDrift {
	from { transform: scale(1); }
	to   { transform: scale(1.12); }
}

.alston-hero-medium .wp-block-cover__image-background,
.lo-category-hero .sc-category-thumbnail img,
.sc-category-hero .sc-category-hero__image img {
	animation: heroDrift 14s ease-in-out infinite alternate;
}

/* ============================================
   4. Expanding Underline Effect
   ============================================ */

.expanding-underline {
	position: relative;
	display: inline-block;
}

.expanding-underline::after {
	content: '';
	position: absolute;
	width: 0;
	height: 1px;
	bottom: -4px;
	left: 50%;
	background-color: currentColor;
	transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	transform: translateX(-50%);
}

.expanding-underline:hover::after {
	width: 100%;
}

/* ============================================
   5. Image Hover Effects
   ============================================ */

/* Grayscale to color on hover */
.hover-grayscale img {
	filter: grayscale(100%);
	transition: filter 0.7s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-grayscale:hover img {
	filter: grayscale(0%);
}

/* Image scale on hover (contained) */
.hover-scale-image {
	overflow: hidden;
}

.hover-scale-image img {
	transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-scale-image:hover img {
	transform: scale(1.05);
}

/* Cover block hover */
.hover-scale-image.wp-block-cover .wp-block-cover__background {
	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-scale-image.wp-block-cover:hover .wp-block-cover__background {
	opacity: 0.55;
}

/* ============================================
   6. Button Styles
   ============================================ */

/* Ghost button — outline variant border */
.is-style-ghost .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--lo-ghost-border-strong);
	color: var(--lo-primary);
}

.is-style-ghost .wp-block-button__link:hover {
	border-color: var(--lo-primary);
	background: transparent;
}

/* Tertiary button — editorial underline only */
.is-style-tertiary .wp-block-button__link {
	background: transparent;
	padding-left: 0;
	padding-right: 0;
	border-bottom: 1px solid var(--lo-secondary);
	border-radius: 0;
	color: var(--lo-primary);
}

.is-style-tertiary .wp-block-button__link:hover {
	background: transparent;
	opacity: 0.7;
}

/* ============================================
   7. View Transitions API
   ============================================ */

@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: page-exit 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

::view-transition-new(root) {
	animation: page-enter 0.4s cubic-bezier(0, 0, 0.2, 1) forwards;
}

@keyframes page-exit {
	from { opacity: 1; transform: translateY(0); }
	to { opacity: 0; transform: translateY(-20px); }
}

@keyframes page-enter {
	from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Persistent elements should not animate */
.site-header { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }
#wpadminbar { view-transition-name: wpadminbar; }

::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-old(site-footer),
::view-transition-new(site-footer),
::view-transition-old(wpadminbar),
::view-transition-new(wpadminbar) {
	animation: none;
}

/* ============================================
   8. Glassmorphism
   ============================================ */

.glass,
.is-style-glass {
	background: var(--lo-glass-bg);
	backdrop-filter: var(--lo-glass-blur);
	-webkit-backdrop-filter: var(--lo-glass-blur);
}

/* ============================================
   9. Card Style
   ============================================ */

.is-style-card {
	background: var(--lo-surface-container-low);
	box-shadow: none;
}

/* ============================================
   10. Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
	.reveal-on-scroll,
	.reveal-on-scroll.reveal-delay-1,
	.reveal-on-scroll.reveal-delay-2,
	.reveal-on-scroll.reveal-delay-3 {
		opacity: 1;
		transform: none;
		transition: none;
		transition-delay: 0ms;
	}

	.hero-fade-in {
		animation: none;
		opacity: 1;
	}

	.hero-delay-1,
	.hero-delay-2,
	.hero-delay-3 {
		opacity: 1;
	}

	.lo-category-hero .lo-category-hero__image {
		animation: none;
		opacity: 1;
	}

	.ken-burns-bg,
	.is-style-ken-burns img,
	.alston-hero-medium .wp-block-cover__image-background,
	.lo-category-hero .sc-category-thumbnail img,
	.sc-category-hero .sc-category-hero__image img {
		animation: none;
	}

	.hover-scale-image img,
	.hover-grayscale img {
		transition: none;
	}

	.hover-scale-image.wp-block-cover .wp-block-cover__background {
		transition: none;
	}

	.is-style-ghost .wp-block-button__link::after,
	.expanding-underline::after {
		transition: none;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
}