/* Finite atmosphere. Load after luxury-theme/editorial/product-studio styles.
 * JS opts in existing surfaces; no image, logo, font, form or gallery geometry
 * is changed. Negative layers sit above the host background, below its content.
 * Decorative timing budget: surface wash 3s; three gold circles finish at
 * 3.76s; touch remains 1.2s. There is no fixture, beam or settled light pool.
 */
:where(body.dhd .atmo-surface) {
 position:relative;
 isolation:isolate;
 --atmo-champagne:201,175,115;
 --atmo-cream:238,228,207;
 --atmo-green:86,96,68;
}

/* Preserve sticky editorial media and every existing positioned host. The
 * zero-specificity defaults above intentionally lose to its native CSS. */
body.dhd .atmo-surface > .atmo-wash {
 position:absolute;inset:0;z-index:-1;
 display:block;overflow:hidden;border-radius:inherit;
 pointer-events:none;user-select:none;
}
body.dhd .atmo-surface > .atmo-wash::after {
 content:"";position:absolute;inset:-12% -45%;z-index:0;
 pointer-events:none;
 background:
  linear-gradient(112deg,transparent 26%,rgba(var(--atmo-champagne),.075) 43%,rgba(var(--atmo-cream),.105) 49%,transparent 66%),
  radial-gradient(ellipse at 92% 90%,rgba(var(--atmo-green),.07),transparent 64%);
 transform:translate3d(28%,0,0);opacity:.2;
}
body.dhd .atmo-surface > .atmo-wash::before {
 content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
 box-shadow:inset 0 1px 0 rgba(var(--atmo-cream),.16),inset 0 -1px 0 rgba(var(--atmo-champagne),.08);
 pointer-events:none;
}
body.dhd .atmo-surface.atmo-play > .atmo-wash::after {
 animation:atmo-surface-settle 3s cubic-bezier(.2,.65,.25,1) both;
}
@keyframes atmo-surface-settle {
 0% {transform:translate3d(-28%,0,0);opacity:.1}
 42% {opacity:.8}
 100% {transform:translate3d(28%,0,0);opacity:.2}
}

/* One broad-light owner. Keep the separate, finite 1px luxury-edge-light.
 * Old ::after sheen must not run through artwork or stack with this wash. */
body.dhd .atmo-surface.luxury-sheen::after,
body.dhd .atmo-surface .luxury-sheen::after,
body.dhd [data-pack-view].luxury-sheen::after {
 content:none;display:none;animation:none!important;
}

/* A transparent, bounded ring field preserves the page's continuous Graphite
 * canvas. Native controllers retain package geometry and contact shadows. */
body.dhd .atmo-circles > .atmo-product-field {
 position:absolute;inset:0;z-index:-1;
 display:block;overflow:hidden;border-radius:inherit;
 pointer-events:none;user-select:none;
 --atmo-champagne:201,175,115;
 --atmo-cream:238,228,207;
 --atmo-green:86,96,68;
}
/* Three fine gold circles expand from the existing product or bowl centre.
 * They are decoration, not a food/health claim. Only transform and opacity
 * animate; every ring has one pass, then disappears. Content stays above them. */
body.dhd .atmo-product-field > .atmo-circle {
 position:absolute;display:block;left:var(--atmo-circle-x,50%);top:var(--atmo-circle-y,50%);
 width:var(--atmo-circle-size,90%);height:auto;aspect-ratio:1;max-width:none;
 box-sizing:border-box;border-radius:50%;border:1.25px solid var(--dhd-motion-gold,#c9af73);
 background:radial-gradient(circle closest-side,transparent 90%,#c9af7317 95%,#eee4cf40 98%,transparent 100%);
 box-shadow:0 0 0 3px #c9af730d,inset 0 0 0 2px #eee4cf12;
 pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.55);
 transform-origin:center;--atmo-circle-delay:0s;
}
body.dhd .atmo-product-field > .atmo-circle + .atmo-circle {--atmo-circle-delay:.58s}
body.dhd .atmo-product-field > .atmo-circle + .atmo-circle + .atmo-circle {--atmo-circle-delay:1.16s}
body.dhd .atmo-circles.atmo-play > .atmo-product-field > .atmo-circle {
 animation:atmo-gold-circle 2.6s cubic-bezier(.16,.58,.24,1) var(--atmo-circle-delay) 1 both;
}
@keyframes atmo-gold-circle {
 0% {opacity:0;transform:translate(-50%,-50%) scale(.55)}
 22% {opacity:.76}
 68% {opacity:.38}
 100% {opacity:0;transform:translate(-50%,-50%) scale(1.14)}
}
body.dhd .product-vessel__stage.atmo-circles > .atmo-product-field {overflow:visible}
body.dhd [data-product-studio][data-studio-label="true"] .atmo-product-field,
body.dhd .story-is-label > .atmo-product-field,
body.dhd .is-lifestyle > .atmo-product-field {display:none}

/* Deliberate desktop intent only. Independent translate avoids replacing any
 * existing transform; lift is limited to two actual, non-magnetic card types.
 * No transform/filter is assigned to the pack image or its media frame. */
@media (hover:hover) and (pointer:fine) {
 body.dhd :is(.product-card,.ed-test).atmo-surface {
  translate:0 0;transition:translate 320ms cubic-bezier(.2,.7,.25,1);
 }
 body.dhd :is(.product-card,.ed-test).atmo-surface.atmo-touch {translate:0 -2px}
 body.dhd .atmo-surface.atmo-touch > .atmo-wash::after {
  animation:atmo-intent-wash 1.2s cubic-bezier(.18,.65,.28,1) both;
 }
}
@keyframes atmo-intent-wash {
 0% {transform:translate3d(-28%,0,0);opacity:.18}
 36% {opacity:.88}
 100% {transform:translate3d(28%,0,0);opacity:.2}
}

/* Shared site-refinements owns all glass and surface colours. */

/* The existing decorative arrow alone responds; never all icons or labels.
 * Two small cycles on entry finish after 3.6s, even if it stays in view. */
body.dhd .ed-link.atmo-visible span:not(.fx-magnetic-content):not(.fx-icon-float):not(.fx-icon-spring) {
 animation:atmo-arrow-breathe 1.8s ease-in-out 2;
}
body.dhd .ed-next.atmo-visible b,
body.dhd .studio-buy-link.atmo-visible span:not(.fx-magnetic-content):not(.fx-icon-float):not(.fx-icon-spring) {
 animation:atmo-arrow-down 1.8s ease-in-out 2;
}
@keyframes atmo-arrow-breathe {
 0%,100% {translate:0 0}
 50% {translate:2px -1px}
}
@keyframes atmo-arrow-down {
 0%,100% {translate:0 0}
 50% {translate:0 2px}
}

/* An engraved chapter rule: one fine drawn line, not a new logo or graphic.
 * Absolute placement uses the existing heading margin without shifting copy. */
body.dhd .ed-chapter-heading {position:relative}
body.dhd .ed-chapter-heading::after {
 content:"";position:absolute;left:0;bottom:-16px;
 width:clamp(80px,12vw,150px);height:1px;pointer-events:none;
 background:linear-gradient(90deg,#D8C498B8,#F5F0E566 64%,#D8C49800);
 transform-origin:left;transform:scaleX(1);opacity:.7;
}
body.dhd .ed-chapter-heading.atmo-visible::after {
 animation:atmo-engraved-rule 900ms cubic-bezier(.22,.7,.25,1) both;
}
@keyframes atmo-engraved-rule {
 from {transform:scaleX(0);opacity:.15}
 to {transform:scaleX(1);opacity:.7}
}

@media (max-width:850px) {
 body.dhd :is(.product-card,.ed-test).atmo-surface.atmo-touch {translate:0 0}
 body.dhd .atmo-surface.atmo-touch > .atmo-wash::after {animation:none}
}
@media (hover:none), (pointer:coarse) {
 body.dhd :is(.product-card,.ed-test).atmo-surface.atmo-touch {translate:0 0}
}
@media (prefers-reduced-motion:reduce) {
 body.dhd .atmo-surface,
 body.dhd .atmo-surface > .atmo-wash,
 body.dhd .atmo-surface > .atmo-wash::after,
 body.dhd .atmo-product-field > .atmo-circle,
 body.dhd .ed-next.atmo-visible b,
 body.dhd .ed-link.atmo-visible span,
 body.dhd .studio-buy-link.atmo-visible span,
 body.dhd .ed-chapter-heading::after {
  animation:none!important;transition:none!important;
 }
 body.dhd :is(.product-card,.ed-test).atmo-surface {translate:0 0!important}
 body.dhd .atmo-product-field > .atmo-circle {display:none}
 body.dhd .ed-next.atmo-visible b,
 body.dhd .ed-link.atmo-visible span,
 body.dhd .studio-buy-link.atmo-visible span {translate:0 0!important}
}
@media print {
 body.dhd .atmo-wash,body.dhd .atmo-product-field,
 body.dhd .ed-chapter-heading::after {display:none!important}
 body.dhd .atmo-surface,
 body.dhd .atmo-surface > .atmo-wash,
 body.dhd .atmo-surface > .atmo-wash::after,
 body.dhd .atmo-product-field > .atmo-circle,
 body.dhd .ed-next.atmo-visible b,
 body.dhd .ed-link.atmo-visible span,
 body.dhd .studio-buy-link.atmo-visible span {
  animation:none!important;transition:none!important;translate:0 0!important;
 }
}

/* Quiet state halos. The centre and native selected-state semantics stay still;
 * only this separate, pointer-transparent light layer expands and dissipates. */
body.dhd :is(.commerce-step-dot,.process-step-marker,.delivery-signal) {
 --halo-rgb:201,175,115;--halo-spread:5px;--halo-peak:.22;
}
body.dhd .product-information .commerce-step-dot {--halo-peak:.23;}
body.dhd .delivery-signal {position:relative;--halo-spread:4px;--halo-peak:.17;}
body.dhd .process-step-marker {--halo-spread:6px;}
body.dhd :is(.commerce-step-dot,.process-step-marker,.delivery-signal)::after {
 content:"";position:absolute;inset:calc(-1 * var(--halo-spread));
 border-radius:50%;pointer-events:none;
 background:radial-gradient(circle,rgba(var(--halo-rgb),.08) 20%,rgba(var(--halo-rgb),.7) 60%,rgba(var(--halo-rgb),.24) 78%,transparent 100%);
 opacity:0;transform:scale(.72);transform-origin:center;
}
body.dhd :is(.commerce-step-dot,.process-step-marker).halo-awake::after {
 animation:quiet-state-halo 4.8s cubic-bezier(.22,.6,.3,1) 1;
}
body.dhd .delivery-signal.halo-awake::after {
 animation:quiet-state-halo 4.8s cubic-bezier(.22,.6,.3,1) 1;
}
@keyframes quiet-state-halo {
 0%,8% {opacity:0;transform:scale(.72)}
 28% {opacity:var(--halo-peak)}
 72%,100% {opacity:0;transform:scale(1.58)}
}
@media(prefers-reduced-motion:reduce) {
 body.dhd :is(.commerce-step-dot,.process-step-marker,.delivery-signal)::after {animation:none!important;opacity:0;}
}
@media print {
 body.dhd :is(.commerce-step-dot,.process-step-marker,.delivery-signal)::after {display:none;}
}

/* Nine compact machinery schematics. Their SVG geometry is independent from
 * the approved product photographs and the larger explanatory illustrations. */
body.dhd .dhd-process .process-nav-icon {
 display:block;width:82px;height:62px;max-width:100%;margin:9px auto 8px;
 overflow:visible;pointer-events:none;
 --pci-turn:none;--pci-flow:none;--pci-drop:none;--pci-heat:none;--pci-belt:none;
}
body.dhd .dhd-process .process-step {min-height:172px;}
/* Editorial markers already use auto margins; clear the old absolute offset
 * so the marker, number, drawing and name share one centre line. */
body.dhd .dhd-editorial .dhd-process .process-step-marker {left:auto;top:auto;}
body.dhd .dhd-process .process-nav-icon :is(.pci-rotor,.pci-flow,.pci-drop,.pci-heat,.pci-belt) {
 transform-box:fill-box;transform-origin:center;
 animation-iteration-count:1;animation-delay:var(--pci-delay,0s);
}
body.dhd .dhd-process .process-nav-icon .pci-rotor {animation-name:var(--pci-turn);animation-duration:6s;animation-timing-function:linear;}
body.dhd .dhd-process .process-nav-icon .pci-counter {animation-direction:reverse;}
body.dhd .dhd-process .process-nav-icon .pci-flow {animation-name:var(--pci-flow);animation-duration:3.2s;animation-timing-function:ease-in-out;}
body.dhd .dhd-process .process-nav-icon .pci-drop {animation-name:var(--pci-drop);animation-duration:2.8s;animation-timing-function:ease-in-out;}
body.dhd .dhd-process .process-nav-icon .pci-heat {animation-name:var(--pci-heat);animation-duration:3.6s;animation-timing-function:ease-in-out;}
body.dhd .dhd-process .process-nav-icon .pci-belt {animation-name:var(--pci-belt);animation-duration:3.2s;animation-timing-function:linear;}
body.dhd .dhd-process .process-step-marker.halo-awake ~ .process-nav-icon {
 --pci-turn:pci-turn;--pci-flow:pci-flow;--pci-drop:pci-drop;--pci-heat:pci-heat;--pci-belt:pci-belt;
}
@media(hover:hover) and (pointer:fine) {
 body.dhd .dhd-process .process-step:is(:hover,:focus-visible) .process-step-marker.halo-in-view ~ .process-nav-icon {
  --pci-turn:pci-turn;--pci-flow:pci-flow;--pci-drop:pci-drop;--pci-heat:pci-heat;--pci-belt:pci-belt;
 }
}
@keyframes pci-turn {to{transform:rotate(360deg)}}
@keyframes pci-flow {0%,100%{transform:translateX(-2px);opacity:.55}55%{transform:translateX(3px);opacity:1}}
@keyframes pci-drop {0%{transform:translateY(-3px);opacity:.25}35%{opacity:1}100%{transform:translateY(5px);opacity:.12}}
@keyframes pci-heat {0%{transform:translateY(2px);opacity:.2}40%{opacity:.7}100%{transform:translateY(-4px);opacity:.15}}
@keyframes pci-belt {0%{transform:translateX(-3px);opacity:.35}25%,75%{opacity:1}100%{transform:translateX(3px);opacity:.35}}
@media(prefers-reduced-motion:reduce) {
 body.dhd .dhd-process .process-nav-icon * {animation:none!important;}
}
@media print {
 body.dhd .dhd-process .process-nav-icon * {animation:none!important;}
}

@media(prefers-reduced-transparency:reduce),(forced-colors:active) {
 body.dhd .atmo-product-field,body.dhd .atmo-wash {display:none;}
}