/*--------------------------------------------------------------
  HALLOWEEN THEME
  Loaded only when HALLOWEEN_ENABLED = true in halloween-config.php
--------------------------------------------------------------*/

/* ── Colour overrides ── */
:root {
  --accent:          #e8621a;
  --accent-hover:    #d4541a;
  --hw-orange:       #e8621a;
  --hw-purple:       #5c1a8a;
  --hw-dark:         #1a0a2e;
}

/* ── Seasonal top bar ── */
.halloween-bar {
  background: linear-gradient(90deg, #1a0a2e 0%, #3a0f5c 50%, #1a0a2e 100%);
  color: #f5a623;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 16px;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 1100;
}

/* ── Spider web — top-right corner of header ── */
#header::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 130px;
  height: 130px;
  pointer-events: none;
  z-index: 200;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 130'%3E%3Cg stroke='%23fff' stroke-width='0.8' fill='none' opacity='0.7'%3E%3Cline x1='130' y1='0' x2='65' y2='65'/%3E%3Cline x1='130' y1='0' x2='0' y2='65'/%3E%3Cline x1='130' y1='0' x2='90' y2='130'/%3E%3Cline x1='130' y1='0' x2='130' y2='130'/%3E%3Cline x1='130' y1='0' x2='40' y2='110'/%3E%3Ccircle cx='130' cy='0' r='22' stroke-width='0.7'/%3E%3Ccircle cx='130' cy='0' r='45' stroke-width='0.7'/%3E%3Ccircle cx='130' cy='0' r='68' stroke-width='0.7'/%3E%3Ccircle cx='130' cy='0' r='95' stroke-width='0.7'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
}

/* ── Spider crawling down and up from the web ── */
.hw-spider-hang {
  position: fixed;
  right: 36px;
  top: 10vh;
  font-size: 2.8rem;
  pointer-events: none;
  z-index: 9997;
  animation: hw-spider-crawl 9s ease-in-out infinite;
  line-height: 1;
}

/* Thread from web down to spider */
.hw-spider-hang::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5px;
  height: 45vh;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 100%);
}

@keyframes hw-spider-crawl {
  /* Pause at the top near the web */
  0%, 10%  { transform: translateY(0);     }
  /* Crawl down to mid-hero */
  45%, 55% { transform: translateY(38vh);  }
  /* Crawl back up */
  90%, 100% { transform: translateY(0);    }
}

/* ── Floating bats ── */
.hw-bat {
  position: fixed;
  top: -40px;
  font-size: 1.4rem;
  pointer-events: none;
  z-index: 9998;
  animation: hw-bat-fly linear infinite;
  will-change: transform;
  user-select: none;
}

@keyframes hw-bat-fly {
  0%   { transform: translateX(0)    translateY(0)    scaleX(1)  rotate(-5deg); }
  20%  { transform: translateX(20vw) translateY(60px) scaleX(1)  rotate(5deg);  }
  40%  { transform: translateX(40vw) translateY(20px) scaleX(1)  rotate(-8deg); }
  49%  { transform: translateX(49vw) translateY(50px) scaleX(1)  rotate(0deg);  }
  51%  { transform: translateX(51vw) translateY(50px) scaleX(-1) rotate(0deg);  }
  60%  { transform: translateX(60vw) translateY(15px) scaleX(-1) rotate(8deg);  }
  80%  { transform: translateX(80vw) translateY(55px) scaleX(-1) rotate(-5deg); }
  100% { transform: translateX(105vw) translateY(10px) scaleX(-1) rotate(3deg); }
}

/* ── Accent colour cascades through the design system ── */
.btn-hero-primary,
.strip-btn,
.btn-accent-solid,
.hec-footer-link,
.ec-link,
.fc-link,
.nav-cta,
.wb-btn-video {
  background-color: var(--hw-orange) !important;
}

a:hover { color: var(--hw-orange); }

.section-label { color: var(--hw-orange); }

.divider,
.accent-bar { background: var(--hw-orange); }

.section-heading span { color: var(--hw-orange); }

.page-hero { background: linear-gradient(135deg, #1a0a2e 0%, #2e1a0a 100%); }

/* ── Pumpkin decoration on the homepage hero ── */
#hero::after {
  content: '🎃';
  position: absolute;
  bottom: 80px;
  right: 5%;
  font-size: 3rem;
  pointer-events: none;
  animation: hw-pumpkin-glow 2s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(232,98,26,0.6));
  z-index: 1;
}

@keyframes hw-pumpkin-glow {
  0%, 100% { filter: drop-shadow(0 0 8px  rgba(232,98,26,0.5)); transform: scale(1);    }
  50%       { filter: drop-shadow(0 0 20px rgba(232,98,26,0.9)); transform: scale(1.06); }
}

/* ── Ghost on staff page ── */
.staff-grid::before {
  content: '👻';
  position: absolute;
  top: -30px;
  right: 0;
  font-size: 2rem;
  pointer-events: none;
  animation: hw-ghost-float 2.5s ease-in-out infinite;
  opacity: 0.7;
}

.staff-grid { position: relative; }

@keyframes hw-ghost-float {
  0%, 100% { transform: translateY(0)   rotate(-3deg); opacity: 0.6; }
  50%       { transform: translateY(-12px) rotate(3deg); opacity: 0.9; }
}

/* ── Announce strip override ── */
.announce-strip {
  background: linear-gradient(90deg, #3a0f5c 0%, #1a0a2e 100%) !important;
  border-color: var(--hw-orange) !important;
}

/* ── Welcome / news banner accent ── */
.welcome-banner {
  background: linear-gradient(135deg, #1a0a2e 0%, #2e0f4e 100%) !important;
  border-bottom-color: var(--hw-orange) !important;
}

/* ── CTA band ── */
.cta-band {
  background: linear-gradient(135deg, #1a0a2e 0%, #2a0f1a 100%) !important;
}

/* ── Footer ── */
.footer-upper {
  background: #120820 !important;
}

/* ── Witch — pops up from bar above the school name text, clear of logo ── */
#header .navbar-brand .brand-text {
  position: relative;
}
#header .navbar-brand .brand-text::after {
  content: '🧙';
  position: absolute;
  top: -22px;
  left: 0;
  font-size: 1.6rem;
  pointer-events: none;
  z-index: 202;
  animation: hw-hat-wobble 4s ease-in-out infinite;
}

@keyframes hw-hat-wobble {
  0%, 100% { transform: rotate(-8deg) translateY(0);   }
  50%       { transform: rotate(6deg)  translateY(-3px); }
}


/* ── Moon glow removed — original red overlay preserved ── */

/* ── Section heading spooky glow ── */
.section-heading span {
  text-shadow: 0 0 18px rgba(232, 98, 26, 0.45);
}

/* ── Animated pulsing divider ── */
.divider {
  animation: hw-divider-pulse 2s ease-in-out infinite !important;
}

@keyframes hw-divider-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(232,98,26,0.4); }
  50%       { box-shadow: 0 0 14px rgba(232,98,26,0.9); }
}

/* ── Cobweb — bottom-left of split sections ── */
.split-section::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  pointer-events: none;
  z-index: 5;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23fff' stroke-width='0.7' fill='none'%3E%3Cline x1='0' y1='100' x2='50' y2='50'/%3E%3Cline x1='0' y1='100' x2='100' y2='50'/%3E%3Cline x1='0' y1='100' x2='80' y2='0'/%3E%3Cline x1='0' y1='100' x2='0' y2='0'/%3E%3Cline x1='0' y1='100' x2='30' y2='0'/%3E%3Ccircle cx='0' cy='100' r='20' stroke-width='0.6'/%3E%3Ccircle cx='0' cy='100' r='42' stroke-width='0.6'/%3E%3Ccircle cx='0' cy='100' r='64' stroke-width='0.6'/%3E%3Ccircle cx='0' cy='100' r='88' stroke-width='0.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom left;
}
.split-section { position: relative; }

/* ── Cobweb — top-left of dark Philosophy / CTA sections ── */
.cta-band::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  height: 110px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 110'%3E%3Cg stroke='%23fff' stroke-width='0.7' fill='none'%3E%3Cline x1='0' y1='0' x2='55' y2='55'/%3E%3Cline x1='0' y1='0' x2='110' y2='55'/%3E%3Cline x1='0' y1='0' x2='80' y2='110'/%3E%3Cline x1='0' y1='0' x2='0' y2='110'/%3E%3Cline x1='0' y1='0' x2='35' y2='110'/%3E%3Ccircle cx='0' cy='0' r='22' stroke-width='0.6'/%3E%3Ccircle cx='0' cy='0' r='46' stroke-width='0.6'/%3E%3Ccircle cx='0' cy='0' r='70' stroke-width='0.6'/%3E%3Ccircle cx='0' cy='0' r='96' stroke-width='0.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top left;
}

/* ── Black cat on the footer ── */
.footer-upper::after {
  content: '🐱';
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.6rem;
  pointer-events: none;
  z-index: 2;
  animation: hw-cat-blink 5s ease-in-out infinite;
  filter: grayscale(1) brightness(0.3) contrast(3);
}
.footer-upper { position: relative; }

@keyframes hw-cat-blink {
  0%, 45%, 55%, 100% { opacity: 0.7; transform: translateX(-50%) scaleY(1); }
  50%                 { opacity: 0.9; transform: translateX(-50%) scaleY(0.1); }
}

/* ── Cauldron + bubbles in footer bottom ── */
.footer-bottom::before {
  content: '🪄 🫧 🫧';
  position: absolute;
  top: -14px;
  right: 40px;
  font-size: 1.1rem;
  pointer-events: none;
  z-index: 2;
  animation: hw-bubble 3s ease-in-out infinite;
  opacity: 0.6;
}
.footer-bottom { position: relative; }

@keyframes hw-bubble {
  0%, 100% { transform: translateY(0);   opacity: 0.5; }
  50%       { transform: translateY(-8px); opacity: 0.9; }
}

/* ── Glowing eyes peering from footer darkness ── */
.footer-bottom::after {
  content: '👀';
  position: absolute;
  bottom: 10px;
  left: 24px;
  font-size: 1.2rem;
  pointer-events: none;
  z-index: 2;
  animation: hw-eyes 4s ease-in-out infinite;
}

@keyframes hw-eyes {
  0%, 40%, 60%, 100% { opacity: 0; }
  50%                 { opacity: 0.7; }
}

/* ── Candy on homepage quick-link cards ── */
.info-card:nth-child(1)::after { content: '🍬'; }
.info-card:nth-child(2)::after { content: '🍭'; }
.info-card:nth-child(3)::after { content: '🎃'; }
.info-card:nth-child(4)::after { content: '🍫'; }

.info-card::after {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 1.1rem;
  pointer-events: none;
  animation: hw-candy-swing 3s ease-in-out infinite;
}
.info-card { position: relative; }

@keyframes hw-candy-swing {
  0%, 100% { transform: rotate(-10deg); }
  50%       { transform: rotate(10deg);  }
}

/* ── Halloween hero scene — revealed after lightning ── */
.hw-hero-flash {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  animation: hw-hero-reveal 14s linear infinite;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Dark background with stars */
  background:
    radial-gradient(1.5px 1.5px at 5%  10%, rgba(255,255,255,0.95) 0%, transparent 100%),
    radial-gradient(1px   1px   at 15% 6%,  rgba(255,255,255,0.8)  0%, transparent 100%),
    radial-gradient(2px   2px   at 28% 14%, rgba(255,255,255,0.9)  0%, transparent 100%),
    radial-gradient(1px   1px   at 42% 8%,  rgba(255,255,255,0.7)  0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 5%,  rgba(255,255,255,0.95) 0%, transparent 100%),
    radial-gradient(1px   1px   at 72% 12%, rgba(255,255,255,0.8)  0%, transparent 100%),
    radial-gradient(2px   2px   at 88% 7%,  rgba(255,255,255,0.9)  0%, transparent 100%),
    radial-gradient(1px   1px   at 95% 18%, rgba(255,255,255,0.7)  0%, transparent 100%),
    radial-gradient(1px   1px   at 20% 25%, rgba(255,255,255,0.5)  0%, transparent 100%),
    radial-gradient(1px   1px   at 78% 22%, rgba(255,255,255,0.6)  0%, transparent 100%),
    linear-gradient(180deg, #000005 0%, #05000f 40%, #0a0018 100%);
}

/* Scene appears after lightning, holds for ~3s, then fades — 14s total cycle */
@keyframes hw-hero-reveal {
  0%,  60%   { opacity: 0; }
  63%         { opacity: 1; }   /* fully visible */
  88%         { opacity: 1; }   /* hold for ~3.5s */
  93%         { opacity: 0; }   /* fade back */
  100%        { opacity: 0; }
}

/* ── White lightning flash overlays ── */
.hw-lightning-flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: #fff;
  opacity: 0;
  animation: hw-white-flash 14s linear infinite;
}

@keyframes hw-white-flash {
  0%,  58%   { opacity: 0; }
  59%         { opacity: 0.75; }
  60%         { opacity: 0; }
  61%         { opacity: 0.9; }
  62%         { opacity: 0; }
  100%        { opacity: 0; }
}

/* ── Event cards get a spooky border tint ── */
.event-card {
  border-top: 3px solid rgba(232,98,26,0.4) !important;
}

/* ── CSS Halloween flash scene content ── */
.hw-flash-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  z-index: 1;
}

.hw-flash-emojis {
  font-size: 2rem;
  letter-spacing: 8px;
  margin-bottom: 16px;
  animation: hw-emoji-float 2s ease-in-out infinite;
}

@keyframes hw-emoji-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.hw-flash-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 900;
  margin: 0 0 12px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg,
    #ff6600 0%,
    #cc33ff 25%,
    #33cc44 50%,
    #ff6600 75%,
    #cc33ff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hw-title-shimmer 3s linear infinite;
  text-shadow: none;
  filter: drop-shadow(0 0 20px rgba(255,102,0,0.5));
}

@keyframes hw-title-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.hw-flash-sub {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-weight: 500;
  color: #ffd700;
  margin: 0;
  line-height: 1.5;
  text-shadow: 0 0 20px rgba(255,215,0,0.6);
}

/* ── Mobile: hide heavy decorations ── */
@media (max-width: 576px) {
  #header::after    { width: 80px; height: 80px; }
  .hw-spider-hang   { display: none; }
  #hero::after      { font-size: 2rem; bottom: 40px; }
  .hw-bat           { font-size: 1rem; }
  .split-section::before,
  .cta-band::before { width: 70px; height: 70px; }
  .info-card::after { font-size: 0.9rem; }
}