.terror-layer,.halloween-js-decoration {
  display: none;
}

body.halloween-active .terror-layer {
  display: block;
}

body.halloween-active .halloween-js-decoration {
  display: block;
}

.halloween-host {
  position: relative;
  isolation: isolate;
}

.terror-toggle {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid rgb(166 79 43/0.5);
  border-radius: 999px;
  background: var(--demo-panel);
  color: var(--demo-ink);
  cursor: pointer;
  transition: background-color 180ms ease,border-color 180ms ease,box-shadow 180ms ease;
}

.terror-toggle-dot {
  width: 0.625rem;
  height: 0.625rem;
  flex: none;
  border-radius: 50%;
  background: #888;
  transition: background-color 180ms ease,box-shadow 180ms ease;
}

body.halloween-active .terror-toggle-dot {
  background: #ff5722;
  box-shadow: 0 0 10px rgb(255 87 34/0.9);
}

.terror-toggle-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.terror-toggle-label strong {
  color: var(--demo-accent);
}

body.halloween-active .halloween-flame {
  transform-origin: center bottom;
  animation: flameFlicker 1.7s ease-in-out infinite;
}

/* ANIMACIÓN · FLAMEFLICKER */

@keyframes flameFlicker {
  0%,100% {
    transform: scale(1) rotate(0);
    filter: drop-shadow(0 0 4px #ff5722);
    opacity: 0.9;
  }

  30% {
    transform: scale(1.08,0.94) rotate(-2deg);
    filter: drop-shadow(0 0 10px #ff9800);
    opacity: 1;
  }

  72% {
    transform: scale(0.94,1.08) rotate(2deg);
    filter: drop-shadow(0 0 7px #ffb300);
    opacity: 0.86;
  }

}

.halloween-web {
  position: absolute;
  z-index: 5;
  width: 120px;
  height: 120px;
  opacity: 0.26;
  pointer-events: none;
}

.halloween-web-promo {
  top: -1px;
  right: -1px;
  background: repeating-radial-gradient(circle at 100%0,transparent 0 13px,rgb(86 70 66/0.55) 14px 15px,transparent 16px 26px);
}

.halloween-web-promo::before,.halloween-web-promo::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 1px;
  background: rgb(86 70 66/0.45);
  transform-origin: right center;
}

.halloween-web-promo::before {
  transform: rotate(-45deg);
}

.halloween-web-promo::after {
  transform: rotate(-68deg);
}

.halloween-menu-spider {
  position: absolute;
  top: 2rem;
  right: 1rem;
  z-index: 3;
  width: 40px;
  height: 46px;
  pointer-events: none;
  animation: spiderSwing 4.8s ease-in-out infinite;
}

.halloween-menu-spider::before {
  content: "";
  position: absolute;
  top: -55px;
  left: 50%;
  width: 1px;
  height: 62px;
  background: rgb(74 59 50/0.55);
}

.halloween-spider-body {
  position: absolute;
  top: 9px;
  left: 13px;
  width: 14px;
  height: 18px;
  border-radius: 50%;
  background: #161311;
  box-shadow: 0 0 0 1px rgb(255 87 34/0.18);
}

.halloween-spider-body::before,.halloween-spider-body::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 25px;
  height: 14px;
  border-top: 2px solid #161311;
  border-bottom: 2px solid #161311;
}

.halloween-spider-body::before {
  right: 7px;
  transform: rotate(25deg);
}

.halloween-spider-body::after {
  left: 7px;
  transform: rotate(-25deg);
}

/* ANIMACIÓN · SPIDERSWING */

@keyframes spiderSwing {
  0%,100% {
    transform: rotate(-4deg);
  }

  50% {
    transform: rotate(5deg);
  }

}

.halloween-claw {
  position: absolute;
  z-index: 2;
  width: 92px;
  height: 126px;
  opacity: 0.22;
  pointer-events: none;
  transform: rotate(var(--claw-rotation,
        0deg
      ));
}

.halloween-claw::before,.halloween-claw::after,.halloween-claw-line {
  content: "";
  position: absolute;
  width: 5px;
  height: 108px;
  border-radius: 999px;
  background: linear-gradient(to bottom,transparent,rgba(135,56,22,0.75) 15%,rgba(117,26,18,0.86) 55%,rgba(166,79,43,0.28) 90%,transparent);
  box-shadow: 2px 0 2px rgb(28 25 23/0.08);
}

.halloween-claw::before {
  top: 2px;
  left: 14px;
  transform: rotate(-8deg);
}

.halloween-claw-line {
  top: 5px;
  left: 38px;
  transform: rotate(-1deg);
}

.halloween-claw::after {
  top: 12px;
  left: 63px;
  transform: rotate(8deg);
}

.halloween-claw.is-short {
  width: 72px;
  height: 96px;
  opacity: 0.17;
  transform: scale(0.82) rotate(var(--claw-rotation,
        0deg
      ));
}

body.halloween-active .halloween-claw {
  animation: clawReveal 900ms ease-out both;
}

/* ANIMACIÓN · CLAWREVEAL */

@keyframes clawReveal {
  from {
    opacity: 0;
    filter: blur(4px);
  }

  to {
    filter: blur(0);
  }

}

.halloween-track-trail {
  position: absolute;
  z-index: 2;
  width: 180px;
  height: 260px;
  opacity: 0.17;
  pointer-events: none;
}

.halloween-track-trail.is-bear {
  width: 210px;
  height: 300px;
  opacity: 0.15;
  transform: rotate(var(--trail-rotation,
        9deg
      ));
}

.halloween-paw {
  position: absolute;
  width: 34px;
  height: 42px;
  transform: rotate(var(--paw-rotation,
        0deg
      ));
}

.halloween-paw:nth-child(1) {
  top: 6px;
  left: 20px;
}

.halloween-paw:nth-child(2) {
  top: 68px;
  left: 88px;
}

.halloween-paw:nth-child(3) {
  top: 132px;
  left: 32px;
}

.halloween-paw:nth-child(4) {
  top: 194px;
  left: 103px;
}

.halloween-paw::before {
  content: "";
  position: absolute;
  left: 8px;
  bottom: 2px;
  width: 20px;
  height: 18px;
  border-radius: 50% 50% 58% 58%;
  background: var(--paw-color,
      #3f302b
    );
}

.halloween-paw::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 4px;
  width: 7px;
  height: 9px;
  border-radius: 50%;
  background: var(--paw-color,
      #3f302b
    );
  box-shadow: 9px -4px 0 var(--paw-color,
        #3f302b
      ),18px -1px 0 var(--paw-color,
        #3f302b
      ),25px 6px 0-1px var(--paw-color,
        #3f302b
      );
}

.halloween-track-trail.is-bear .halloween-paw {
  width: 45px;
  height: 52px;
}

.halloween-track-trail.is-bear .halloween-paw::before {
  width: 28px;
  height: 24px;
  left: 8px;
  border-radius: 48% 48% 55% 55%;
}

.halloween-track-trail.is-bear .halloween-paw::after {
  width: 8px;
  height: 10px;
  left: 2px;
  box-shadow: 9px -5px 0 var(--paw-color,
        #3f302b
      ),18px -7px 0 var(--paw-color,
        #3f302b
      ),27px -5px 0 var(--paw-color,
        #3f302b
      ),36px 1px 0-1px var(--paw-color,
        #3f302b
      );
}

body.halloween-active .halloween-track-trail {
  animation: trailBreathe 6s ease-in-out infinite;
}

/* ANIMACIÓN · TRAILBREATHE */

@keyframes trailBreathe {
  0%,100% {
    opacity: 0.12;
  }

  50% {
    opacity: 0.22;
  }

}

.halloween-kraken {
  height: 32px;
  margin-top: 0;
  margin-bottom: -16px;
}

.kraken-tentacle {
  position: absolute;
  bottom: -34px;
  width: 18px;
  height: 82px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg,#2d2826,#5a303a 55%,#211a1d);
  opacity: 0.72;
  transform-origin: bottom center;
}

.kraken-tentacle::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #88726b;
  box-shadow: 0 12px 0#88726b,0 24px 0#88726b;
}

.kraken-tentacle-one {
  left: 21%;
  animation: krakenWave 6s ease-in-out infinite;
}

.kraken-tentacle-two {
  left: 51%;
  height: 95px;
  animation: krakenWaveReverse 7s ease-in-out infinite;
}

.kraken-tentacle-three {
  right: 18%;
  height: 70px;
  animation: krakenWave 5.4s ease-in-out 0.7s infinite;
}

/* ANIMACIÓN · KRAKENWAVE */

@keyframes krakenWave {
  0%,100% {
    transform: rotate(-4deg) translateY(4px);
  }

  50% {
    transform: rotate(7deg) translateY(-8px);
  }

}

/* ANIMACIÓN · KRAKENWAVEREVERSE */

@keyframes krakenWaveReverse {
  0%,100% {
    transform: rotate(7deg) translateY(3px);
  }

  50% {
    transform: rotate(-8deg) translateY(-10px);
  }

}

.halloween-cava-fog {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%,rgb(123 31 162/0.13),transparent 35%),radial-gradient(circle at 18% 78%,rgb(255 87 34/0.09),transparent 32%);
  pointer-events: none;
}

body.halloween-active #cava>div::after {
  content: "";
  position: absolute;
  top: -35%;
  right: -20%;
  width: 55%;
  height: 170%;
  background: linear-gradient(110deg,transparent,rgb(126 75 145/0.08),transparent);
  transform: rotate(12deg);
  animation: cavaMist 8s ease-in-out infinite;
  pointer-events: none;
}

/* ANIMACIÓN · CAVAMIST */

@keyframes cavaMist {
  0%,100% {
    transform: translateX(-4%) rotate(12deg);
    opacity: 0.4;
  }

  50% {
    transform: translateX(10%) rotate(12deg);
    opacity: 0.8;
  }

}

.halloween-candle {
  position: absolute;
  top: -14px;
  right: 1rem;
  width: 14px;
  pointer-events: none;
}

.candle-flame {
  display: block;
  width: 8px;
  height: 14px;
  margin-inline: auto;
  border-radius: 50% 50% 50% 50%/65% 65% 35% 35%;
  background: linear-gradient(to top,#ff5722,#ffca28);
  transform-origin: center bottom;
}

.candle-body {
  display: block;
  width: 10px;
  height: 18px;
  margin-inline: auto;
  border-radius: 2px 2px 0 0;
  background: #4a3b32;
}

.halloween-footer-drips {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 18px;
  background: linear-gradient(180deg,#481515,#6b1c16);
  -webkit-clip-path: polygon(0 0,100%0,100% 20%,95% 20%,93% 100%,91% 20%,83% 20%,82% 65%,80% 20%,68% 20%,66% 80%,64% 20%,50% 20%,48% 55%,46% 20%,34% 20%,31% 90%,29% 20%,18% 20%,16% 60%,14% 20%,0 20%);
  clip-path: polygon(0 0,100%0,100% 20%,95% 20%,93% 100%,91% 20%,83% 20%,82% 65%,80% 20%,68% 20%,66% 80%,64% 20%,50% 20%,48% 55%,46% 20%,34% 20%,31% 90%,29% 20%,18% 20%,16% 60%,14% 20%,0 20%);
  opacity: 0.55;
  pointer-events: none;
}

/* FANTASMA Y STICKER */

body.halloween-active .ivar-companion {
  display: flex;
}

.ivar-companion[hidden],.ivar-story[hidden] {
  display: none;
}

.ivar-character:focus-visible,.ivar-story button:focus-visible,.ivar-story a:focus-visible {
  outline: 3px solid var(--demo-accent);
  outline-offset: 3px;
}

.ivar-story-text {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
  overflow-wrap: anywhere;
}

/* ANIMACIÓN · EMBERGLOW */

@keyframes emberGlow {
  0%,100% {
    filter: drop-shadow(0 0 16px rgba(255,107,107,0.4)) drop-shadow(0 0 32px rgba(255,159,67,0.2));
  }

  50% {
    filter: drop-shadow(0 0 30px rgba(255,107,107,0.75)) drop-shadow(0 0 55px rgba(255,159,67,0.4));
  }

}

/* FANTASMA Y STICKER */

.ivar-companion {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 46;
  display: none;
  flex-direction: column;
  align-items: center;
  will-change: transform;
  pointer-events: none;
  width: 154px;
}

.ivar-art {
  width: 100%;
  height: auto;
  display: block;
  animation: emberGlow 3.2s ease-in-out infinite;
  filter: drop-shadow(0 0 12px #fb923c55);
}

.ivar-story {
  position: fixed;
  z-index: 49;
  box-sizing: border-box;
  width: min(340px,calc(100vw - 24px));
  padding: 18px;
  border: 1px solid #b7c9b9;
  border-radius: 16px;
  background: var(--demo-bg);
  color: var(--demo-ink);
  box-shadow: 0 14px 50px #1c191729;
  font-family: var(--demo-font-sans);
  border-color: #dca76e;
}

/* LOBO */

.halloween-wolf-moon {
  position: absolute;
  top: 3px;
  right: 12px;
  width: 108px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,rgb(255 255 255/0.34),transparent 8%),radial-gradient(circle at 68% 48%,rgb(175 120 40/0.16),transparent 11%),linear-gradient(145deg,#ffc24f,#f5ab35);
  box-shadow: 0 0 30px rgb(246 174 60/0.18),0 0 74px rgb(246 174 60/0.1);
  opacity: 0.56;
  transition: transform 450ms ease,box-shadow 450ms ease,opacity 450ms ease;
}

.halloween-wolf-shadow {
  position: absolute;
  left: 70px;
  bottom: 15px;
  width: 190px;
  height: 30px;
  border-radius: 50%;
  background: rgb(0 0 0/0.24);
  filter: blur(8px);
}

.halloween-wolf-torso {
  position: absolute;
  top: 183px;
  left: 80px;
  width: 170px;
  height: 165px;
  background: linear-gradient(145deg,#2e323a,#17181c);
  -webkit-clip-path: polygon(21% 4%,45%0,70% 7%,90% 20%,100% 43%,92% 65%,80% 85%,62% 100%,35% 97%,16% 82%,5% 59%,0 32%);
  clip-path: polygon(21% 4%,45%0,70% 7%,90% 20%,100% 43%,92% 65%,80% 85%,62% 100%,35% 97%,16% 82%,5% 59%,0 32%);
}

.halloween-wolf-chest {
  position: absolute;
  top: 145px;
  left: 45px;
  width: 130px;
  height: 170px;
  background: #17181c;
  -webkit-clip-path: polygon(47%0,71% 9%,65% 19%,88% 25%,69% 34%,92% 41%,65% 49%,82% 58%,58% 60%,70% 73%,51% 70%,55% 91%,37% 78%,25% 100%,20% 75%,2% 82%,16% 59%,0 51%,20% 39%,5% 28%,29% 21%,18% 9%);
  clip-path: polygon(47%0,71% 9%,65% 19%,88% 25%,69% 34%,92% 41%,65% 49%,82% 58%,58% 60%,70% 73%,51% 70%,55% 91%,37% 78%,25% 100%,20% 75%,2% 82%,16% 59%,0 51%,20% 39%,5% 28%,29% 21%,18% 9%);
}

.halloween-wolf-neck {
  position: absolute;
  top: 92px;
  left: 103px;
  width: 115px;
  height: 130px;
  border-radius: 45% 45% 35% 35%;
  background: #17181c;
}

.halloween-wolf-head {
  position: absolute;
  top: 45px;
  left: 85px;
  width: 160px;
  height: 145px;
  transform-origin: 50% 80%;
  transition: transform 380ms cubic-bezier(0.2,0.8,0.2,1),filter 350ms ease;
}

.halloween-wolf-skull {
  position: absolute;
  top: 25px;
  left: 19px;
  width: 122px;
  height: 112px;
  background: linear-gradient(145deg,#2e323a 0%,#17181c 72%);
  -webkit-clip-path: polygon(50%0,72% 5%,87% 18%,97% 39%,92% 63%,76% 86%,50% 100%,23% 86%,8% 64%,3% 40%,13% 18%,29% 5%);
  clip-path: polygon(50%0,72% 5%,87% 18%,97% 39%,92% 63%,76% 86%,50% 100%,23% 86%,8% 64%,3% 40%,13% 18%,29% 5%);
}

.halloween-wolf-ear {
  position: absolute;
  top: 0;
  width: 50px;
  height: 78px;
  background: #17181c;
  -webkit-clip-path: polygon(50%0,100% 100%,0 82%);
  clip-path: polygon(50%0,100% 100%,0 82%);
  transition: transform 300ms ease;
}

.halloween-wolf-ear.is-left {
  left: 19px;
  transform: rotate(-12deg);
}

.halloween-wolf-ear.is-right {
  right: 19px;
  transform: rotate(12deg);
}

.halloween-wolf-ear::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 13px;
  width: 24px;
  height: 42px;
  background: #3a3034;
  opacity: 0.7;
  -webkit-clip-path: polygon(50%0,100% 100%,0 84%);
  clip-path: polygon(50%0,100% 100%,0 84%);
}

.halloween-wolf-brow {
  position: absolute;
  top: 61px;
  z-index: 5;
  width: 44px;
  height: 8px;
  border-radius: 10px;
  background: #0d0e11;
  transition: transform 250ms ease,top 250ms ease;
}

.halloween-wolf-brow.is-left {
  left: 23px;
  transform: rotate(9deg);
}

.halloween-wolf-brow.is-right {
  right: 23px;
  transform: rotate(-9deg);
}

.halloween-wolf-eye {
  position: absolute;
  top: 72px;
  z-index: 6;
  width: 32px;
  height: 18px;
  overflow: hidden;
  border-radius: 55% 45% 55% 45%;
  background: #0d0e11;
  transition: transform 250ms ease,height 250ms ease;
}

.halloween-wolf-eye.is-left {
  left: 24px;
  transform: rotate(5deg);
}

.halloween-wolf-eye.is-right {
  right: 24px;
  transform: rotate(-5deg);
}

.halloween-wolf-iris {
  position: absolute;
  top: 3px;
  left: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f7c94a;
  box-shadow: 0 0 8px rgb(247 201 74/0.65),0 0 15px rgb(247 201 74/0.25);
  transition: transform 80ms linear,background-color 200ms ease,box-shadow 200ms ease;
}

.halloween-wolf-pupil {
  position: absolute;
  top: 0;
  left: 4px;
  width: 4px;
  height: 12px;
  border-radius: 50%;
  background: #111;
}

.halloween-wolf-snout {
  position: absolute;
  top: 90px;
  left: 40px;
  z-index: 7;
  width: 80px;
  height: 62px;
}

.halloween-wolf-snout-top {
  position: absolute;
  top: 0;
  left: 6px;
  width: 68px;
  height: 42px;
  background: #343840;
  -webkit-clip-path: polygon(25%0,75%0,100% 55%,79% 82%,50% 100%,21% 82%,0 55%);
  clip-path: polygon(25%0,75%0,100% 55%,79% 82%,50% 100%,21% 82%,0 55%);
}

.halloween-wolf-nose {
  position: absolute;
  top: 20px;
  left: 23px;
  z-index: 8;
  width: 35px;
  height: 22px;
  border-radius: 60% 60% 48% 48%;
  background: #08090c;
}

.halloween-wolf-mouth {
  position: absolute;
  top: 31px;
  left: 0;
  width: 80px;
  height: 41px;
  overflow: hidden;
  transform-origin: top center;
  transition: height 300ms ease,transform 300ms ease;
}

.halloween-wolf-mouth-inner {
  position: absolute;
  top: -17px;
  left: 5px;
  width: 70px;
  height: 38px;
  border-radius: 0 0 45px 45px;
  background: #1b0809;
  transition: top 300ms ease;
}

.halloween-wolf-tongue {
  position: absolute;
  bottom: -2px;
  left: 21px;
  width: 29px;
  height: 18px;
  border-radius: 50% 50% 40% 40%;
  background: #7b2f36;
  opacity: 0.6;
}

.halloween-wolf-fang {
  position: absolute;
  top: 1px;
  width: 11px;
  height: 25px;
  background: #f1eee4;
  -webkit-clip-path: polygon(0 0,100%0,50% 100%);
  clip-path: polygon(0 0,100%0,50% 100%);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 200ms ease,transform 250ms ease;
}

.halloween-wolf-fang.is-left {
  left: 11px;
}

.halloween-wolf-fang.is-right {
  right: 11px;
}

.halloween-wolf-leg {
  position: absolute;
  top: 260px;
  width: 45px;
  height: 115px;
  background: #17181c;
}

.halloween-wolf-leg.is-front-left {
  left: 87px;
  -webkit-clip-path: polygon(14%0,100%0,75% 100%,6% 100%);
  clip-path: polygon(14%0,100%0,75% 100%,6% 100%);
}

.halloween-wolf-leg.is-front-right {
  left: 132px;
  -webkit-clip-path: polygon(0 0,88%0,100% 100%,23% 100%);
  clip-path: polygon(0 0,88%0,100% 100%,23% 100%);
}

.halloween-wolf-leg.is-back-left {
  left: 198px;
  -webkit-clip-path: polygon(0 0,85% 5%,100% 50%,73% 100%,13% 100%,28% 55%);
  clip-path: polygon(0 0,85% 5%,100% 50%,73% 100%,13% 100%,28% 55%);
}

.halloween-wolf-tail {
  position: absolute;
  top: 220px;
  right: -11px;
  width: 130px;
  height: 100px;
  background: #17181c;
  -webkit-clip-path: polygon(0 20%,20% 9%,25% 17%,42% 4%,48% 15%,67% 5%,64% 22%,85% 15%,76% 34%,100% 37%,80% 51%,95% 64%,72% 68%,76% 88%,55% 77%,43% 100%,32% 76%,11% 85%,19% 62%,0 53%);
  clip-path: polygon(0 20%,20% 9%,25% 17%,42% 4%,48% 15%,67% 5%,64% 22%,85% 15%,76% 34%,100% 37%,80% 51%,95% 64%,72% 68%,76% 88%,55% 77%,43% 100%,32% 76%,11% 85%,19% 62%,0 53%);
  transform: rotate(12deg);
  transform-origin: left center;
  transition: transform 350ms ease;
}

body.halloween-active .halloween-wolf-model:not(.is-angry) {
  animation: wolfBreathe 4s ease-in-out infinite;
}

/* ANIMACIÓN · WOLFBREATHE */

@keyframes wolfBreathe {
  0%,100% {
    transform: translateX(-50%) scale(0.53) translateY(0);
  }

  50% {
    transform: translateX(-50%) scale(0.53) translateY(-4px);
  }

}

/* LOBO */

.halloween-wolf-model.is-angry {
  animation: wolfRageShake 130ms linear 4;
}

.halloween-wolf-model.is-angry .halloween-wolf-head {
  transform: translateY(7px) scale(1.035);
  filter: drop-shadow(0 5px 14px rgb(0 0 0/0.4));
}

.halloween-wolf-model.is-angry .halloween-wolf-ear.is-left {
  transform: rotate(-30deg);
}

.halloween-wolf-model.is-angry .halloween-wolf-ear.is-right {
  transform: rotate(30deg);
}

.halloween-wolf-model.is-angry .halloween-wolf-brow.is-left {
  top: 67px;
  transform: rotate(24deg);
}

.halloween-wolf-model.is-angry .halloween-wolf-brow.is-right {
  top: 67px;
  transform: rotate(-24deg);
}

.halloween-wolf-model.is-angry .halloween-wolf-eye {
  height: 13px;
}

.halloween-wolf-model.is-angry .halloween-wolf-iris {
  background: #ff554d;
  box-shadow: 0 0 8px rgb(255 85 77/0.9),0 0 20px rgb(255 85 77/0.45);
}

.halloween-wolf-model.is-angry .halloween-wolf-mouth {
  height: 65px;
  transform: translateY(4px) scaleY(1.25);
}

.halloween-wolf-model.is-angry .halloween-wolf-mouth-inner {
  top: 0;
}

.halloween-wolf-model.is-angry .halloween-wolf-fang {
  opacity: 1;
  transform: translateY(0);
}

.halloween-wolf-model.is-angry .halloween-wolf-tail {
  transform: rotate(-5deg);
}

.halloween-wolf-guardian.is-angry .halloween-wolf-moon {
  opacity: 0.72;
  transform: scale(1.045);
  box-shadow: 0 0 42px rgb(246 174 60/0.27),0 0 100px rgb(246 174 60/0.17);
}

/* ANIMACIÓN · WOLFRAGESHAKE */

@keyframes wolfRageShake {
  0% {
    transform: translateX(-50%) scale(0.53) translate(0,0);
  }

  25% {
    transform: translateX(-50%) scale(0.53) translate(-3px,1px);
  }

  50% {
    transform: translateX(-50%) scale(0.53) translate(3px,-1px);
  }

  75% {
    transform: translateX(-50%) scale(0.53) translate(-2px,-1px);
  }

  100% {
    transform: translateX(-50%) scale(0.53) translate(0,0);
  }

}

/* LOBO */

.halloween-wolf-roar-ring {
  position: absolute;
  top: 38%;
  left: 56%;
  width: 72px;
  height: 72px;
  border: 2px solid rgb(255 85 77/0.48);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,-50%) scale(0.4);
}

.halloween-wolf-guardian.is-angry .halloween-wolf-roar-ring {
  animation: wolfRoarRing 800ms ease-out;
}

/* ANIMACIÓN · WOLFROARRING */

@keyframes wolfRoarRing {
  0% {
    opacity: 0.62;
    transform: translate(-50%,-50%) scale(0.4);
  }

  100% {
    opacity: 0;
    transform: translate(-50%,-50%) scale(2.5);
  }

}

/* FANTASMA Y STICKER */

body.halloween-active .ivar-companion[hidden] {
  display: none;
}

.ivar-character {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #284640;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  border-radius: 22px;
  transform: rotate(var(--ivar-lean,0deg));
  transform-origin: 50% 35%;
  transition: transform .6s ease;
}

.ivar-thought {
  width: max-content;
  max-width: min(235px,calc(100vw - 24px));
  padding: 12px 15px;
  border: 1px solid #dcaa70;
  border-radius: 50%/30%;
  background: #fff8ed;
  color: #703912;
  box-shadow: 0 5px 24px #43140722;
  pointer-events: none;
}

.ivar-thought .ivar-story-text {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

.ivar-thought::before,.ivar-thought::after {
  content: "";
  position: absolute;
  border: 1px solid #dcaa70;
  border-radius: 50%;
  background: #fff8ed;
}

.ivar-thought::before {
  width: 12px;
  height: 10px;
  left: -12px;
  bottom: 9px;
}

.ivar-thought::after {
  width: 6px;
  height: 6px;
  left: -22px;
  bottom: 1px;
}

.ivar-thought.thought-on-left::before {
  left: auto;
  right: -12px;
}

.ivar-thought.thought-on-left::after {
  left: auto;
  right: -22px;
}

.ivar-guiding .ivar-art {
  filter: drop-shadow(0 0 18px #fb923c99);
}

/* LOBO */

.halloween-wolf-guardian {
  position: absolute;
  top: 2.4rem;
  right: clamp(1.5rem,6vw,6rem);
  z-index: 3;
  width: 238px;
  height: 205px;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.halloween-wolf-model {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 330px;
  height: 370px;
  cursor: pointer;
  outline: none;
  transform: translateX(-50%) scale(0.53);
  transform-origin: bottom center;
  filter: drop-shadow(0 8px 12px rgb(28 25 23/0.18));
  pointer-events: auto;
}

/* FANTASMA Y STICKER */

.carta-welcome {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-items: center;
  gap: 20px;
}

body.halloween-active .carta-welcome.carta-has-ghost {
  grid-template-columns: minmax(0,1fr) 160px;
}

.ivar-dock {
  display: none;
  position: relative;
  width: 160px;
  height: 180px;
  justify-self: end;
}

body.halloween-active .carta-has-ghost .ivar-dock {
  display: block;
}

body.halloween-active .ivar-companion.is-docked {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 154px;
  transform: translate(-50%,-50%);
  will-change: auto;
  z-index: 1;
}

.is-docked .ivar-character {
  transform: rotate(-5deg);
  transition: none;
}

.is-docked .ivar-art {
  animation: none;
  filter: drop-shadow(2px 0 0 var(--demo-bg)) drop-shadow(-2px 0 0 var(--demo-bg)) drop-shadow(0 2px 0 var(--demo-bg)) drop-shadow(0 4px 5px #43140733);
}

body:not(.halloween-active) .halloween-wolf-guardian,body:not(.halloween-active) .ivar-companion,body:not(.halloween-active) .ivar-story {
  display: none;
}

/* LOBO */

.halloween-wolf-model:focus-visible {
  border-radius: 42%;
  outline: 3px solid var(--demo-focus);
  outline-offset: 6px;
}

/* ADAPTACIÓN · (MAX-WIDTH:1023PX) */

@media (max-width:1023px) {
  .halloween-track-trail {
    transform: scale(0.85) rotate(var(--trail-rotation,
          -12deg
        ));
  }

  .halloween-wolf-guardian {
    position: relative;
    top: auto;
    right: auto;
    margin: 24px auto 8px;
    width: 220px;
    height: 205px;
    display: block;
  }

}

/* ADAPTACIÓN · (MAX-WIDTH:767PX) */

@media (max-width:767px) {
  .terror-toggle {
    padding-inline: 0.6rem;
  }

  .terror-toggle-label {
    font-size: 0.625rem;
  }

  .halloween-claw {
    transform: scale(0.74) rotate(var(--claw-rotation,
          0deg
        ));
    transform-origin: center;
  }

  .halloween-track-trail {
    opacity: 0.12;
    transform: scale(0.7) rotate(var(--trail-rotation,
          -12deg
        ));
    transform-origin: top center;
  }

}

/* ADAPTACIÓN · (MAX-WIDTH:600PX) */

@media (max-width:600px) {
  .ivar-story {
    padding: 14px;
  }

  .ivar-story-text {
    font-size: 13px;
    line-height: 1.5;
  }

  .ivar-companion {
    width: 112px;
  }

  .ivar-thought {
    max-width: 190px;
    padding: 10px 13px;
  }

  .ivar-thought .ivar-story-text {
    font-size: 11px;
  }

  body.halloween-active .carta-welcome.carta-has-ghost {
    grid-template-columns: minmax(0,1fr) 100px;
    gap: 10px;
  }

  .ivar-dock {
    width: 100px;
    height: 130px;
  }

  body.halloween-active .ivar-companion.is-docked {
    width: 112px;
  }

}

/* ADAPTACIÓN · (MAX-WIDTH:360PX) */

@media (max-width:360px) {
  body.halloween-active .carta-welcome.carta-has-ghost {
    grid-template-columns: 1fr;
  }

  .ivar-dock {
    justify-self: end;
  }

}

/* ADAPTACIÓN · (HOVER:HOVER) */

@media (hover:hover) {
  .terror-toggle:hover {
    background: #fff;
    box-shadow: 0 4px 14px rgb(166 79 43/0.12);
  }

  body.halloween-active .candle-hover:hover .candle-flame {
    transform: scale(1.22) translateY(-2px);
    filter: drop-shadow(0 0 12px #ff9800);
  }

}

/* ADAPTACIÓN · (PREFERS-REDUCED-MOTION:REDUCE) */

@media (prefers-reduced-motion:reduce) {
  .ivar-companion {
    will-change: auto;
  }

  .ivar-art {
    animation: none;
  }

  .ivar-character {
    transition: none;
  }

  .halloween-wolf-model,.halloween-wolf-model.is-angry,body.halloween-active .halloween-wolf-model:not(.is-angry),.halloween-wolf-guardian.is-angry .halloween-wolf-roar-ring {
    animation: none;
  }

  body.halloween-active .halloween-flame,.halloween-menu-spider,body.halloween-active .halloween-claw,body.halloween-active .halloween-track-trail,.kraken-tentacle-one,.kraken-tentacle-two,.kraken-tentacle-three,body.halloween-active #cava>div::after,.ivar-art,body.halloween-active .halloween-wolf-model:not(.is-angry),.halloween-wolf-model.is-angry,.halloween-wolf-guardian.is-angry .halloween-wolf-roar-ring {
    animation: none;
  }

  .terror-toggle,.terror-toggle-dot,.halloween-wolf-moon,.halloween-wolf-head,.halloween-wolf-ear,.halloween-wolf-brow,.halloween-wolf-eye,.halloween-wolf-iris,.halloween-wolf-mouth,.halloween-wolf-mouth-inner,.halloween-wolf-fang,.halloween-wolf-tail,.ivar-character {
    transition: none;
  }

}