/* KAILU 3D sleeve: hero component. Pairs with sleeve-3d.js.
   Sits in .stage where .product-scene used to, with the same footprint and edge fades.
   Add data-mono to the mount to render it greyscale like the rest of the site's imagery. */
.journey--3d{height:auto}
.journey--3d .stage{position:relative}
.sleeve-3d{position:absolute;right:-2vw;bottom:0;z-index:1;width:min(70vw,calc(100svh * 1.4222));aspect-ratio:1280/900;
  --fade:linear-gradient(90deg,transparent 0%,#000 18%),linear-gradient(0deg,transparent 0%,#000 12%),linear-gradient(180deg,transparent 0%,#000 12%)}
.sleeve-3d__poster,.sleeve-3d__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;
  -webkit-mask-image:var(--fade);-webkit-mask-composite:source-in,source-in;mask-image:var(--fade);mask-composite:intersect}
.sleeve-3d__poster{transition:opacity .6s var(--ease)}
.sleeve-3d__canvas{opacity:0;transition:opacity .6s var(--ease);cursor:grab;outline:none}
.sleeve-3d__canvas:active{cursor:grabbing}
.sleeve-3d.is-live .sleeve-3d__canvas{opacity:1}
.sleeve-3d.is-live .sleeve-3d__poster{opacity:0;pointer-events:none}
.sleeve-3d[data-mono] .sleeve-3d__canvas,.sleeve-3d[data-mono] .sleeve-3d__poster{filter:grayscale(1)}

/* Hotspots: same white ring language as the leader lines */
.sleeve-3d__hotspots{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .6s var(--ease) .3s}
.sleeve-3d.is-live .sleeve-3d__hotspots{opacity:1}
.sleeve-3d__hotspot{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;pointer-events:auto;border-radius:50%;transition:opacity .3s var(--ease)}
.sleeve-3d__hotspot.is-hidden{opacity:0;pointer-events:none}
.sleeve-3d__dot{position:relative;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.12);border:1.25px solid var(--accent);display:grid;place-items:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .3s var(--ease),background .3s}
.sleeve-3d__dot::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent)}
.sleeve-3d__dot::before{content:'';position:absolute;inset:-1.25px;border-radius:50%;border:1.25px solid var(--accent);opacity:0;animation:sleeve-ping 2.8s var(--ease) infinite}
.sleeve-3d.is-touched .sleeve-3d__dot::before{animation:none}
@keyframes sleeve-ping{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.1);opacity:0}}
.sleeve-3d__label{position:absolute;left:38px;top:50%;transform:translate(-6px,-50%);white-space:nowrap;padding:8px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--hairline-dark);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);color:var(--snow);font:500 14px/1.2 var(--font);letter-spacing:-.01em;opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.sleeve-3d__hotspot.is-left .sleeve-3d__label{left:auto;right:38px;transform:translate(6px,-50%)}
.sleeve-3d__hotspot:hover .sleeve-3d__dot,.sleeve-3d__hotspot.is-open .sleeve-3d__dot{transform:scale(1.12);background:rgba(255,255,255,.24)}
.sleeve-3d__hotspot:hover .sleeve-3d__label,.sleeve-3d__hotspot:focus-visible .sleeve-3d__label,.sleeve-3d__hotspot.is-open .sleeve-3d__label{opacity:1;transform:translate(0,-50%)}
.sleeve-3d__hotspot:focus-visible{outline-offset:-6px}

/* Tablet */
@media(max-width:1068px){.sleeve-3d{width:min(76vw,calc(100svh * 1.4222))}}
/* Phone: copy on top, model fills the space between it and the dock */
@media(max-width:734px){
  .sleeve-3d{left:0;right:0;width:auto;aspect-ratio:auto;top:calc(var(--nav-h) + 210px);bottom:84px;
    --fade:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%)}
  .sleeve-3d__poster,.sleeve-3d__canvas{-webkit-mask-composite:source-over;mask-composite:add}
  .sleeve-3d__label{font-size:13px;padding:7px 12px}
}
@media(prefers-reduced-motion:reduce){.sleeve-3d__dot::before{animation:none}}