/* ══ Seasonal themes for the homepage ═══════════════════════════════════════
   season.js (inline in index.html <head>) sets <html data-season="halloween"> from the
   date on the academy's clock. Everything here is under that attribute, so outside the
   season the page is untouched. The decoration markup (ghosts, bats, graveyard) is
   generated into index.html by scripts/build_pages.py and is display:none until a
   season is on. To add a holiday: a window in season.js and a block like this one.
   Preview any time with ?season=halloween (or ?season=off). */

.season-deco { display: none; }
.season-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Halloween ───────────────────────────────────────────────────────────── */
:root[data-season="halloween"] {
  --bg: #0c0714;
  --surface: #150d22;
  --surface-elevated: #1c122d;
  --border: rgba(255, 150, 40, 0.14);
  --border-strong: rgba(255, 150, 40, 0.3);
  --text-muted: #aaa0bf;
  --gold: #ff8a1f;
  --gold-hover: #ffa347;
}
[data-season="halloween"] body {
  background:
    radial-gradient(ellipse 70% 40% at 12% 0%, rgba(120, 60, 200, 0.2), transparent 70%),
    radial-gradient(ellipse 60% 50% at 95% 45%, rgba(255, 120, 0, 0.07), transparent 70%),
    var(--bg);
}
[data-season="halloween"] .season-deco { display: block; }

/* The hero photo goes moonlit and purple; the headline glows like a jack-o'-lantern. */
[data-season="halloween"] .hero__still img { filter: saturate(0.8) brightness(0.82) hue-rotate(-6deg); }
[data-season="halloween"] .hero__bg::after {
  background: linear-gradient(to bottom, rgba(22, 8, 44, 0.72) 0%, rgba(26, 8, 48, 0.58) 40%, rgba(16, 6, 30, 0.82) 72%, #0c0714 100%);
}
[data-season="halloween"] .hero { padding-bottom: clamp(130px, 19vw, 230px); }
[data-season="halloween"] .hero__h1-visual span { color: var(--gold); text-shadow: 0 0 30px rgba(255, 138, 31, 0.55), 0 0 4px rgba(255, 190, 90, 0.4); }
[data-season="halloween"] .hero__badge { border-color: rgba(255, 138, 31, 0.5); }

.season-hero { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.season-web { position: absolute; left: 0; top: var(--nav-height, 70px); width: clamp(110px, 17vw, 210px); height: auto; }
.season-web--r { left: auto; right: 0; width: clamp(80px, 10vw, 140px); transform: scaleX(-1); }
.season-moon {
  position: absolute; top: calc(var(--nav-height, 70px) + 34px); right: clamp(40px, 13vw, 240px);
  width: clamp(64px, 10vw, 140px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 32%, rgba(190, 170, 110, 0.5) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 58%, rgba(190, 170, 110, 0.4) 0 12%, transparent 13%),
    radial-gradient(circle at 44% 76%, rgba(190, 170, 110, 0.35) 0 6%, transparent 7%),
    radial-gradient(circle at 35% 35%, #fffbe8, #f6e9b8 55%, #d9c48a);
  box-shadow: 0 0 60px 18px rgba(255, 236, 170, 0.25), 0 0 170px 60px rgba(255, 200, 90, 0.12);
}

/* Bats cross the hero: translate carries them, scale flaps the wings. */
.season-bat { position: absolute; left: -90px; width: clamp(34px, 5vw, 64px); height: auto; opacity: 0.95; filter: drop-shadow(0 0 4px rgba(200, 160, 255, 0.75)); }
.season-bat--1 { top: 22%; animation: bat-fly 17s linear infinite, bat-flap 0.32s ease-in-out infinite alternate; }
.season-bat--2 { top: 14%; width: clamp(26px, 3.6vw, 46px); animation: bat-fly 23s linear -8s infinite, bat-flap 0.26s ease-in-out infinite alternate; }
.season-bat--3 { top: 34%; width: clamp(22px, 3vw, 38px); animation: bat-fly 29s linear -15s infinite, bat-flap 0.22s ease-in-out infinite alternate; }
@keyframes bat-fly {
  0% { translate: 0 0; }
  25% { translate: 30vw -26px; }
  50% { translate: 62vw 22px; }
  75% { translate: 88vw -18px; }
  100% { translate: calc(100vw + 120px) 10px; }
}
@keyframes bat-flap { from { scale: 1 1; } to { scale: 1 0.55; } }

/* Ghosts bob at the edges and say Boo! when tapped. */
.season-ghost {
  position: absolute; width: clamp(44px, 7vw, 92px); height: auto; padding: 0; border: 0; background: none;
  pointer-events: auto; cursor: pointer; opacity: 0.72; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 0 16px rgba(190, 170, 255, 0.55));
  animation: ghost-float 6.5s ease-in-out infinite;
}
.season-ghost svg { display: block; width: 100%; height: auto; }
.season-ghost--1 { left: 1%; top: 40%; }
.season-ghost--2 { right: 1.5%; top: 54%; width: clamp(36px, 5.5vw, 72px); animation-delay: -2.4s; }
.season-ghost--3 { left: 46%; top: 17%; width: clamp(30px, 4vw, 54px); opacity: 0.45; animation-delay: -4s; }
@keyframes ghost-float {
  0%, 100% { transform: translate(0, 0) rotate(-3deg); }
  50% { transform: translate(14px, -22px) rotate(4deg); }
}
.season-boo {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 6px) scale(0.6); opacity: 0; pointer-events: none;
  padding: 4px 12px; border-radius: 999px; background: #f1f1ff; color: #1a1030;
  font: 400 20px/1 'Creepster', var(--font-display), sans-serif; letter-spacing: 0.06em; white-space: nowrap;
  transition: opacity 0.15s, transform 0.15s;
}
.season-ghost.is-boo { opacity: 1; animation: ghost-float 6.5s ease-in-out infinite, ghost-shake 0.4s 2; }
.season-ghost.is-boo .season-boo { opacity: 1; transform: translate(-50%, 0) scale(1); }
@keyframes ghost-shake { 0%, 100% { rotate: 0deg; } 25% { rotate: -9deg; } 75% { rotate: 9deg; } }

.season-fog {
  position: absolute; left: -20%; bottom: 0; width: 140%; height: 42%; filter: blur(10px); opacity: 0.9;
  background:
    radial-gradient(ellipse 30% 60% at 25% 100%, rgba(190, 170, 235, 0.22), transparent 70%),
    radial-gradient(ellipse 28% 50% at 70% 100%, rgba(190, 170, 235, 0.16), transparent 70%);
  animation: fog-drift 26s ease-in-out infinite alternate;
}
.season-fog--2 { height: 30%; opacity: 0.7; animation-duration: 38s; animation-direction: alternate-reverse; }
@keyframes fog-drift { from { transform: translateX(-6%); } to { transform: translateX(8%); } }

.season-yard { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(96px, 15.5vw, 210px); }
.season-yard svg { display: block; width: 100%; height: 100%; }
.season-pump { filter: drop-shadow(0 0 10px rgba(255, 150, 30, 0.85)); animation: pumpkin-flicker 3.4s infinite; }
.season-pump--b { animation-delay: -1.1s; }
.season-pump--c { animation-delay: -2.2s; }
.season-pump--d { animation-delay: -0.6s; }
@keyframes pumpkin-flicker {
  0%, 100% { opacity: 1; } 8% { opacity: 0.82; } 12% { opacity: 1; } 55% { opacity: 0.9; } 60% { opacity: 1; } 83% { opacity: 0.86; }
}

/* ── This month: the three cards under the hero ─────────────────────────── */
[data-season="halloween"] .event-strip { background: linear-gradient(to bottom, #0c0714, rgba(21, 13, 34, 0.7)); }
[data-season="halloween"] .event-strip::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px;
  background: repeating-linear-gradient(90deg, #ff8a1f 0 26px, #7a3bd1 26px 52px, #0c0714 52px 78px);
}
[data-season="halloween"] .event-strip__title,
[data-season="halloween"] .season-stone span { font-family: 'Creepster', var(--font-display), sans-serif; font-weight: 400; letter-spacing: 0.05em; }
[data-season="halloween"] .event-strip__title { font-size: clamp(36px, 6vw, 60px); text-shadow: 0 0 24px rgba(255, 138, 31, 0.45); }
[data-season="halloween"] .event-strip__title::after { content: " \1F383"; }
[data-season="halloween"] .event-strip__link { box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45); }

/* ── Footer graveyard ───────────────────────────────────────────────────── */
.season-footer {
  position: relative; overflow: hidden; display: none; align-items: flex-end; justify-content: center; gap: clamp(8px, 2vw, 22px);
  margin-top: var(--space-12, 48px); padding: 70px 16px 0;
  background: linear-gradient(to bottom, transparent, rgba(255, 120, 0, 0.07) 70%, rgba(255, 120, 0, 0.12));
}
[data-season="halloween"] .season-footer { display: flex; }
.season-footer .season-pump { position: static; width: clamp(54px, 9vw, 96px); height: auto; margin-bottom: -4px; flex-shrink: 0; }
.season-stones { display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 2vw, 22px); }
.season-stone {
  width: clamp(74px, 14vw, 132px); padding: 24px 6px 14px; text-align: center; border-radius: 70px 70px 0 0;
  background: linear-gradient(#4b4664, #2c2740); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.06), 0 -6px 26px rgba(0, 0, 0, 0.4);
}
.season-stone span { display: block; font-size: clamp(18px, 2.6vw, 26px); color: #cfc8e6; line-height: 1; }
.season-stone em { display: block; margin-top: 8px; font-style: normal; font-size: clamp(10.5px, 1.4vw, 13px); line-height: 1.25; color: #b3acc9; }
.season-stone:nth-child(1) { min-height: 118px; transform: rotate(-2deg); }
.season-stone:nth-child(2) { min-height: 98px; }
.season-stone:nth-child(3) { min-height: 126px; transform: rotate(1.5deg); }
.season-stone:nth-child(4) { min-height: 104px; transform: rotate(-1deg); }
.season-ghost--f { position: absolute; right: 4%; top: 22px; width: clamp(40px, 6vw, 72px); opacity: 0.6; animation: ghost-float 7s ease-in-out infinite; pointer-events: none; filter: drop-shadow(0 0 14px rgba(190, 170, 255, 0.5)); }

[data-season="halloween"] .footer { background: #08050f; }

/* ── The rest of the page ───────────────────────────────────────────────────
   Every section has its own layer of decoration (built into index.html by
   scripts/build_pages.py: SEASON_SECTIONS), sitting behind the content so it
   never gets in the way: webs in corners, spiders on threads, ghosts in the
   margins, bunting along the top, a patch of pumpkins, skulls, candy corn and a
   bubbling cauldron at the foot, bats crossing, eyes watching from the dark. */
[data-season="halloween"] :is(#eventStrip, #programs, #competition, #coaches, #gallery, #belt-journey, #locations, #faq, #schedule, #testimonials, #pricing, #contact) {
  position: relative; overflow: clip;
}
.season-sec { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
[data-season="halloween"] .season-sec ~ .container { position: relative; z-index: 1; }
.season-sec > * { position: absolute; }

.ss-web { top: 0; width: clamp(80px, 12vw, 170px); height: auto; opacity: 0.7; }
.ss-web--l { left: 0; }
.ss-web--r { right: 0; transform: scaleX(-1); }

.ss-bunting {
  left: 0; right: 0; top: 0; height: 40px; opacity: 0.85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='40' viewBox='0 0 96 40'%3E%3Cpath d='M0 3Q48 15 96 3' fill='none' stroke='%23b9a6ff' stroke-opacity='.55' stroke-width='1.5'/%3E%3Cpath d='M8 6L28 9L17 30Z' fill='%23ff8a1f'/%3E%3Cpath d='M40 9L60 9L50 31Z' fill='%237a3bd1'/%3E%3Cpath d='M72 9L92 6L82 30Z' fill='%23ff8a1f'/%3E%3C/svg%3E") repeat-x top left;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 100%);
}

/* Spiders hang from the top edge and swing. */
.ss-spider { top: 0; width: var(--w, 46px); transform-origin: 50% 0; animation: spider-swing 5.5s ease-in-out infinite; }
.ss-spider i { display: block; width: 1px; height: var(--len, 80px); margin: 0 auto; background: rgba(214, 206, 245, 0.65); }
.ss-spider svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 6px rgba(190, 160, 255, 0.55)); }
@keyframes spider-swing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }

/* Ghosts drift in the margins; tappable (the global Boo! handler), faint and under the content. */
.season-sec .ss-ghost { pointer-events: auto; opacity: 0.42; height: auto; }
.season-sec .ss-ghost.is-boo { opacity: 1; }

.ss-bat { left: -90px; }

/* Eyes in the dark: two glowing dots that blink. */
.ss-eyes { display: flex; gap: 10px; padding: 0 clamp(6px, 1.4vw, 22px); animation: eyes-blink 7s infinite; }
.ss-eyes b { width: 11px; height: 7px; border-radius: 50%; background: #ffd54a; box-shadow: 0 0 10px 3px rgba(255, 190, 40, 0.85); transform: rotate(-10deg); }
.ss-eyes b + b { transform: rotate(10deg); }
@keyframes eyes-blink { 0%, 44%, 48%, 100% { opacity: 1; transform: scaleY(1); } 46% { opacity: 1; transform: scaleY(0.1); } 70%, 78% { opacity: 0.12; } }

/* The patch at the foot of the section. */
.ss-patch { bottom: -2px; display: flex; align-items: flex-end; gap: clamp(2px, 0.6vw, 10px); }
.ss-patch--l { left: clamp(4px, 2.2vw, 36px); }
.ss-patch--r { right: clamp(4px, 2.2vw, 36px); }
.ss-i { display: block; height: auto; flex-shrink: 0; }
.ss-i--pump { width: clamp(38px, 5.4vw, 74px); }
.ss-i--pump:nth-child(2n) { width: clamp(28px, 4vw, 54px); animation-delay: -1.3s; }
.ss-i--pump:nth-child(3n) { animation-delay: -2.3s; }
.ss-i--skull { width: clamp(28px, 3.6vw, 48px); transform: rotate(-9deg); filter: drop-shadow(0 0 8px rgba(255, 138, 31, 0.5)); }
.ss-i--candy { width: clamp(18px, 2.4vw, 32px); transform: rotate(8deg); filter: drop-shadow(0 0 6px rgba(255, 210, 90, 0.45)); }
.ss-i--cauldron { width: clamp(46px, 6.2vw, 84px); filter: drop-shadow(0 0 14px rgba(120, 240, 70, 0.55)); }
.ss-i--cauldron .s-bubbles { animation: bubble-pop 2.6s ease-in-out infinite; }
@keyframes bubble-pop { 0%, 100% { transform: translateY(2px); opacity: 0.55; } 50% { transform: translateY(-5px); opacity: 1; } }

@media (max-width: 700px) {
  .ss-web { width: 74px; opacity: 0.55; }
  .season-sec .ss-ghost { opacity: 0.3; width: 38px !important; }
  .ss-bat:nth-of-type(n+3) { display: none; }
  .ss-eyes { display: none; }
  .ss-spider { left: auto !important; right: 3%; --w: 34px; }
  .ss-spider i { height: min(var(--len, 80px), 70px); }
  .ss-patch .ss-i--candy, .ss-patch .ss-i:nth-child(n+3) { display: none; }
  .ss-bunting { height: 36px; opacity: 0.7; }
}

/* Phones: fewer things flying about, nothing wider than the screen. */
@media (max-width: 700px) {
  .season-bat--3, .season-ghost--3 { display: none; }
  .season-ghost--1 { top: 62%; left: 2%; opacity: 0.5; }
  .season-ghost--2 { top: 70%; right: 3%; opacity: 0.5; }
  .season-moon { top: 70px; right: 6px; width: 40px; box-shadow: 0 0 30px 8px rgba(255, 236, 170, 0.25); }
  .season-web--r { display: none; }
  .season-footer .season-pump--f2 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .season-deco, .season-deco * { animation: none !important; }
  .season-bat { left: 12%; }
}