/* luxhouse.fm — scroll-pinned cinematic numbers section.
   Wine stage, silver cloche reveal on a rotating platter, money trail.
   Animation is transform/opacity (+canvas) only. */
:root{
	--lxn-wine:#5A181D;
	--lxn-wine-deep:#3E1013;
	--lxn-wine-soft:#8F2D34;
	--lxn-cream:#F5F0E8;
}

/* Belt-and-braces against the hydration race in numbers.js: the OLD "By the
   numbers" grid's content is hidden unconditionally here, via a plain #stats
   selector that needs no JS and no class to take effect - so it can never
   flash on screen, no matter how the swap script's timing plays out. The box
   itself stays in flow with a wine background and its own natural height,
   reserving the section's space with a placeholder that already matches the
   incoming stage, so there is never an empty gap or a layout jump while JS
   finishes swapping in the real .lxn tray experience. Once that swap lands,
   JS adds .lxn-replaced and this box collapses completely (never removed,
   keeps React's own tree intact for hydration). */
#stats{
	position:relative;
	background:var(--lxn-wine);
	overflow:hidden;
}
#stats > *{
	visibility:hidden !important;
}
#stats.lxn-replaced{
	display:none !important;
}

/* ---------- scroll container + pinned stage ----------
   The wine is painted by .lxn-field (inset from the bottom) and finished by the
   blob band INSIDE the section box, so no shape can ever overlap the hero above
   or the marquee below. overflow:clip is a second line of defence. */
.lxn{
	position:relative;
	height:380vh;
	background:transparent;
	color:var(--lxn-cream);
	isolation:isolate;
	overflow:clip;
	--lxn-pw:clamp(260px,34vw,470px);      /* platter width; number clearance derives from it */
}
.lxn *{ box-sizing:border-box; }

.lxn-field{
	position:absolute; left:0; right:0; top:0; bottom:110px;
	background:var(--lxn-wine); z-index:0;
}
.lxn-blob-bot{
	position:absolute; left:0; bottom:0; width:100%; height:110px;
	display:block; z-index:0; fill:var(--lxn-wine); pointer-events:none;
}

.lxn-stage{
	position:sticky; top:0; z-index:2;
	height:100vh;
	overflow:hidden;
}
@supports (height:100svh){ .lxn-stage{ height:100svh; } }

/* ---------- backdrop ---------- */
.lxn-grad{
	position:absolute; inset:0; pointer-events:none; z-index:1;
	background:
		radial-gradient(72% 58% at 50% 62%, rgba(143,45,52,.30) 0%, rgba(90,24,29,0) 68%),
		radial-gradient(120% 100% at 50% 0%, rgba(62,16,19,.55) 0%, rgba(90,24,29,0) 60%);
}
.lxn-pool{
	position:absolute; left:50%; top:60%; z-index:1;
	width:min(112vw,1180px); height:min(66vh,640px);
	transform:translate(-50%,-50%);
	pointer-events:none;
	background:radial-gradient(50% 50% at 50% 50%, rgba(255,232,198,.22) 0%, rgba(255,226,188,.10) 38%, rgba(255,220,180,0) 72%);
}
/* darkens the backdrop while a number is presented */
.lxn-dim{
	position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
	background:rgba(24,5,8,.62);
}
.lxn-vig{
	position:absolute; inset:0; pointer-events:none; z-index:6;
	background:radial-gradient(118% 88% at 50% 52%, rgba(0,0,0,0) 40%, rgba(30,6,10,.46) 100%);
}
.lxn-grain{
	position:absolute; inset:0; pointer-events:none; z-index:7;
	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>");
}
.lxn-edge{
	position:absolute; top:0; height:100%; width:auto; z-index:2;
	pointer-events:none; opacity:0;
}
.lxn-edge-l{ left:0; }
.lxn-edge-r{ right:0; }

.lxn-bills{ position:absolute; inset:0; z-index:5; pointer-events:none; }

/* ---------- entry wordmark ---------- */
.lxn-word{
	position:absolute; left:0; right:0; top:50%; z-index:4;
	margin-top:-.52em; text-align:center;
	font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;
	font-weight:500; letter-spacing:-.03em; line-height:1;
	font-size:clamp(3rem,13vw,12rem);
	color:var(--lxn-cream);
	opacity:0; pointer-events:none;
}
.lxn-word .it{ font-style:italic; color:rgba(245,240,232,.82); }

/* ---------- statement (unchanged) ---------- */
.lxn-statement{
	position:absolute; right:7vw; top:50%; z-index:4;
	transform:translateY(-50%);
	text-align:right; max-width:min(86vw,760px);
	pointer-events:none;
}
.lxn-line{ display:block; opacity:0; line-height:1.02; margin:.06em 0; }
.lxn-line .s{
	font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
	font-weight:600; letter-spacing:-.02em;
	font-size:clamp(1.6rem,5.4vw,4.2rem);
}
.lxn-line .e{
	font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;
	font-style:italic; font-weight:500; letter-spacing:-.02em;
	font-size:clamp(2rem,6.6vw,5.4rem);
	color:rgba(245,240,232,.9);
}

/* ---------- the cloche reveal ---------- */
.lxn-serve{
	position:absolute; inset:0; z-index:4;
	display:flex; align-items:center; justify-content:center;
	pointer-events:none;
}
.lxn-serve-move{
	opacity:0;
	display:flex; flex-direction:column; align-items:center;
	transform:translateY(4vh);
}

/* THE NUMBER — hero of the reveal, in clear space above the cloche.
   margin-bottom derives from the platter width so the lifted lid and its knob
   (which overshoot ~15% of the platter height) can never reach it. */
.lxn-stat{
	position:relative; z-index:300; text-align:center;
	margin-bottom:calc(var(--lxn-pw) * 0.27);
	pointer-events:none;
}
.lxn-num-wrap{ position:relative; overflow:hidden; padding:.04em .1em; }
.lxn-stat-num{
	font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;
	font-weight:500; letter-spacing:-.035em; line-height:.9;
	font-size:clamp(4.4rem,13.5vw,12rem);
	font-variant-numeric:tabular-nums;
	color:var(--lxn-cream);
	text-shadow:0 2px 46px rgba(20,4,7,.55);
}
/* glint sweeping across the digits */
.lxn-num-glint{
	position:absolute; left:0; top:0; height:100%; width:38%;
	pointer-events:none; opacity:0; transform:translateX(-150%);
	background:linear-gradient(100deg, rgba(255,248,236,0) 0%, rgba(255,250,240,.5) 46%, rgba(255,252,244,.8) 54%, rgba(255,248,236,0) 100%);
	mix-blend-mode:screen;
}
.lxn-stat-lab{
	margin-top:.9em;
	font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
	font-size:clamp(12px,1.1vw,17px); font-weight:500;
	letter-spacing:.34em; text-transform:uppercase;
	color:rgba(245,240,232,.85);
}

/* shared gradient defs, referenced by all four trays */
.lxn-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* invisible circular platter: four trays, active one front and centre */
.lxn-platter{
	position:relative;
	width:var(--lxn-pw);
	aspect-ratio:560 / 420;
}
.lxn-tray-slot{
	position:absolute; left:50%; top:50%; width:100%;
	transform:translate(-50%,-50%);
	pointer-events:auto; cursor:pointer;
	-webkit-tap-highlight-color:transparent;
}
.lxn-tray-slot:focus-visible{ outline:1px solid rgba(245,240,232,.6); outline-offset:6px; }
.lxn-platter.is-busy .lxn-tray-slot{ pointer-events:none; }

.lxn-tray-wrap{ position:relative; width:100%; transition:transform .34s cubic-bezier(.22,1,.36,1); }
.lxn-tray-wrap::after{
	content:""; position:absolute; inset:-6% -4%;
	pointer-events:none; opacity:0; transition:opacity .34s ease;
	background:radial-gradient(52% 46% at 50% 62%, rgba(255,240,214,.22) 0%, rgba(255,236,206,0) 70%);
	mix-blend-mode:screen;
}
.lxn-platter:not(.is-busy) .lxn-tray-slot:hover .lxn-tray-wrap{ transform:translateY(-3px); }
.lxn-platter:not(.is-busy) .lxn-tray-slot:hover .lxn-tray-wrap::after{ opacity:1; }

.lxn-tray{ display:block; width:100%; height:auto; }
.lxn-cloche{ position:absolute; left:0; top:0; width:100%; height:auto; transform-origin:34% 88%; }
.lxn-puff{
	position:absolute; left:50%; top:56%; width:78%; height:52%;
	transform:translate(-50%,-50%) scale(.6);
	opacity:0; pointer-events:none; mix-blend-mode:screen;
	background:radial-gradient(50% 50% at 50% 50%, rgba(255,244,220,.85) 0%, rgba(255,232,198,.35) 40%, rgba(255,226,188,0) 72%);
}
.lxn-glint{ position:absolute; left:0; right:0; bottom:2%; height:34%; overflow:hidden; pointer-events:none; }
.lxn-sweep{
	position:absolute; left:0; top:0; height:100%; width:44%;
	opacity:0; transform:translateX(-140%);
	background:linear-gradient(100deg, rgba(255,248,236,0) 0%, rgba(255,248,236,.34) 45%, rgba(255,248,236,.6) 55%, rgba(255,248,236,0) 100%);
	mix-blend-mode:screen;
}

/* ---------- station navigation ---------- */
.lxn-nav{
	display:flex; gap:clamp(18px,3.2vw,52px); align-items:flex-start;
	margin-top:clamp(20px,3.4vh,44px);
	pointer-events:auto;
}
.lxn-nav-item{
	appearance:none; background:none; border:0; padding:4px 2px; margin:0;
	display:flex; flex-direction:column; align-items:center; gap:9px;
	cursor:pointer; color:inherit;
	-webkit-tap-highlight-color:transparent;
	transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.lxn-nav-item:hover{ transform:translateY(-2px); }
.lxn-nav-item:focus-visible{ outline:1px solid rgba(245,240,232,.6); outline-offset:5px; border-radius:4px; }
.lxn-nav-mark{ display:block; width:clamp(20px,1.9vw,26px); height:auto; }
.lxn-nav-mark svg{ display:block; width:100%; height:auto; overflow:visible; }
.lxn-nav-ring{ fill:none; stroke:rgba(245,240,232,.42); stroke-width:1.3; transition:stroke .3s ease; }
.lxn-nav-tray{ fill:none; stroke:rgba(245,240,232,.42); stroke-width:1.2; transition:stroke .3s ease; }
.lxn-nav-fill{ fill:var(--lxn-wine-soft); opacity:0; transition:opacity .38s ease; }
.lxn-nav-lab{
	font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
	font-size:clamp(8px,.68vw,10px); font-weight:500;
	letter-spacing:.22em; text-transform:uppercase; white-space:nowrap;
	color:rgba(245,240,232,.5); transition:color .3s ease;
}
.lxn-nav-item:hover .lxn-nav-ring,
.lxn-nav-item:hover .lxn-nav-tray{ stroke:var(--lxn-cream); }
.lxn-nav-item:hover .lxn-nav-lab{ color:rgba(245,240,232,.92); }
.lxn-nav-item.is-on .lxn-nav-fill{ opacity:.85; }
.lxn-nav-item.is-on .lxn-nav-ring,
.lxn-nav-item.is-on .lxn-nav-tray{ stroke:var(--lxn-cream); }
.lxn-nav-item.is-on .lxn-nav-lab{ color:var(--lxn-cream); }
.lxn-nav.is-busy .lxn-nav-item{ pointer-events:none; }

/* ---------- reduced motion / static fallback ---------- */
.lxn-static{ display:none; }
.lxn.is-static{ height:auto; padding:14vh 0 12vh; background:var(--lxn-wine); }
.lxn.is-static .lxn-field,
.lxn.is-static .lxn-blob-bot{ display:none; }
.lxn.is-static .lxn-stage{ position:relative; height:auto; overflow:visible; }
.lxn.is-static .lxn-word{ position:relative; top:auto; margin:0 0 7vh; opacity:1; transform:none; }
.lxn.is-static .lxn-statement{
	position:relative; right:auto; top:auto; transform:none;
	margin:0 auto 7vh; padding:0 6vw; max-width:none;
}
.lxn.is-static .lxn-line{ opacity:1; transform:none; }
.lxn.is-static .lxn-serve,
.lxn.is-static .lxn-bills,
.lxn.is-static .lxn-dim{ display:none; }
.lxn.is-static .lxn-edge{ opacity:.16; }
.lxn.is-static .lxn-static{
	display:grid; grid-template-columns:repeat(2,1fr);
	gap:clamp(18px,3vw,40px); padding:0 8vw; text-align:center;
}
.lxn-static-num{
	font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;
	font-weight:500; letter-spacing:-.03em; line-height:1;
	font-size:clamp(2.2rem,6vw,4.4rem); color:var(--lxn-cream);
}
.lxn-static-lab{
	margin-top:.6em;
	font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
	font-size:11px; font-weight:500; letter-spacing:.28em; text-transform:uppercase;
	color:rgba(245,240,232,.62);
}

/* will-change only while the section is actually on screen */
.lxn-live .lxn-word,
.lxn-live .lxn-statement .lxn-line,
.lxn-live .lxn-serve-move,
.lxn-live .lxn-tray-slot,
.lxn-live .lxn-cloche,
.lxn-live .lxn-edge{ will-change:transform,opacity; }

/* ---------- mobile ---------- */
@media (max-width:760px){
	.lxn{ height:360vh; --lxn-pw:min(66vw,320px); }
	.lxn-statement{ right:6vw; left:6vw; }
	.lxn-stat-num{ font-size:clamp(3.4rem,17vw,6rem); }
	.lxn-stat-lab{ font-size:11px; letter-spacing:.28em; }
	.lxn-edge{ opacity:0 !important; }
	.lxn-nav{ gap:clamp(10px,4vw,20px); }
	.lxn-nav-lab{ font-size:7.5px; letter-spacing:.16em; }
	.lxn.is-static .lxn-static{ grid-template-columns:1fr; }
}