/* =================================================================
   BMW Showroom 3D Banner — frontend
   Palette: bg #0B0B0B #111 #161616 #1D1D1D | blue #0096FF | navy #004D99
            red #E30613 | white #fff | grey #AFAFAF #6E6E6E
   ================================================================= */
.bmwsr-banner {
	--bg0:#0B0B0B; --bg1:#111111; --bg2:#161616; --bg3:#1D1D1D;
	--blue:#0096FF; --navy:#004D99; --red:#E30613;
	--white:#FFFFFF; --grey:#AFAFAF; --grey2:#6E6E6E;
	--h:620px; --h-m:560px;
	--bmwsr-hero-h:100vh; --bmwsr-hero-h-m:88vh;

	position:relative;
	width:100%;
	height:var(--h);
	min-height:420px;
	overflow:hidden;
	border-radius:18px;
	background:
		radial-gradient(130% 100% at 50% 6%, #20232a 0%, #15171c 40%, var(--bg0) 86%);
	color:var(--white);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	box-shadow:0 30px 70px -20px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.04);
	isolation:isolate;
	user-select:none;
	contain:layout paint;
}

/* ---- HERO mode: break out to full viewport width, fill the section ---- */
.bmwsr-banner.is-hero{
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	height:var(--bmwsr-hero-h);
	min-height:480px;
	border-radius:0;
}

/* ---- ambient background ---- */
.bmwsr-bg{position:absolute;inset:0;z-index:1;
	background:
		repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 64px),
		repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 64px);
	mask-image:radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
	opacity:.6;}
.bmwsr-banner.has-bg .bmwsr-bg{
	background:var(--bmwsr-bg) center/cover no-repeat;
	mask-image:none;opacity:1;}
.bmwsr-banner.has-bg .bmwsr-bg::after{content:"";position:absolute;inset:0;
	background:linear-gradient(180deg, rgba(11,11,11,.55), rgba(11,11,11,.18) 38%, rgba(11,11,11,.80));}

.bmwsr-floor{position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;
	background:linear-gradient(0deg, rgba(0,150,255,.10), transparent 70%);}
.bmwsr-banner.has-bg .bmwsr-floor{opacity:.4;}
.bmwsr-glow{position:absolute;width:60%;height:60%;border-radius:50%;filter:blur(90px);opacity:.45;z-index:1;
	pointer-events:none;will-change:transform;}
.bmwsr-glow-blue{background:var(--blue);left:-14%;top:8%;}
.bmwsr-glow-red{background:var(--red);right:-16%;bottom:-6%;opacity:.30;}
.bmwsr-banner.has-bg .bmwsr-glow{opacity:.20;}

/* ---- neon platform ---- */
.bmwsr-platform{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);
	width:62%;max-width:820px;height:32%;perspective:760px;z-index:2;pointer-events:none;}
.bmwsr-platform-face{position:absolute;inset:0;transform:rotateX(64deg);transform-origin:center bottom;
	border-radius:10px;
	background:
		repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 6px, transparent 6px 12px),
		repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0 6px, transparent 6px 12px),
		linear-gradient(180deg, #161616, #0c0c0c);
	border:2px solid transparent;
	border-image:linear-gradient(90deg, var(--blue), #7a2bd6 50%, var(--red)) 1;
	box-shadow:0 0 26px rgba(0,150,255,.45), 0 0 40px rgba(227,6,19,.30), inset 0 0 30px rgba(0,0,0,.7);}
.bmwsr-platform-face::after{content:"";position:absolute;left:6%;right:6%;top:100%;height:60px;
	background:radial-gradient(closest-side, rgba(0,150,255,.35), transparent);filter:blur(10px);}
.bmwsr-banner.has-bg .bmwsr-platform{opacity:.85;}

/* ---- header ---- */
.bmwsr-header{position:absolute;top:0;left:0;right:0;z-index:6;text-align:center;
	padding:26px 16px 0;pointer-events:none;}
.bmwsr-eyebrow{display:inline-block;font-size:12px;letter-spacing:5px;font-weight:700;
	color:var(--blue);text-transform:uppercase;text-shadow:0 0 12px rgba(0,150,255,.5);}
.bmwsr-heading{margin:5px 0 0;font-size:clamp(22px,3.4vw,40px);font-weight:800;letter-spacing:.5px;
	text-shadow:0 2px 18px rgba(0,0,0,.7);}

/* ---- stats HUD (top-left, no box, linear gauges) ---- */
.bmwsr-stats-panel{position:absolute;top:92px;left:34px;z-index:7;width:min(320px,42%);
	transition:opacity .3s ease, transform .3s ease;
	text-shadow:0 2px 10px rgba(0,0,0,.9);pointer-events:none;}
.bmwsr-stats-panel.is-swapping{opacity:0;transform:translateX(-16px);}
.bmwsr-stats-name{font-size:clamp(20px,2.6vw,30px);font-weight:800;letter-spacing:.5px;line-height:1.1;}
.bmwsr-stats-brand{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--blue);
	margin:3px 0 16px;font-weight:700;}
.bmwsr-stats-list{list-style:none;margin:0;padding:0;}
.bmwsr-stats-list li{padding:7px 0;}
.bmwsr-stat-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.bmwsr-stat-top .lbl{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--grey);}
.bmwsr-stat-top .val{font-size:17px;font-weight:800;color:var(--white);font-variant-numeric:tabular-nums;}
.bmwsr-bar{position:relative;height:6px;border-radius:3px;margin-top:6px;overflow:hidden;
	background:rgba(255,255,255,.12);}
.bmwsr-fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;width:0;
	background:linear-gradient(90deg, var(--navy), var(--blue));
	box-shadow:0 0 10px var(--blue);
	transition:width .7s cubic-bezier(.16,1.36,.3,1);}  /* overshoot = needle "rev" blip */
.bmwsr-fill.hot{background:linear-gradient(90deg, var(--blue), var(--red));box-shadow:0 0 10px var(--red);}

/* ---- sound toggle ---- */
.bmwsr-sound{position:absolute;top:20px;right:20px;z-index:9;width:46px;height:46px;border-radius:50%;
	cursor:pointer;color:var(--grey);display:flex;align-items:center;justify-content:center;
	background:linear-gradient(160deg, rgba(29,29,29,.9), rgba(11,11,11,.85));
	border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 26px -12px rgba(0,0,0,.9);
	transition:color .2s, border-color .2s, box-shadow .2s;}
.bmwsr-sound:hover{color:var(--white);}
.bmwsr-sound .bmwsr-wave{display:none;}
.bmwsr-sound.is-on{color:var(--blue);border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 10px 26px -12px rgba(0,150,255,.6);}
.bmwsr-sound.is-on .bmwsr-wave{display:inline;}
.bmwsr-sound.is-on .bmwsr-mute{display:none;}

/* ---- 3D stage ---- */
.bmwsr-stage{position:absolute;inset:0;z-index:3;}
.bmwsr-canvas{display:block;width:100%;height:100%;}
.bmwsr-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:4;
	transition:opacity .4s ease;}
.bmwsr-loader.is-hidden{opacity:0;pointer-events:none;}
.bmwsr-spinner{width:46px;height:46px;border-radius:50%;border:3px solid rgba(255,255,255,.12);
	border-top-color:var(--blue);animation:bmwsr-spin .8s linear infinite;}
@keyframes bmwsr-spin{to{transform:rotate(360deg);}}

/* ---- arrows ---- */
.bmwsr-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:8;
	width:54px;height:54px;border-radius:50%;cursor:pointer;
	display:flex;align-items:center;justify-content:center;color:var(--white);
	background:linear-gradient(160deg, rgba(29,29,29,.9), rgba(11,11,11,.85));
	border:1px solid rgba(255,255,255,.10);
	box-shadow:0 10px 26px -10px rgba(0,0,0,.9);
	transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;}
.bmwsr-arrow:hover{transform:translateY(-50%) scale(1.08);border-color:var(--blue);
	box-shadow:0 0 0 1px var(--blue), 0 14px 30px -10px rgba(0,150,255,.5);color:var(--blue);}
.bmwsr-arrow:active{transform:translateY(-50%) scale(.96);}
.bmwsr-arrow-left{left:22px;}
.bmwsr-arrow-right{right:22px;}

/* ---- dots ---- */
.bmwsr-dots{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);z-index:7;
	display:flex;gap:9px;flex-wrap:wrap;justify-content:center;max-width:70%;}
.bmwsr-dot{width:9px;height:9px;border-radius:50%;background:var(--grey2);border:0;padding:0;cursor:pointer;
	transition:all .2s ease;opacity:.6;}
.bmwsr-dot:hover{opacity:1;}
.bmwsr-dot.is-active{background:var(--blue);width:26px;border-radius:5px;opacity:1;box-shadow:0 0 10px var(--blue);}

/* ---- actions ---- */
.bmwsr-actions{position:absolute;left:0;right:0;bottom:0;z-index:7;
	display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
	padding:20px 16px 26px;
	background:linear-gradient(0deg, rgba(11,11,11,.92), transparent);}
.bmwsr-btn{appearance:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
	font-size:14px;font-weight:700;letter-spacing:.6px;padding:14px 28px;border-radius:10px;
	transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;white-space:nowrap;}
.bmwsr-btn:active{transform:translateY(1px);}
.bmwsr-btn-ghost{background:rgba(255,255,255,.06);color:var(--white);border:1px solid rgba(255,255,255,.14);}
.bmwsr-btn-ghost:hover{background:rgba(255,255,255,.12);}
.bmwsr-btn-outline{background:transparent;color:var(--blue);border:1px solid var(--blue);}
.bmwsr-btn-outline:hover{background:rgba(0,150,255,.12);box-shadow:0 0 0 1px var(--blue),0 8px 24px -8px rgba(0,150,255,.5);}
.bmwsr-btn-primary{color:#fff;border:1px solid transparent;
	background:linear-gradient(135deg, var(--red), #b00410);
	box-shadow:0 10px 26px -10px rgba(227,6,19,.7);}
.bmwsr-btn-primary:hover{box-shadow:0 0 0 1px rgba(255,255,255,.2),0 14px 32px -10px rgba(227,6,19,.9);transform:translateY(-1px);}
.bmwsr-btn.is-hidden{display:none;}

/* ---- empty notice ---- */
.bmwsr-empty{padding:20px;border:1px dashed #999;border-radius:10px;background:#fafafa;color:#333;}

/* ---- mobile ---- */
@media (max-width:782px){
	.bmwsr-banner{height:var(--h-m);border-radius:14px;}
	.bmwsr-banner.is-hero{height:var(--bmwsr-hero-h-m);min-height:420px;border-radius:0;}
	.bmwsr-stats-panel{top:78px;left:16px;width:min(240px,55%);}
	.bmwsr-stat-top .val{font-size:15px;}
	.bmwsr-platform{width:80%;bottom:14%;}
	.bmwsr-sound{top:14px;right:14px;width:40px;height:40px;}
	.bmwsr-arrow{width:44px;height:44px;}
	.bmwsr-arrow-left{left:10px;} .bmwsr-arrow-right{right:10px;}
	.bmwsr-dots{bottom:122px;}
	.bmwsr-actions{gap:8px;padding:14px 12px 16px;}
	.bmwsr-btn{padding:12px 16px;font-size:12.5px;flex:1 1 auto;min-width:0;}
}
@media (max-width:460px){
	.bmwsr-actions{flex-direction:column;}
	.bmwsr-btn{width:100%;}
	.bmwsr-dots{bottom:172px;}
}

@media (prefers-reduced-motion:reduce){
	.bmwsr-glow{display:none;}
	.bmwsr-fill{transition:width .3s ease;}
}