/* ==========================================================================
   LoomLuxury Heritage — design system
   Mirrors the original React source's index.css (@theme block) plus
   lightweight CSS replacements for the Framer Motion entrance/scroll
   animations used in the original design.
   ========================================================================== */

body {
	background-color: #FAF8F4;
	color: #2C2C2C;
	font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Playfair Display', serif;
}

/* Line clamp utility (used on product titles) */
.line-clamp-1 {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   Hero entrance animation (mirrors motion.div initial/animate on load)
   ========================================================================== */
@keyframes llh-fade-up {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.llh-hero-anim {
	opacity: 0;
	animation: llh-fade-up 0.8s ease-out forwards;
}

.llh-hero-anim--1 { animation-delay: 0.2s; }
.llh-hero-anim--2 { animation-delay: 0.4s; }
.llh-hero-anim--3 { animation-delay: 0.6s; }
.llh-hero-anim--4 { animation-delay: 0.8s; }

/* ==========================================================================
   Scroll reveal (mirrors motion.div whileInView) — activated via
   IntersectionObserver in assets/js/main.js by adding .llh-in-view
   ========================================================================== */
[data-animate] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-animate].llh-in-view {
	opacity: 1;
	transform: translateY(0);
}

[data-animate="left"] {
	transform: translateX(-30px);
}
[data-animate="left"].llh-in-view {
	transform: translateX(0);
}

[data-animate="right"] {
	transform: translateX(30px);
}
[data-animate="right"].llh-in-view {
	transform: translateX(0);
}

/* ==========================================================================
   Sticky / scrolled header state (mirrors isScrolled state in Header.tsx)
   ========================================================================== */
#site-header {
	position: fixed;
	width: 100%;
	z-index: 50;
	top: 2rem;
	background-color: transparent;
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
	transition: all 0.3s ease;
}

#site-header.is-scrolled {
	top: 0;
	background-color: rgba(250, 248, 244, 0.9);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

/* ==========================================================================
   Mobile menu drawer + overlay (mirrors mobileMenuOpen state)
   ========================================================================== */
#mobile-menu-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 60;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: opacity 0.3s ease;
	opacity: 0;
	visibility: hidden;
}

#mobile-menu-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

#mobile-menu-drawer {
	position: fixed;
	inset-block: 0;
	left: 0;
	width: 80%;
	max-width: 24rem;
	background-color: #FAF8F4;
	z-index: 70;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	transform: translateX(-100%);
	transition: transform 0.3s ease-in-out;
	display: flex;
	flex-direction: column;
}

#mobile-menu-drawer.is-open {
	transform: translateX(0);
}

/* ==========================================================================
   Mega menu (desktop hover dropdown under "Sarees")
   ========================================================================== */
.llh-mega-menu {
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 0) scale(0.95);
	transform-origin: top;
	transition: all 0.3s ease;
}

.group:hover .llh-mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0) scale(1);
}

/* Lucide icon default sizing (matches size={} props used across the design) */
.llh-icon {
	display: inline-block;
	vertical-align: middle;
	stroke-width: 2;
}