.experience{position:relative;padding:0;background:#08080b;isolation:isolate;--scene-accent:#b278ff}
.scene-stage{position:sticky;top:0;height:100svh;min-height:660px;overflow:hidden;background:radial-gradient(ellipse at 76% 54%,#3d17564d,transparent 51%),#08080b}
.scene-stage:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,#08080b 0%,#08080bd9 25%,transparent 58%),linear-gradient(0deg,#08080b,transparent 20%,transparent 80%,#08080b80)}
.scene-viewport{position:absolute;right:-3%;top:7%;height:85%;width:75%;isolation:isolate;touch-action:pan-y}
.scene-fallback{position:absolute;inset:0;background:linear-gradient(90deg,#08080b,transparent 65%),url('/assets/bmw-front.webp') center 58%/cover;opacity:.6;transition:opacity .6s ease}
.webgl-ready .scene-fallback{opacity:0}
#garage-canvas{width:100%;height:100%;display:block;position:relative;z-index:1;opacity:0;transition:opacity .7s;touch-action:pan-y;cursor:grab}
#garage-canvas.dragging{cursor:grabbing}
.scene-orbit{position:absolute;width:75%;height:34%;left:14%;bottom:10%;border-radius:50%;box-shadow:0 0 90px #9b40dc15;pointer-events:none}
.scene-topline{position:absolute;top:126px;left:6%;right:6%;display:flex;justify-content:space-between;gap:20px;font-size:8px;letter-spacing:2.5px;color:#766985;z-index:2;pointer-events:none}
.scene-topline span:first-child{color:#cfb5e6}
.story-panels{position:relative;z-index:3;margin-top:-100svh;pointer-events:none}
.story-panel{height:100svh;min-height:660px;display:flex;align-items:center;padding:100px 6% 90px;position:relative;pointer-events:none;scroll-margin-top:0}
.story-copy{max-width:560px;width:45%;pointer-events:auto;padding-right:10px}
.story-copy h1{font-size:clamp(52px,5.7vw,89px);line-height:1.07;letter-spacing:-1px;margin:25px 0;color:#f4edf9}
.story-copy h2{font-size:clamp(43px,4.7vw,72px);line-height:1.1;margin:23px 0;color:#f4edf9}
.story-copy h2 em,.story-copy h1 em{font-style:inherit;color:#c98aff;text-shadow:0 0 32px #a348ed44}
.story-copy p{color:#a69aac;font-size:12px;line-height:1.95;max-width:330px}
.story-copy .actions{gap:22px;margin-top:29px}
.story-copy .btn{gap:25px}
.story-hint{display:flex;align-items:center;gap:15px;font-size:8px;letter-spacing:1.5px;color:#7f708d;margin-top:52px}
.story-hint span{display:grid;place-items:center;width:25px;height:38px;border:1px solid #b278ff4d;border-radius:20px;color:#d6aaff;animation:scroll-cue 2s ease infinite}
@keyframes scroll-cue{50%{transform:translateY(7px);opacity:.45}}
.scene-tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 17px}
.scene-tags span{padding:5px 10px;border:1px solid #b278ff30;border-radius:20px;color:#ab8ec5;font-size:8px;letter-spacing:1px;background:#b278ff05}
.scene-caption{position:absolute;left:6%;right:6%;bottom:28px;z-index:4;display:flex;justify-content:space-between;gap:25px;font-size:7px;letter-spacing:1.7px;color:#6e617e;pointer-events:none}
.scene-caption span:first-child{color:#c8b7d5}
.scene-index{position:absolute;right:5%;top:42%;z-index:2;display:flex;align-items:baseline;gap:7px;font-family:'Space Grotesk';color:#6e597e;pointer-events:none}
.scene-index b{font-size:41px;font-weight:400;color:#b989de}.scene-index>span{font-size:10px}
.scene-meter{height:100px;width:1px;background:#b278ff22;position:absolute;right:0;top:68px;overflow:hidden}
.scene-meter i{height:100%;width:100%;display:block;background:#bd81f1;transform:scaleY(0);transform-origin:top}
.scene-controls{position:absolute;right:12%;bottom:82px;z-index:5;padding:14px 18px;min-width:260px;background:#100b18c4;border:1px solid #b278ff2b;border-radius:9px;backdrop-filter:blur(16px);box-shadow:0 10px 30px #0004}
.scene-controls[hidden]{display:none}
.paint-controls{display:flex;align-items:center;gap:12px}.paint-controls>span{font-size:7px;letter-spacing:2px;color:#b9a5c9;margin-right:auto}
.paint-choice{height:18px;width:18px;border-radius:50%;background:var(--paint);border:2px solid #0d0812;outline:1px solid #ffffff20;transition:outline-color .2s,box-shadow .2s}
.paint-choice.selected{outline-color:#d09bff;box-shadow:0 0 13px #b278ff44}
.rotation-control{display:flex;align-items:center;gap:10px;border-top:1px solid #b278ff1a;margin-top:13px;padding-top:11px}
.rotation-control label{font-size:6px;letter-spacing:1px;white-space:nowrap;margin:0;color:#9980ad}
.rotation-control input{accent-color:#b278ff;height:16px;padding:0;border:0;margin:0;width:85px;background:none;cursor:ew-resize}
.rotation-control button{border:0;background:none;color:#c595ef;font-size:18px;padding:0 3px}
.scene-toggle{position:absolute;right:5%;top:170px;z-index:5;background:#0e0917aa;color:#9a83af;border:1px solid #b278ff26;border-radius:20px;font-size:8px;padding:7px 12px}
.chapter-nav{position:absolute;z-index:5;bottom:85px;left:6%;display:flex;gap:9px}
.chapter-nav a{height:27px;width:27px;display:grid;place-items:center;border-radius:50%;font-size:7px;border:1px solid #b278ff22;color:#746080;transition:.25s;background:#0d0913}
.chapter-nav a.current{color:#e2c6ff;border-color:#b278ff88;box-shadow:0 0 20px #b278ff11}
.experience.is-static .scene-stage{position:relative;height:450px;min-height:0}.experience.is-static .scene-viewport{height:100%;top:0;width:100%;right:0}.experience.is-static .scene-stage:before{background:linear-gradient(0deg,#08080b,transparent 80%)}
.experience.is-static .story-panels{margin-top:0;display:grid;grid-template-columns:1fr 1fr;gap:45px;padding:30px 6% 65px}.experience.is-static .story-panel{height:auto;min-height:0;padding:0}.experience.is-static .story-copy{width:100%;max-width:none}.experience.is-static .story-copy h1{font-size:52px}.experience.is-static .story-copy h2{font-size:40px}.experience.is-static .story-hint,.experience.is-static .scene-index,.experience.is-static .scene-topline,.experience.is-static .chapter-nav{display:none}.experience.is-static .scene-toggle{top:105px}.experience.is-static .scene-fallback{opacity:.5}
@media(max-width:1100px){.story-copy{width:46%}.story-copy h1{font-size:62px}.story-copy h2{font-size:50px}.scene-controls{right:9%;min-width:245px}.scene-viewport{right:-7%;width:79%}.story-copy .actions{gap:17px}.scene-index{right:4%}}
@media(max-width:800px){.scene-stage,.story-panel{min-height:720px}.scene-topline{top:104px;font-size:6px;letter-spacing:1.5px}.scene-topline span:last-child{display:none}.scene-viewport{top:auto;bottom:72px;right:-7%;height:55%;width:113%}.scene-stage:before{background:linear-gradient(0deg,#08080b,transparent 20%,transparent 65%,#08080b55)}.story-panel{align-items:flex-start;padding-top:145px;padding-bottom:0}.story-copy{width:100%;max-width:580px}.story-copy h1{font-size:50px;line-height:1.03;margin:18px 0}.story-copy h2{font-size:44px;line-height:1.05;margin:17px 0}.story-copy p{font-size:10px;line-height:1.8;max-width:310px}.story-copy .pill{font-size:7px;padding:5px 10px}.story-copy .eyebrow{font-size:7px}.story-copy .actions{margin-top:18px;gap:20px}.story-copy .btn{padding:11px 15px;font-size:9px}.story-copy .quiet-link{font-size:9px;padding:6px 0}.story-hint{display:none}.scene-tags{margin:15px 0 9px;gap:6px}.scene-tags span{font-size:6px;padding:3px 7px}.scene-controls{right:6%;bottom:58px;min-width:220px;padding:10px 12px}.rotation-control{margin-top:8px;padding-top:8px}.scene-index{right:7%;top:48%;opacity:.55}.scene-index b{font-size:24px}.scene-meter{height:55px;top:40px}.scene-toggle{top:99px;right:6%;font-size:7px;padding:5px 10px}.scene-caption{bottom:20px;font-size:6px;letter-spacing:1px}.scene-caption span:last-child{max-width:140px;text-align:right}.chapter-nav{bottom:80px}.chapter-nav a{height:22px;width:22px;font-size:6px}.experience.is-static .story-copy h1{font-size:40px}.experience.is-static .story-copy h2{font-size:33px}.experience.is-static .story-panels{gap:30px}}
@media(max-width:480px){.story-copy h1{font-size:43px}.story-copy h2{font-size:38px}.story-panel{padding-top:137px}.scene-topline{top:99px}.scene-viewport{height:51%;bottom:82px}.scene-controls{min-width:199px;right:5%;padding:9px 10px}.rotation-control input{width:65px}.paint-controls{gap:11px}.paint-controls>span{font-size:6px}.paint-choice{height:16px;width:16px}.rotation-control label{font-size:5px}.scene-caption{font-size:5px}.chapter-nav{gap:5px;left:5%;bottom:81px}.chapter-nav a{height:20px;width:20px}.scene-index{display:none}.experience.is-static .story-panels{grid-template-columns:1fr}.experience.is-static .scene-stage{height:310px}.experience.is-static .scene-viewport{height:100%;bottom:0}.experience.is-static .story-copy h1{font-size:43px}}
@media(prefers-reduced-motion:reduce){.story-hint span{animation:none}.scene-fallback,#garage-canvas,.paint-choice{transition:none}}
.scene-caption a{pointer-events:auto;color:#ad8fc5;text-decoration:underline}
/* Give the vehicle and the copy their own space. */
.scene-topline,.scene-index,.story-hint,.scene-tags{display:none}
.story-copy{width:39%;max-width:470px}.story-copy h1{font-size:clamp(47px,4.9vw,74px);line-height:1.13;text-shadow:none}.story-copy h2{font-size:clamp(40px,4vw,60px);line-height:1.15}.story-copy h1 em,.story-copy h2 em{text-shadow:none;color:#c795f1}.story-copy p{font-size:13px;max-width:310px;line-height:1.95}.story-copy .pill{background:none;border:0;padding:0;font-size:8px;letter-spacing:1.6px;color:#a991b9}.story-copy .pill:before{display:none}.story-copy .eyebrow{font-size:8px}.story-copy .actions{margin-top:30px}.story-copy>.quiet-link{margin-top:26px}.scene-viewport{right:-5%;width:72%}.scene-stage{background:radial-gradient(ellipse at 76% 54%,#26133344,transparent 55%),#08080b}
.chapter-nav{gap:15px}.chapter-nav a{border:0;border-radius:0;background:none;width:25px;height:25px;color:#655970;font-size:8px}.chapter-nav a.current{box-shadow:none;color:#dbb9f5;border-bottom:1px solid #b278ff}
.scene-controls{min-width:210px;right:8%;bottom:79px;background:#110c17cc;border-color:#ffffff12;box-shadow:none;padding:12px 17px}.scene-controls>summary{font-size:10px;cursor:pointer;display:block;color:#b4a2c3;list-style:none}.scene-controls>summary:after{display:none}.scene-controls[open]>summary{margin-bottom:18px}.scene-controls .rotation-control button{font:9px Manrope,sans-serif}.scene-toggle{top:auto;bottom:32px;right:8%;border:0;background:none;color:#8b789b}.scene-caption{bottom:32px;font-size:6px;max-width:65%}.scene-caption>span:first-child{display:none}.scene-caption>span:last-child{text-align:left}.scene-caption a{pointer-events:auto}.scene-controls summary:focus-visible{outline:2px solid #b278ff}
@media(max-width:800px){.story-copy{width:100%;max-width:500px}.story-copy h1{font-size:46px}.story-copy h2{font-size:39px}.story-copy p{font-size:11px;max-width:290px}.scene-viewport{right:-7%;width:113%}.scene-controls{right:6%;bottom:66px;min-width:180px;padding:10px 13px}.scene-controls>summary{font-size:9px}.scene-toggle{right:6%;bottom:23px;font-size:7px}.scene-caption{bottom:23px;max-width:66%;font-size:5px}.chapter-nav{bottom:76px;gap:6px}.story-copy .actions{margin-top:23px}.story-copy .pill{font-size:7px}.story-panel{padding-top:135px}}
@media(max-width:480px){.story-copy h1{font-size:40px}.story-copy h2{font-size:35px}.story-copy p{font-size:11px;max-width:275px}.scene-controls{min-width:165px}.story-copy .btn{padding:12px 18px;font-size:10px}}
.story-panel{padding-top:150px}.scene-toggle{bottom:31px}
@media(max-width:800px){.story-panel{padding-top:168px}.story-copy h1{font-size:42px}.story-copy p{max-width:310px}.scene-viewport{height:47%;bottom:77px}}
@media(max-width:480px){.story-copy h1{font-size:38px}.story-copy p{font-size:10px;line-height:1.85}}
.scene-start{position:absolute;right:9%;bottom:130px;z-index:6;border:1px solid #c29cde66;border-radius:6px;color:#e6d6f2;background:#17101ef0;padding:13px 20px;font:600 12px Manrope,sans-serif;min-height:44px}.scene-start[hidden]{display:none}.scene-start:disabled{cursor:progress}.experience.is-static .scene-start{bottom:65px;right:6%}.experience.is-static .scene-caption{max-width:60%}
@media(max-width:800px){.scene-start{right:6%;bottom:115px}.experience.is-static .scene-start{bottom:60px}.scene-controls>summary{font-size:12px;min-height:28px;display:flex;align-items:center}.scene-toggle{min-height:44px;font-size:10px}.chapter-nav a{height:36px;width:30px;font-size:10px}}
.story-copy{max-width:440px}.story-copy h1{font-size:clamp(44px,4.9vw,73px);line-height:1.15}.story-copy h2{font-size:clamp(40px,4.4vw,64px);line-height:1.16}.story-copy p{max-width:300px;font-size:12px;margin-top:22px}.story-copy .eyebrow{display:none}.story-copy .actions{margin-top:27px}.scene-caption{opacity:.65}.chapter-nav{opacity:.65}.scene-controls>summary{font-size:11px}.scene-controls{background:#100b16aa;backdrop-filter:blur(8px)}
@media(max-width:800px){.story-panel{padding-top:120px}.story-copy h1{font-size:45px}.story-copy h2{font-size:40px}.story-copy p{font-size:11px;margin-top:16px}.scene-viewport{height:58%;bottom:75px}.story-copy{max-width:450px}.scene-caption{max-width:65%}}
@media(max-width:480px){.story-copy h1{font-size:39px}.story-copy h2{font-size:36px}.story-copy p{font-size:11px}.scene-viewport{height:55%;bottom:78px}}

/* A clear BMW photograph appears immediately, before the automatic 3D model. */
.scene-fallback{opacity:.8}.webgl-ready .scene-fallback{opacity:0}@media(max-width:800px){.scene-fallback{background-position:57% center}.scene-controls{backdrop-filter:none}.scene-stage:before{pointer-events:none}}