/* DR HAHNZ / ATELIER EFFECTS
 * Decorative layers have their own transform owners. Pack pixels, form fields,
 * prices and accessible text never receive a glitch, colour filter or 3D warp.
 * Loaded after the legacy styles so the studio switch owns the stage light.
 */
:root{--fx-gold:#eac17c;--fx-ivory:#fff2d8;--fx-copper:#bd7945;--fx-ink:#100e0c;--fx-ease:cubic-bezier(.2,.75,.15,1)}
.fx-surface{position:relative;isolation:isolate}
.fx-grid,.fx-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
/* A true 1 CSS-pixel framework. The vignette leaves copy and artwork dominant. */
.fx-grid{background-image:linear-gradient(#eac17c10 1px,transparent 1px),linear-gradient(90deg,#eac17c10 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 55%,#000 10%,transparent 78%)}
.fx-particles{z-index:0;opacity:.8;contain:strict}
.fx-surface>.main-pack{position:relative;z-index:1}

/* PRODUCT STUDIO: the environment changes; the original pack does not. */
body.dhd.page-product .product-showcase{background:#100f0d}
body.dhd.page-product .product-showcase:before{background:radial-gradient(ellipse at 50% 76%,#69513617,transparent 60%)}
body.dhd.page-product .product-showcase .product-stage:before{background:none}
body.dhd.page-product .product-showcase .product-stage,
body.dhd.page-product .product-showcase .product-stage:has(.main-pack[src*="pack-composites-20260924/"]){overflow:clip;height:clamp(400px,58svh,640px)}
body.dhd.page-product .product-showcase .product-stage:after{opacity:.4}
body.dhd.page-product .product-showcase .showcase-light{background:radial-gradient(ellipse at 52% 65%,#e5ba6542,transparent 65%);opacity:1;transition:opacity 600ms var(--fx-ease)}
body.dhd.page-product .product-showcase .showcase-orbit{display:none}
.studio-beam{position:absolute;pointer-events:none;z-index:-1;width:100%;height:100%;right:0;top:0;background:conic-gradient(from 190deg at 94% 0%,transparent 0deg,#ffe4a910 8deg,#ffe4a930 19deg,#ffe4a912 31deg,transparent 39deg);mask-image:linear-gradient(#000,transparent 95%);opacity:.8;transition:opacity 600ms var(--fx-ease)}
.studio-fixture{position:absolute;right:2%;top:-10px;width:clamp(72px,9vw,122px);height:auto;z-index:2;pointer-events:none;transform:rotate(-8deg);filter:none;transition:opacity 500ms ease}
.studio-floor{position:absolute;left:12%;right:12%;bottom:12%;height:19%;z-index:-1;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,#9b743f22,transparent 65%);transition:opacity 600ms ease}
.studio-ring{position:absolute;inset:0;border:2px solid #f1cc88a0;box-shadow:0 0 6px #eac17c24,inset 0 0 4px #eac17c16;border-radius:50%;transform:scale(.65);opacity:.2;animation:studio-wave 5.2s var(--fx-ease) infinite;animation-play-state:paused}
.studio-ring:nth-child(2){animation-delay:-2.1s}.studio-ring:nth-child(3){animation-delay:-4.2s}
[data-fx-visible=true]:not([data-studio-light=off]) .studio-ring{animation-play-state:running}
@keyframes studio-wave{0%{transform:scale(.5);opacity:0}24%{opacity:.5}100%{transform:scale(1.12);opacity:0}}
body.dhd.page-product .product-showcase .product-stage[data-studio-light=off] .showcase-light,
[data-studio-light=off] .studio-beam,[data-studio-light=off] .studio-floor{opacity:0}
[data-studio-light=off] .studio-fixture{opacity:.25}
.studio-tools{display:flex;align-items:center;gap:16px;position:absolute;z-index:3;left:0;bottom:22px}
body.dhd .studio-switch{display:inline-flex;gap:10px;align-items:center;min-height:48px;padding:10px 12px;border:1px solid #b5985c5c;border-radius:0;background:#100e0de0;color:#efdfc3;font:600 12px/1.2 var(--sans,Arial)}
.studio-switch-track{position:relative;display:inline-block;width:27px;height:14px;border:1px solid #d5b37580;border-radius:12px}
.studio-switch-track:after{content:"";position:absolute;left:3px;top:3px;width:6px;height:6px;border-radius:50%;background:#9b8b71;transform:translateX(0);transition:transform 220ms ease,background-color 220ms ease}
.studio-switch[aria-checked=true] .studio-switch-track:after{transform:translateX(12px);background:#ffe5a5}
.studio-switch:focus-visible,.fx-motion-control:focus-visible{outline:2px solid #ffe5a5;outline-offset:4px}
/* The can contains more transparent margin than a bag. Enlarge its box uniformly. */
body.dhd.page-product .product-showcase[data-showcase-format=wet] .main-pack{height:126%;max-height:126%;width:100%;max-width:940px;flex-shrink:0}
body.dhd.page-product .product-showcase[data-showcase-format=wet] .studio-floor{bottom:8%}

/* MAGNETIC / GLITCH: translate is independent of transform-based legacy styles.
 * The 40px attraction boundary is handled in JS; displacement is capped at 12px.
 * Only the small decorative plate slices. The label and focus outline stay whole.
 */
.fx-magnetic{position:relative;isolation:isolate}
.fx-magnetic-content{display:inline-flex;align-items:center;justify-content:inherit;gap:inherit;translate:var(--fx-x,0px) var(--fx-y,0px);pointer-events:none}
.poster-bottom>.fx-magnetic-content{width:100%;justify-content:space-between}
.fx-glitch-plate{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:var(--fx-gold);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.fx-glitch .fx-glitch-plate{animation:fx-glitch-plate 620ms steps(1,end) both}
/* Two bounded gold/copper hits rather than repeated full-field strobing. */
@keyframes fx-glitch-plate{
 0%{opacity:0;transform:translateX(0)}
 10%{opacity:.24;transform:translateX(-3px);clip-path:polygon(0 8%,96% 0,100% 70%,3% 100%)}
 24%{opacity:.08;transform:translateX(3px);background:var(--fx-copper);clip-path:polygon(4% 0,100% 12%,94% 100%,0 88%)}
 64%{opacity:.23;transform:translateX(-1px);background:var(--fx-ivory);clip-path:polygon(0 0,100% 0,100% 38%,93% 38%,93% 100%,0 100%)}
 100%{opacity:0;transform:translateX(0);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
}
.fx-magnetic:is(:hover,:focus-visible){border-color:var(--fx-gold)!important}

/* TEXT DECODER: original text reserves exact metrics and remains in the AX tree.
 * The changing decorative overlay is aria-hidden and never replaces a heading.
 */
.fx-text{position:relative;display:inline-block;white-space:nowrap}
.fx-text-code{position:absolute;inset:0;overflow:hidden;color:var(--fx-gold);pointer-events:none;white-space:inherit}
.fx-decoding .fx-text-original{opacity:0}
.fx-decoding .fx-text-code{display:inline}
.fx-text-code{display:none}

/* Independent icon owners: gentle float on wrapper; spring on inner icon. */
.fx-icon-float{display:inline-flex;align-items:center;justify-content:center;animation:fx-icon-bob 4.2s ease-in-out infinite;animation-play-state:paused}
.fx-icon-float[data-fx-visible=true]{animation-play-state:running}
.fx-icon-spring{display:inline-flex;align-items:center;justify-content:center;transform-origin:center}
.fx-icon-active .fx-icon-spring{animation:fx-icon-snap 760ms cubic-bezier(.2,.8,.2,1) both}
@keyframes fx-icon-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes fx-icon-snap{0%{transform:rotate(0) scale(1)}52%{transform:rotate(375deg) scale(1.24)}76%{transform:rotate(351deg) scale(.96)}100%{transform:rotate(360deg) scale(1)}}

/* LASER MATRIX: a horizontal bar travels down the frame. A clipped duplicate
 * reveals the decoded NEW image immediately behind it. Originals stay intact.
 * Clip-path has a bounded paint cost; only the beam uses compositor transforms.
 */
.fx-laser-host{position:relative;isolation:isolate}
.fx-laser-line{position:absolute;left:0;right:0;top:0;height:2px;z-index:6;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent 1%,#a56937 12%,#ffe1a1 46%,#fff1ce 52%,#a56937 88%,transparent);box-shadow:0 0 10px #efc87b80}
.fx-laser-line:after{content:"";position:absolute;left:0;right:0;top:-9px;height:20px;background:linear-gradient(transparent,#eac17c25,transparent)}
.fx-laser-cover{position:absolute!important;pointer-events:none!important;z-index:4!important;object-fit:contain;filter:none!important;margin:0!important;transform:none!important}
.fx-motion-control{position:fixed;right:16px;bottom:92px;z-index:1100;display:flex;align-items:center;gap:9px;min-height:44px;padding:10px 14px;background:#17140fe8;border:1px solid #b799636e;color:#f3ddba;font:600 11px/1.2 var(--sans,Arial);letter-spacing:.06em;backdrop-filter:blur(10px);cursor:pointer}
.fx-motion-indicator{width:7px;height:7px;border:1px solid #eed095;border-radius:50%;background:#eed095}
.fx-motion-control[aria-pressed=false] .fx-motion-indicator{background:transparent}
html[data-fx-motion=off] .studio-ring,html[data-fx-motion=off] .fx-icon-float,
html[data-dhd-motion-paused] .studio-ring,html[data-dhd-motion-paused] .fx-icon-float{animation-play-state:paused!important}
html[data-fx-motion=off] .fx-glitch-plate,html[data-fx-motion=off] .fx-icon-spring{animation:none!important}
html[data-fx-motion=off] .fx-magnetic-content{translate:none!important}
html[data-fx-motion=off] .fx-decoding .fx-text-original{opacity:1}
html[data-fx-motion=off] .fx-text-code{display:none!important}

@media(max-width:760px){
 .fx-grid{background-size:42px 42px;opacity:.6}
 .studio-fixture{right:-10px;top:-8px;width:84px}
 .studio-beam{width:100%;right:-12%;opacity:.65}
 .studio-floor{left:3%;right:3%;bottom:15%}
 .studio-tools{left:0;bottom:12px}
 body.dhd .studio-switch{font-size:11px;padding:8px;gap:7px}
 body.dhd.page-product .product-showcase .enlarge{bottom:12px;padding:10px 12px;gap:8px;font-size:12px}
 .fx-motion-control{bottom:84px;right:8px;padding:9px 11px;min-height:44px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 .studio-ring,.fx-icon-float,.fx-icon-spring,.fx-glitch-plate{animation:none!important}
 .studio-ring{transform:scale(1);opacity:.22}.studio-ring:nth-child(n+2){display:none}
 .fx-magnetic-content{translate:none!important}
 .fx-particles,.fx-laser-line,.fx-laser-cover,.fx-text-code{display:none!important}
 .fx-decoding .fx-text-original{opacity:1!important}
 .studio-beam,.studio-fixture,.studio-floor,.studio-switch-track:after{transition:none!important}
}
@media print{.fx-motion-control,.studio-tools,.fx-particles,.fx-laser-line,.fx-grid{display:none!important}}

/* B&O study: one large opening object, then its real food/purchase chapter.
 * Native controls remain a direct anchor away; no timed intro blocks buying.
 */
body.dhd.page-product .product-reveal{--showcase-gutter:clamp(22px,6vw,86px);padding:var(--header,128px) var(--showcase-gutter) 0;background:#100f0d;scroll-margin-top:0}
body.dhd.page-product .product-reveal .product-showcase{margin:0 calc(-1 * var(--showcase-gutter));padding-top:20px;padding-bottom:28px}
.product-reveal-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 0 0;color:#d9c3a0}
.product-reveal-bar .eyebrow{margin:0!important;font-size:11px!important;letter-spacing:.1em}
body.dhd .studio-buy-link{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;color:#ffdf9a;border-bottom:1px solid #c09d5a66;font:600 13px/1.3 var(--sans);text-decoration:none}
body.dhd.page-product .product-reveal .showcase-heading h2{font-size:clamp(46px,5.8vw,86px);max-width:15ch;line-height:1.02}
body.dhd.page-product .product-reveal .showcase-heading>.eyebrow{display:none}
.studio-contact{position:absolute;z-index:0;pointer-events:none;height:16px;border-radius:50%;background:radial-gradient(ellipse,#0009,transparent 70%);transform:translate(-50%,-50%)}
.product-reveal .fx-motion-control{position:static;right:auto;bottom:auto;backdrop-filter:none;background:transparent;border:0;padding:6px 0;min-height:44px}
.product-reveal .showcase-view-controls{align-items:center}
@media(max-width:760px){
 body.dhd.page-product .product-reveal{--showcase-gutter:22px}
 .product-reveal-bar{padding-top:16px;gap:10px}.product-reveal-bar .eyebrow{max-width:14ch}
 body.dhd .studio-buy-link{font-size:11px;gap:10px}
 body.dhd.page-product .product-reveal .product-showcase{padding-top:20px;padding-bottom:20px}
 body.dhd.page-product .product-reveal .showcase-heading{gap:7px;margin-bottom:4px}
 body.dhd.page-product .product-reveal .showcase-heading h2{font-size:clamp(38px,10.7vw,66px);line-height:1.01}
 body.dhd.page-product .product-reveal .showcase-heading>p:not(.eyebrow){font-size:14px}
 body.dhd.page-product .product-showcase .product-stage{padding:10px 0 36px}
 body.dhd.page-product .product-showcase[data-showcase-format=wet] .main-pack{width:140%;max-width:none;height:128%;max-height:128%}
 .studio-fixture{width:58px;top:-8px;right:-8px}
 .studio-beam{right:0;width:100%}
 .product-reveal .showcase-view-controls .fx-motion-control{justify-self:start;padding:0}
 body.dhd.page-product .product-reveal .view-bar{gap:8px;padding-top:12px}
 body.dhd.page-product .product-reveal .view-bar p{text-align:left}
}

/* Product identity remains readable beside the direct buying route. */
body.dhd.page-product .product-reveal-bar .eyebrow{color:#dec69f!important;letter-spacing:.045em;line-height:1.5}
@media(max-width:760px){body.dhd.page-product .product-reveal-bar .eyebrow{max-width:none;font-size:10px!important;white-space:nowrap}.product-reveal-bar{flex-wrap:wrap}.product-reveal-bar .studio-buy-link{margin-left:auto}}