/* ============================================================
   LATISLIT — Animations & Motion
   Scroll-triggered reveals, hover effects, transitions.
   Uses IntersectionObserver (scroll-effects.js) to apply classes.
   ============================================================ */

/* ── Scroll-reveal Base States ─────────────────────────────── */

.ll-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity var(--dur-slow) var(--ease-out),
		transform var(--dur-slow) var(--ease-out);
}

.ll-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Staggered children */
.ll-stagger > * {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity var(--dur-slow) var(--ease-out),
		transform var(--dur-slow) var(--ease-out);
}

.ll-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.ll-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.ll-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.ll-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.ll-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.ll-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }

.ll-stagger.is-visible > * {
	opacity: 1;
	transform: translateY(0);
}

/* Fade in from left */
.ll-reveal-left {
	opacity: 0;
	transform: translateX(-32px);
	transition:
		opacity var(--dur-slow) var(--ease-out),
		transform var(--dur-slow) var(--ease-out);
}

.ll-reveal-left.is-visible {
	opacity: 1;
	transform: translateX(0);
}

/* Fade in from right */
.ll-reveal-right {
	opacity: 0;
	transform: translateX(32px);
	transition:
		opacity var(--dur-slow) var(--ease-out),
		transform var(--dur-slow) var(--ease-out);
}

.ll-reveal-right.is-visible {
	opacity: 1;
	transform: translateX(0);
}

/* Scale in */
.ll-reveal-scale {
	opacity: 0;
	transform: scale(0.95);
	transition:
		opacity var(--dur-slow) var(--ease-out),
		transform var(--dur-slow) var(--ease-out);
}

.ll-reveal-scale.is-visible {
	opacity: 1;
	transform: scale(1);
}

/* ── Hero Animations ────────────────────────────────────────── */

.ll-hero__eyebrow {
	animation: ll-slide-up 0.8s var(--ease-out) 0.2s both;
}

.ll-hero__headline {
	animation: ll-slide-up 0.8s var(--ease-out) 0.4s both;
}

.ll-hero__sub {
	animation: ll-slide-up 0.6s var(--ease-out) 0.6s both;
}

.ll-hero__actions {
	animation: ll-slide-up 0.6s var(--ease-out) 0.8s both;
}

@keyframes ll-slide-up {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Announcement Bar ───────────────────────────────────────── */

.ll-announce {
	animation: ll-fade-in 0.4s var(--ease-out) both;
}

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

/* ── Category Tiles ─────────────────────────────────────────── */

.ll-cat-tile {
	transition: box-shadow var(--transition-base);
}

.ll-cat-tile:hover {
	box-shadow: var(--shadow-hover);
}

.ll-cat-tile__image {
	transition: transform var(--dur-slow) var(--ease-out);
}

.ll-cat-tile:hover .ll-cat-tile__image {
	transform: scale(1.05);
}

.ll-cat-tile__label {
	position: relative;
}

.ll-cat-tile__label::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 2px;
	background-color: var(--ll-gold);
	transition: width var(--transition-base);
}

.ll-cat-tile:hover .ll-cat-tile__label::after {
	width: 40px;
}

/* ── Product Cards ──────────────────────────────────────────── */

.ll-card {
	transition:
		box-shadow var(--transition-base),
		transform var(--transition-base);
}

.ll-card:hover {
	box-shadow: var(--shadow-hover);
}

/* ── Navigation Links ───────────────────────────────────────── */

.ll-nav__link {
	position: relative;
}

.ll-nav__link::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 1px;
	background-color: var(--ll-gold);
	transition: width var(--transition-base);
}

.ll-nav__link:hover::after,
.ll-nav__link.is-active::after {
	width: 100%;
}

/* ── Gold underline (reusable) ──────────────────────────────── */

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

.ll-underline-gold::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 0;
	width: 48px;
	height: 3px;
	background-color: var(--ll-gold);
}

/* ── Button hover pulse ─────────────────────────────────────── */

.btn-primary:active,
.single_add_to_cart_button:active,
.ll-card__quick-add:active {
	transform: scale(0.98);
}

/* ── Testimonial Carousel ───────────────────────────────────── */

.ll-testimonials__track {
	scroll-behavior: smooth;
}

/* ── Cart drawer slide ──────────────────────────────────────── */

.ll-cart-drawer {
	transition: right var(--dur-slow) var(--ease-out);
}

[dir="rtl"] .ll-cart-drawer {
	transition: left var(--dur-slow) var(--ease-out);
}

/* ── Overlay fade ───────────────────────────────────────────── */

.ll-overlay {
	transition: opacity var(--transition-base);
}

.ll-overlay.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* ── Quick-view modal ───────────────────────────────────────── */

.ll-quickview-modal {
	opacity: 0;
	transform: scale(0.96) translateY(10px);
	transition:
		opacity var(--transition-base),
		transform var(--transition-base);
}

.ll-quickview-modal.is-open {
	opacity: 1;
	transform: scale(1) translateY(0);
}

/* ── Reduce motion ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.ll-reveal,
	.ll-reveal-left,
	.ll-reveal-right,
	.ll-reveal-scale,
	.ll-stagger > *,
	.ll-hero__eyebrow,
	.ll-hero__headline,
	.ll-hero__sub,
	.ll-hero__actions,
	.ll-cat-tile__image,
	.ll-card {
		transition: none !important;
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}