/* Angled showroom blocks. Only the frame is angled; product images keep their proportions. */
.brand-grid{gap:0;background:#fff;padding:0}
.brand-panel,.selection-ghost{--card-ground:#ededee;background:var(--card-ground);color:var(--ink)}
[data-brand=upmoto]{--card-ground:#e3e3e5}
[data-brand=kove]{--card-ground:#f2f2f3}
[data-brand=kayo]{--card-ground:#e5e5e7}
.brand-panel{height:clamp(460px,calc(100svh - 245px),680px);animation:cardFall 650ms var(--delay) var(--ease) both}
.brand-panel:after{display:none}
.brand-panel .panel-photo,.selection-ghost .panel-photo{inset:105px 20px 125px;filter:none;background:none;display:flex;align-items:center;justify-content:center;mix-blend-mode:darken}
.panel-scene{width:100%;height:100%;object-fit:contain;animation:sceneDrift 14s ease-in-out infinite alternate}
/* Hide only the ground below the original tire contours; retain photo detail. */
[data-brand=loncin] .panel-scene,[data-brand=kove] .panel-scene{mask-size:contain;mask-repeat:no-repeat;mask-position:center}
[data-brand=loncin] .panel-scene{mask-image:url('assets/loncin-shadow-mask.svg')}
[data-brand=kove] .panel-scene{mask-image:url('assets/kove-shadow-mask.svg')}
.brand-panel:hover .panel-photo{filter:none}
.brand-kind{color:#535358}
.brand-logo .loncin-logo img,.brand-panel[data-brand=upmoto] .brand-logo img,.selection-ghost[data-brand=upmoto] .brand-logo img{filter:none}
.brand-logo .logo-color{display:none}
.panel-action{min-height:44px}
.brand-panel:before{height:5px;inset:auto 28px 24px;transform:scaleX(.24);width:70px}
.brand-panel:focus-visible{outline:4px solid var(--accent);outline-offset:-8px}
@keyframes cardFall{from{opacity:0;transform:translateY(-80px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:981px){
 .brand-stage{--slant:clamp(60px,6vw,110px)}
 .brand-grid{width:calc(100% + var(--slant));margin-left:calc(var(--slant) * -1)}
 .brand-panel{width:calc(100% + var(--slant));clip-path:polygon(var(--slant) 0,100% 0,calc(100% - var(--slant)) 100%,0 100%)}
 .brand-panel:first-child .brand-logo{left:calc(var(--slant) + 30px);right:30px}
 .brand-logo{left:calc(var(--slant) + 16px);right:24px}
 .panel-content{left:calc(var(--slant) + 24px);right:calc(var(--slant) + 24px);bottom:38px}
 .brand-panel .panel-photo,.selection-ghost .panel-photo{left:calc(var(--slant) * .65 + 10px);right:calc(var(--slant) * .65 + 10px)}
 .brand-panel:first-child .panel-photo{left:calc(var(--slant) + 16px)}
 .brand-panel:last-child .panel-photo{right:calc(var(--slant) + 24px)}
 .brand-panel:last-child .brand-logo{right:calc(var(--slant) + 16px)}
 .brand-panel:before{left:calc(var(--slant) + 24px)}
 .is-selected .brand-grid{width:100%;margin:0}
 .is-selected .brand-panel{width:34%}
 .is-selected .brand-panel.is-chosen{clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}
 .is-selected .brand-logo{left:32px;right:60px}
 .is-selected .panel-content{left:36px;right:72px}
 .is-selected .brand-panel .panel-photo{inset:120px 50px 140px 20px}
 .selection-inner{padding-left:clamp(54px,5vw,90px)}
}
@media(max-width:980px){
 .brand-panel{height:390px;clip-path:polygon(24px 0,100% 0,calc(100% - 24px) 100%,0 100%)}
 .brand-panel .panel-photo{inset:90px 20px 100px}
 .panel-content{left:24px;right:32px;bottom:24px}
 .brand-panel:before{display:none}
 .is-selected .brand-panel.is-chosen{clip-path:none}
 .is-selected .panel-photo{inset:12px 20px 12px 52%;background:none;filter:none}
 .is-selected .panel-scene,.is-selected [data-brand=kayo] .panel-scene{display:block;width:100%;height:100%;margin:0;object-fit:contain}
 .is-selected .brand-logo{width:38%;left:24px;right:auto}
 .is-selected .panel-content{width:42%;left:24px;right:auto}
}
@media(max-width:700px){
 .brand-panel{height:310px;clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%)}
 .brand-logo{left:24px;right:20px;height:30px}
 .brand-panel .panel-photo{inset:75px 10px 100px}
 .panel-content{left:20px;right:22px;bottom:18px}
 .brand-kind{font-size:13px;min-height:40px;margin-bottom:0}
 .panel-action{font-size:13px;gap:4px}
 .is-selected .panel-photo{inset:16px 12px 16px 48%}
}
@media(prefers-reduced-motion:reduce){.brand-panel,.panel-scene{animation:none}.brand-panel:hover .panel-scene{transform:none}}

/* Preserve the landing page's geometry while the brand reveal previews on hover. */
.brand-stage.is-selected.is-hover-preview{height:var(--preview-height);min-height:var(--preview-height)}
.is-hover-preview .selection-detail{height:100%;min-height:0;overflow:auto;overscroll-behavior:contain}
.is-hover-preview .selection-inner{min-height:100%;padding-top:20px;padding-bottom:24px;gap:20px}
.is-hover-preview .selection-copy h2{font-size:clamp(30px,3.1vw,48px);max-width:18ch;margin:0 0 16px;line-height:1.05}
.is-hover-preview .selection-copy p{font-size:16px}
.is-hover-preview .selection-model-image{height:clamp(110px,10vw,165px);margin-bottom:14px}
.is-hover-preview .selection-models{margin-top:0}
.is-hover-preview .selection-model-heading{margin-bottom:12px}
.is-hover-preview .selection-model p{margin:10px 0 8px}
.is-hover-preview .selection-bottom{padding-top:8px;gap:20px}
.is-hover-preview .brand-panel.is-chosen{width:48%}
.is-hover-preview .selection-detail{margin-left:42%;width:58%}
.is-hover-preview .panel-content{display:none}
.is-hover-preview .brand-panel .panel-photo{inset:110px 64px 50px 24px}
.brand-preview-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.is-hover-preview .brand-preview-inner{position:relative;isolation:isolate;height:100%;padding:24px clamp(40px,5vw,80px) 32px;gap:24px;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,.24),transparent 35%,rgba(0,0,0,.18) 50%,rgba(0,0,0,.85) 100%)}
.brand-preview-inner>.selection-back{align-self:flex-end;position:relative;z-index:1;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:15px;color:#fff;background:#242424}
.brand-preview-inner>.selection-back:hover{background:#242424}
.brand-preview-copy{margin:auto 0 0;display:flex;flex-direction:column;align-items:flex-start;padding:0}
.brand-preview-copy h2{font-size:clamp(40px,4vw,60px);line-height:1;letter-spacing:-.04em;color:#fff}
.brand-preview-copy p{margin-top:12px;font-size:18px;color:#fff}
.brand-store-button{margin-top:24px;min-width:230px}