/* Autonomous art direction. Every repeating scene sleeps outside the viewport. */
.dz-autonomous .dz-title-mask{display:inline-block;overflow:clip;vertical-align:bottom;padding:.08em .06em .13em;margin:-.08em -.06em -.13em;perspective:650px}
.dz-title-run{display:inline-block;transform-origin:0 100%}
.dz-autonomous .dz-hero-art{perspective:1100px}
.dz-autonomous .dz-sun{animation:dz-sun-breathe 14s ease-in-out infinite alternate;transform-origin:50% 50%}
.dz-autonomous .dz-hero-left>.dz-bottle{animation:dz-bottle-drift 6.8s ease-in-out -2s infinite;--bob-rotate:-3deg}
.dz-autonomous .dz-hero-right>.dz-bottle{animation:dz-bottle-drift 7.9s ease-in-out -4.6s infinite;--bob-rotate:4deg}
.dz-autonomous .dz-hero-centre>.dz-bottle{animation:dz-bottle-drift 6.1s ease-in-out -.7s infinite;--bob-rotate:2deg}
.dz-autonomous .dz-hero-orbit{animation:dz-orbit-breathe 12s ease-in-out infinite alternate}
.dz-autonomous .dz-round-note{animation:dz-stamp 8s cubic-bezier(.4,0,.2,1) -2s infinite;transform-origin:50% 65%}
.dz-aroma-ribbons{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1;fill:none;stroke:#087762;stroke-width:1.2;opacity:.38;pointer-events:none}
.dz-aroma-ribbons path{stroke-dasharray:.16 .84;animation:dz-aroma 10s linear infinite;animation-delay:calc(var(--n)*-5s)}
.dz-carbonation{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:visible}
.dz-carbonation i{position:absolute;display:block;left:var(--x);bottom:4%;width:var(--size);height:var(--size);border:1.5px solid #08776266;border-radius:50%;background:#fffef52b;animation:dz-rise var(--duration) ease-in var(--delay) infinite;opacity:0;will-change:transform}
.dz-carbonation i:nth-child(4n){border:0;background:#fffef5b0;width:7px;height:7px}
.dz-carbonation i:nth-child(5n){border-color:#08776299;box-shadow:inset -3px -3px 0 #ffffff70}
.dz-autonomous .dz-wave{left:-15%;width:130%;height:90px;overflow:visible}
.dz-autonomous .dz-wave svg{animation:dz-tide 9s ease-in-out infinite alternate;transform-origin:50% 100%}
.dz-autonomous .dz-manifesto .dz-wave svg{animation-delay:-4s;animation-duration:12s}
.dz-autonomous .dz-proof li>span{animation:dz-proof-turn 10s cubic-bezier(.22,1,.36,1) infinite;animation-delay:calc(var(--proof-index,0)*1.3s)}
.dz-proof li:nth-child(2){--proof-index:1}.dz-proof li:nth-child(3){--proof-index:2}
.dz-autonomous .dz-card-photo{animation:dz-shelf-wave 7s cubic-bezier(.4,0,.2,1) infinite;animation-delay:calc(var(--card-index)*.33s)}
.dz-autonomous .dz-card-disc{animation:dz-disc-wave 7s ease-in-out infinite;animation-delay:calc(var(--card-index)*.33s)}
.dz-autonomous .dz-flavour-card:focus-within .dz-card-photo,.dz-autonomous .dz-flavour-card:hover .dz-card-photo{animation-play-state:paused}
.dz-autonomous .dz-film-stage{clip-path:inset(0 round calc(65px - var(--scene-p,0)*80px));transform:scale(calc(.96 + var(--scene-p,0)*.08));transform-origin:50% 50%}
.dz-autonomous .dz-film-stage video{object-fit:cover}
.dz-autonomous .dz-film-stage.is-playing .dz-film-tag{display:block;opacity:.85}
.dz-autonomous .dz-pack-art{perspective:1000px}
.dz-autonomous .dz-pack-box{transform-origin:50% 90%}
.dz-autonomous .dz-pack-fan>div{transform:translateY(125px) rotate(calc((var(--i) - 2)*2deg)) scale(.87);transition:none}
.dz-autonomous .dz-box-lid{transform-origin:50% 100%;transition:none;backface-visibility:hidden}
.dz-autonomous .dz-pack.is-open .dz-box-lid{animation:dz-lid-open 1.2s cubic-bezier(.22,1,.36,1) both;opacity:0}
.dz-autonomous .dz-pack.is-open .dz-pack-box{animation:dz-box-pop 1.5s ease-in-out both}
.dz-autonomous .dz-pack.is-open .dz-pack-fan>div{animation:dz-unpack 1.8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.3s + var(--i)*.14s);transform:translateY(-30px) rotate(calc((var(--i) - 2)*16deg))}
.dz-autonomous .dz-pack.is-open .dz-pack-fan .dz-bottle{animation:dz-pack-hover 6s ease-in-out infinite;animation-delay:calc(2.3s + var(--i)*.3s)}
.dz-autonomous .dz-pack-plus{transform:scale(0);opacity:0}
.dz-autonomous .dz-pack.is-open .dz-pack-plus{animation:dz-surprise 1.1s cubic-bezier(.22,1,.36,1) 1.5s both}
.dz-autonomous .dz-burst{z-index:3}
.dz-autonomous .dz-burst i{left:50%;bottom:45%;animation:none;opacity:0;background:#fffef5a0;border-color:#08776277}
.dz-autonomous .dz-pack.is-open .dz-burst i{animation:dz-burst 1.65s cubic-bezier(.12,.64,.2,1) calc(.55s + var(--n)*.025s) both}
.dz-autonomous .dz-near figure{transform:translateY(calc((.5 - var(--scene-p,0))*70px)) rotate(calc(-4deg + var(--scene-p,0)*8deg));transform-origin:50% 65%}
.dz-autonomous .dz-recipe-grid article{transform:translateY(calc((.5 - var(--scene-p,0))*var(--lift,70px))) rotate(calc((.5 - var(--scene-p,0))*var(--tilt,-4deg)))}
.dz-autonomous .dz-recipe-grid article:nth-child(2){--lift:-80px;--tilt:5deg}.dz-autonomous .dz-recipe-grid article:nth-child(3){--lift:100px;--tilt:-6deg}

@keyframes dz-bottle-drift{0%,100%{transform:translate3d(0,8px,0) rotate(calc(var(--bob-rotate)*-1))}50%{transform:translate3d(0,-18px,0) rotate(var(--bob-rotate))}}
@keyframes dz-sun-breathe{0%{transform:rotate(-16deg) scale(.96,.93);border-radius:52% 48% 36% 64%/48% 36% 64% 52%}100%{transform:rotate(-5deg) scale(1.025,1.04);border-radius:40% 60% 56% 44%/58% 54% 46% 42%}}
@keyframes dz-orbit-breathe{from{transform:scale(.96) rotate(-5deg)}to{transform:scale(1.08) rotate(12deg)}}
@keyframes dz-aroma{to{stroke-dashoffset:-1}}
@keyframes dz-stamp{0%,65%,100%{transform:rotate(0)}72%{transform:rotate(-17deg) scale(1.06)}81%{transform:rotate(7deg)}90%{transform:rotate(-3deg)}}
@keyframes dz-rise{0%{opacity:0;transform:translate3d(0,20px,0) scale(.45)}14%{opacity:.85}80%{opacity:.65}100%{opacity:0;transform:translate3d(var(--drift),-480px,0) scale(1.1)}}
@keyframes dz-tide{from{transform:translateX(-5%) scaleY(.7)}to{transform:translateX(5%) scaleY(1.12)}}
@keyframes dz-proof-turn{0%,65%,100%{transform:rotate(0)}80%{transform:rotate(360deg)}}
@keyframes dz-shelf-wave{0%,8%,48%,100%{transform:translateY(0) rotate(0)}22%{transform:translateY(-22px) rotate(-5deg)}35%{transform:translateY(4px) rotate(2deg)}}
@keyframes dz-disc-wave{0%,8%,48%,100%{transform:scale(1);opacity:.8}22%{transform:scale(.8,.7);opacity:.4}}
@keyframes dz-lid-open{0%{transform:translateY(0) rotateX(0);opacity:1}28%{transform:translateY(-12px) rotateX(-15deg);opacity:1}65%{opacity:1}100%{transform:translateY(-130px) rotateX(100deg) rotate(-8deg);opacity:0}}
@keyframes dz-box-pop{0%,100%{transform:translateY(0) scale(1)}17%{transform:translateY(5px) scale(1.025,.975)}39%{transform:translateY(-9px) scale(.98,1.03)}65%{transform:translateY(2px) scale(1.008,.99)}}
@keyframes dz-unpack{0%{transform:translateY(125px) rotate(calc((var(--i) - 2)*2deg)) scale(.87)}72%{transform:translateY(-49px) rotate(calc((var(--i) - 2)*17deg)) scale(1.02)}100%{transform:translateY(-30px) rotate(calc((var(--i) - 2)*16deg)) scale(1)}}
@keyframes dz-pack-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes dz-surprise{0%{transform:scale(0) rotate(-100deg);opacity:0}65%{transform:scale(1.18) rotate(8deg);opacity:1}83%{transform:scale(.94) rotate(-3deg)}100%{transform:scale(1);opacity:1}}
@keyframes dz-burst{0%{opacity:0;transform:rotate(var(--angle)) translateY(0) scale(.1)}12%{opacity:1}80%{opacity:.8}100%{opacity:0;transform:rotate(var(--angle)) translateY(-260px) scale(.8)}}

/* Pause offscreen work, the whole hidden tab, and the explicit comfort control. */
.dz-autonomous section:not(.is-inview) *,.dz-autonomous .dz-flavour-card:not(.dz-card-visible) *,.dz-autonomous.dz-sleeping *{animation-play-state:paused!important}
.dz-autonomous.dz-paused *{animation:none!important;transition:none!important}
.dz-autonomous.dz-paused .dz-carbonation,.dz-autonomous.dz-paused .dz-aroma-ribbons{display:none}
.dz-autonomous.dz-paused .dz-pack-plus{opacity:1;transform:none}
.dz-autonomous.dz-paused .dz-pack-fan>div{transform:translateY(-30px) rotate(calc((var(--i) - 2)*16deg))}
.dz-autonomous.dz-paused .dz-box-lid{display:none}
.dz-autonomous.dz-paused :is(.dz-film-stage,.dz-near figure,.dz-recipe-grid article){transform:none;clip-path:none}
@media(max-width:800px){
 .dz-autonomous .dz-hero-art{margin-top:32px}
 .dz-autonomous .dz-wave{height:58px}
 .dz-carbonation i{--size:10px!important}
 .dz-autonomous .dz-aroma-ribbons{inset:-12% -8%;width:116%;height:120%}
 .dz-autonomous .dz-pack.is-open .dz-pack-fan>div{animation-name:dz-unpack-mobile}
 .dz-autonomous .dz-burst i{animation-name:none}
 .dz-autonomous .dz-pack.is-open .dz-burst i{animation-name:dz-burst-mobile}
 .dz-autonomous .dz-film-stage{transform:none;clip-path:inset(0 round 18px)}
 .dz-autonomous .dz-near figure{transform:rotate(calc(-2deg + var(--scene-p,0)*4deg))}
 .dz-autonomous .dz-recipe-grid article{transform:none}
 @keyframes dz-rise{0%{opacity:0;transform:translate3d(0,10px,0) scale(.4)}14%{opacity:.8}80%{opacity:.6}100%{opacity:0;transform:translate3d(var(--drift),-290px,0) scale(1)}}
}
@keyframes dz-unpack-mobile{0%{transform:translateY(100px) rotate(calc((var(--i) - 2)*2deg)) scale(.87)}72%{transform:translateY(-38px) rotate(calc((var(--i) - 2)*16deg)) scale(1.02)}100%{transform:translateY(-25px) rotate(calc((var(--i) - 2)*15deg)) scale(1)}}
@keyframes dz-burst-mobile{0%{opacity:0;transform:rotate(var(--angle)) translateY(0) scale(.1)}12%{opacity:1}80%{opacity:.6}100%{opacity:0;transform:rotate(var(--angle)) translateY(-165px) scale(.8)}}
@media(prefers-reduced-motion:reduce){.dz-autonomous *{animation:none!important;transition:none!important}.dz-carbonation,.dz-aroma-ribbons{display:none}.dz-autonomous .dz-pack-plus{opacity:1;transform:none}.dz-autonomous :is(.dz-film-stage,.dz-near figure,.dz-recipe-grid article){transform:none;clip-path:none}}
