/*
 * The Halloween look (spooky.js sets html.is-spooky until the sale ends). Every rule hangs off that
 * class, so with the script switched off this file changes nothing. The violet stays as the second
 * colour; pumpkin orange takes over as the accent, and buttons, links and gradients follow it
 * through the same tokens style.css and capes/site.css already use.
 */
html.is-spooky {
  --bg: #0A0610;
  --accent: #FF8A2A;
  --accent-2: #B388FF;
  --accent-ink: #200C02;
  --pumpkin: #FF8A2A;
  --pumpkin-deep: #C8571A;
}

html.is-spooky body {
  background:
    radial-gradient(circle at 86% -4%, rgba(255, 196, 120, .16), transparent 26%),
    radial-gradient(circle at 86% -4%, rgba(255, 138, 42, .10), transparent 46%),
    radial-gradient(ellipse at 50% 118%, rgba(179, 136, 255, .14), transparent 58%),
    var(--bg);
  background-attachment: fixed;
}
html.is-spooky .grad-anim {
  background-image: linear-gradient(100deg, var(--accent), #FFC46B, var(--accent-2), var(--accent));
}

/* ------------------------------------------------------------------ the sale banner */
.spooky-bar {
  position: relative; z-index: 31;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 52px 9px 16px; min-height: 44px;
  background:
    linear-gradient(90deg, rgba(255, 138, 42, .16), rgba(179, 136, 255, .14) 60%, rgba(255, 138, 42, .16)),
    #120A1A;
  border-bottom: 1px solid rgba(255, 138, 42, .32);
  color: #F2E8FF; font: 600 14px/1.35 var(--sans, 'Manrope', system-ui, sans-serif);
  text-align: center;
}
.spooky-bar p { margin: 0; color: inherit; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.spooky-bar b { color: #FFB066; font-weight: 800; }
.spooky-pumpkin { width: 24px; height: 24px; flex: none; animation: spooky-bob 2.8s ease-in-out infinite; }
.spooky-pumpkin svg { width: 100%; height: 100%; display: block; }
.spooky-code {
  font: 800 13px/1 var(--mono, ui-monospace, Consolas, monospace); letter-spacing: .12em;
  padding: 6px 10px; border-radius: 8px; cursor: pointer;
  color: #200C02; background: linear-gradient(135deg, #FFB066, #FF8A2A);
  border: 1px dashed rgba(32, 12, 2, .45);
  box-shadow: 0 6px 18px -8px rgba(255, 138, 42, .9);
  transition: transform .16s cubic-bezier(.23, 1, .32, 1), filter .15s;
}
.spooky-code:hover { filter: brightness(1.08); transform: translateY(-1px); }
.spooky-code:active { transform: scale(.96); }
.spooky-code.copied { background: linear-gradient(135deg, #8FF0C4, #5AD6A4); }
.spooky-left { color: #A995C4; font-weight: 600; font-size: 13px; }
.spooky-go {
  color: #FFB066; font-weight: 800; text-decoration: none; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255, 138, 42, .45);
  transition: background .15s, color .15s;
}
.spooky-go:hover { background: rgba(255, 138, 42, .16); color: #FFD3A6; }
.spooky-x {
  position: absolute; right: 10px; top: 50%; translate: 0 -50%;
  width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: #A995C4; cursor: pointer;
}
.spooky-x:hover { background: rgba(255, 255, 255, .06); color: #F2E8FF; }
.spooky-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
:is(.spooky-code, .spooky-go, .spooky-x):focus-visible { outline: 2px solid #FFB066; outline-offset: 2px; }

/* In the dashboard the sidebar fills the height, so the banner floats instead of pushing it down. */
.spooky-bar.float {
  position: fixed; left: auto; right: 16px; bottom: 16px; z-index: 60;
  max-width: min(420px, calc(100vw - 32px)); justify-content: flex-start; text-align: left;
  border: 1px solid rgba(255, 138, 42, .38); border-radius: 14px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9);
}
.spooky-bar.float p { justify-content: flex-start; }

@media (max-width: 640px) {
  .spooky-bar { font-size: 13px; gap: 8px; padding-block: 8px; }
  .spooky-pumpkin { display: none; }
  .spooky-left { display: none; }
}

/* ------------------------------------------------------------------ bats, cobwebs and fog */
.spooky-sky { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.spooky-sky::after {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -40px; height: 180px;
  background:
    radial-gradient(ellipse 30% 60% at 20% 70%, rgba(179, 136, 255, .10), transparent 70%),
    radial-gradient(ellipse 35% 55% at 70% 80%, rgba(242, 232, 255, .06), transparent 70%),
    radial-gradient(ellipse 25% 50% at 45% 90%, rgba(255, 138, 42, .05), transparent 70%);
  filter: blur(8px);
  animation: spooky-fog 26s ease-in-out infinite alternate;
}
.spooky-bat {
  position: absolute; top: var(--y); left: 0; width: 46px;
  color: #05020A; opacity: .55; scale: var(--s);
  filter: drop-shadow(0 0 6px rgba(255, 138, 42, .25));
  animation: spooky-fly var(--t) linear var(--d) infinite;
}
.spooky-bat.rtl { animation-name: spooky-fly-back; }
.spooky-bat svg { display: block; width: 100%; fill: currentColor; animation: spooky-flap .32s ease-in-out infinite alternate; transform-origin: 50% 30%; }
.spooky-web {
  position: absolute; top: 0; width: 150px; height: 150px; opacity: .16;
  background:
    repeating-radial-gradient(circle at 0 0, transparent 0 22px, rgba(242, 232, 255, .9) 22px 23px),
    conic-gradient(from 90deg at 0 0, transparent 0 9deg, rgba(242, 232, 255, .9) 9deg 10deg, transparent 10deg 26deg,
      rgba(242, 232, 255, .9) 26deg 27deg, transparent 27deg 44deg, rgba(242, 232, 255, .9) 44deg 45deg, transparent 45deg 62deg,
      rgba(242, 232, 255, .9) 62deg 63deg, transparent 63deg 80deg, rgba(242, 232, 255, .9) 80deg 81deg, transparent 81deg);
  -webkit-mask: radial-gradient(circle at 0 0, #000 40%, transparent 72%);
  mask: radial-gradient(circle at 0 0, #000 40%, transparent 72%);
}
.spooky-web.l { left: 0; }
.spooky-web.r { right: 0; scale: -1 1; }
@media (max-width: 760px) { .spooky-web { width: 90px; height: 90px; } }

@keyframes spooky-fly {
  0% { translate: -80px 0; }
  25% { translate: 25vw -30px; }
  50% { translate: 50vw 20px; }
  75% { translate: 75vw -24px; }
  100% { translate: calc(100vw + 80px) 0; }
}
@keyframes spooky-fly-back {
  0% { translate: calc(100vw + 80px) 0; }
  25% { translate: 75vw 26px; }
  50% { translate: 50vw -18px; }
  75% { translate: 25vw 22px; }
  100% { translate: -80px 0; }
}
@keyframes spooky-flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
@keyframes spooky-bob { 50% { transform: translateY(-2px) rotate(-6deg); } }
@keyframes spooky-fog { to { transform: translateX(6%); } }

@media (prefers-reduced-motion: reduce) {
  .spooky-pumpkin, .spooky-sky::after, .spooky-bat, .spooky-bat svg { animation: none; }
}