/* The three-can SCADS Hero Stage. All styling is restricted to #range. */
#range .range-heading{padding-bottom:30px}
#range .range-stage{padding-top:12px;background:#f6f4ed;isolation:isolate}
#range .colour-current-route,#range .expression-atmospheres,#range .expression-orbit{display:none!important}
#range .range-display.installation-ready{height:510px;overflow:visible}
#range .installation-can{width:158px!important;top:48%!important;transform:translate(-50%,-50%) translateX(var(--shift)) scale(var(--scale));transition:transform .9s cubic-bezier(.22,.7,.2,1),opacity .9s,filter .9s!important}
#range .installation-can[data-slot=centre]{--shift:0px;--scale:1;opacity:1;filter:none;z-index:5}
#range .installation-can[data-slot=left]{--shift:clamp(-205px,-16vw,-155px);--scale:.83;opacity:.76;filter:blur(.25px);z-index:3}
#range .installation-can[data-slot=right]{--shift:clamp(155px,16vw,205px);--scale:.83;opacity:.76;filter:blur(.25px);z-index:3}
#range .installation-can[data-slot=hidden]{visibility:hidden!important;opacity:0!important;pointer-events:none;--scale:.55}
#range .installation-can>.can{animation:none;filter:drop-shadow(2px 15px 10px #6a5b4025)}
#range .installation-can[data-slot=centre]>.can{animation:none;filter:drop-shadow(2px 18px 12px #6a5b4030);translate:calc(var(--field-x,0)*2px) 0;transition:translate 1.2s ease-out}
@keyframes hero-stage-breath{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
#range .installation-can[data-slot=centre]>.can:after{content:'';position:absolute;inset:1% 0;pointer-events:none;border-radius:25% / 4%;box-shadow:inset 1px 0 1px #ead7a936,inset -1px 0 1px #fdf9ef40;opacity:.35}
#range .can-reflection{opacity:0}
#range .installation-can[data-slot=centre] .can-reflection{opacity:.045}
#range .range-display:before{bottom:33px;width:175px;height:16px;border:0;background:radial-gradient(ellipse,#89745116,transparent 70%)}
#range .hero-stage-route{position:absolute;left:50%;bottom:3px;translate:-50% 0;width:min(970px,105%);height:120px;pointer-events:none;z-index:0;overflow:visible}
#range .stage-base{stroke:#b49a6250;stroke-width:.65}
#range .stage-back{stroke:#b49a622a;stroke-width:.6}
#range .stage-lock-line,#range .stage-world-line{stroke:#b49a62;stroke-width:1;stroke-dasharray:18 82;opacity:0}
#range .stage-world-line{stroke:var(--gallery-accent)}
#range .stage-side-node{fill:#b49a62;opacity:.45}
#range .stage-lock-node{fill:#b49a62;opacity:.65}
#range .stage-lock-ring{stroke:#b49a62;stroke-width:.6;opacity:.25}
#range.stage-locking .stage-lock-line{animation:stage-route-lock .65s ease-out .9s both}
#range.stage-locking .stage-world-line{animation:stage-route-lock .7s ease-out 1.15s both}
#range.stage-locking .stage-lock-node{animation:stage-node-lock .8s ease-out 1.05s both}
#range .hero-stage-tint{position:absolute;bottom:37px;left:50%;translate:-50% 0;width:160px;height:17px;background:radial-gradient(ellipse,var(--gallery-accent),transparent 70%);opacity:0;pointer-events:none}
#range.stage-locking .hero-stage-tint{animation:stage-tint .9s ease-out .95s both}
@keyframes stage-route-lock{0%{stroke-dashoffset:100;opacity:0}25%{opacity:.65}80%{opacity:.55}100%{stroke-dashoffset:0;opacity:0}}
@keyframes stage-node-lock{0%,100%{fill:#b49a62;opacity:.65}40%{fill:var(--gallery-accent);opacity:1}}
@keyframes stage-tint{0%,100%{opacity:0}40%{opacity:.12}}
#range .range-info{margin-top:12px}
@media(max-width:700px){
 #range .range-display.installation-ready{height:410px}
 #range .installation-can{width:128px!important;top:49%!important}
 #range .installation-can[data-slot=left]{--shift:-142px;--scale:.79;opacity:.68}
 #range .installation-can[data-slot=right]{--shift:142px;--scale:.79;opacity:.68}
 #range .installation-can[data-slot=centre]>.can{translate:none;animation-duration:10s}
 #range .hero-stage-route{width:520px;height:85px;bottom:5px}
 #range .hero-stage-tint{bottom:28px;width:130px}
 #range .range-display:before{bottom:28px;width:140px}
}
@media(prefers-reduced-motion:reduce){#range .installation-can{transition:none!important}#range .installation-can>.can,#range .hero-stage-route *,#range .hero-stage-tint{animation:none!important;translate:none!important}}
body.motion-paused #range .installation-can{transition:none!important}
body.motion-paused #range .installation-can>.can,body.motion-paused #range .hero-stage-route *,body.motion-paused #range .hero-stage-tint{animation:none!important}
#range.range-offscreen .installation-can>.can{animation-play-state:paused}
@media(max-width:700px){#range .range-controls.route-stops>button{flex:0 0 33.333333%;width:33.333333%;min-width:0;padding-inline:2px}#range .range-controls.route-stops .route-stop-name{font-size:clamp(18px,5.4vw,23px);white-space:nowrap;letter-spacing:-.025em}}

/* Active product poster: genuine texture assets remain separate from the packaging. */
#range .range-word{display:flex!important;position:absolute;inset:38% 0 auto!important;justify-content:center;align-items:center;width:100%;font-size:clamp(110px,22vw,310px);line-height:1;letter-spacing:-.045em;color:var(--word-colour)!important;opacity:.52!important;transform:translateY(-50%)!important;z-index:1;pointer-events:none;background:none!important;-webkit-text-fill-color:currentColor!important;text-shadow:none}
#range .range-word:before,#range .range-word:after{display:none!important}
/* Layered studio light: colour core, elliptical falloff and champagne refraction. */
#range .product-mist{position:absolute;inset:8% 7% 10%;z-index:0;pointer-events:none;isolation:isolate;border-radius:50%;background:radial-gradient(ellipse 19% 53% at 50% 50%,color-mix(in srgb,var(--gallery-accent) 48%,transparent),transparent 100%),radial-gradient(ellipse 49% 42% at 50% 54%,color-mix(in srgb,var(--gallery-accent) 25%,transparent),transparent 100%);opacity:.7;transform:scale(1);mask:none;-webkit-mask:none}
#range .product-mist:before{content:'';position:absolute;inset:9% 1%;border-radius:50%;background:radial-gradient(ellipse at center,transparent 55%,#d3b87915 63%,#e7d5a934 65%,transparent 68%);transform:rotate(-8deg);opacity:.6}
#range .product-mist:after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(116deg,transparent 29%,#fff9df00 31%,#fff9df80 32%,#d5b77925 33%,transparent 35%,transparent 49%,#fff9df65 50%,transparent 52%,transparent 66%,#f2deb340 67%,transparent 69%);mask-image:radial-gradient(ellipse,black 12%,transparent 67%);opacity:.32;transform:translateX(0)}
#range.stage-locking .product-mist{animation:product-light-arrival .85s cubic-bezier(.2,.65,.25,1) both}
#range.stage-locking .product-mist:after{animation:product-refraction-arrival .85s ease-out both}
@keyframes product-light-arrival{0%{opacity:.12;transform:scale(.87)}70%{opacity:.95}100%{opacity:.7;transform:scale(1)}}
@keyframes product-refraction-arrival{0%{opacity:0;transform:translateX(-18px)}65%{opacity:.55}100%{opacity:.32;transform:translateX(0)}}
#range .installation-can>.can:after{content:'';position:absolute;inset:2% 5%;border-radius:20% / 5%;background:url('assets/cold-condensation.webp') center/100% 100% no-repeat;box-shadow:none!important;pointer-events:none;opacity:.12;transition:opacity .7s ease .65s}
#range .installation-can[data-slot=centre]>.can:after{opacity:.63}
#range .installation-field{z-index:3}
#range .hero-stage-route{z-index:2}
@media(max-width:700px){#range .range-word{font-size:27vw;inset:40% 0 auto!important;opacity:.49!important}#range .product-mist{inset:14% 0 12%;opacity:.65}#range .installation-can[data-slot=centre]>.can:after{opacity:.55}}
@media(prefers-reduced-motion:reduce){#range .product-mist{animation:none!important}#range .installation-can>.can:after{transition:none}}
body.motion-paused #range .product-mist{animation:none!important}

/* Selection-only horizontal type planes, always behind the original can art. */
#range .range-word{display:none!important}
#range .split-type-stage{position:absolute;inset:38% 0 auto;height:1em;transform:translateY(-50%);font-family:var(--serif,Georgia,serif);font-size:clamp(110px,22vw,310px);font-weight:700;letter-spacing:-.045em;line-height:1;z-index:1;pointer-events:none;opacity:.34}
#range .split-word{position:absolute;inset:0;white-space:nowrap}
#range .type-band{position:absolute;inset:0;display:flex;justify-content:center;clip-path:inset(calc(var(--band)*33.333%) -20% calc((2 - var(--band))*33.333%) -20%)}
#range .installation-can{--tilt:0deg;transform:translate(-50%,-50%) translateX(var(--shift)) translateY(var(--support-drop,0px)) scale(var(--scale)) rotate(var(--tilt))}
#range .installation-can[data-slot=left]{--tilt:0deg;--support-drop:6px}
#range .installation-can[data-slot=right]{--tilt:0deg;--support-drop:6px}
#range .installation-can[data-slot=centre]{--tilt:0deg}

#range .installation-can>.can:after{transition:opacity .22s ease;opacity:.05}
#range .installation-can[data-slot=centre]>.can:after{opacity:.63;transition:opacity .18s ease .75s}
#range .cold-edge-droplets{position:absolute;inset:4% 6%;border-radius:20% / 5%;background:url('assets/cold-condensation.webp') center/100% 100%;mask-image:linear-gradient(90deg,#000,transparent 13%,transparent 87%,#000);pointer-events:none;opacity:0}
#range .installation-can[data-slot=centre] .cold-edge-droplets{animation:chilled-edge-descent 7s ease-out 1s both}
@keyframes chilled-edge-descent{0%{opacity:0;transform:translateY(-2px)}10%{opacity:.24}85%{opacity:.2}100%{opacity:.16;transform:translateY(7px)}}
@media(max-width:700px){#range .split-type-stage{font-size:27vw;top:40%;opacity:.32}#range .installation-can[data-slot=left]{--tilt:0deg}#range .installation-can[data-slot=right]{--tilt:0deg}}
@media(prefers-reduced-motion:reduce){#range .cold-edge-droplets{animation:none!important}#range .installation-can>.can:after{transition:none!important}}
body.motion-paused #range .cold-edge-droplets{animation:none!important}

@media(prefers-reduced-motion:reduce){#range .product-mist:after{animation:none!important}}
body.motion-paused #range .product-mist:after{animation:none!important}

/* Compact campaign trio: untouched packaging, close support depth, one light pass. */
#range .installation-can[data-slot=centre]{--support-drop:0px}
#range .installation-can[data-slot=left],#range .installation-can[data-slot=right]{filter:blur(.15px);--support-drop:8px}
#range .product-mist{inset:8% 15% 10%}
#range .product-mist:before{opacity:.72}
#range .installation-can>.can:before{content:'';position:absolute;inset:2% 5%;border-radius:22% / 5%;pointer-events:none;z-index:3;background:linear-gradient(110deg,transparent 30%,#fff8dd00 39%,#fff8dd5c 47%,#fffdf970 49%,transparent 58%);background-size:240% 100%;background-position:100% 0;opacity:0}
#range.stage-locking .installation-can[data-slot=centre]>.can:before{animation:trio-metal-light .7s ease-out .35s both}
@keyframes trio-metal-light{0%{background-position:100% 0;opacity:0}35%{opacity:.5}100%{background-position:0 0;opacity:0}}
@media(max-width:700px){#range .product-mist{inset:12% -7% 12%}#range .installation-can[data-slot=left],#range .installation-can[data-slot=right]{--support-drop:5px}#range .split-type-stage{font-size:26vw}#range .installation-can[data-slot=centre]>.can:after{opacity:.5}}
@media(prefers-reduced-motion:reduce){#range .installation-can>.can:before{animation:none!important}}
body.motion-paused #range .installation-can>.can:before{animation:none!important}

/* Forward packshot reveal, confined to the homepage range. */
#range .range-display.installation-ready{height:550px}
#range .installation-can{width:178px!important}
#range .installation-can[data-slot=left]{--shift:clamp(-190px,-15vw,-165px);--scale:.85;opacity:.85}
#range .installation-can[data-slot=right]{--shift:clamp(165px,15vw,190px);--scale:.85;opacity:.85}
#range .installation-can>.can{transform:perspective(1100px) translateZ(0) rotateY(0deg) scale(1);transition:transform .9s cubic-bezier(.22,.7,.2,1)}
#range .installation-can[data-slot=centre]>.can{transform:perspective(1100px) translateZ(0) rotateY(0deg) scale(1.02)}
#range.stage-locking .installation-can[data-slot=centre]>.can:before{animation-delay:.55s}
#range .installation-can[data-slot=centre]>.can:after{transition:opacity .2s ease .9s}
@media(max-width:700px){#range .range-display.installation-ready{height:435px}#range .installation-can{width:136px!important}#range .installation-can[data-slot=left]{--shift:-140px;--scale:.81;opacity:.78}#range .installation-can[data-slot=right]{--shift:140px;--scale:.81;opacity:.78}}
@media(prefers-reduced-motion:reduce){#range .installation-can>.can{transition:none!important}}

/* Larger, closely composed reveal: one hero and two legible supporting cans. */
#range .range-stage{background:#f6f4ed!important}
#range .range-display.installation-ready{height:640px}
#range .installation-can{width:204px!important;top:49%!important;transition:transform 1.1s cubic-bezier(.22,.7,.2,1),opacity .65s,visibility .65s!important}
#range .installation-can[data-slot=centre]{--scale:1;--shift:0px;--support-drop:0px;cursor:pointer}
#range .installation-can[data-slot=left]{--shift:clamp(-218px,-17vw,-192px);--scale:.86;opacity:.96;filter:none;--support-drop:12px}
#range .installation-can[data-slot=right]{--shift:clamp(192px,17vw,218px);--scale:.86;opacity:.96;filter:none;--support-drop:12px}
#range .installation-can[data-slot=hidden]{--scale:.72;--shift:0px}
#range .installation-can>.can{animation:none!important;transform:perspective(1100px) translateZ(0) rotateY(0deg) scale(1);transition:transform .8s cubic-bezier(.22,.7,.2,1);transform-origin:50% 55%;translate:none!important}
#range .installation-can[data-slot=centre]>.can{transform:perspective(1100px) translateZ(0) rotateY(0deg) scale(1.04)}
#range .installation-can:focus-visible{outline:1px solid #a1874d;outline-offset:12px;border-radius:18px}
#range.stage-locking .installation-can[data-slot=centre]>.can:before{animation-duration:.95s;animation-delay:.42s}
#range .installation-can[data-slot=centre]>.can:after{opacity:.42;transition:opacity .45s ease .3s}
#range .product-mist{opacity:.45}
#range .split-type-stage{opacity:.25}
#range .hero-stage-route{display:none}
#range .range-sound{min-height:44px;padding:10px 4px;font-size:14px}
@media(max-width:700px){
 #range .range-stage{padding-inline:3%}
 #range .range-display.installation-ready{height:clamp(395px,119vw,490px)}
 #range .installation-can{width:clamp(112px,38vw,154px)!important;top:49%!important}
 #range .installation-can[data-slot=left]{--shift:clamp(-135px,-31vw,-97px);--scale:.83;opacity:.94;--support-drop:10px}
 #range .installation-can[data-slot=right]{--shift:clamp(97px,31vw,135px);--scale:.83;opacity:.94;--support-drop:10px}
 #range .installation-can[data-slot=centre]>.can:after{opacity:.35}
 #range .split-type-stage{opacity:.23;font-size:26vw}
 #range .range-top{gap:12px;flex-wrap:wrap}
 #range .range-controls.route-stops>button{min-height:88px}
}
@media(prefers-reduced-motion:reduce){#range .installation-can,#range .installation-can>.can{transition:none!important}}
body.motion-paused #range .installation-can,body.motion-paused #range .installation-can>.can{transition:none!important}

/* Transparent packshot margins must never intercept neighbouring can taps. */
#range .installation-can *{pointer-events:none}