/* =======================================================================
   Cloud9 RP | Halloween season theme
   Everything is scoped to html.c9-halloween (halloween.js adds the class during the season only,
   1 October - 7 November, or with ?halloween=1). Remove the two include lines to take it off.
   Decorations never take the mouse (pointer-events: none), respect reduced motion, and can be
   switched off with the "Spooky effects" button (remembered in this browser).
   ======================================================================= */

html.c9-halloween {
  --cyan:  #ff8a2a;
  --cyan2: rgba(255, 138, 42, 0.38);
  --hw-orange: #ff8a2a;
  --hw-amber:  #ffb347;
  --hw-purple: #8a4dff;
  --hw-ghost:  #9fd2ff;
  --hw-green:  #7dff6a;
}

/* ---- the night sky: moon top right, purple haze left, ember glow along the bottom ---- */
html.c9-halloween body {
  background:
    radial-gradient(38% 30% at 88% 4%, rgba(196, 210, 255, 0.20) 0%, rgba(196, 210, 255, 0.06) 40%, transparent 70%),
    radial-gradient(90% 60% at 8% 22%, rgba(112, 56, 210, 0.22), transparent 62%),
    radial-gradient(120% 80% at 50% 112%, rgba(255, 108, 20, 0.26) 0%, transparent 60%),
    linear-gradient(180deg, #0b0718 0%, #05060d 100%);
  background-attachment: fixed;
}
html.c9-halloween ::selection { background: var(--hw-orange); color: #140a02; }
html.c9-halloween meta[name="theme-color"] { content: "#0b0718"; }

/* ---- the logo glows pumpkin-orange with a ghostly blue rim ---- */
html.c9-halloween .logo-img,
html.c9-halloween .hero-logo,
html.c9-halloween .footer-logo img {
  filter: drop-shadow(0 0 12px rgba(255, 138, 42, 0.55)) drop-shadow(0 0 26px rgba(90, 140, 255, 0.35));
}
html.c9-halloween .logo:hover .logo-img,
html.c9-halloween .footer-logo:hover img {
  filter: drop-shadow(0 0 18px rgba(255, 150, 60, 0.85)) drop-shadow(0 0 34px rgba(110, 160, 255, 0.55));
}
html.c9-halloween .hero-art::before {
  background: radial-gradient(closest-side, rgba(255, 138, 42, 0.30), rgba(138, 77, 255, 0.16) 55%, transparent 75%) !important;
}

/* ---- headings and accents ---- */
html.c9-halloween .hero h1 span {
  color: #ffe2bd;
  text-shadow: 0 0 22px rgba(255, 138, 42, 0.70), 0 0 56px rgba(138, 77, 255, 0.45);
}
html.c9-halloween .section-head h2,
html.c9-halloween .page-head h1,
html.c9-halloween .cta h2 { text-shadow: 0 0 24px rgba(255, 138, 42, 0.28); }
html.c9-halloween .btn:not(.btn-primary):hover,
html.c9-halloween .btn-outline:hover { box-shadow: 0 0 22px rgba(255, 138, 42, 0.45); }
html.c9-halloween .card:hover { box-shadow: 0 0 0 1px rgba(255, 138, 42, 0.55), 0 18px 40px rgba(255, 100, 20, 0.14); }
html.c9-halloween .nav { box-shadow: 0 1px 0 rgba(255, 138, 42, 0.32), 0 10px 34px rgba(138, 77, 255, 0.10); }

/* ---- the ribbon above the menu ---- */
.c9-ribbon {
  position: relative; z-index: 70; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 46px 8px 16px; text-align: center;
  background: linear-gradient(90deg, #1a0a02 0%, #4a1d05 50%, #1a0a02 100%);
  border-bottom: 1px solid rgba(255, 138, 42, 0.45);
  color: #ffe2bd; font-family: var(--font, 'Oswald', sans-serif); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
.c9-ribbon svg { width: 20px; height: 20px; flex: none; }
.c9-ribbon a { color: #fff; border-bottom: 1px solid rgba(255, 138, 42, 0.8); }
.c9-ribbon a:hover { color: var(--hw-amber, #ffb347); }
.c9-ribbon button {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #ffe2bd; font-size: 20px; line-height: 1; cursor: pointer;
}
.c9-ribbon button:hover, .c9-ribbon button:focus-visible { background: rgba(255, 138, 42, 0.25); outline: none; }

/* ---- fog, bats, cobwebs, the spider ---- */
.c9-fog { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.c9-fog::before, .c9-fog::after {
  content: ""; position: absolute; left: -30%; width: 160%; height: 46%; filter: blur(34px); opacity: 0.55;
  background: radial-gradient(closest-side, rgba(150, 120, 230, 0.20), transparent 72%);
}
.c9-fog::before { bottom: -8%; animation: hwFogA 46s ease-in-out infinite alternate; }
.c9-fog::after  { bottom: 6%; opacity: 0.38; background: radial-gradient(closest-side, rgba(255, 150, 70, 0.14), transparent 72%); animation: hwFogB 62s ease-in-out infinite alternate; }
@keyframes hwFogA { from { transform: translateX(-6%); } to { transform: translateX(8%); } }
@keyframes hwFogB { from { transform: translateX(7%) scaleY(1.1); } to { transform: translateX(-9%) scaleY(0.9); } }

.c9-bat { position: fixed; left: -90px; z-index: 6; pointer-events: none; width: var(--s, 46px); opacity: 0.92; animation: hwFly var(--d, 24s) linear var(--delay, 0s) infinite; }
.c9-bat svg { display: block; width: 100%; height: auto; fill: #0a0612; filter: drop-shadow(0 0 5px rgba(255, 138, 42, 0.55)); animation: hwBob 1.7s ease-in-out infinite; }
.c9-bat svg .w { transform-origin: 50% 55%; animation: hwFlap 0.34s ease-in-out infinite alternate; }
@keyframes hwFly { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 220px)); } }
@keyframes hwBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes hwFlap { from { transform: scaleY(1); } to { transform: scaleY(0.45); } }

.c9-web { position: fixed; top: 0; z-index: 75; width: clamp(110px, 12vw, 190px); pointer-events: none; opacity: 0.55; }
.c9-web svg { display: block; width: 100%; height: auto; stroke: #e8eefc; fill: none; stroke-width: 1; }
.c9-web-l { left: 0; }
.c9-web-r { right: 0; transform: scaleX(-1); }

.c9-spider { position: absolute; top: 100%; right: 17%; z-index: 74; width: 34px; pointer-events: none; transform-origin: 50% 0; animation: hwDrop 8s ease-in-out infinite; }
.c9-spider::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 120px; background: linear-gradient(180deg, transparent, rgba(232, 238, 252, 0.8)); }
.c9-spider svg { display: block; width: 100%; height: auto; fill: #0a0612; stroke: #0a0612; filter: drop-shadow(0 0 4px rgba(255, 138, 42, 0.5)); }
@keyframes hwDrop { 0%, 100% { transform: translateY(-4px); } 45% { transform: translateY(46px); } 55% { transform: translateY(46px); } }

/* ---- the graveyard along the top of the footer ---- */
html.c9-halloween .site-footer { border-top-color: rgba(255, 138, 42, 0.45); }
.c9-graves { position: relative; height: 64px; margin-top: 24px; margin-bottom: -1px; pointer-events: none; overflow: hidden; }
.c9-graves-bg { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 64%22 width=%22640%22 height=%2264%22%3E%3Cpath d=%22M0 50Q80 46 160 50T320 50T480 50T640 50V64H0Z%22 fill=%22%23060b16%22/%3E%3Cg fill=%22%230d1527%22 stroke=%22%2333466f%22 stroke-width=%221.2%22%3E%3Cpath d=%22M30 50V30Q30 20 42 20Q54 20 54 30V50Z%22/%3E%3Cpath d=%22M146 50V22h8v6h8v7h-8v15Z%22/%3E%3Cpath d=%22M245 50V26Q245 14 262 14Q279 14 279 26V50Z%22/%3E%3Cpath d=%22M455 50Q470 36 485 50Z%22/%3E%3Cpath d=%22M548 50V32Q548 24 556 24Q564 24 564 32V50Z%22/%3E%3C/g%3E%3Cpath d=%22M38 30h8M42 26v10M254 28h16M254 34h16%22 stroke=%22%2333466f%22 stroke-width=%221.6%22 fill=%22none%22/%3E%3Cpath d=%22M380 52V24M380 36L366 22M380 31L394 17M394 17L403 15M394 17L398 8M366 22L360 12M366 22L356 22%22 stroke=%22%2333466f%22 stroke-width=%225%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M380 52V24M380 36L366 22M380 31L394 17M394 17L403 15M394 17L398 8M366 22L360 12M366 22L356 22%22 stroke=%22%230d1527%22 stroke-width=%223%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M0 50Q80 46 160 50T320 50T480 50T640 50%22 fill=%22none%22 stroke=%22rgba%28255%2C138%2C42%2C0.55%29%22 stroke-width=%221.2%22/%3E%3C/svg%3E") repeat-x left bottom / auto 64px; }
.c9-g-ghost, .c9-g-pumpkin { position: absolute; display: block; }
.c9-g-ghost { bottom: 34px; width: 26px; animation: hwGhost 9s ease-in-out infinite; }
.c9-g-ghost svg { display: block; width: 100%; fill: rgba(190, 220, 255, 0.6); filter: drop-shadow(0 0 6px rgba(150, 200, 255, 0.5)); }
.c9-g-pumpkin { bottom: 12px; width: 30px; animation: hwFlicker 3.6s infinite; filter: drop-shadow(0 0 9px rgba(255, 138, 42, 0.9)); }
.c9-g-pumpkin svg { display: block; width: 100%; }
@keyframes hwFlicker { 0%, 100% { opacity: 1; } 8% { opacity: 0.72; } 12% { opacity: 1; } 40% { opacity: 0.85; } 44% { opacity: 1; } 70% { opacity: 0.78; } 74% { opacity: 1; } }
@keyframes hwGhost { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-10px); opacity: 0.85; } }

/* ---- the switch ---- */
.c9-fx-toggle {
  position: fixed; left: 14px; bottom: 14px; z-index: 80; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 10px;
  border: 1px solid rgba(255, 138, 42, 0.55); border-radius: 19px; background: rgba(12, 8, 22, 0.88); color: #ffe2bd; cursor: pointer;
  font-family: var(--font, 'Oswald', sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; backdrop-filter: blur(6px);
}
.c9-fx-toggle svg { width: 20px; height: 20px; }
.c9-fx-toggle:hover, .c9-fx-toggle:focus-visible { background: rgba(60, 26, 8, 0.95); outline: 2px solid rgba(255, 138, 42, 0.8); outline-offset: 2px; }

/* ---- off switch and reduced motion ---- */
html.c9-fx-off .c9-bat, html.c9-fx-off .c9-fog, html.c9-fx-off .c9-spider { display: none; }
html.c9-fx-off .c9-g-ghost, html.c9-fx-off .c9-g-pumpkin { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .c9-bat { display: none; }
  .c9-fog::before, .c9-fog::after, .c9-spider, .c9-g-ghost, .c9-g-pumpkin { animation: none; }
}
@media (max-width: 720px) {
  .c9-web { opacity: 0.4; }
  .c9-spider { right: 6%; }
  .c9-ribbon { font-size: 11px; letter-spacing: 0.1em; }
  .c9-fx-toggle span { display: none; }
  .c9-fx-toggle { padding: 0 10px; }
}
@media print { .c9-ribbon, .c9-fog, .c9-bat, .c9-web, .c9-spider, .c9-graves, .c9-fx-toggle { display: none !important; } }