/* 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; product light settles at 4.2s,
 * three floor passes finish at 4.14s; touch remains 1.2s.
 */
:where(body.dhd .atmo-surface) {
 position:relative;
 isolation:isolate;
 --atmo-champagne:216,196,152;
 --atmo-cream:245,240,229;
 --atmo-green:54,93,75;
}

/* 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;
}

/* Product atmosphere follows the actual contact floor when JS can read the
 * existing contact-shadow geometry. Defaults match the native staged frame.
 * Its isolated host already contains frame(z1) and contact-shadow(z0). */
body.dhd [data-pack-view] > .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:216,196,152;
 --atmo-cream:245,240,229;
 --atmo-green:54,93,75;
}
body.dhd .atmo-product-field > :is(.atmo-halo,.atmo-wave,.atmo-horizon) {
 position:absolute;display:block;pointer-events:none;
 left:var(--atmo-floor-x,60%);top:var(--atmo-floor-y,87%);
}
body.dhd .atmo-product-field > .atmo-halo {
 --atmo-halo-rest:.62;--atmo-halo-peak:.9;
 width:min(86%,940px);height:68%;border-radius:0;
 /* A broad upper-left key belongs to the seamless environment, not the ink.
  * It is deliberately offset from the floor centre but anchored to that plane.
  * Each closest-side ellipse reaches transparent before crossing an element
  * edge; no circular clipping silhouette or animated filter is needed. */
 background:
  radial-gradient(ellipse closest-side at 30% 23%,rgba(var(--atmo-cream),.2),rgba(var(--atmo-champagne),.085) 33%,transparent 96%),
  radial-gradient(ellipse closest-side at 54% 73%,rgba(var(--atmo-champagne),.105),rgba(var(--atmo-green),.05) 38%,transparent 96%);
 opacity:var(--atmo-halo-rest);
 transform:translate(-56%,-94%);
}
body.dhd [data-pack-view].atmo-play > .atmo-product-field > .atmo-halo {
 animation:atmo-halo-settle 4.2s cubic-bezier(.22,.6,.3,1) both;
}
@keyframes atmo-halo-settle {
 0% {opacity:.25;transform:translate(-56%,-94%) scale(.97)}
 34% {opacity:var(--atmo-halo-peak)}
 100% {opacity:var(--atmo-halo-rest);transform:translate(-56%,-94%) scale(1)}
}

/* Broad luminous bands replace the former one-pixel outlines. Each is a
 * prepainted shallow ellipse: only its transform and opacity animate. The soft
 * gradient is the falloff, so no blur/filter repaint is required. The vertical
 * mask weights the nearer arc; the pack and its existing contact shadow occlude
 * the rear through their own higher stacking layers. These are decorative
 * studio waves, not a picture of any physical property of the food.
 * Three 2.7s passes start at 0/.72/1.44s and finish at 4.14s. */
body.dhd .atmo-product-field > .atmo-wave {
 --atmo-wave-peak:.68;--atmo-wave-falloff:.28;
 width:min(110%,1180px);height:clamp(72px,18%,170px);
 border:0;
 background:radial-gradient(ellipse closest-side at 50% 50%,
  transparent 48%,rgba(var(--atmo-champagne),.025) 53%,
  rgba(var(--atmo-champagne),.15) 60%,rgba(var(--atmo-cream),.48) 68%,
  rgba(var(--atmo-champagne),.24) 75%,rgba(var(--atmo-champagne),.065) 85%,transparent 97%);
 -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.12),rgba(0,0,0,.3) 32%,#000 58%,rgba(0,0,0,.82));
 mask-image:linear-gradient(to bottom,rgba(0,0,0,.12),rgba(0,0,0,.3) 32%,#000 58%,rgba(0,0,0,.82));
 border-radius:50%;opacity:0;
 transform:translate(-50%,-50%) scale(.18);
 transform-origin:center;
 --atmo-wave-delay:0s;
}
body.dhd .atmo-product-field > .atmo-wave + .atmo-wave {--atmo-wave-delay:.72s}
body.dhd .atmo-product-field > .atmo-wave + .atmo-wave + .atmo-wave {--atmo-wave-delay:1.44s}
body.dhd [data-pack-view].atmo-play > .atmo-product-field > .atmo-wave {
 animation:atmo-floor-wave 2.7s cubic-bezier(.18,.58,.25,1) var(--atmo-wave-delay) both;
 will-change:transform,opacity;
}
@keyframes atmo-floor-wave {
 0% {opacity:0;transform:translate(-50%,-50%) scale(.18)}
 17% {opacity:var(--atmo-wave-peak)}
 58% {opacity:var(--atmo-wave-falloff)}
 100% {opacity:0;transform:translate(-50%,-50%) scale(1.23)}
}
body.dhd .atmo-product-field > .atmo-horizon {
 /* A settled light pool beneath the existing dark contact patch, not another
  * outline or a replacement shadow. It holds the floor after the waves end. */
 width:min(66%,760px);height:clamp(22px,5%,46px);
 background:radial-gradient(ellipse closest-side,rgba(var(--atmo-cream),.16),rgba(var(--atmo-champagne),.075) 42%,transparent 100%);
 opacity:.55;transform:translate(-50%,-50%);
}
body.dhd [data-product-studio][data-studio-label="true"] .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}
}

/* Compact glass only. These solid-backed tints retain the current cream text.
 * No full-page backdrop filter and no blur over photographs or printed labels. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 body.dhd .site-head {
  background-color:rgba(23,27,29,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 -1px 0 rgba(216,196,152,.12);
 }
 body.dhd .ed-consequence.atmo-surface {
  background-color:rgba(53,60,64,.64);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  box-shadow:inset 0 1px 0 rgba(245,240,229,.09),inset 0 -1px 0 rgba(216,196,152,.06);
 }
}

/* 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 .atmo-product-field > :is(.atmo-halo,.atmo-wave,.atmo-horizon) {
  left:var(--atmo-floor-x,50%);
 }
 body.dhd .atmo-product-field > .atmo-halo {--atmo-halo-rest:.5;--atmo-halo-peak:.72;width:96%;height:62%}
 body.dhd .atmo-product-field > .atmo-wave {--atmo-wave-peak:.52;--atmo-wave-falloff:.21;width:112%;height:clamp(62px,16%,108px)}
 body.dhd .atmo-product-field > .atmo-horizon {width:78%;height:28px}
 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}
 body.dhd .site-head {-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
 body.dhd .ed-consequence.atmo-surface {-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
}
@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 > :is(.atmo-halo,.atmo-wave,.atmo-horizon),
 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-wave {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}
 body.dhd .site-head,
 body.dhd .ed-consequence.atmo-surface {-webkit-backdrop-filter:none;backdrop-filter:none}
}
@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 > :is(.atmo-halo,.atmo-wave,.atmo-horizon),
 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;
 }
 body.dhd .site-head,
 body.dhd .ed-consequence.atmo-surface {-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
}

/* 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:216,196,152;--halo-spread:5px;--halo-peak:.22;
}
body.dhd .product-information .commerce-step-dot {--halo-rgb:54,93,75;--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) infinite;
}
body.dhd .delivery-signal.halo-awake::after {
 animation:quiet-state-halo 4.8s cubic-bezier(.22,.6,.3,1) 2;
}
@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:infinite;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;}
}