/* .hh-art is sized like object-fit: cover so the eyes and the spider stay on their spot in the picture */
.hh-scene{container-type:size}
.hh-art{position:absolute;left:50%;top:0;width:max(100cqw,100cqh * 740 / 1906);aspect-ratio:740/1906;transform:translateX(-50%);container-type:inline-size;
  --spider-x:73.6%;--spider-y:2.5%;--spider-size:7cqw}
.hh-art picture img{display:block;width:100%;height:auto}
@media (min-width:768px){
  .hh-art{top:auto;bottom:0;width:max(100cqw,100cqh * 1628 / 2034);aspect-ratio:1628/2034;--spider-x:79.15%;--spider-y:5.6%;--spider-size:3.9cqw}
}
@media (min-width:1024px){
  .hh-art{width:max(100cqw,100cqh * 2844 / 1614);aspect-ratio:2844/1614;--spider-x:86.55%;--spider-y:25.8%;--spider-size:2.5cqw}
}

.hh-spider{position:absolute;top:0;left:var(--spider-x);display:flex;flex-direction:column;align-items:center;height:var(--spider-y);transform:translateX(-50%);
  animation:hh-drop 15s ease-in-out -4s infinite}
.hh-spider.web{display:none;--spider-x:22.24%;--spider-y:14.4%;--spider-size:1.9cqw;animation-duration:12s;animation-delay:-10s}
@media (min-width:1024px){.hh-spider.web{display:flex}}
.hh-spider::before{content:"";flex:1;width:1px;background:linear-gradient(rgba(244,236,255,.12),rgba(244,236,255,.6))}
.hh-spider img{width:var(--spider-size);height:var(--spider-size);margin-top:calc(var(--spider-size) * -.28);transform-origin:50% 28%;
  filter:drop-shadow(0 0 1px rgba(214,190,255,.9)) drop-shadow(0 6px 8px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(160,110,236,.45));animation:hh-turn 5s ease-in-out infinite alternate}
@keyframes hh-drop{0%,30%,100%{height:var(--spider-y)}42%{height:calc(var(--spider-y) + 6cqw)}48%{height:calc(var(--spider-y) + 4.6cqw)}54%{height:calc(var(--spider-y) + 5.4cqw)}62%{height:calc(var(--spider-y) + 5.4cqw)}74%{height:var(--spider-y)}}
@keyframes hh-turn{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}

.hh-eyes{position:absolute;left:8.47%;top:56%;display:none;align-items:center;gap:9em;font-size:.05cqw;transform:translate(-50%,-50%)}
@media (min-width:1024px){.hh-eyes{display:flex}}
.hh-eyes::before{content:"";position:absolute;inset:-12em -16em;border-radius:50%;background:radial-gradient(closest-side,rgba(3,1,6,.9),rgba(3,1,6,.5) 55%,rgba(3,1,6,0))}
.hh-eyes .ew{position:relative;filter:drop-shadow(0 0 3em rgba(255,166,48,.75)) drop-shadow(0 0 9em rgba(255,120,20,.35))}
.hh-eyes .ew.l{transform:rotate(5deg)}
.hh-eyes .ew.r{transform:rotate(-5deg)}
.hh-eyes .eye{position:relative;display:block;width:26em;height:14em;overflow:hidden;clip-path:url(#hhEyeLeft);
  background:radial-gradient(circle at 50% 55%,#5a2208,#1c0702 75%);animation:hh-blink 6.4s infinite}
.hh-eyes .ew.r .eye{clip-path:url(#hhEyeRight)}
.hh-eyes .eye::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,0) 48%,rgba(0,0,0,0) 78%,rgba(0,0,0,.4))}
.hh-eyes .iris{position:absolute;left:50%;top:50%;width:17em;height:17em;margin:-8em 0 0 -8.5em;border-radius:50%;transition:transform .14s ease-out;
  background:repeating-conic-gradient(from 3deg,rgba(110,34,0,.2) 0 2deg,rgba(255,226,140,.06) 2deg 7deg),
    radial-gradient(circle,#fff2b8 0,#ffc63f 26%,#f08812 54%,#943604 82%,#3c1003 100%)}
.hh-eyes .pup{position:absolute;left:50%;top:50%;width:2.6em;height:13em;margin:-6.5em 0 0 -1.3em;border-radius:50%;background:#070101;
  box-shadow:0 0 1.5em 1em rgba(40,8,0,.6);transition:width .3s ease,margin .3s ease}
.hh-eyes.near .pup{width:6em;margin-left:-3em}
.hh-eyes .shine{position:absolute;left:57%;top:24%;z-index:1;width:4em;height:2.6em;border-radius:50%;background:rgba(255,252,240,.9);filter:blur(.3em)}
.hh-eyes .ew.r .shine{left:auto;right:36%}
@keyframes hh-blink{0%,90%,100%{transform:scaleY(1)}93%{transform:scaleY(.06)}96%{transform:scaleY(1)}}

/* each layer is two tiles wide and slides by one tile; the noise is stitched so the loop has no seam */
.hh-smoke{position:absolute;top:0;left:0;width:200%;height:100%;background-size:50% 100%;background-repeat:repeat-x;will-change:transform;animation:hh-smoke 60s linear infinite}
.hh-smoke.s1{background-image:url(smoke-1.svg);opacity:.14}
.hh-smoke.s2{background-image:url(smoke-2.svg);opacity:.09;animation-duration:95s;animation-direction:reverse}
@keyframes hh-smoke{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.hh-flock{position:absolute;inset:0}
.hh-bat{position:absolute;left:0;top:0;display:block;color:#0b0810;will-change:transform}
.hh-bat svg{display:block;width:100%;height:auto;overflow:visible;fill:currentColor}

.hh-peek{position:absolute;right:24px;bottom:100%;width:60px;height:48px;overflow:hidden;pointer-events:none}
@media (min-width:768px){.hh-peek{right:56px;width:76px;height:61px}}
.hh-peek img{display:block;width:100%;height:100%;transform:translateY(100%);transform-origin:50% 100%;animation:hh-rise 11s ease-in-out 2s infinite}
@keyframes hh-rise{0%,46%,100%{transform:translateY(100%)}55%{transform:translateY(0)}64%{transform:translateY(0) rotate(-7deg)}74%{transform:translateY(0) rotate(6deg)}83%,90%{transform:translateY(0)}}

/* Tailwind utilities read the theme variables, so this turns the navigation's green accents orange */
.hh-nav{--color-primary:#ff9a3c;--color-gray-600:#2a2236}
.hh-nav .light-green-gradient-text{background:none;color:#fff}

.hh-logo{position:absolute;inset:0;pointer-events:none}
.hh-logo .word,.hh-logo .mark{position:absolute;inset:0}
.hh-logo .word{-webkit-mask:url(logo-word.svg) center/contain no-repeat;mask:url(logo-word.svg) center/contain no-repeat}
.hh-logo .mark{-webkit-mask:url(logo-mark.svg) center/contain no-repeat;mask:url(logo-mark.svg) center/contain no-repeat}
.hh-logo .word:not(.deep):not(.edge){
  background:radial-gradient(140% 60% at 30% -20%,rgba(255,226,170,.35),rgba(255,226,170,0) 60%),
    repeating-linear-gradient(177deg,rgba(92,44,14,0) 0 2px,rgba(92,44,14,.55) 2px 2.6px,rgba(92,44,14,0) 2.6px 4.4px,rgba(120,60,20,.28) 4.4px 5px,rgba(92,44,14,0) 5px 7px),
    repeating-radial-gradient(ellipse 34px 9px at 36% 60%,rgba(255,214,150,.0) 0 2px,rgba(110,52,16,.32) 2px 3px,rgba(255,214,150,0) 3px 5px),
    linear-gradient(180deg,#f0b46e 0%,#cf8641 38%,#a3602a 70%,#7d4318 100%)}
.hh-logo .mark:not(.deep):not(.edge){background:radial-gradient(120% 60% at 30% 0%,rgba(255,226,170,.3),rgba(255,226,170,0) 60%),
  repeating-linear-gradient(94deg,rgba(80,36,10,0) 0 1.6px,rgba(80,36,10,.55) 1.6px 2.3px,rgba(80,36,10,0) 2.3px 4.6px),linear-gradient(160deg,#e3a061,#a9652a 55%,#6f3a14)}
.hh-logo .deep{background:#3d1d08;transform:translate(1.4px,2.6px);
  filter:drop-shadow(-.4px -.7px 0 #5b2d0e) drop-shadow(-.4px -.7px 0 #6b3612) drop-shadow(0 3px 4px rgba(0,0,0,.7))}
.hh-logo .edge{background:linear-gradient(180deg,rgba(255,236,200,.9),rgba(255,236,200,0) 40%);transform:translate(-.5px,-.6px);opacity:.55;mix-blend-mode:screen}
.hh-logo .mk{position:absolute;inset:0;transform-origin:17% 6%;animation:hh-loose 7s ease-in-out infinite}
.hh-logo .nail{position:absolute;left:17%;top:6%;z-index:2;width:7px;height:7px;margin:-3px 0 0 -3px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f4f0ff,#8c84a6 60%,#3a3448);box-shadow:0 1px 2px rgba(0,0,0,.7)}
@keyframes hh-loose{0%,100%{transform:rotate(0)}12%{transform:rotate(2.5deg)}24%{transform:rotate(-1.5deg)}36%{transform:rotate(1deg)}
  62%{transform:rotate(0)}66%{transform:rotate(16deg) translateY(2px)}69%{transform:rotate(9deg) translateY(1px)}72%{transform:rotate(13deg) translateY(1.5px)}
  78%{transform:rotate(6deg)}86%{transform:rotate(-2deg)}92%{transform:rotate(1deg)}}

@media (prefers-reduced-motion:reduce){
  .hh-spider,.hh-spider img,.hh-eyes .eye,.hh-logo .mk,.hh-smoke{animation:none}
  .hh-peek img{animation:none;transform:none}
  .hh-flock{display:none}
}