/**
 * Access Land -- Scroll Animations & Micro-interactions
 *
 * Uses CSS Scroll-Driven Animations (animation-timeline: view())
 * for zero-JS scroll-triggered entrance effects.
 * Graceful degradation: elements appear instantly in unsupported browsers.
 *
 * @package AccessLand
 */

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

@keyframes al-fade-in-up {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes al-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes al-scale-in {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes al-badge-pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

/* ========================================
   Scroll-Driven Animations (Progressive Enhancement)
   ======================================== */

@supports (animation-timeline: view()) {

	/* --- Homepage Sections (class-based selectors) --- */

	.al-section-categories {
		animation: al-fade-in-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 30%;
	}

	/* Stagger category cards */
	.al-section-categories .wp-block-column:nth-child(1) {
		animation: al-fade-in-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 35%;
	}

	.al-section-categories .wp-block-column:nth-child(2) {
		animation: al-fade-in-up linear both;
		animation-timeline: view();
		animation-range: entry 5% entry 40%;
	}

	.al-section-categories .wp-block-column:nth-child(3) {
		animation: al-fade-in-up linear both;
		animation-timeline: view();
		animation-range: entry 10% entry 45%;
	}

	.al-section-categories .wp-block-column:nth-child(4) {
		animation: al-fade-in-up linear both;
		animation-timeline: view();
		animation-range: entry 15% entry 50%;
	}

	/* Trending products heading */
	.al-section-trending .wp-block-heading {
		animation: al-fade-in-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 30%;
	}

	/* Trust badges -- scale in */
	.al-section-trust .wp-block-column {
		animation: al-scale-in linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 40%;
	}

	/* Testimonials */
	.al-section-testimonials .wp-block-column {
		animation: al-fade-in-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 35%;
	}

	/* CTA banner */
	.al-section-cta {
		animation: al-fade-in linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 25%;
	}

	/* --- Shop / Archive Product Cards --- */

	.woocommerce ul.products li.product {
		animation: al-fade-in-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 25%;
	}

	/* --- Single Product Page --- */

	.al-product-single__delivery {
		animation: al-fade-in-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 30%;
	}

	.woocommerce div.product .woocommerce-tabs {
		animation: al-fade-in-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 25%;
	}

	.woocommerce div.product .related,
	.woocommerce div.product .upsells {
		animation: al-fade-in-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 25%;
	}

	/* --- Footer --- */

	.site-footer .wp-block-columns,
	.generate-footer .wp-block-columns,
	footer .wp-block-columns {
		animation: al-fade-in-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 30%;
	}

	/* --- Respect prefers-reduced-motion --- */

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
		}
	}
}

/* ========================================
   Micro-interactions (all browsers)
   ======================================== */

/* Badge pulse on product card hover */
.al-card:hover .al-badge--success {
	animation: al-badge-pulse 0.4s ease;
}

/* Footer social icon scale on hover */
.al-footer__social a svg {
	transition: transform var(--al-transition-fast);
}

.al-footer__social a:hover svg {
	transform: scale(1.15);
}

/* Navigation link underline slide-in */
.al-header__menu li a {
	position: relative;
}

.al-header__menu li a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	background: var(--al-primary);
	transition: width var(--al-transition-normal), left var(--al-transition-normal);
}

.al-header__menu li a:hover::after,
.al-header__menu li.current-menu-item > a::after {
	width: 60%;
	left: 20%;
}

/* Search bar glow on focus */
.al-hero__search-wrap:focus-within {
	box-shadow: 0 0 30px rgba(14, 165, 233, 0.15);
}

/* Button press effect */
.al-btn:active,
.wc-block-cart__submit-button:active,
.wc-block-components-checkout-place-order-button:active {
	transform: translateY(0) scale(0.98) !important;
	transition: transform 0.1s ease;
}

/* Product tab underline transition */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	position: relative;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--al-primary);
	transform: scaleX(0);
	transition: transform var(--al-transition-normal);
	transform-origin: center;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after {
	transform: scaleX(1);
}

/* Trust section card glow on hover */
.al-section-trust .wp-block-columns > .wp-block-column > .wp-block-group {
	transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.al-section-trust .wp-block-columns > .wp-block-column > .wp-block-group:hover {
	box-shadow: 0 0 24px rgba(14, 165, 233, 0.12);
	border-color: rgba(14, 165, 233, 0.25) !important;
	transform: translateY(-2px);
}