/* Temperature is expressed through bounded light layers; motion is reversible.
   Hover/focus: 300ms bloom and 7px lift. Touch: held light. Reduced motion: colour only. */
.temperature-stage{--temperature-rgb:96,184,230;--glow-x:0px;--glow-y:0px;--glow-rest:.48;--glow-duration:300ms;position:relative;isolation:isolate;overflow:hidden;background:#19201e}
.temperature-stage[data-temperature=warm]{--temperature-rgb:234,139,67;--glow-duration:340ms}
.temperature-stage::before,.temperature-stage::after{content:'';position:absolute;pointer-events:none;z-index:0;transform-origin:50% 65%;transition:opacity var(--glow-duration) ease,transform var(--glow-duration) cubic-bezier(.2,.65,.3,1)}
.temperature-stage::before{inset:3%;background:radial-gradient(ellipse at 50% 65%,rgba(var(--temperature-rgb),.58),rgba(var(--temperature-rgb),.32) 28%,rgba(var(--temperature-rgb),.13) 50%,rgba(var(--temperature-rgb),0) 76%);opacity:var(--glow-rest);transform:translate(var(--glow-x),var(--glow-y)) scale(.94)}
.temperature-stage::after{height:25%;width:75%;left:12.5%;bottom:5%;background:radial-gradient(ellipse at center,rgba(var(--temperature-rgb),.25),rgba(var(--temperature-rgb),0) 68%);opacity:.32;transform:scale(.94)}
.temperature-stage img{position:relative;z-index:1;object-fit:contain;transition:transform 300ms cubic-bezier(.2,.65,.3,1),filter 300ms ease;filter:drop-shadow(0 16px 17px #0006)}
.temperature-stage:is([data-glow=on],[data-touch-glow=on],:focus-visible,:focus-within)::before,.ritual-option:is(:hover,:focus-visible,[aria-pressed=true]) .temperature-stage::before{opacity:1;transform:translate(var(--glow-x),var(--glow-y)) scale(1.08)}
.temperature-stage:is([data-glow=on],[data-touch-glow=on],:focus-visible,:focus-within)::after,.ritual-option:is(:hover,:focus-visible,[aria-pressed=true]) .temperature-stage::after{opacity:.85;transform:scale(1.15)}
.temperature-stage:is([data-glow=on],[data-touch-glow=on],:focus-visible,:focus-within) img,.ritual-option:is(:hover,:focus-visible) .temperature-stage img{transform:translateY(-7px) scale(1.015);filter:drop-shadow(0 19px 20px #0007) drop-shadow(0 0 3px rgba(var(--temperature-rgb),.18))}
.sensory-caption{position:absolute;z-index:2;left:20px;right:20px;bottom:22px;display:block;text-align:center;font-size:10px;letter-spacing:.08em;color:#b3bcb6;pointer-events:none}
.hero{background:#121815}.hero-shade{background:radial-gradient(ellipse at 80% 60%,#ac542409,transparent 65%);pointer-events:none}.hero[data-scene=cold] .hero-shade{background:radial-gradient(ellipse at 80% 60%,#60b8e609,transparent 65%)}
.hero-product-stage{position:absolute;left:40%;right:3%;top:16%;bottom:16%;display:grid;place-items:center;border:0;border-radius:0;padding:30px;background:transparent;color:inherit;text-align:center;--glow-rest:.66;z-index:1}
.hero-product-stage::before{inset:0}.hero-product-stage::after{bottom:7%}.hero-product-stage .hero-photo{position:relative;inset:auto;width:100%;height:100%;max-height:100%;object-fit:contain;object-position:center}.hero-product-stage .sensory-caption{bottom:0;font-size:10px}.hero-product-stage:focus-visible{outline:1px solid #ffffff80;outline-offset:-6px}.hero-copy{width:32%;max-width:480px;bottom:170px;z-index:2}.hero header,.hero-bottom{z-index:3}.hero h1{max-width:480px}.hero-copy #hero-description{font-size:14px}.hero-copy #hero-description br{display:none}
.product-image.temperature-stage{background:#19201e}.product-image.temperature-stage>button:first-child{position:relative;z-index:1}.product-image.temperature-stage img{height:385px;aspect-ratio:auto;object-fit:contain;padding:38px 28px;width:100%}.product-image.temperature-stage>button:first-child:hover img{transform:translateY(-7px) scale(1.015)}.product-image .save{z-index:3}.product-card[data-type=chiller] .product-image.temperature-stage img{height:160px;aspect-ratio:1;object-fit:contain;padding:18px}.product-image[data-temperature=warm]{--glow-rest:.55}
.approach-stage{min-height:560px;display:grid;place-items:center}.approach-stage>img{width:100%;height:100%;max-height:560px;object-fit:contain;padding:40px 28px}.approach-stage .sensory-caption{bottom:26px}
.detail-stage{min-height:540px;display:grid;place-items:center;background:#19201e}.detail-stage>img{width:100%;height:100%;max-height:600px;object-fit:contain;padding:58px 32px;aspect-ratio:auto}.detail-stage .sensory-caption{bottom:24px}.detail-copy{position:relative;z-index:1}
.ritual-product-stage{display:grid;place-items:center;height:270px;width:100%;background:#19201e}.ritual-option .ritual-product-stage img{width:100%;height:270px;object-fit:contain;padding:24px 20px}.ritual-option-copy{position:relative;z-index:2}.scene-switch .ritual-option{background:var(--tint)}
.short-thumb{width:90px;height:90px;display:grid;place-items:center}.short-thumb>img{width:90px;height:90px;object-fit:contain;padding:8px;border-radius:0}.short-thumb{--glow-rest:.65}
:root[data-theme=light] .temperature-stage:not(.hero-product-stage){background:#e4e9e5}.temperature-stage:not(.hero-product-stage) .sensory-caption{color:#b3bcb6}:root[data-theme=light] .temperature-stage:not(.hero-product-stage) .sensory-caption{color:#54635d}
@media(min-width:1500px){.hero-product-stage{left:42%;right:6%;top:14%;bottom:13%}.hero-copy{width:31%}}
@media(max-width:1024px){.hero-copy{width:35%;left:36px}.hero-product-stage{left:42%;right:1%;top:21%;bottom:18%;padding:15px}.hero-copy #hero-description{font-size:13px}.product-image.temperature-stage img{height:325px;padding:35px 20px}.approach-stage{min-height:470px}.approach-stage>img{max-height:470px}}
@media(max-width:767px){.hero{min-height:780px;height:100dvh;max-height:1000px}.hero-product-stage{top:105px;left:5%;right:5%;height:335px;bottom:auto;padding:20px}.hero-product-stage .hero-photo{height:100%;width:100%}.hero-product-stage::after{bottom:12%}.hero-product-stage .sensory-caption{bottom:0;font-size:9px}.hero-copy{left:24px;right:24px;width:auto;bottom:145px;max-width:600px}.hero h1{font-size:38px;max-width:500px}.hero h1 br{display:none}.hero-copy .eyebrow{margin-bottom:18px;font-size:8px}.hero-copy #hero-description{font-size:13px;max-width:320px;margin:16px 0 15px}.hero-text-link{padding:8px 0;font-size:11px}.product-image.temperature-stage img{height:330px;padding:38px 22px}.product-card[data-type=chiller] .product-image.temperature-stage img{height:105px;padding:12px}.approach-stage{min-height:380px}.approach-stage>img{height:380px;padding:35px 20px}.detail-stage{min-height:330px}.detail-stage>img{height:330px;padding:35px 24px}.detail-stage .sensory-caption{font-size:9px;bottom:14px}.ritual-product-stage,.ritual-option .ritual-product-stage img{height:240px}.short-thumb,.short-thumb>img{width:65px;height:65px}}
@media(max-width:480px){.hero-product-stage{height:300px;top:100px}.hero{min-height:780px}.hero-copy{left:20px;right:20px;bottom:150px}.hero h1{font-size:36px;max-width:300px}.hero-copy .eyebrow{font-size:8px;max-width:300px}.ritual-option{grid-template-columns:105px 1fr}.ritual-product-stage,.ritual-option .ritual-product-stage img{width:105px;height:165px}.ritual-option .ritual-product-stage img{padding:10px 4px}.ritual-product-stage::before{inset:0}.product-image.temperature-stage img{height:300px;padding:32px 20px}}
@media(hover:none){.temperature-stage{--glow-rest:.65}.temperature-stage img{transition:none}.hero-product-stage{cursor:pointer}}
@media(prefers-reduced-motion:reduce){.temperature-stage::before,.temperature-stage::after{transition:none!important;transform:none!important}.temperature-stage img,.product-image.temperature-stage>button:first-child:hover img{transition:none!important;transform:none!important}}
/* Unframed light: transparent object stages and fully feathered light fields. */
.temperature-stage,.product-image.temperature-stage,.detail-stage,.ritual-product-stage,.approach-stage,.short-thumb,
:root[data-theme=light] .temperature-stage:not(.hero-product-stage){background:transparent!important;overflow:visible!important}
.temperature-stage::before{inset:0;background:radial-gradient(ellipse closest-side at 50% 56%,rgba(var(--temperature-rgb),.48) 0%,rgba(var(--temperature-rgb),.24) 32%,rgba(var(--temperature-rgb),.08) 63%,rgba(var(--temperature-rgb),0) 100%)}
.temperature-stage::after{left:7.5%;width:85%;height:32%;bottom:-1%;background:radial-gradient(ellipse closest-side at center,rgba(var(--temperature-rgb),.28),rgba(var(--temperature-rgb),.1) 45%,rgba(var(--temperature-rgb),0) 100%)}
.scene-switch .ritual-option,.scene-switch .ritual-option[aria-pressed=true]{background:transparent;border-color:transparent;overflow:visible}
.ritual-option .ritual-option-copy{background:transparent}.ritual-option[aria-pressed=true] .ritual-selection{font-weight:650;text-decoration:underline;text-underline-offset:5px}
/* A larger, layered aura fades into the page rather than a rectangular stage. */
html,body{overflow-x:clip}
.temperature-stage::before{inset:-22% -18%;background:radial-gradient(ellipse closest-side at 46% 57%,rgba(var(--temperature-rgb),.39) 0%,rgba(var(--temperature-rgb),.22) 25%,rgba(var(--temperature-rgb),.09) 52%,rgba(var(--temperature-rgb),.025) 76%,transparent 100%),radial-gradient(ellipse closest-side at 62% 38%,rgba(var(--temperature-rgb),.13),rgba(var(--temperature-rgb),.045) 48%,transparent 100%);filter:blur(12px)}
.temperature-stage::after{left:-8%;width:116%;height:54%;bottom:-11%;background:radial-gradient(ellipse closest-side at center,rgba(var(--temperature-rgb),.22),rgba(var(--temperature-rgb),.065) 50%,transparent 100%);filter:blur(10px)}
.short-thumb::before{inset:-8%}.short-thumb::after{left:0;width:100%;bottom:0}
