/* Halloween look for the home page (temporary, see halloween.js).
   Everything here applies only under html.halloween, which halloween.js sets
   until 7 November 2026. */

/* Palette: pumpkin orange for the accent, witch purple for the pink,
   a purple-black night for the surfaces. */
html.halloween {
  --accent: #ff8a1f;
  --accent-dark: #e0670a;
  --pink: #b47cff;
  --bg: #0c0910;
  --surface: #191321;
  --surface2: #20182b;
  --border: #3a2f47;
  --text-muted: #a598b2;
  scrollbar-color: rgba(255,138,31,0.45) #0c0910;
}
html.halloween ::selection { background: rgba(255,138,31,0.45); color: #fff; }

html.halloween nav { background: rgba(14,9,20,0.90); border-bottom-color: rgba(255,138,31,0.28); }
html.halloween nav .nav-links > a.nav-ai { color: #c79bff; }
html.halloween nav .nav-links > a.nav-ai:hover { color: #e2ccff; }
html.halloween nav .dropdown-menu a:hover { background: rgba(255,138,31,0.12); }
html.halloween section { background: rgba(14,9,20,0.90); }
html.halloween #rate { background: rgba(14,9,20,0.90) !important; }
html.halloween footer { background: rgba(14,9,20,0.96); border-top-color: transparent; }
html.halloween .section-title { text-shadow: 0 0 28px rgba(255,138,31,0.28); }

html.halloween .btn-primary {
  background: linear-gradient(135deg, #ffa040, #e8640c); color: #1c0d00;
  box-shadow: 0 4px 22px rgba(255,120,20,0.35);
}
html.halloween .btn-primary:hover { box-shadow: 0 6px 32px rgba(255,120,20,0.5); }
html.halloween .ai-actions .btn-primary { background: linear-gradient(135deg, #b47cff, #ff8a1f); color: #fff; }

/* ---- Hero ---------------------------------------------------------------- */
html.halloween .hero {
  background:
    radial-gradient(55% 75% at 22% 40%, rgba(255,138,31,0.15) 0%, transparent 60%),
    radial-gradient(50% 70% at 82% 28%, rgba(150,90,255,0.18) 0%, transparent 62%),
    linear-gradient(180deg, rgba(20,10,32,0.85), rgba(12,8,18,0.80));
}
html.halloween .hero h1 span {
  background: linear-gradient(120deg, #ff8a1f 8%, #ffc46e 52%, #b47cff 112%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255,138,31,0.35));
}
html.halloween .v2-banner {
  background: linear-gradient(135deg, rgba(255,138,31,0.16), rgba(150,90,255,0.12));
  border-color: rgba(255,138,31,0.5); box-shadow: 0 10px 30px rgba(255,138,31,0.14);
}
html.halloween .v2-banner:hover { box-shadow: 0 14px 38px rgba(255,138,31,0.26); }
html.halloween .v2-banner .v2-tag { color: #1c0d00; background: linear-gradient(135deg, #ffb055, #ff7a10); }
html.halloween .hero-phone { box-shadow: 0 44px 90px rgba(0,0,0,0.65), 0 0 80px rgba(255,138,31,0.22); }

/* "Spooky days" line above the NEW pill */
.hw-eyebrow {
  display: flex; align-items: center; gap: 10px; max-width: 440px; margin: 0 auto 16px;
  font-size: 13.5px; line-height: 1.4; color: var(--text-muted); text-wrap: balance;
}
.hw-eyebrow b { color: var(--accent); font-weight: 800; }
.hw-pk {                                              /* a little jack-o'-lantern, all CSS */
  position: relative; flex: none; width: 26px; height: 22px; border-radius: 48% 48% 44% 44%;
  background:
    radial-gradient(circle at 32% 40%, #2a1500 2.4px, transparent 2.9px),
    radial-gradient(circle at 68% 40%, #2a1500 2.4px, transparent 2.9px),
    radial-gradient(ellipse 34% 14% at 50% 70%, #2a1500 92%, transparent 100%),
    radial-gradient(circle at 50% 40%, #ffb347, #e2620c 75%);
  box-shadow: 0 0 14px rgba(255,138,31,0.55);
}
.hw-pk::before { content: ""; position: absolute; left: 11px; top: -5px; width: 4px; height: 6px; border-radius: 2px; background: #4c7a26; }

/* The night sky behind the hero's content */
.hw-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hw-moon {
  position: absolute; top: 84px; right: max(4%, calc(50% - 600px)); width: 150px; height: 150px; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 62%, rgba(190,110,30,0.30) 9%, transparent 10%),
    radial-gradient(circle at 62% 30%, rgba(190,110,30,0.25) 7%, transparent 8%),
    radial-gradient(circle at 70% 70%, rgba(190,110,30,0.22) 5%, transparent 6%),
    radial-gradient(circle at 38% 34%, #fff4d6, #ffd37e 46%, #f0a040 82%, #d9822a);
  box-shadow: 0 0 50px rgba(255,190,90,0.45), 0 0 140px rgba(255,140,40,0.28), 0 0 260px rgba(255,120,30,0.14);
  opacity: 0.92;
}
.hw-bat { position: absolute; width: 56px; fill: #0a0610; filter: drop-shadow(0 0 4px rgba(255,160,70,0.35)); }
.hw-bat svg { display: block; width: 100%; animation: hwFlap 0.42s ease-in-out infinite alternate; transform-origin: 50% 40%; }
.hw-bat0 { top: 120px; right: 16%; animation: hwDrift 14s ease-in-out infinite; }
.hw-bat1 { top: 210px; right: 9%; width: 40px; animation: hwDrift 11s ease-in-out -3s infinite reverse; }
.hw-bat2 { top: 150px; left: 9%; width: 44px; animation: hwDrift 16s ease-in-out -7s infinite; }
.hw-bat3 { top: 300px; left: 4%; width: 32px; animation: hwDrift 12s ease-in-out -5s infinite reverse; }
.hw-bat1 svg { animation-duration: 0.36s; }
.hw-bat3 svg { animation-duration: 0.3s; }
@keyframes hwFlap { from { transform: scaleY(1); } to { transform: scaleY(0.35); } }
@keyframes hwDrift {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(-40px, 18px); }
  65% { transform: translate(26px, -14px); }
}
.hw-web { position: absolute; top: 60px; width: 170px; height: 170px; stroke: rgba(225,215,240,0.16); stroke-width: 1; fill: none; }
.hw-web svg { width: 100%; height: 100%; overflow: visible; }
.hw-web-l { left: 0; }
.hw-web-r { right: 0; transform: scaleX(-1); }
.hw-spider { position: absolute; top: 60px; left: 132px; width: 30px; transform-origin: 50% 0; animation: hwDangle 5s ease-in-out infinite; }
.hw-spider i { display: block; width: 1px; height: 120px; margin: 0 auto; background: rgba(225,215,240,0.32); }
.hw-spider svg { display: block; width: 30px; margin-top: -4px; filter: drop-shadow(0 0 6px rgba(255,138,31,0.35)); }
@keyframes hwDangle {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50% { transform: translateY(26px) rotate(-2deg); }
}
.hw-fog {
  position: absolute; left: -20%; right: -20%; bottom: -30px; height: 200px; opacity: 0.9;
  background:
    radial-gradient(40% 55% at 20% 70%, rgba(180,150,215,0.13), transparent 70%),
    radial-gradient(35% 50% at 55% 80%, rgba(180,150,215,0.11), transparent 70%),
    radial-gradient(40% 55% at 85% 70%, rgba(180,150,215,0.13), transparent 70%);
  filter: blur(6px);
  animation: hwFog 26s ease-in-out infinite alternate;
}
@keyframes hwFog { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

/* Witch hat on the logo */
html.halloween nav .logo { position: relative; }
.hw-hat { position: absolute; left: -7px; top: -9px; width: 30px; transform: rotate(-16deg); pointer-events: none; line-height: 0; }
.hw-hat svg { width: 100%; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }

/* Graveyard above the footer */
.hw-ground {
  position: relative; z-index: 1; height: 110px; margin-top: -1px; line-height: 0;
  background:
    radial-gradient(60% 90% at 50% 100%, rgba(255,120,30,0.22), transparent 70%),
    linear-gradient(180deg, rgba(14,9,20,0.90), rgba(58,26,58,0.92) 75%, rgba(80,34,40,0.95));
}
.hw-ground svg { width: 100%; height: 100%; display: block; }
.hw-ground ellipse { filter: drop-shadow(0 0 8px rgba(255,138,31,0.6)); }

@media (max-width: 900px) {
  .hw-moon { top: 76px; width: 96px; height: 96px; right: 5%; }
  .hw-web { width: 110px; height: 110px; }
  .hw-spider { left: 86px; }
  .hw-bat0, .hw-bat1 { right: 26%; }
}
@media (max-width: 600px) {
  .hw-eyebrow { font-size: 12.5px; max-width: 340px; text-align: left; }
  /* clear of the text: the moon peeks in at the corner, two bats by the phone */
  .hw-moon { top: 62px; right: -26px; width: 84px; height: 84px; opacity: 0.6; }
  .hw-bat1, .hw-bat3, .hw-spider { display: none; }
  .hw-bat0 { top: auto; bottom: 420px; right: 5%; width: 40px; }
  .hw-bat2 { top: auto; bottom: 360px; left: 5%; width: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-bat, .hw-bat svg, .hw-spider, .hw-fog { animation: none; }
}