/* Scroll from the car scene into a studio product presentation. */
.focus-experience{height:200svh;position:relative;background:#080b09}
.focus-stage{height:100svh;min-height:650px;position:sticky;top:0;overflow:hidden;isolation:isolate;--focus-progress:0;--intro-opacity:1}
.focus-background{position:absolute;inset:0;z-index:-2;transform:scale(calc(1 + var(--focus-progress)*.65));transform-origin:55% 80%;will-change:transform}
.focus-background img{width:100%;height:100%;object-fit:cover;object-position:center 56%;filter:brightness(.65)}
.focus-stage:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(90deg,#030805d9,transparent 53%,#03080566),linear-gradient(0deg,#030805b3,transparent 40%)}
.focus-intro{position:absolute;top:125px;inset-inline-start:4%;max-width:160px;font-size:11px;line-height:1.5;color:#fff;opacity:var(--intro-opacity)}
.focus-heading{position:absolute;bottom:13%;inset-inline-start:4%;width:29%;opacity:var(--intro-opacity);transition:visibility .2s}
.focus-heading h2{font-family:Fraunces,Georgia,serif;font-size:clamp(42px,4.7vw,78px);line-height:.91;font-weight:400;letter-spacing:-.05em;color:#e9ed9b;text-transform:uppercase}
.focus-heading>p{font-size:11px;line-height:1.75;max-width:230px;color:#e3e3d9;margin-top:30px}
.focus-vignette{position:absolute;inset-inline-end:4%;bottom:12%;width:150px;opacity:var(--intro-opacity)}
.focus-vignette>p{font-size:10px;line-height:1.6;margin-bottom:15px;color:#fff}
.focus-vignette button:not(.focus-text-button){width:150px;height:185px;background:#f9f7f0;border-radius:50px;border:0;overflow:hidden;padding:0;cursor:pointer}
.focus-vignette img{width:100%;height:100%;object-fit:cover;object-position:24% 50%}
.focus-text-button{background:none;border:0;color:#fff;font:13px 'Cormorant Garamond',serif;cursor:pointer;margin-top:13px;padding:6px 0}
.focus-hotspot{position:absolute;left:55%;top:63%;transform:translate(-50%,-50%);border:1px solid #fff9;background:#0004;color:white;border-radius:50%;width:48px;height:48px;cursor:pointer;opacity:var(--intro-opacity);font-size:25px}
.focus-hotspot:hover{background:#0009}.focus-hint{position:absolute;bottom:30px;inset-inline:4%;display:flex;justify-content:space-between;font-size:10px;color:#deded3;opacity:var(--intro-opacity)}
.focus-panel{position:absolute;inset-block:0;inset-inline-start:0;width:35%;max-width:540px;background:#faf9f5;color:#181a16;padding:24px 28px;display:flex;flex-direction:column;transform:translateX(-105%);visibility:hidden;transition:transform .65s cubic-bezier(.22,.61,.36,1),visibility .65s;z-index:8;overflow-y:auto}
.detail-visible .focus-panel{transform:translateX(0);visibility:visible}
.detail-visible .focus-heading,.detail-visible .focus-intro,.detail-visible .focus-vignette,.detail-visible .focus-hotspot{visibility:hidden}
.focus-back{align-self:flex-start;border:0;background:none;color:#555a51;font:10px Manrope,sans-serif;padding:8px 0;cursor:pointer;margin-bottom:25px}
.focus-panel-copy>p:first-child{font-size:10px;color:#646a60;margin-bottom:8px}.focus-panel h2{font-size:clamp(28px,3vw,44px);line-height:1.03;margin-bottom:14px}.focus-panel-copy>p:last-child{font-size:11px;line-height:1.65;color:#646a60}
.focus-product{width:100%;min-height:0;flex:1;object-fit:contain;margin:25px 0;max-height:55vh}
.focus-shop{background:#171b17;color:#fff;padding:15px 18px;font-size:11px;display:flex;justify-content:space-between;gap:20px}.focus-film-link{font-size:10px;color:#555a51;padding-top:15px;text-align:center}
.focus-stage button:focus-visible{outline:3px solid #c3c877;outline-offset:5px}
:lang(ar) .focus-panel{transform:translateX(105%)}:lang(ar) .detail-visible .focus-panel{transform:none}:lang(ar) .focus-heading h2{font-family:'Noto Sans Arabic',sans-serif;font-size:clamp(35px,3.8vw,60px);line-height:1.45;letter-spacing:0}:lang(ru) .focus-heading h2{font-family:'Noto Serif',serif;font-size:clamp(36px,3.8vw,62px)}
@media(max-width:600px){.focus-experience{height:180svh}.focus-stage{min-height:620px}.focus-intro{top:135px;font-size:10px;width:120px}.focus-heading{width:64%;bottom:15%;inset-inline-start:6%}.focus-heading h2{font-size:43px}.focus-heading>p{font-size:10px;max-width:190px;margin-top:20px}.focus-vignette{width:80px;inset-inline-end:5%;bottom:16%}.focus-vignette>p{font-size:8px}.focus-vignette button:not(.focus-text-button){width:80px;height:100px;border-radius:28px}.focus-text-button{font-size:11px;line-height:1.4}.focus-hotspot{top:51%;left:55%;width:38px;height:38px}.focus-background img{object-position:50% 50%}.focus-background{transform-origin:55% 53%}.focus-panel{width:85%;max-width:340px;padding:20px}.focus-panel h2{font-size:33px}.focus-product{max-height:45vh}.focus-hint{font-size:9px}.focus-back{margin-bottom:18px}:lang(ar) .focus-heading h2{font-size:34px}:lang(ru) .focus-heading h2{font-size:35px}}
@media(prefers-reduced-motion:reduce){.focus-panel{transition:none}.focus-background{will-change:auto}}
.real-product-pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#171b17}.real-product-pair img{width:100%;height:auto}@media(max-width:600px){.real-product-pair{grid-template-columns:1fr}}

/* The immersive car scene lives inside the original light editorial layout. */
.focus-experience{margin-top:65px}.focus-heading h2{text-transform:none;letter-spacing:-.035em;line-height:1.1;font-size:clamp(38px,4.3vw,66px)}.focus-stage{min-height:600px}.hero-image>img{object-position:center 53%}.real-product-details{padding-top:30px}.focus-intro{top:35px}.focus-background img{filter:brightness(.8)}
@media(max-width:600px){.focus-experience{margin-top:45px}.focus-heading h2{font-size:36px}.focus-intro{top:30px}.hero-image>img{object-position:center 50%}}
/* Luxury scene: the complete charm swings around its cord attachment. */
.focus-world{position:absolute;inset:0;z-index:-2;transform:scale(calc(1 + var(--focus-progress)*1.5));transform-origin:50% 48%;will-change:transform}
.focus-background{transform:none;filter:blur(calc(var(--focus-progress)*3px))}
.focus-background img{object-position:center;filter:brightness(.82)}
.hanging-product{position:absolute;top:16%;left:50%;width:clamp(130px,15vw,240px);height:53%;transform:translateX(-50%)}
.hanging-product img{display:block;width:100%;height:100%;object-fit:contain;object-position:center top;transform-origin:50% 0;animation:charm-sway 5s ease-in-out infinite;filter:drop-shadow(3px 7px 5px #0003)}
@keyframes charm-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.focus-stage:before{content:'';position:absolute;inset:0;background:#f5f2ec;opacity:var(--product-reveal,0);z-index:-1;pointer-events:none}
.detail-visible .focus-world{z-index:0;pointer-events:none}
.detail-visible .focus-background{opacity:0;transition:opacity .55s}
.detail-visible .hanging-product{left:62%;transition:left .65s}
.detail-visible .hanging-product img{animation-play-state:paused;filter:drop-shadow(2px 8px 6px #0002)}
.focus-stage:after{opacity:calc(1 - var(--product-reveal,0))}
.focus-heading h2{color:#f5f2ec}.focus-hotspot{left:50%;top:62%}
.focus-vignette img{object-fit:contain;object-position:center;padding:10px}
.focus-text-button{font-family:Manrope,sans-serif}
.focus-product{background:#f1eee6;border-radius:3px;padding:16px}
.focus-shop{background:#123c9c}
@media(max-width:600px){.focus-world{transform-origin:50% 48%}.hanging-product{width:145px;height:48%;top:17%}.focus-heading{bottom:12%}.focus-hotspot{top:48%}.detail-visible .hanging-product{left:60%}.focus-background img{object-position:50% center}}
@media(prefers-reduced-motion:reduce){.hanging-product img{animation:none}.focus-world{will-change:auto}.detail-visible .hanging-product,.detail-visible .focus-background{transition:none}}
.focus-stage{background:#f5f2ec}
.focus-stage:before{display:none}
.focus-world{transform-origin:50% 58%}
.focus-background{opacity:calc(1 - var(--product-reveal,0))}
.hanging-product{top:18%;width:35svh;height:53svh;max-width:34vw}
.detail-visible .focus-world{z-index:-2}
.detail-visible .hanging-product{left:58%}
@media(max-width:600px){.hanging-product{top:18%;width:32svh;height:48svh;max-width:65vw}.focus-world{transform-origin:50% 58%}}
/* Official 2026 320i render: mirror x526..754 in a 1280x768 image.
   Turtle width target = 16% of mirror width; listing crops only give an upper bound. */
.focus-world{width:max(100%,166.667svh);height:100%;left:50%;right:auto;container-type:inline-size;transform:translateX(-50%) scale(calc(1 + var(--focus-progress)*5));transform-origin:50% 26%}
.focus-background img{object-fit:fill;filter:brightness(.95)}
.hanging-product{left:50%;top:12%;width:6.1%;height:auto;max-width:none;aspect-ratio:2/3;padding-top:2.6cqw;box-sizing:content-box;transform:translateX(-50%);transform-origin:50% 0;animation:charm-sway-positioned 5s ease-in-out infinite}
.hanging-product:before,.hanging-product:after{content:'';position:absolute;top:0;height:2.7cqw;width:1px;background:#b28e45;left:45%;transform:rotate(-3deg);transform-origin:top;box-shadow:1px 0 #e8cf87}
.hanging-product:after{left:55%;transform:rotate(3deg)}
.hanging-product img{height:auto;animation:none;transform:none}
@keyframes charm-sway-positioned{0%,100%{transform:translateX(-50%) rotate(-1.5deg)}50%{transform:translateX(-50%) rotate(1.5deg)}}
.detail-visible .hanging-product{left:52%;animation-play-state:paused}
.focus-hotspot{left:50%;top:29%;width:36px;height:36px;font-size:20px}
@media(max-width:600px){.focus-world{transform-origin:50% 26%}.hanging-product{top:12%;width:6.1%;height:auto;max-width:none}.detail-visible .hanging-product{left:51%}.focus-hotspot{top:29%}.focus-heading{bottom:14%}}
@media(prefers-reduced-motion:reduce){.hanging-product{animation:none}}
/* User confirmed turtle body: height 3 cm, width 2.5 cm.
   Smaller scene scale; original product cord meets the underside of the mirror directly. */
.focus-world{transform:translateX(-50%) scale(calc(1 + var(--focus-progress)*8));transform-origin:50% 17%}
.hanging-product{top:12.1%;width:4.2%;padding-top:0;aspect-ratio:2/3}
.hanging-product:before,.hanging-product:after{display:none}
.focus-hotspot{top:21%;width:26px;height:26px;font-size:16px}
.focus-panel-copy .product-size{margin-top:12px;font-size:12px;color:#454b43}
@media(max-width:600px){.focus-world{transform-origin:50% 17%}.hanging-product{top:12.1%;width:4.2%;padding-top:0}.focus-hotspot{top:21%}}
/* Cord begins below the mirror's lower black rim, never on the glass. */
.hanging-product{top:12.65%}
.focus-background{filter:none}
@media(max-width:600px){.hanging-product{top:12.65%}}