/* VYHOVSKA Halloween */

body.vyh-halloween-on {
  position: relative;
}

body.vyh-halloween-on::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 140, 50, 0.07), transparent 60%),
    radial-gradient(ellipse 40% 35% at 0% 100%, rgba(30, 12, 4, 0.06), transparent 70%),
    radial-gradient(ellipse 40% 35% at 100% 100%, rgba(30, 12, 4, 0.05), transparent 70%);
}

.vyh-halloween {
  pointer-events: none;
  z-index: 9998;
}

/* Silk cobweb */
.vyh-halloween__web {
  position: fixed;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 9998;
  opacity: 0.62;
  mix-blend-mode: multiply;
  animation: none !important;
  pointer-events: none;
}

.vyh-halloween__web--tl {
  top: -12px;
  left: -16px;
  width: min(320px, 36vw);
  height: min(320px, 36vw);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 260'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23ebe6de' stop-opacity='0.95'/%3E%3Cstop offset='70%25' stop-color='%23bdb6ab' stop-opacity='0.55'/%3E%3Cstop offset='100%25' stop-color='%239a948a' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-linecap='round'%3E%3Cpath stroke-width='0.85' d='M12 12 L248 18 M12 12 L18 248 M12 12 L236 236 M12 12 L130 250 M12 12 L250 130 M12 12 L70 250 M12 12 L250 70 M12 12 L190 250 M12 12 L250 190'/%3E%3Cpath stroke-width='0.7' d='M36 12 C58 38 38 58 12 36 M62 12 C92 68 68 92 12 62 M92 12 C124 102 102 124 12 92 M124 12 C156 138 138 156 12 124 M158 12 C186 172 172 186 12 158 M192 12 C214 205 205 214 12 192'/%3E%3Cpath stroke-width='0.55' opacity='0.8' d='M48 24 C66 54 54 66 24 48 M82 30 C108 90 90 108 30 82 M118 36 C142 122 122 142 36 118'/%3E%3C/g%3E%3Ccircle cx='14' cy='14' r='3' fill='%23222222'/%3E%3C/svg%3E");
}

.vyh-halloween__web--tr {
  top: -10px;
  right: -14px;
  width: min(280px, 30vw);
  height: min(280px, 30vw);
  opacity: 0.55;
  transform: scaleX(-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 260'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23ebe6de' stop-opacity='0.95'/%3E%3Cstop offset='70%25' stop-color='%23bdb6ab' stop-opacity='0.55'/%3E%3Cstop offset='100%25' stop-color='%239a948a' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-linecap='round'%3E%3Cpath stroke-width='0.85' d='M12 12 L248 18 M12 12 L18 248 M12 12 L236 236 M12 12 L130 250 M12 12 L250 130 M12 12 L70 250 M12 12 L250 70'/%3E%3Cpath stroke-width='0.7' d='M36 12 C58 38 38 58 12 36 M62 12 C92 68 68 92 12 62 M92 12 C124 102 102 124 12 92 M124 12 C156 138 138 156 12 124 M158 12 C186 172 172 186 12 158'/%3E%3C/g%3E%3Ccircle cx='14' cy='14' r='3' fill='%23222222'/%3E%3C/svg%3E");
}

.vyh-halloween__web--bl {
  bottom: -12px;
  left: -16px;
  width: min(320px, 36vw);
  height: min(320px, 36vw);
  opacity: 0.62;
  transform: scaleY(-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 260'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23ebe6de' stop-opacity='0.95'/%3E%3Cstop offset='70%25' stop-color='%23bdb6ab' stop-opacity='0.55'/%3E%3Cstop offset='100%25' stop-color='%239a948a' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-linecap='round'%3E%3Cpath stroke-width='0.85' d='M12 12 L248 18 M12 12 L18 248 M12 12 L236 236 M12 12 L130 250 M12 12 L250 130 M12 12 L70 250 M12 12 L250 70 M12 12 L190 250 M12 12 L250 190'/%3E%3Cpath stroke-width='0.7' d='M36 12 C58 38 38 58 12 36 M62 12 C92 68 68 92 12 62 M92 12 C124 102 102 124 12 92 M124 12 C156 138 138 156 12 124 M158 12 C186 172 172 186 12 158 M192 12 C214 205 205 214 12 192'/%3E%3Cpath stroke-width='0.55' opacity='0.8' d='M48 24 C66 54 54 66 24 48 M82 30 C108 90 90 108 30 82 M118 36 C142 122 122 142 36 118'/%3E%3C/g%3E%3Ccircle cx='14' cy='14' r='3' fill='%23222222'/%3E%3C/svg%3E");
}

.vyh-halloween__web--br {
  bottom: -10px;
  right: -14px;
  width: min(280px, 30vw);
  height: min(280px, 30vw);
  opacity: 0.55;
  transform: scale(-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 260'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23ebe6de' stop-opacity='0.95'/%3E%3Cstop offset='70%25' stop-color='%23bdb6ab' stop-opacity='0.55'/%3E%3Cstop offset='100%25' stop-color='%239a948a' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-linecap='round'%3E%3Cpath stroke-width='0.85' d='M12 12 L248 18 M12 12 L18 248 M12 12 L236 236 M12 12 L130 250 M12 12 L250 130 M12 12 L70 250 M12 12 L250 70'/%3E%3Cpath stroke-width='0.7' d='M36 12 C58 38 38 58 12 36 M62 12 C92 68 68 92 12 62 M92 12 C124 102 102 124 12 92 M124 12 C156 138 138 156 12 124 M158 12 C186 172 172 186 12 158'/%3E%3C/g%3E%3Ccircle cx='14' cy='14' r='3' fill='%23222222'/%3E%3C/svg%3E");
}

.vyh-halloween__strand {
  position: fixed;
  top: 0;
  width: 1.5px;
  background: linear-gradient(
    to bottom,
    rgba(180, 175, 165, 0.65) 0%,
    rgba(180, 175, 165, 0.3) 40%,
    transparent 100%
  );
  z-index: 9997;
  pointer-events: none;
}

.vyh-halloween__spider {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  line-height: 1;
  opacity: 0.9;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
  animation: vyh-spider-drop 7.5s ease-in-out infinite;
  transition: opacity 0.2s ease;
}

.vyh-halloween__spider.is-hidden {
  opacity: 0 !important;
}

/* Spider sucked into pumpkin on hover */
.vyh-halloween__spider-fly {
  position: fixed;
  z-index: 10001;
  pointer-events: none;
  line-height: 1;
  transition:
    left 0.55s cubic-bezier(0.22, 0.8, 0.25, 1),
    top 0.55s cubic-bezier(0.22, 0.8, 0.25, 1),
    opacity 0.4s ease,
    transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  will-change: left, top, transform, opacity;
}

.vyh-halloween__chomp-aura {
  position: fixed;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  background: radial-gradient(circle, rgba(255, 170, 40, 0.9) 0%, rgba(255, 80, 0, 0.35) 45%, transparent 70%);
  animation: vyh-chomp-aura 0.9s ease-out forwards;
  box-shadow: 0 0 28px 10px rgba(255, 140, 40, 0.55);
}

.vyh-halloween__crumb {
  position: fixed;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10002;
  background: radial-gradient(circle, #ffcc66, #ff7a1a 70%);
  box-shadow: 0 0 6px rgba(255, 140, 40, 0.8);
  animation: vyh-crumb 0.75s ease-out forwards;
}

.vyh-halloween__pumpkin {
  position: fixed !important;
  bottom: auto !important;
  z-index: 9999 !important;
  box-sizing: border-box !important;
  user-select: none;
  pointer-events: none;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .vyh-halloween__pumpkin {
    pointer-events: auto !important;
    cursor: pointer;
  }
}

.vyh-halloween__pumpkin-face {
  display: block !important;
  pointer-events: none !important;
  line-height: 1 !important;
  filter:
    drop-shadow(0 0 8px rgba(255, 130, 40, 0.45))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.22));
  animation: vyh-pumpkin-bob 7s ease-in-out infinite;
  transform-origin: center center;
}

/* Desktop — stronger float / sway */
.vyh-halloween__pumpkin--lively .vyh-halloween__pumpkin-face {
  animation-name: vyh-pumpkin-bob-lively;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Hover / chomp — glow + bite */
@media (min-width: 768px) {
  .vyh-halloween__pumpkin:hover .vyh-halloween__pumpkin-face {
    filter:
      drop-shadow(0 0 18px rgba(255, 150, 40, 0.95))
      drop-shadow(0 4px 10px rgba(0, 0, 0, 0.28));
  }

  .vyh-halloween__pumpkin.is-glow .vyh-halloween__pumpkin-face {
    filter:
      drop-shadow(0 0 22px rgba(255, 180, 60, 1))
      drop-shadow(0 0 40px rgba(255, 90, 0, 0.65))
      drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
  }

  .vyh-halloween__pumpkin.is-chomp .vyh-halloween__pumpkin-face {
    animation: vyh-pumpkin-chomp 0.85s cubic-bezier(0.34, 1.3, 0.64, 1);
  }
}

.vyh-halloween__witch {
  position: fixed;
  top: 4%;
  left: -55vw;
  width: clamp(320px, 72vw, 780px);
  height: auto;
  z-index: 2147483646;
  pointer-events: none;
  filter:
    drop-shadow(0 0 22px rgba(120, 255, 80, 0.4))
    drop-shadow(0 16px 36px rgba(0, 0, 0, 0.6));
  animation: vyh-witch-fly 4s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}

.vyh-halloween__witch svg {
  width: 100%;
  height: auto;
  display: block;
}

.vyh-halloween__flash {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  pointer-events: none;
  background:
    radial-gradient(circle at 45% 40%, rgba(140, 0, 0, 0.85), transparent 42%),
    radial-gradient(circle at 70% 55%, rgba(20, 70, 0, 0.55), transparent 40%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.92), rgba(30, 0, 0, 0.82));
  animation: vyh-flash 2.4s steps(1, end) forwards;
}

/* White/red strobe on top — rapid flicker */
.vyh-halloween__strobe {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  background: #fff;
  mix-blend-mode: soft-light;
  animation: vyh-strobe 1.6s steps(1, end) forwards;
}

body.vyh-halloween-scare {
  animation: vyh-shake 0.55s ease-in-out;
}

.vyh-halloween__boo {
  position: fixed;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) scale(0.4);
  font-size: clamp(48px, 12vw, 110px);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #9cff4a;
  text-shadow:
    0 0 14px rgba(120, 255, 60, 0.85),
    0 0 48px rgba(255, 40, 0, 0.6),
    0 4px 0 #1a0000;
  z-index: 2147483647;
  pointer-events: none;
  animation: vyh-boo 3.2s ease-out forwards;
  font-family: Georgia, "Times New Roman", serif;
}

.vyh-halloween__swarm {
  position: fixed;
  font-size: clamp(30px, 6vw, 52px);
  z-index: 2147483646;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
  animation: vyh-swarm 4s ease-in-out forwards;
}

.vyh-halloween__bat {
  position: fixed;
  font-size: 22px;
  z-index: 9999;
  opacity: 0.75;
  animation: vyh-bat-path 28s linear infinite;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

@media (max-width: 767px) {
  .vyh-halloween__bat {
    font-size: 16px;
    opacity: 0.55;
  }
}

.vyh-halloween__ember {
  position: fixed;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffcc66 0%, #ff7a1a 60%, transparent 75%);
  z-index: 9995;
  opacity: 0;
  pointer-events: none;
  animation: vyh-ember 11s ease-in infinite;
  box-shadow: 0 0 6px rgba(255, 140, 40, 0.55);
}

@keyframes vyh-pumpkin-bob {
  0%, 100% {
    transform: translateY(0) rotate(-2deg) scale(1);
  }
  50% {
    transform: translateY(-6px) rotate(2deg) scale(1.03);
  }
}

@keyframes vyh-pumpkin-bob-lively {
  0% {
    transform: translate(0, 0) rotate(-5deg) scale(1);
  }
  20% {
    transform: translate(8px, -14px) rotate(7deg) scale(1.08);
  }
  40% {
    transform: translate(-10px, -8px) rotate(-8deg) scale(1.04);
  }
  60% {
    transform: translate(6px, -18px) rotate(5deg) scale(1.1);
  }
  80% {
    transform: translate(-7px, -5px) rotate(-4deg) scale(1.05);
  }
  100% {
    transform: translate(0, 0) rotate(-5deg) scale(1);
  }
}

@keyframes vyh-pumpkin-chomp {
  0% { transform: scale(1) rotate(0); }
  15% { transform: scale(1.28, 0.78) rotate(-10deg); }
  35% { transform: scale(0.82, 1.28) rotate(8deg); }
  55% { transform: scale(1.22, 0.86) rotate(-6deg); }
  75% { transform: scale(0.92, 1.12) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes vyh-chomp-aura {
  0% { transform: scale(0.4); opacity: 0.95; }
  60% { transform: scale(6); opacity: 0.55; }
  100% { transform: scale(9); opacity: 0; }
}

@keyframes vyh-crumb {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx, 20px), var(--dy, -20px)) scale(0.2);
    opacity: 0;
  }
}

@keyframes vyh-spider-drop {
  0%, 100% { top: 56px; }
  40% { top: 100px; }
  60% { top: 88px; }
}

@keyframes vyh-bat-path {
  0% { transform: translate(-5vw, 0) scaleX(1) rotate(0); }
  30% { transform: translate(35vw, 20px) scaleX(1) rotate(-6deg); }
  31% { transform: translate(35vw, 20px) scaleX(-1) rotate(6deg); }
  65% { transform: translate(12vw, 48px) scaleX(-1) rotate(-4deg); }
  66% { transform: translate(12vw, 48px) scaleX(1) rotate(4deg); }
  100% { transform: translate(110vw, 10px) scaleX(1) rotate(0); }
}

@keyframes vyh-ember {
  0% { transform: translateY(0) scale(0.5); opacity: 0; }
  12% { opacity: 0.75; }
  100% { transform: translateY(-55vh) translateX(12px) scale(0.15); opacity: 0; }
}

@keyframes vyh-pumpkin-pop {
  0% { transform: scale(1) rotate(0); }
  40% { transform: scale(1.4) rotate(-12deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Longer flight — stays fully visible most of the way */
@keyframes vyh-witch-fly {
  0% {
    transform: translate(0, 12vh) rotate(-16deg) scale(0.9);
    opacity: 0;
  }
  6% { opacity: 1; }
  25% {
    transform: translate(28vw, -2vh) rotate(-4deg) scale(1.15);
    opacity: 1;
  }
  50% {
    transform: translate(52vw, 6vh) rotate(4deg) scale(1.2);
    opacity: 1;
  }
  75% {
    transform: translate(78vw, 2vh) rotate(10deg) scale(1.1);
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    transform: translate(130vw, -8vh) rotate(14deg) scale(0.95);
    opacity: 0;
  }
}

/* Hard horror flicker — on/off cuts */
@keyframes vyh-flash {
  0% { opacity: 1; }
  4% { opacity: 0.15; }
  7% { opacity: 1; }
  10% { opacity: 0; }
  13% { opacity: 0.95; }
  16% { opacity: 0.2; }
  19% { opacity: 1; }
  22% { opacity: 0; }
  26% { opacity: 0.9; }
  30% { opacity: 0.25; }
  34% { opacity: 1; }
  38% { opacity: 0.1; }
  42% { opacity: 0.85; }
  48% { opacity: 0.35; }
  55% { opacity: 0.7; }
  65% { opacity: 0.4; }
  80% { opacity: 0.2; }
  100% { opacity: 0; }
}

@keyframes vyh-strobe {
  0% { opacity: 0; background: #fff; }
  3% { opacity: 0.95; background: #fff; }
  6% { opacity: 0; }
  9% { opacity: 0.7; background: #ff1a1a; }
  12% { opacity: 0; }
  15% { opacity: 1; background: #fff; }
  18% { opacity: 0; }
  22% { opacity: 0.55; background: #9cff4a; }
  25% { opacity: 0; }
  28% { opacity: 0.9; background: #fff; }
  31% { opacity: 0; }
  35% { opacity: 0.6; background: #ff1a1a; }
  38% { opacity: 0; }
  42% { opacity: 0.75; background: #fff; }
  46% { opacity: 0; }
  52% { opacity: 0.4; background: #ff1a1a; }
  58% { opacity: 0; }
  70% { opacity: 0.25; background: #fff; }
  100% { opacity: 0; }
}

@keyframes vyh-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-6px, 3px); }
  20% { transform: translate(7px, -4px); }
  30% { transform: translate(-5px, -2px); }
  40% { transform: translate(6px, 3px); }
  50% { transform: translate(-4px, 4px); }
  60% { transform: translate(5px, -3px); }
  70% { transform: translate(-3px, 2px); }
  80% { transform: translate(3px, -2px); }
}

@keyframes vyh-boo {
  0% {
    opacity: 0;
    transform: translate(-50%, -30%) scale(0.2) rotate(-8deg);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2) rotate(3deg);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -52%) scale(1) rotate(-2deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -70%) scale(1.05) rotate(0);
  }
}

@keyframes vyh-swarm {
  0% {
    transform: translate(0, 0) scale(0.5);
    opacity: 0;
  }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% {
    transform: translate(var(--dx, 40vw), var(--dy, -30vh)) scale(1.1);
    opacity: 0;
  }
}

@media (max-width: 767px) {
  body.vyh-halloween-on::before {
    background: radial-gradient(ellipse 90% 40% at 50% 0%, rgba(255, 140, 50, 0.05), transparent 55%);
  }

  .vyh-halloween__web {
    mix-blend-mode: normal !important;
    animation: none !important;
    z-index: 2147483000 !important;
  }

  .vyh-halloween__web--tl {
    top: -4px;
    left: -6px;
    width: 92px !important;
    height: 92px !important;
    opacity: 0.78 !important;
    z-index: 9998 !important;
    pointer-events: none !important;
  }

  .vyh-halloween__web--tr {
    top: -4px;
    right: -6px;
    width: 82px !important;
    height: 82px !important;
    opacity: 0.74 !important;
    z-index: 9998 !important;
    pointer-events: none !important;
  }

  /* Same as top corners — flush to bottom edges */
  .vyh-halloween__web--bl {
    display: block !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 180px !important;
    height: 180px !important;
    opacity: 0.78 !important;
  }

  .vyh-halloween__web--br {
    display: block !important;
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 160px !important;
    height: 160px !important;
    opacity: 0.74 !important;
  }

  .vyh-halloween__spider {
    font-size: 26px;
  }

  .vyh-halloween__pumpkin {
    z-index: 2147483647 !important;
  }

  /* Keep face still on iOS — moving transform breaks taps */
  .vyh-halloween__pumpkin-face {
    font-size: 46px !important;
  }

  .vyh-halloween__witch {
    width: min(96vw, 460px);
    top: 10%;
    left: -75vw;
    animation-duration: 4s;
  }

  .vyh-halloween__flash {
    animation-duration: 2.4s;
  }

  .vyh-halloween__strobe {
    animation-duration: 1.6s;
  }

  .vyh-halloween__boo {
    font-size: clamp(40px, 13vw, 72px);
    animation-duration: 3.2s;
  }

  .vyh-halloween__ember,
  .vyh-hide-mobile {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vyh-halloween__pumpkin,
  .vyh-halloween__pumpkin-face,
  .vyh-halloween__spider,
  .vyh-halloween__bat,
  .vyh-halloween__ember,
  .vyh-halloween__witch,
  .vyh-halloween__flash,
  .vyh-halloween__strobe,
  .vyh-halloween__boo,
  .vyh-halloween__swarm,
  body.vyh-halloween-scare {
    animation: none !important;
  }
}