/* LuxeBeauty 3D layer: stage, stacking and card treatment. Loaded after main.css, front page only. */

/* The fixed WebGL stage. 100lvh keeps the canvas size stable when mobile browser bars show or hide. */
.luxe-stage {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.6s ease;
}
.luxe-stage canvas { display: block; width: 100%; height: 100%; }

/* Everything below only applies once WebGL is really running (class set by luxe-3d.js). */
.luxe-3d-on .luxe-stage { opacity: 1; }

/* The hero photo drops under the canvas so the silk and dust float over it. */
.luxe-3d-on .hero-media { z-index: -1; }

/* Content sections sit above the canvas. Opaque ones (gallery, about, contact) mask it for free. */
.luxe-3d-on main > section:not(.hero),
.luxe-3d-on .site-footer {
	position: relative;
	z-index: 1;
}

/* Service cards become lightly translucent so the silk is felt behind them, text contrast stays high. */
.luxe-3d-on .service-card {
	background: color-mix(in oklch, var(--card) 76%, transparent);
}

/* About and the booking call to action are transparent too, so silk and dust float behind them like in the rest of the site. */
.luxe-3d-on .about-section { background: transparent; }
.luxe-3d-on .contact-section { background: radial-gradient(ellipse at 50% 130%, oklch(0.88 0.04 35 / 0.14), transparent 70%); }
.luxe-3d-on .contact-inner h2 { color: var(--foreground); }
.luxe-3d-on .contact-inner p { color: var(--muted-foreground); }
.luxe-3d-on .btn-call { border-color: color-mix(in oklch, var(--gold) 60%, transparent); background: color-mix(in oklch, var(--background) 45%, transparent); color: var(--foreground); }
.luxe-3d-on .btn-call:hover { background: color-mix(in oklch, var(--gold) 12%, transparent); }

/* While GSAP tilts a card, only the hairline and shadow transition (GSAP owns transform). */
.service-card.is-tilting {
	transition: border-color .2s, box-shadow .2s;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.luxe-stage { transition: none; }
}