/* ==========================================================================
   HALLOWEEN THEME ENHANCEMENTS (OCTOBER 29 - NOVEMBER 1, 5:00 AM EDT)
   Old-School Orange / Amber / Jack-O'-Lantern Glow
   Fully Interconnected Structural Web with Calm Crawling Spider
   Zero-Flow Impact: 100% Fixed Overlay
   ========================================================================== */

/* 1. LAYER HIERARCHY: Logo sits ON TOP of Web and Spiders */
.top-bar {
  z-index: 105 !important;
}

.brand-block,
.brand-logo-link {
  position: relative;
  z-index: 110 !important; /* Rachel's logo is cleanly layered ABOVE the web & spiders */
}

/* Base dimensions */
.halloween-logo-silhouette {
  display: none;
}

body.halloween-active .halloween-logo-silhouette {
  display: block;
  height: 38px;
  width: 168px; /* 1136 / 256 aspect ratio = 4.4375 */
  
  /* Mask using the exact Rachel's vector logo */
  -webkit-mask-image: url('../../images/logo/logo.svg');
  mask-image: url('../../images/logo/logo.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;

  /* Classic Old-School Halloween Colors (NO pink, pure Jack-O'-Lantern Fire) */
  background: linear-gradient(135deg, 
    #ff3700 0%, 
    #ff6a00 22%, 
    #ff9500 42%, 
    #ffe600 58%, 
    #ff8000 78%, 
    #ff3700 100%
  );
  background-size: 280% 280%;
  animation: classicHalloweenFlame 6s ease-in-out infinite;

  /* Classic warm pumpkin & ember glow */
  filter: drop-shadow(0 0 10px rgba(255, 85, 0, 0.85))
          drop-shadow(0 0 24px rgba(255, 140, 0, 0.45))
          drop-shadow(0 2px 8px rgba(0, 0, 0, 0.95));
  transition: transform 0.2s ease, opacity 0.2s ease, filter 0.3s ease;
  will-change: background-position, filter;
  pointer-events: none;
}

/* Hide standard white logo image when halloween-active is on */
body.halloween-active .brand-logo {
  display: none !important;
}

@media (min-width: 520px) {
  body.halloween-active .halloween-logo-silhouette {
    height: 44px;
    width: 195px;
  }
}

@media (min-width: 769px) {
  body.halloween-active .halloween-logo-silhouette {
    height: 52px;
    width: 230px;
  }
}

.brand-logo-link:hover .halloween-logo-silhouette {
  opacity: 0.95;
  transform: scale(1.02);
}

/* Contrast enhancement on scrolled white sections (Deep pumpkin amber with crisp dark shadow) */
body.halloween-active .top-bar.white-mode-scrolled .halloween-logo-silhouette,
body.halloween-active:not(.middle-locked) .top-bar.white-mode-scrolled .halloween-logo-silhouette {
  filter: drop-shadow(0 0 3px rgba(180, 40, 0, 0.95))
          drop-shadow(0 0 12px rgba(255, 85, 0, 0.75))
          drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));
}

@keyframes classicHalloweenFlame {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 2. Top-Left Spooky Decor Shell: 100% Fixed Overlay, Zero Flow Disruption */
.halloween-header-decor {
  display: none;
}

body.halloween-active .halloween-header-decor {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 360px;
  height: 220px;
  pointer-events: none;
  z-index: 95; /* Behind the logo */
}

/* 3. Fully Connected Cobweb Corner */
.halloween-cobweb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
  animation: webBreeze 9s ease-in-out infinite alternate;
  filter: drop-shadow(0 2px 10px rgba(255, 115, 0, 0.38));
  opacity: 0.92;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

@keyframes webBreeze {
  0% {
    transform: scale(1) rotate(0deg);
  }
  100% {
    transform: scale(1.015) rotate(0.8deg);
  }
}

/* 4. Hanging Spider Rig (Suspended right beside the R) */
.halloween-spider-rig {
  position: absolute;
  top: 0;
  left: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 96;
}

.halloween-spider-thread {
  width: 1.5px;
  background: linear-gradient(to bottom, rgba(255, 230, 150, 0.85), rgba(255, 115, 0, 0.95));
  box-shadow: 0 0 6px rgba(255, 115, 0, 0.7);
  animation: spiderThreadRappel 8.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: top center;
}

@keyframes spiderThreadRappel {
  0%, 100% {
    height: 38px;
  }
  38% {
    height: 98px;
  }
  52% {
    height: 82px;
  }
  74% {
    height: 125px;
  }
}

.halloween-spider-svg {
  display: block;
  margin-top: -3px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.9)) 
          drop-shadow(0 0 8px rgba(255, 94, 0, 0.65));
  animation: spiderWiggle 2s ease-in-out infinite alternate;
  transform-origin: center top;
}

@keyframes spiderWiggle {
  0% {
    transform: rotate(-7deg) scale(0.97);
  }
  100% {
    transform: rotate(7deg) scale(1.03);
  }
}

/* 5. Crawling Spider - Carefully Anchored Directly Onto Diagonal Web Spoke */
.crawling-spider {
  position: absolute;
  pointer-events: none;
  z-index: 97;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 6px rgba(255, 115, 0, 0.65));
}

.crawling-spider-1 {
  width: 18px;
  height: 18px;
  animation: crawlOnSpoke 14s ease-in-out infinite alternate;
}

/* Strictly follows Spoke 3 (y = 0.42 * x) */
@keyframes crawlOnSpoke {
  0% {
    top: 22px;
    left: 48px;
    transform: rotate(26deg);
  }
  30% {
    top: 42px;
    left: 95px;
    transform: rotate(25deg);
  }
  50% {
    top: 58px;
    left: 135px;
    transform: rotate(38deg); /* Smooth pause & turn on node */
  }
  75% {
    top: 42px;
    left: 95px;
    transform: rotate(205deg);
  }
  100% {
    top: 22px;
    left: 48px;
    transform: rotate(206deg);
  }
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  body.halloween-active .halloween-header-decor {
    width: 250px;
    height: 165px;
  }
  .halloween-spider-rig {
    left: 28px;
  }
  @keyframes spiderThreadRappel {
    0%, 100% {
      height: 28px;
    }
    38% {
      height: 68px;
    }
    52% {
      height: 56px;
    }
    74% {
      height: 85px;
    }
  }
  .crawling-spider-1 {
    width: 14px;
    height: 14px;
  }
}