/* Scroll window: the hero recedes and the AR mosaic assembles inside it. */
.showcase-scroll{--showcase-top:92px;position:relative;height:190svh;margin-bottom:0;background:transparent}
.showcase-sticky{position:sticky;top:var(--showcase-top);height:calc(100svh - var(--showcase-top));overflow:visible}
.showcase-window{position:absolute;left:0;top:0;width:100%;height:calc(100% - 18px);overflow:hidden;border-radius:30px;background:#080808;box-shadow:0 25px 35px #0002;isolation:isolate;will-change:left,top,width,height,border-radius,box-shadow}
.showcase-window>.hero{position:absolute;z-index:2;inset:0;padding:0;pointer-events:auto}
.showcase-window .hero-media{width:100%;height:100%;border-radius:inherit;box-shadow:none;will-change:opacity,transform}
.showcase-window .hero-photo{will-change:opacity,transform}.showcase-window .hero-copy,.showcase-window .hero-caption{will-change:opacity,transform}
.showcase-window>.bento{position:absolute;z-index:3;left:50%;top:50%;width:min(980px,calc(100vw - 104px));height:min(650px,calc(100svh - 150px));display:grid;margin:0;padding:0;gap:10px;grid-template-columns:1fr 1fr 1.7fr;grid-template-rows:minmax(0,.95fr) minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:'brand props live' 'words words live' 'motion slogan slogan';opacity:0;pointer-events:none;transform:translate(-50%,calc(-50% + 150px)) skewX(-3deg);transform-origin:50% 50%;will-change:opacity,transform,clip-path;clip-path:polygon(3% 0,100% 2%,98% 97%,1% 100%)}
.showcase-window .bento>div{min-width:0;min-height:0;will-change:opacity,transform;box-shadow:0 16px 38px #0004}
.showcase-window .bento-live,.showcase-window .bento-props,.showcase-window .bento-motion{padding:0}
.showcase-window .word-strip span{height:clamp(70px,12vh,100px);line-height:clamp(70px,12vh,100px)}
.showcase-window .service-placeholder{min-height:0}
.showcase-scroll:after{content:'ВНУТРИ AR';position:absolute;z-index:5;left:50%;bottom:calc(100svh + 20px);translate:-50% 0;font-size:7px;letter-spacing:.18em;color:#6f6f6f;opacity:var(--showcase-label,0);pointer-events:none}
body[data-page]:not([data-page=home]) .showcase-scroll{height:0;overflow:hidden}

@media(max-width:850px){
 .showcase-scroll{--showcase-top:92px;height:190svh}.showcase-window>.bento{width:min(760px,calc(100vw - 52px));height:min(670px,calc(100svh - 124px));grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,.9fr) minmax(0,1.4fr) minmax(0,.9fr) minmax(0,.9fr);grid-template-areas:'brand props' 'live live' 'words words' 'motion slogan';padding:0;gap:9px}
 .showcase-window .bento-brand .logo-letters{height:68px;font-size:77px}.showcase-window .bento-brand .logo-r{left:49px}
}
@media(max-width:600px){
 .showcase-scroll{--showcase-top:76px;height:185svh}.showcase-sticky{height:calc(100svh - var(--showcase-top))}.showcase-window{height:calc(100% - 12px);border-radius:23px}
 .showcase-window>.bento{width:calc(100vw - 28px);height:min(610px,calc(100svh - 106px));padding:0;gap:7px;grid-template-rows:minmax(0,.82fr) minmax(0,1.48fr) minmax(0,.88fr) minmax(0,.88fr)}
 .showcase-window .bento>div{border-radius:15px}.showcase-window .logo-loop{gap:5px}.showcase-window .bento-brand .logo-letters{height:52px;width:84px;font-size:58px}.showcase-window .bento-brand .logo-r{left:36px}.showcase-window .logo-lockup strong{font-size:7px}.showcase-window .logo-lockup>span{font-size:4px}
 .showcase-window .word-strip span{height:62px;line-height:62px;font-size:42px}.showcase-window .bento-slogan{padding:15px}.showcase-window .bento-slogan>span{font-size:17px}.showcase-window .bento-slogan strong{font-size:27px}
}
@media(prefers-reduced-motion:reduce){
 .showcase-scroll{height:auto;margin-bottom:0}.showcase-sticky{position:relative;height:auto}.showcase-window{position:relative;left:auto!important;top:auto;width:100%!important;height:auto!important;border-radius:0!important;overflow:visible;background:transparent;box-shadow:none!important}
 .showcase-window>.hero{position:relative;inset:auto;padding-bottom:22px}.showcase-window .hero-media{height:590px;border-radius:23px}.showcase-window>.bento{position:relative;inset:auto;width:100%;height:auto;opacity:1!important;transform:none!important;clip-path:none!important;pointer-events:auto!important;padding:45px 0 65px}.showcase-window .bento>div{opacity:1!important;transform:none!important}.showcase-scroll:after{display:none}
}

.showcase-window>.bento{perspective:900px;transform-style:preserve-3d;clip-path:none!important}.showcase-window .bento>div{transform-origin:50% 100%;backface-visibility:hidden}

/* Opt-in flythrough: the real grid stays behind the departing hero. */
.showcase-scroll[data-scene=flythrough] .showcase-window>.hero{z-index:4}
.showcase-scroll[data-scene=flythrough] .hero-media{background:transparent}
.showcase-scroll[data-scene=flythrough] .hero-photo{z-index:2}
.showcase-scroll[data-scene=flythrough] .hero-shade{z-index:3}
.showcase-scroll[data-scene=flythrough] .hero-copy{z-index:4}
.showcase-scroll[data-scene=flythrough] .logo-a,.showcase-scroll[data-scene=flythrough] .logo-r{animation:none;opacity:1;transform:none}
.showcase-scroll[data-scene=flythrough] .logo-echo{display:none}

/* Keep both scene variants behind the departing first-screen composition. */
.showcase-window>.hero{z-index:4}
.showcase-window .hero-media{background:transparent}
.showcase-window{will-change:auto;box-shadow:none}
@media(prefers-reduced-motion:reduce){
 .showcase-sticky{top:0}
 .showcase-window>.bento{grid-template-rows:170px 190px 170px;transform-style:flat;perspective:none;will-change:auto}
 .showcase-window .bento>div{will-change:auto}
}
@media(prefers-reduced-motion:reduce) and (max-width:850px){.showcase-window>.bento{grid-template-rows:150px 240px 150px 150px}}