/* Halloween Easter egg theme for the public CONAIR pages -- only active
   while static/js/halloween.js has put class "halloween" on <html>.
   "html.halloween" outranks each page's own inline ":root" colour
   variables, so most of the re-theme is just swapping those. */

/* The Halloween bonus track's row (wf_music.html) -- hidden unless on. */
html:not(.halloween) .halloween-only { display: none !important; }

/* Cast photos with a Halloween version stay hidden until halloween.js has
   swapped the src, so the normal photo never flashes up first. */
html.halloween img[data-halloween-src]:not(.halloween-swapped) { visibility: hidden; }

.conair-halloween-toggle, .conair-halloween-intro-link { white-space: nowrap; }

html.halloween {
  --conair-navy: #2b0f3a;
  --conair-navy2: #5a1f6e;
  --conair-gold: #ff7518;
  --conair-ice: #ffe9d2;
  --halloween-slime: #9be564;
}

html.halloween body {
  background:
    radial-gradient(ellipse at 50% 120%, #3a1450 0%, transparent 60%),
    #120818;
  background-attachment: fixed;
}
html.halloween .conair-backlink a { color: #e7c9ff; }

html.halloween .conair-site {
  background: #fff8ef;
  box-shadow: 0 0 0 2px #ff7518, 0 0 40px rgba(255, 117, 24, .35);
  position: relative;
}
html.halloween .conair-site::before {
  content: "🎃 Happy Halloween from CONAIR Musical Industries! 🦇";
  display: block; text-align: center; font-weight: 900; letter-spacing: .06em;
  font-size: .82em; padding: .45em 1em; color: #1a0820;
  background: repeating-linear-gradient(-45deg, #ff7518 0 18px, #ff8f3f 18px 36px);
}

/* Pumpkin instead of the ✈️ logo mark. */
html.halloween .conair-logo-mark { font-size: 0; }
html.halloween .conair-logo-mark::after { content: "🎃"; font-size: 1.8rem; }

html.halloween .conair-utility { border-bottom-color: #ff7518; }
html.halloween .conair-nav { box-shadow: inset 0 -2px 0 #ff7518; }
html.halloween .conair-nav a { color: #f3d9ff; }
html.halloween .conair-nav a:hover,
html.halloween .conair-halloween-toggle,
html.halloween .conair-halloween-intro-link { color: #ff7518; }

html.halloween .conair-hero {
  background:
    radial-gradient(circle at 92% 18%, rgba(255, 246, 201, .9) 0 22px, transparent 24px),
    linear-gradient(160deg, #1a0820 30%, #4a1658 75%, #ff7518 140%);
}
html.halloween .conair-hero h1 {
  color: #ff7518;
  text-shadow: 0 2px 0 #5c1d00, 0 0 18px rgba(155, 229, 100, .55);
}
html.halloween .conair-hero h1::after { content: " 🦇"; }

html.halloween .conair-footer { border-top: 3px solid #ff7518; }
html.halloween .conair-footer-tagline::after { content: " Trick or treat! 🍬"; }

/* A few bats flapping across the top of the window. */
html.halloween body::before,
html.halloween body::after {
  content: "🦇";
  position: fixed; top: 8vh; left: -3em; z-index: 3000;
  font-size: 1.6rem; pointer-events: none;
  animation: halloween-bat 19s linear infinite;
}
html.halloween body::after {
  content: "🦇 🦇";
  top: 22vh; font-size: 1.1rem;
  animation-duration: 27s; animation-delay: -9s;
}
@keyframes halloween-bat {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(28vw, -4vh); }
  50%  { transform: translate(55vw, 3vh); }
  75%  { transform: translate(82vw, -3vh); }
  100% { transform: translate(110vw, 0); }
}
@media (prefers-reduced-motion: reduce) {
  html.halloween body::before,
  html.halloween body::after { display: none; }
}