/**
 * Aladdin's UI Styles
 *
 * Consolidated CSS for:
 * - CLS prevention (header spacing, buttons, lazy placeholders)
 * - Hero animations (halo drift, plate float, headline underline, CTA hover)
 * - Mobile responsive styles
 *
 * @package Aladdins_Customizations
 * @subpackage UI
 */

/* ==========================================================================
   1. CLS Prevention
   ========================================================================== */

/* Header spacing - desktop */
@media (min-width: 1025px) {
	header.elementor-location-header {
		min-height: var(--desktop-header-h);
	}
	.elementor-sticky__spacer {
		min-height: var(--desktop-header-h) !important;
	}
}

/* Header spacing - mobile/tablet */
@media (max-width: 1024px) {
	header.elementor-location-header {
		min-height: var(--mobile-header-h);
	}
	.elementor-sticky__spacer {
		min-height: var(--mobile-header-h) !important;
	}
}

/* Button sizing */
.elementor .elementor-widget-button .elementor-button {
	min-height: 52px;
	min-width: 190px;
	white-space: nowrap;
}

/* Lazy placeholders - home hero only */
.home .elementor-17 img.lazyload:not([src]),
.home .elementor-17 img.lazyloading:not([src]) {
	width: auto !important;
	aspect-ratio: auto !important;
}

/* Swiper first-layout guard */
.swiper-initialized .swiper-wrapper {
	transition-duration: 0ms !important;
}

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

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

/* Section halo - soft drifting glow behind the plate */
.hero-elevate {
	position: relative;
	isolation: isolate;
}

.hero-elevate::after {
	content: "";
	position: absolute;
	right: 6%;
	top: 8%;
	width: 38vw;
	max-width: 520px;
	aspect-ratio: 1 / 1;
	background: radial-gradient(
		50% 50% at 50% 50%,
		rgba(255, 130, 60, 0.22) 0%,
		rgba(255, 130, 60, 0) 60%
	);
	filter: blur(14px);
	z-index: -1;
	animation: halo-drift 12s ease-in-out infinite alternate;
	will-change: transform;
}

@keyframes halo-drift {
	from {
		transform: translate(0, 0) scale(1);
	}
	to {
		transform: translate(8px, -8px) scale(1.03);
	}
}

/* Plate micro-float (very subtle) */
.hero-plate {
	animation: plate-float 6s ease-in-out infinite;
	transform-origin: 55% 45%;
	will-change: transform;
}

@keyframes plate-float {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-8px) rotate(-0.4deg);
	}
}

/* Headline underline sweep (runs once) */
.hero-title {
	position: relative;
	display: inline-block;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 0% 3px;
	background-position: 0 100%;
	animation: underline-sweep 900ms ease-out 400ms forwards;
}

@keyframes underline-sweep {
	to {
		background-size: 100% 3px;
	}
}

/* CTA micro-interaction - soft ring on hover/focus (no looping) */
.btn-cta {
	position: relative;
	overflow: visible;
}

.btn-cta::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(224, 86, 16, 0.22);
	opacity: 0;
	transition: 0.35s;
}

.btn-cta:is(:hover, :focus-visible)::after {
	box-shadow: 0 0 0 10px rgba(224, 86, 16, 0.12);
	opacity: 1;
}

/* ==========================================================================
   3. Mobile Styles
   ========================================================================== */

@media (max-width: 480px) {
	/* Smaller hero on mobile, keeps LCP faster */
	.hero img {
		aspect-ratio: 380 / 430;
		max-width: 100%;
		height: auto;
	}

	/* Bigger tap targets */
	.add_to_cart_button,
	.single_add_to_cart_button {
		min-height: 48px;
	}

	/* De-emphasize heavy decorative elements on mobile */
	.home .big-decor-pattern {
		display: none;
	}
}