/* luxhouse.fm cinematic 3D intro overlay — self-contained, additive to the existing site. */
:root{
	--lux-black:#0A0A0A;
	--lux-cream:#F5F0E8;
	--lux-wine:#5A181D;
	--lux-wine-soft:#8F2D34;
	--lux-wine-deep:#3E1013;
}

/* Lock scroll + hide the underlying app while the intro is active */
html.lux-active,
html.lux-active body{ overflow:hidden !important; height:100%; }
html.lux-active body{ touch-action:none; }
html.lux-active body > main{ visibility:hidden !important; }

/* Early opaque cover painted before three.js loads (prevents FOUC) */
#lux-cover{ position:fixed; inset:0; z-index:2147483600; background:var(--lux-black); }

/* The intro stage */
#lux-intro{
	position:fixed; inset:0; z-index:2147483646;
	background:transparent;
	overflow:hidden;
	opacity:1;
	-webkit-user-select:none; user-select:none;
	-webkit-tap-highlight-color:transparent;
}
#lux-intro *{ box-sizing:border-box; }

/* Black backdrop layer (faded out during the light-ball reveal so the site emerges) */
#lux-intro .lux-bg{ position:absolute; inset:0; background:var(--lux-black); }

/* Expanding warm sphere of light the website is revealed from.
   Positioned in JS at the package's projected screen position. */
#lux-intro .lux-lightball{
	position:absolute; left:50%; top:50%;
	width:54vmax; height:54vmax;
	border-radius:50%;
	background:
		radial-gradient(circle, rgba(255,255,253,.95) 0%, rgba(255,250,240,.62) 16%, rgba(255,244,226,0) 40%),
		radial-gradient(circle, rgba(255,240,220,.80) 0%, rgba(255,230,202,.52) 30%, rgba(184,64,74,.46) 56%, rgba(143,45,52,.26) 72%, rgba(90,24,29,.08) 86%, rgba(90,24,29,0) 95%);
	transform:translate(-50%,-50%) scale(0); opacity:0;
	mix-blend-mode:screen; pointer-events:none;
}

/* Full-screen warm-white veil: peaks with the flash, then fades as the site settles */
#lux-intro .lux-veil{
	position:absolute; inset:0; pointer-events:none; opacity:0;
	background:radial-gradient(circle at 50% 50%,
		rgba(255,252,244,.98) 0%,
		rgba(255,246,230,.92) 34%,
		rgba(255,240,220,.80) 64%,
		rgba(255,236,212,.66) 100%);
	mix-blend-mode:screen;
}

/* Warm spotlight cone from above (CSS-drawn, complements the WebGL package) */
#lux-intro .lux-spot{
	position:absolute; inset:0; pointer-events:none;
	background:
		radial-gradient(58% 46% at 50% 4%, rgba(255,233,204,.18), rgba(255,228,196,.05) 42%, transparent 72%),
		radial-gradient(34% 52% at 50% 44%, rgba(255,224,188,.06), transparent 70%);
}

/* Split serif headline sitting behind the floating package */
#lux-intro .lux-headline{
	position:absolute; inset:0; pointer-events:none;
	transition:opacity .35s ease;
}
#lux-intro .lux-line{
	position:absolute; left:0; right:0; text-align:center;
	font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;
	font-style:italic; font-weight:500; letter-spacing:-.02em;
	line-height:1; color:var(--lux-cream);
	font-size:clamp(2rem, 8.4vw, 6.6rem);
	text-shadow:0 2px 40px rgba(0,0,0,.6);
	padding:0 6vw;
}
#lux-intro .lux-line.l1{ top:12%; opacity:.94; }
#lux-intro .lux-line.l2{ bottom:14%; opacity:.94; }

/* Sits just above the headline (same stacking level, later in DOM) and below
   the canvas: darkens the headline specifically behind the package's gap as
   the halves strain apart, so any glimpsed sliver reads as light seen behind
   a cracking seal rather than a text rendering glitch. */
#lux-intro .lux-gapdim{
	position:absolute; inset:0; pointer-events:none;
	opacity:0;
	background:radial-gradient(ellipse 15% 58% at 50% 51%, rgba(4,2,2,.88) 0%, rgba(4,2,2,.4) 48%, rgba(4,2,2,0) 76%);
}

/* Reduced-motion / fallback static logo */
#lux-intro .lux-static-logo{
	position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
	width:clamp(96px,20vw,168px); height:auto; opacity:.92;
	filter:drop-shadow(0 8px 40px rgba(255,228,196,.14));
	pointer-events:none;
}

/* WebGL canvas (the package + dust) */
#lux-intro canvas{
	position:absolute; inset:0; width:100%!important; height:100%!important;
	display:block; touch-action:none; cursor:grab;
}
#lux-intro canvas:active{ cursor:grabbing; }

/* Scroll hint */
#lux-intro .lux-hint{
	position:absolute; left:0; right:0; bottom:4.5vh;
	text-align:center; pointer-events:auto; cursor:pointer;
	color:rgba(245,240,232,.72);
	font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
	font-size:11px; font-weight:500; letter-spacing:.34em; text-transform:uppercase;
	transition:opacity .3s ease, color .3s ease;
}
#lux-intro .lux-hint:hover{ color:var(--lux-cream); }
#lux-intro .lux-hint .arrow{
	display:block; margin:12px auto 0; color:var(--lux-wine-soft);
	animation:lux-bob 2s ease-in-out infinite;
}

/* Light burst flash */
#lux-intro .lux-flash{
	position:absolute; inset:0; pointer-events:none; opacity:0;
	mix-blend-mode:screen;
	background:radial-gradient(circle at 50% 50%, rgba(255,246,232,1) 0%, rgba(255,236,214,.72) 26%, rgba(255,228,200,0) 66%);
}

/* Vignette + warm grain, matching the site */
#lux-intro .lux-vignette{
	position:absolute; inset:0; pointer-events:none;
	background:radial-gradient(#0000 40%, #0000008c 100%);
}
#lux-intro .lux-grain{
	position:absolute; inset:0; pointer-events:none;
	opacity:.07; mix-blend-mode:overlay;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	animation:lux-grain 1.2s steps(6,end) infinite;
}

/* Explicit layer order — the WebGL canvas must paint ABOVE the headline in every
   state, so the package always occludes the text instead of it showing through. */
#lux-intro .lux-bg{ z-index:0; }
#lux-intro .lux-spot{ z-index:1; }
#lux-intro .lux-headline{ z-index:2; }
#lux-intro .lux-gapdim{ z-index:2; }
#lux-intro canvas{ z-index:3; }
#lux-intro .lux-static-logo{ z-index:3; }
#lux-intro .lux-vignette{ z-index:4; }
#lux-intro .lux-grain{ z-index:5; }
#lux-intro .lux-flash{ z-index:6; }
#lux-intro .lux-veil{ z-index:7; }
#lux-intro .lux-lightball{ z-index:8; }
#lux-intro .lux-hint{ z-index:9; }

@keyframes lux-bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }
@keyframes lux-grain{
	0%{transform:translate(0,0)} 20%{transform:translate(-6%,4%)}
	40%{transform:translate(4%,-6%)} 60%{transform:translate(-4%,6%)}
	80%{transform:translate(6%,-4%)} 100%{transform:translate(0,0)}
}

@media (prefers-reduced-motion: reduce){
	#lux-intro .lux-hint .arrow{ animation:none; }
	#lux-intro .lux-grain{ animation:none; }
}