/* Halloween styles (scoped). Activates only when body.halloween is present */

/* Layer ordering: below content, above particles */
.halloween-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* particles is z-index:0, content sits naturally above 1 if positioned; unaffected elements render fine */
  background:
    radial-gradient(500px 300px at 10% 0%, rgba(255,136,0,0.08), transparent 60%),
    radial-gradient(400px 240px at 90% 0%, rgba(255,98,0,0.07), transparent 60%),
    radial-gradient(700px 420px at 50% 100%, rgba(255,140,0,0.05), transparent 70%);
}

/* Floating ghosts in the background */
.halloween-ghost {
  position: fixed;
  top: 100vh;
  left: 0;
  transform: translate(-50%, 0) rotate(0deg);
  z-index: 1;
  opacity: 0.22;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 8px 14px rgba(255,255,255,.12));
  animation-name: floatPumpkin, driftX; /* reuse same timing for consistency */
  animation-timing-function: ease-out, linear;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
}

/* Add tiny festive emoji to section titles, subtle to not break layout */
body.halloween .section-title::after {
  content: " 🎃";
  filter: drop-shadow(0 0 6px rgba(255,140,0,.4));
}

/* Slight glow on buttons when hovered in Halloween */
body.halloween .btn:hover {
  box-shadow: 0 14px 40px rgba(255,140,0,.35);
}

/* Bats */
.halloween-bat {
  position: fixed;
  top: 10vh;
  left: -80px;
  width: 36px;
  height: 20px;
  z-index: 2;
  opacity: 0.85;
  animation: flyAcross linear infinite;
  transform-origin: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.halloween-bat svg {
  width: 100%;
  height: 100%;
}
/* Wing flap */
.halloween-bat svg path {
  transform-origin: center;
  animation: flap .8s ease-in-out infinite;
}

@keyframes flap {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(6deg); }
}

@keyframes flyAcross {
  0% { transform: translateX(-100px) translateY(0) scale(1); }
  50% { transform: translateX(50vw) translateY(-20px) scale(1.05); }
  100% { transform: translateX(105vw) translateY(0) scale(1); }
}

/* Webs at corners */
.halloween-web {
  position: fixed;
  width: 180px;
  height: 180px;
  pointer-events: none;
  opacity: .4;
  z-index: 2;
}
.halloween-web.top-left { top: 0; left: 0; }
.halloween-web.top-right { top: 0; right: 0; transform: scaleX(-1); }

/* Bottom corner webs */
.halloween-web.bottom-left { bottom: 0; left: 0; transform: scaleY(-1); }
.halloween-web.bottom-right { bottom: 0; right: 0; transform: scale(-1, -1); }

/* Gentle sway for top webs */
.halloween-web.top-left,
.halloween-web.top-right {
  transform-origin: top left;
  animation: sway 6s ease-in-out infinite alternate;
}
.halloween-web.top-right { transform-origin: top right; }

@keyframes sway {
  0% { transform: translate(0,0) rotate(-2deg) scaleX(var(--sx,1)) scaleY(var(--sy,1)); }
  100% { transform: translate(0,0) rotate(2deg) scaleX(var(--sx,1)) scaleY(var(--sy,1)); }
}

/* Hanging thread from top webs */
.halloween-web.top-left::before,
.halloween-web.top-right::before {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 60px;
  background: rgba(255,140,0,0.5);
  filter: drop-shadow(0 0 4px rgba(255,140,0,.35));
  transform-origin: top center;
  animation: threadSwing 4.5s ease-in-out infinite alternate, threadPulse 6s ease-in-out infinite;
}
.halloween-web.top-left::before { left: 80px; }
.halloween-web.top-right::before { right: 80px; }

@keyframes threadSwing {
  0% { transform: translateX(-2px); }
  100% { transform: translateX(2px); }
}

@keyframes threadPulse {
  0%, 100% { height: 56px; }
  50% { height: 68px; }
}

/* Larger and slightly more opaque on desktop */
@media (min-width: 900px) {
  .halloween-web { width: 240px; height: 240px; opacity: .5; }
}

/* Floating pumpkins in the background */
.halloween-pumpkin {
  position: fixed;
  top: 100vh;
  left: 0;
  transform: translate(-50%, 0) rotate(0deg);
  z-index: 1; /* behind main content, above particles */
  opacity: 0.18;
  filter: drop-shadow(0 6px 10px rgba(255,140,0,.25));
  pointer-events: none;
  will-change: transform;
  animation-name: floatPumpkin, driftX;
  animation-timing-function: ease-out, linear;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
}

@keyframes floatPumpkin {
  0% { transform: translate(var(--x, 0), 0) rotate(0deg); opacity: 0; }
  8% { opacity: 0.18; }
  100% { transform: translate(var(--x, 0), -110vh) rotate(18deg); opacity: 0.18; }
}

@keyframes driftX {
  0% { margin-left: 0; }
  50% { margin-left: 10px; }
  100% { margin-left: 0; }
}

/* Cursor follower replacement: bat following the pointer (Halloween only) */
body.halloween .cursor-follower { display: none !important; }
.halloween-cursor-bat {
  position: fixed;
  top: 0; left: 0;
  width: 28px; height: 18px;
  transform: translate(-50%, -50%);
  z-index: 9999;
  pointer-events: none;
  opacity: .95;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.halloween-cursor-bat svg { width: 100%; height: 100%; }

/* Hanging spider (visible in Halloween) */
.halloween-spider {
  position: fixed;
  top: 14px;
  right: 56px;
  width: 34px;
  height: 34px;
  transform-origin: top center;
  z-index: 3;
  pointer-events: none;
  animation: spiderSwing 5.5s ease-in-out infinite alternate, spiderBob 3.8s ease-in-out infinite;
}
.halloween-spider::before {
  content: "";
  position: absolute;
  top: -160px;
  left: 50%;
  width: 1.5px;
  height: 160px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 6px rgba(255,255,255,0.8);
  transform: translateX(-50%);
  filter: drop-shadow(0 0 3px rgba(255,255,255,.6));
  animation: threadSwing 5.5s ease-in-out infinite alternate;
}
.halloween-spider svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }

@keyframes spiderSwing {
  0% { transform: rotate(-6deg); }
  100% { transform: rotate(6deg); }
}
@keyframes spiderBob {
  0%, 100% { margin-top: 0; }
  50% { margin-top: 6px; }
}
/* reuse thread swing for the line */
@keyframes threadSwing {
  0% { transform: translateX(-50%) rotate(-2deg); }
  100% { transform: translateX(-50%) rotate(2deg); }
}

@media (max-width: 700px) {
  .halloween-spider { right: 18px; width: 28px; height: 28px; }
  .halloween-spider::before { height: 120px; top: -120px; }
}

/* Reviews subtle border tint in Halloween */
body.halloween .review { border-color: rgba(255,140,0,.25); }

/* Hero word swap glitch (Halloween only) */
body.halloween .hw-swap {
  position: relative;
  display: inline-block;
  transition: opacity .35s ease;
}
body.halloween .hw-swap.hw-glitch::before,
body.halloween .hw-swap.hw-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
body.halloween .hw-swap.hw-glitch::before {
  color: var(--primary);
  transform: translate(2px, 0);
  clip-path: inset(0 0 60% 0);
  animation: hwGlitchTop 0.16s steps(2, end) 0s 6;
}
body.halloween .hw-swap.hw-glitch::after {
  color: var(--accent);
  transform: translate(-2px, 0);
  clip-path: inset(40% 0 0 0);
  animation: hwGlitchBot 0.16s steps(2, end) 0s 6;
}
@keyframes hwGlitchTop { 0%{ clip-path: inset(0 0 80% 0)} 50%{ clip-path: inset(0 0 65% 0)} 100%{ clip-path: inset(0 0 75% 0)} }
@keyframes hwGlitchBot { 0%{ clip-path: inset(60% 0 0 0)} 50%{ clip-path: inset(70% 0 0 0)} 100%{ clip-path: inset(65% 0 0 0)} }

/* Hide trailing 's' when ALT is active */
body.halloween .hw-swap.hw-alt + .hw-s { display: none; }

/* Fade state (no overlay) */
body.halloween .hw-swap.is-fading { opacity: 0; }