/* ---------- hero: orbit turntable showcase ---------- */
.hero .stage{perspective:1400px;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.hero .ghost{opacity:.45}

/* big outlined series code that fills with water as autoplay progresses */
.orb-code{position:absolute;left:50%;top:6%;transform:translateX(-50%);z-index:1;pointer-events:none;font-family:Outfit,sans-serif;font-weight:900;line-height:.8;letter-spacing:0;font-size:clamp(7.5rem,32vw,14rem);white-space:nowrap}
@media(min-width:1024px){.orb-code{top:3%;font-size:clamp(11rem,14vw,14rem)}}
.oc-word{position:absolute;left:50%;top:0;transform:translateX(-50%);display:flex}
.oc-word .oc-l{display:block;position:relative;overflow:hidden;padding:0 .03em .06em;margin-right:-.07em}
.oc-word .oc-l>span{display:block;color:transparent;-webkit-text-stroke:1.5px rgba(14,165,233,.42);transform:translateY(105%) skewY(8deg);animation:ocIn 1.1s var(--ease) forwards;animation-delay:calc(.28s + var(--i) * 70ms)}
.oc-word .oc-l>span::after{content:attr(data-c);position:absolute;inset:0;color:rgba(125,211,252,.30);-webkit-text-stroke:0;clip-path:inset(calc((1 - var(--p,0)) * 100%) 0 0 0)}
.oc-word.out .oc-l>span{animation:ocOut .6s var(--ease) forwards;animation-delay:calc(var(--i) * 45ms)}
@keyframes ocIn{to{transform:none}}
@keyframes ocOut{from{transform:none}to{transform:translateY(-108%) skewY(-6deg)}}
.orb-code .oc-meta{position:absolute;left:100%;top:.2em;margin-left:.2em;font-size:12px;letter-spacing:.2em;font-weight:600;color:var(--mist);-webkit-text-stroke:0;white-space:nowrap;line-height:1.6}
.orb-code .oc-meta b{display:block;color:var(--deep);font-weight:700}

/* turntable ellipse + position markers */
.orb-track{position:absolute;left:50%;top:0;width:0;height:0;z-index:1;pointer-events:none}
.orb-track .ot-ring{position:absolute;left:0;top:0;border-radius:50%;border:1px solid rgba(14,165,233,.28);transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(255,255,255,.9),rgba(255,255,255,0) 70%)}
.orb-track .ot-ring.r2{border:1px dashed rgba(15,27,45,.12);background:none}
.orb-track .ot-dot{position:absolute;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;border:1.5px solid rgba(14,165,233,.6);transition:width .5s var(--ease),height .5s var(--ease),margin .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease)}
.orb-track .ot-dot.on{width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--water);border-color:#fff;box-shadow:0 0 0 6px rgba(14,165,233,.14),0 0 22px rgba(14,165,233,.55)}

/* arrival ripple at the front foot */
.orb-ripple{position:absolute;left:50%;top:0;width:0;height:0;z-index:1;pointer-events:none}
.orb-ripple i{position:absolute;left:0;top:0;width:300px;height:64px;margin:-32px 0 0 -150px;border-radius:50%;border:1.5px solid rgba(14,165,233,.55);opacity:0;transform:scale(.15)}
.orb-ripple.go i{animation:orbRip 1.5s var(--ease-out) forwards}
.orb-ripple.go i:nth-child(2){animation-delay:.16s}
.orb-ripple.go i:nth-child(3){animation-delay:.32s;border-color:rgba(125,211,252,.6)}
@keyframes orbRip{0%{opacity:0;transform:scale(.15)}12%{opacity:1}100%{opacity:0;transform:scale(1.25)}}

/* the carousel */
.hero .product{animation:productIn 1.6s var(--ease-out) .3s forwards}
.orbit{position:relative;width:100%;height:330px;isolation:isolate;transform:rotateX(calc(var(--ty,0) * -5deg)) rotateY(calc(var(--tx,0) * 7deg));transition:transform .9s var(--ease-out)}
@media(min-width:1024px){.orbit{height:430px}}
.orb{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;transform-origin:50% 85%;will-change:transform,opacity,filter;cursor:pointer}
.orb.front{cursor:default}
.orb-body{position:absolute;inset:0}
.orb.front .orb-body{animation:orbBob 6s ease-in-out infinite}
@keyframes orbBob{50%{transform:translateY(-10px)}}
.hero .orb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:none;transition:none;opacity:1;transform:none;pointer-events:none;-webkit-user-drag:none}
.orb-sheen{position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;background:linear-gradient(104deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.95) 47%,rgba(224,242,254,.85) 50%,rgba(255,255,255,0) 60%);background-size:320% 100%;background-position:130% 0;opacity:0}
.orb.sweep .orb-sheen{animation:orbSheen 1.5s var(--ease) forwards}
@keyframes orbSheen{0%{opacity:1;background-position:130% 0}85%{opacity:1}100%{opacity:0;background-position:-30% 0}}
.orb-shadow{position:absolute;left:18%;right:18%;bottom:2%;height:26px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(15,27,45,.22),rgba(15,27,45,0) 70%);opacity:var(--sh,0)}

/* price chip + tab progress driven by JS (no CSS timers, no hover pause) */
.stage-price .sp-bar i{animation:none!important;transform:scaleX(var(--p,0))}
.series-tabs button.on::after{animation:none!important;transform:scaleX(var(--p,0));background:var(--water);height:2px}
.series-tabs button.on::after{left:14px;right:14px;width:auto;bottom:4px;border-radius:2px}
.series-tabs button:focus-visible{outline:2px solid var(--water);outline-offset:3px}
.stage-price b,.stage-price small,.sl-key{display:inline-flex;flex-wrap:nowrap;white-space:nowrap}
.sl-txt{display:block}
.tw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.tw>span{display:inline-block;transform:translateY(105%);animation:twIn .75s var(--ease) forwards;animation-delay:calc(var(--i) * 32ms)}
.tw-out .tw>span{animation:twOut .3s var(--ease) forwards;animation-delay:calc(var(--i) * 12ms)}
@keyframes twIn{from{transform:translateY(105%)}to{transform:none}}
@keyframes twOut{from{transform:none}to{transform:translateY(-105%)}}
.stage-price .sp-idx{font-family:Outfit,sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--mist)}

@media(max-width:1023px){
  .orb-code .oc-meta{display:none}
}
@media(prefers-reduced-motion:reduce){
  .orbit{transition:none}
  .orb.front .orb-body,.orb.sweep .orb-sheen,.orb-ripple.go i{animation:none}
  .tw>span,.tw-out .tw>span,.oc-word .oc-l>span,.oc-word.out .oc-l>span{animation:none;transform:none}
  .oc-word.out{display:none}
  .series-tabs button.on::after,.stage-price .sp-bar{display:none}
}
.tw+.tw{margin-left:.26em}
.tw.ch+.tw.ch{margin-left:0}
/* .hero-in's shorthand padding was wiping .wrap's side gutters */
@media(max-width:767px){.hero-in.wrap{padding-left:24px;padding-right:24px}}
@media(min-width:768px) and (max-width:1023px){.hero-in.wrap{padding-left:40px;padding-right:40px}}