/* Halloween. Loaded after style.css only while the season is on.
   Night violet instead of navy, pumpkin orange instead of the brand yellow,
   with a violet second accent. The product photos keep their white ground. */
:root {
  --bg: #0c0912;
  --bg-2: #150f1f;
  --card: #1b1428;
  --line: #2f2342;
  --ink-2: #c6bcd8;
  --muted: #988bb0;
  --brand: #ff8a1f;
  --brand-2: #a855f7;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

body {
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(168, 85, 247, .20), transparent 62%),
    radial-gradient(900px 480px at -5% 4%, rgba(255, 138, 31, .09), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* The strip is the season's banner now: violet night with pumpkin type. */
.announce { background: linear-gradient(90deg, #2c1147, #4a1f1a 55%, #2c1147); color: #ffd9b3; }
.announce strong { color: #ffb066; }

.site-header { background: rgba(12, 9, 18, .86); border-bottom-color: #3a2a55; }
.site-header .container { position: relative; }

/* A spider on a thread under the header, bobbing slowly. */
/* It hangs in the right-hand margin, outside the 1200px content column, so
   its thread never crosses text; below that width there is no margin to use. */
.season-spider { position: absolute; top: 100%; right: 4px; width: 22px; display: flex; flex-direction: column; align-items: center;
  animation: spider-bob 5.5s ease-in-out infinite; transform-origin: top center; z-index: 2; }
.season-spider::before { content: ''; width: 1px; height: 34px; background: linear-gradient(#e9ddff, rgba(233, 221, 255, .35)); }
.season-spider img { width: 22px; height: 22px; filter: drop-shadow(0 0 4px rgba(201, 182, 255, .55)); }
@keyframes spider-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(10px) rotate(3deg); } }


/* Two bats cross the top of the screen now and then. */
.season-bats { position: fixed; inset: 0 0 auto 0; height: 240px; overflow: hidden; z-index: 60; }
.season-bats img { position: absolute; left: -80px; width: 54px; opacity: 0; filter: drop-shadow(0 0 5px rgba(201, 182, 255, .7)); }
.season-bats .bat-1 { top: 70px; animation: bat-fly 26s linear infinite 4s; }
.season-bats .bat-2 { top: 130px; width: 36px; animation: bat-fly 34s linear infinite 15s; }
@keyframes bat-fly {
  0% { transform: translate(0, 0) scaleY(1); opacity: 0; }
  1% { opacity: .9; }
  3% { transform: translate(8vw, -20px) scaleY(.55); }
  5% { transform: translate(16vw, 6px) scaleY(1); }
  7% { transform: translate(24vw, -16px) scaleY(.55); }
  9% { transform: translate(32vw, 10px) scaleY(1); }
  11% { transform: translate(40vw, -12px) scaleY(.55); }
  13% { transform: translate(48vw, 8px) scaleY(1); }
  15% { transform: translate(56vw, -18px) scaleY(.55); }
  17% { transform: translate(64vw, 4px) scaleY(1); }
  19% { transform: translate(72vw, -10px) scaleY(.55); }
  21% { transform: translate(80vw, 6px) scaleY(1); }
  23% { transform: translate(88vw, -14px) scaleY(.55); }
  25% { transform: translate(calc(100vw + 120px), 0) scaleY(1); opacity: .9; }
  26%, 100% { opacity: 0; transform: translate(calc(100vw + 120px), 0); }
}

/* Headings carry a little jack-o'-lantern. */
.section-head h2::before, .top-head h2::before {
  content: ''; display: inline-block; width: 1em; height: 1em; margin-right: .4em; vertical-align: -.12em;
  background: url(/images/season/pumpkin.svg) no-repeat center / contain;
}

/* Cards: a web in the corner, a pumpkin glow on hover. */
.card { position: relative; border-color: #2f2342; }
.card::after { content: ''; position: absolute; top: 0; right: 0; width: 44px; height: 44px; pointer-events: none; z-index: 1;
  background: url(/images/season/cobweb.svg) no-repeat 0 0 / contain; opacity: .55; }
.card .ribbon { z-index: 2; }
.card:hover { border-color: var(--brand); box-shadow: 0 0 0 1px rgba(255, 138, 31, .5), 0 12px 32px rgba(255, 138, 31, .14); }
.btn:not(.btn-ghost):not(.btn-go):not(.btn-disabled) { box-shadow: 0 0 0 0 rgba(255, 138, 31, 0); transition: transform .1s, filter .15s, box-shadow .2s; }
.btn:not(.btn-ghost):not(.btn-go):not(.btn-disabled):hover { box-shadow: 0 0 18px rgba(255, 138, 31, .45); }
.ribbon { background: var(--brand-2); }

/* The start-page hero. */
.season-hero { background: linear-gradient(135deg, #1c1030, #120b1d 60%); border-color: #3a2a55; }
.season-hero-kicker { color: var(--brand); }
.season-hero h2 { background: linear-gradient(90deg, #ffb066, #ff8a1f 40%, #c084fc); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* The footer rises into a graveyard. */
.site-footer { position: relative; margin-top: 130px; border-top: 0; }
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 120px; pointer-events: none;
  background: url(/images/season/halloween-footer.svg) repeat-x center bottom / 1600px 120px; }

@media (max-width: 760px) {

  .season-bats { height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .season-bats { display: none; }
  .season-spider { animation: none; }
}
@media (max-width: 1290px) { .season-spider { display: none; } }