@property --hw-hero-h{syntax: "<length>"; inherits: true; initial-value: 0px;}.hw-hero{--hw-cream: #ffe4d1;--hw-box-top: 50px;--hw-box-left: 0%;--hw-box-ratio: 1.7778;--hw-ratio: 1.7778;display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:var(--layer-base);container-type:size;pointer-events:none}@media(max-width:768px){.hw-hero{--hw-box-top: 100px;--hw-box-left: 35%}}@media(max-width:749px){.hw-hero{--hw-box-ratio: .41852;--hw-ratio: .4615}}@media(min-width:750px)and (max-width:1000px){.hw-hero{display:none}}.hw-hero__box{position:absolute;top:var(--hw-box-top);left:var(--hw-box-left);width:100cqw;height:max(100%,calc(var(--hw-box-top) + 100cqw / var(--hw-box-ratio)));container-type:size;--hw-hero-h: 100cqh}.hw-hero__frame{position:absolute;top:0;left:50%;width:max(100cqw,calc(100cqh * var(--hw-ratio)));aspect-ratio:var(--hw-ratio);transform:translate(-50%);background:var(--hw-cream)}.hw-hero__poster img,.hw-hero__video{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;z-index:2}.hw-hero__poster img{transition:opacity .3s ease}.hw-hero__video{opacity:0;transition:opacity .3s ease}.hw-hero.is-ready .hw-hero__video{opacity:1}.hw-hero.is-ready .hw-hero__poster img{opacity:0}.hw-hero__fx{position:absolute;top:0;right:0;bottom:0;left:0}.hw-hero__fx--back{z-index:1}.hw-hero:not(.is-alpha) .hw-hero__fx--back,.hw-hero__fx--front{z-index:3}.hw-hero__set{position:absolute;top:0;right:0;bottom:0;left:0}@media(max-width:749px){.hw-hero__set--desktop{display:none}}@media(min-width:750px){.hw-hero__set--mobile{display:none}}.hw-it{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%);rotate:calc(var(--r) * 1deg);animation:hw-enter .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d) * 1s)}.hw-it--clamp{top:min(calc(var(--y) * 1%),calc(var(--hw-hero-h) - var(--hw-box-top) - var(--lift) - var(--w) * var(--hw-ratio) * var(--a) * 1%))}.hw-it svg{display:block;width:100%;height:auto;overflow:visible;will-change:transform}.hw-it--float svg{animation:hw-float 5s ease-in-out infinite}.hw-it--bob svg{transform-origin:50% 90%;animation:hw-bob 2.5s ease-in-out infinite}.hw-it--flap{animation:hw-enter .7s cubic-bezier(.2,.8,.2,1) both,hw-drift 5s ease-in-out infinite;animation-delay:calc(var(--d) * 1s),0s}.hw-it--flap svg{transform-origin:50% 40%;animation:hw-flap .85s ease-in-out infinite alternate}.hw-it--twinkle svg{animation:hw-twinkle 1.25s ease-in-out infinite alternate;animation-delay:calc(var(--d) * -3s)}.hw-it--hat svg{transform-origin:50% 85%;animation:hw-sway 2.5s ease-in-out infinite}.hw-hero.is-paused :is(.hw-it,.hw-it svg){animation-play-state:paused}@media(prefers-reduced-motion:reduce){.hw-it,.hw-it svg{animation:none}}@keyframes hw-enter{0%{opacity:0;translate:0 14px;scale:.9}to{opacity:1;translate:0 0;scale:1}}@keyframes hw-float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-7%) rotate(-3deg)}}@keyframes hw-bob{0%,to{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5%) rotate(4deg)}}@keyframes hw-flap{0%{transform:scaleX(1) scaleY(1)}to{transform:scaleX(.94) scaleY(1.02)}}@keyframes hw-drift{0%,to{translate:0 0}50%{translate:4% -10%}}@keyframes hw-twinkle{0%{transform:scale(.55) rotate(-15deg);opacity:.35}to{transform:scale(1) rotate(0);opacity:1}}@keyframes hw-sway{0%,to{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}.hw-it{padding:0;border:0;background:transparent;pointer-events:auto}.hw-it:focus-visible,.hw-candy-hit:focus-visible{outline:2px solid #000;outline-offset:5px}.hw-candy-hit{position:absolute;z-index:3;left:32%;top:18%;width:32%;height:58%;padding:0;border:0;border-radius:50%;background:transparent;pointer-events:auto}@media(max-width:749px){.hw-candy-hit{left:16%;top:18%;width:72%;height:38%}}@media(prefers-reduced-motion:no-preference){.hw-hero__video,.hw-hero__poster img{animation:hw-candy-bounce 3.8s ease-in-out infinite}}.hw-hero.is-paused :is(.hw-hero__video,.hw-hero__poster img){animation-play-state:paused}@keyframes hw-candy-bounce{0%,to{translate:0 0}50%{translate:0 -1.8%}}body:has(halloween-hero) #header-component{pointer-events:none}body:has(halloween-hero) #header-component :is(a,button,summary,input,select,dialog){pointer-events:auto}.hw-it--twinkle{z-index:1}
/*# sourceMappingURL=/cdn/shop/t/108/assets/halloween-hero.css.map */