/* Each depth plane, entrance and idle motion has its own transform layer. */
.hero-scene{animation:none}
.product-entrance{position:relative;width:100%;height:100%;transform-origin:50% 58%}
.hero-props{position:absolute;inset:0;pointer-events:none;transition:transform .9s var(--ease)}
.props-back{z-index:1;transform:translate(calc(var(--mx)*-9px),calc(var(--my)*-7px))}
.props-front{z-index:3;transform:translate(calc(var(--mx)*25px),calc(var(--my)*18px))}
.hero-ingredient{position:absolute;aspect-ratio:1;pointer-events:none;--angle:0deg;--lift:-13px;--turn:7deg;--drift-time:7s}
.ingredient-drift{position:relative;width:100%;height:100%;transform:rotate(var(--angle));animation:ingredient-drift var(--drift-time) ease-in-out infinite}
.hero-ingredient img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;filter:drop-shadow(8px 14px 8px #77421821)}
.hero-ingredient .ingredient-flavor{transition:opacity .55s ease,transform .85s var(--ease)}
.hero-ingredient .ingredient-peach{opacity:0;transform:scale(.72) rotate(24deg)}
body[data-flavor=pesca] .hero-ingredient .ingredient-lemon{opacity:0;transform:scale(.72) rotate(-24deg)}
body[data-flavor=pesca] .hero-ingredient .ingredient-peach{opacity:1;transform:none}
.ice-back{width:17%;left:0%;top:18%;--angle:-22deg;--lift:13px;--turn:-8deg;--drift-time:8s}
.fruit-back{width:23%;right:-2%;top:33%;--angle:28deg;--lift:10px;--turn:-6deg;--drift-time:9s}
.ice-top{width:11%;left:54%;top:8%;--angle:17deg;--lift:-10px;--turn:11deg;--drift-time:6.5s}
.fruit-front{width:33%;left:-9%;bottom:20%;--angle:-21deg;--lift:-16px;--turn:6deg;--drift-time:7.5s}
.ice-front{width:18%;right:7%;bottom:29%;--angle:-14deg;--lift:15px;--turn:10deg;--drift-time:8.5s}
.ice-front img{filter:drop-shadow(12px 20px 12px #29355c24)}
.hero-replay{position:absolute;left:50%;bottom:1.1%;transform:translateX(-50%);z-index:6;display:none;align-items:center;justify-content:center;gap:7px;min-height:32px;padding:4px 12px;border:0;background:transparent;font-size:12px;font-weight:500;white-space:nowrap;opacity:.72;transition:opacity .2s}
.hero-motion-ready .hero-replay{display:flex}
.hero-replay:hover{opacity:1}.hero-replay>span{font-size:20px;display:inline-block;transition:transform .5s var(--ease)}.hero-replay:hover>span{transform:rotate(-65deg)}
.intro-preparing .product-entrance,.intro-preparing .hero-ingredient{opacity:0}
.intro-preparing .ingredient-drift,.intro-preparing .product-float,.intro-playing .ingredient-drift,.intro-playing .product-float,.offscreen .ingredient-drift,.document-hidden .ingredient-drift,.document-hidden .product-float,.document-hidden .orbit{animation-play-state:paused}
.hero-ingredient img.asset-unavailable{visibility:hidden}
@keyframes ingredient-drift{0%,100%{transform:translateY(0) rotate(var(--angle))}50%{transform:translateY(var(--lift)) rotate(calc(var(--angle) + var(--turn)))}}
@media(max-width:1150px){.fruit-front{width:31%;left:-5%;bottom:22%}.ice-front{right:-1%;bottom:35%;width:20%}.fruit-back{width:23%;right:-1%}.ice-back{top:20%}.hero-replay{bottom:.8%}}
@media(max-width:760px){.fruit-front{left:-1%;bottom:22%;width:30%}.ice-back{left:3%;top:18%;width:16%}.fruit-back{right:0%;top:41%;width:22%}.ice-front{right:0%;bottom:35%;width:20%}.ice-top{top:8%;left:51%}.hero-replay{bottom:0%;font-size:12px}.hero-scene .flavor-switch{bottom:6%}}
@media(prefers-reduced-motion:reduce){.hero-props{transform:none!important}.ingredient-drift{animation:none!important}.intro-preparing .product-entrance,.intro-preparing .hero-ingredient{opacity:1}.hero-motion-ready .hero-replay{display:none}}