/* ============================================
   Hopeful Readings — Halloween theme (October)
   ============================================

   TEMPORARY SEASONAL LAYER. This file only overrides; it never edits the
   base design.

   Every seasonal rule is gated on html[data-season="halloween"], NOT on
   whether this file is loaded. That is what lets visitors switch the theme
   off at runtime (see halloween-toggle.js) while the stylesheet stays
   loaded, so the toggle button keeps its own styling in both states.

   To take the theme off for good after October, remove the seasonal block
   from each of index.html, faq/index.html, thank-you/index.html and
   404.html — the comment, the <link> to this file and the <script> — and
   drop data-season="halloween" from the <html> tag on those four pages.
   Then halloween.css, halloween-toggle.js and assets/halloween-*.svg can
   be deleted. Nothing in style.css was touched.

   Loaded AFTER style.css, so plain specificity wins; no !important.

   Note on assets: the site's CSP sets img-src 'self' and forbids data:
   URIs, so the bat and cobweb art are real files under assets/ rather
   than inlined into this stylesheet.
   ============================================ */

html[data-season="halloween"] {
  /* The azure accent becomes pumpkin for the season. Every component that
     referenced --azure* picks this up without being touched individually. */
  --azure: #ff7a18;
  --azure-bright: #ff9436;
  --azure-light: #ffc078;
  --azure-deep: #5c2102;

  /* Gold warms toward candlelight so it sits with the orange. */
  --gold: #e8901f;
  --gold-light: #ffc66b;

  /* Grounds go blacker and slightly warm — night, not twilight. */
  --deep: #0a0616;
  --purple-dark: #170d2e;
  --purple: #24123f;
}

/* ---------- Seasonal light: orange where the blue wash used to be ---------- */

html[data-season="halloween"] .hero {
  background:
    radial-gradient(120% 80% at 50% 105%, rgba(255, 122, 24, 0.24) 0%, transparent 60%),
    radial-gradient(90% 60% at 12% 8%, rgba(90, 30, 110, 0.4) 0%, transparent 65%),
    var(--deep);
}

html[data-season="halloween"] .hero-glow {
  background:
    radial-gradient(circle, rgba(140, 60, 170, 0.3) 0%, rgba(140, 60, 170, 0.1) 36%, transparent 64%),
    radial-gradient(circle, rgba(255, 122, 24, 0.42) 0%, rgba(255, 122, 24, 0.16) 46%, transparent 74%);
}

/* The mark keeps its own colours; only the light around it turns orange. */
html[data-season="halloween"] .hero-logo {
  filter:
    drop-shadow(0 0 26px rgba(255, 122, 24, 0.6))
    drop-shadow(0 0 60px rgba(140, 60, 170, 0.45));
}

html[data-season="halloween"] .services {
  background:
    radial-gradient(70% 55% at 85% 12%, rgba(255, 122, 24, 0.2) 0%, transparent 62%),
    linear-gradient(175deg, var(--purple-dark) 0%, var(--deep) 100%);
}

html[data-season="halloween"] .group-readings {
  background:
    radial-gradient(70% 55% at 12% 80%, rgba(255, 122, 24, 0.18) 0%, transparent 62%),
    linear-gradient(185deg, var(--deep) 0%, var(--purple-dark) 100%);
}

html[data-season="halloween"] .booking {
  background:
    radial-gradient(65% 55% at 88% 18%, rgba(255, 122, 24, 0.22) 0%, transparent 60%),
    linear-gradient(170deg, var(--purple) 0%, var(--deep) 100%);
}

html[data-season="halloween"] .tiktok-live {
  background:
    radial-gradient(60% 70% at 8% 50%, rgba(255, 122, 24, 0.22) 0%, transparent 62%),
    var(--deep);
}

html[data-season="halloween"] .site-footer {
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(255, 122, 24, 0.16) 0%, transparent 65%),
    var(--deep);
  border-top-color: rgba(255, 122, 24, 0.24);
}

html[data-season="halloween"] .section-bg-accent {
  background: radial-gradient(circle, rgba(255, 122, 24, 0.13), transparent 70%);
}

/* ---------- Sparkles turn ember-coloured ---------- */

html[data-season="halloween"] .sparkle path,
html[data-season="halloween"] .sparkle circle,
html[data-season="halloween"] .sparkle-f path,
html[data-season="halloween"] .sparkle-f circle {
  fill: #ffb060;
}

html[data-season="halloween"] .sparkle-f {
  filter: drop-shadow(0 0 4px rgba(255, 160, 70, 0.9)) drop-shadow(0 0 10px rgba(255, 122, 24, 0.55));
}

html[data-season="halloween"] .sparkle-f--2,
html[data-season="halloween"] .sparkle-f--4 {
  filter: drop-shadow(0 0 4px rgba(255, 200, 120, 0.9)) drop-shadow(0 0 10px rgba(255, 122, 24, 0.55));
}

html[data-season="halloween"] .sec-sparkle--2,
html[data-season="halloween"] .sec-sparkle--5 {
  filter: drop-shadow(0 0 5px rgba(255, 140, 40, 0.85));
}

/* ---------- Cobwebs ----------
   Corner webs on the dark sections. Flipped with scaleX where the web
   belongs on the right, so one asset serves both corners. */

html[data-season="halloween"] .hero::after,
html[data-season="halloween"] .services::before,
html[data-season="halloween"] .booking::before,
html[data-season="halloween"] .site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  width: 260px;
  height: 260px;
  background: url('assets/halloween-web.svg') no-repeat top left / contain;
  opacity: 0.42;
  pointer-events: none;
  z-index: 0;
}

html[data-season="halloween"] .hero::after,
html[data-season="halloween"] .booking::before {
  left: 0;
}

html[data-season="halloween"] .services::before,
html[data-season="halloween"] .site-footer::before {
  right: 0;
  transform: scaleX(-1);
}

/* Keep the webs behind the content they overlap. */
html[data-season="halloween"] .hero-content,
html[data-season="halloween"] .services .container,
html[data-season="halloween"] .booking .container,
html[data-season="halloween"] .site-footer .container {
  position: relative;
  z-index: 1;
}

/* ---------- Bats ----------
   Two drifting groups, each a pseudo-element carrying the bat art at a
   few sizes. The faint orange glow is what separates a near-black
   silhouette from a near-black sky. */

html[data-season="halloween"] .hero::before,
html[data-season="halloween"] .tiktok-live::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 10px rgba(255, 122, 24, 0.75)) drop-shadow(0 0 22px rgba(255, 122, 24, 0.35));
}

html[data-season="halloween"] .hero::before {
  background-image:
    url('assets/halloween-bat.svg'),
    url('assets/halloween-bat.svg'),
    url('assets/halloween-bat.svg'),
    url('assets/halloween-bat.svg'),
    url('assets/halloween-bat.svg'),
    url('assets/halloween-bat.svg');
  /* A loose colony rather than an even scatter: sizes vary a lot so the
     small ones read as further away. */
  background-position: 12% 18%, 82% 26%, 68% 9%, 26% 62%, 91% 56%, 44% 12%;
  background-size: 92px auto, 58px auto, 40px auto,
                   34px auto, 66px auto, 26px auto;
  animation: hw-drift 13s ease-in-out infinite;
}

html[data-season="halloween"] .tiktok-live::before {
  background-image:
    url('assets/halloween-bat.svg'),
    url('assets/halloween-bat.svg');
  background-position: 6% 22%, 93% 72%;
  background-size: 54px auto, 36px auto;
  animation: hw-drift 17s ease-in-out infinite reverse;
}

@keyframes hw-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  35%      { transform: translate3d(14px, -12px, 0); }
  70%      { transform: translate3d(-10px, 8px, 0); }
}

/* ---------- Components ---------- */

/* Badges go pumpkin; the featured card's frame follows. */
html[data-season="halloween"] .s-card-badge {
  color: #1a0d05;
  background: linear-gradient(90deg, #ff7a18, #ffc078);
}

html[data-season="halloween"] .s-card--featured {
  background: linear-gradient(160deg, rgba(255, 122, 24, 0.5), rgba(140, 60, 170, 0.3), rgba(255, 255, 255, 0.08));
}

html[data-season="halloween"] .live-badge {
  color: #1a0d05;
  background: linear-gradient(90deg, #ff7a18, #ffc078);
}

/* Card edges glow like a lit pumpkin rather than cold blue. */
html[data-season="halloween"] .s-card {
  background: linear-gradient(160deg, rgba(255, 122, 24, 0.3), rgba(255, 255, 255, 0.03));
}

html[data-season="halloween"] .s-card:hover {
  background: linear-gradient(160deg, rgba(255, 122, 24, 0.78), rgba(255, 192, 120, 0.16));
}

html[data-season="halloween"] .live-menu {
  border-color: rgba(255, 122, 24, 0.45);
  background: rgba(255, 122, 24, 0.09);
}

html[data-season="halloween"] .live-icon {
  background: rgba(255, 122, 24, 0.18);
  color: var(--azure-light);
}

/* Primary buttons sweep purple into pumpkin. */
html[data-season="halloween"] .hero-btn,
html[data-season="halloween"] .nav-cta,
html[data-season="halloween"] .btn-submit,
html[data-season="halloween"] .live-btn,
html[data-season="halloween"] .s-card--featured .s-card-btn {
  background: linear-gradient(135deg, #6b3fa0, #9b6dd7 55%, #ff7a18);
}

html[data-season="halloween"] .hero-btn:hover,
html[data-season="halloween"] .hero-btn:focus {
  box-shadow: 0 8px 40px rgba(107, 63, 160, 0.5), 0 8px 44px rgba(255, 122, 24, 0.4);
}

/* ---------- Secondary pages ----------
   faq.css and thank-you.css are loaded before this file, so their page
   banners are overridden here rather than edited. */

html[data-season="halloween"] .faq-hero,
html[data-season="halloween"] .ty-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 82% 15%, rgba(255, 122, 24, 0.22) 0%, transparent 62%),
    linear-gradient(160deg, var(--purple-dark) 0%, var(--deep) 100%);
}

html[data-season="halloween"] .faq-hero::before,
html[data-season="halloween"] .ty-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 230px;
  height: 230px;
  background: url('assets/halloween-web.svg') no-repeat top left / contain;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

html[data-season="halloween"] .faq-hero::after,
html[data-season="halloween"] .ty-section::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: url('assets/halloween-bat.svg') no-repeat 88% 74% / 56px auto;
  filter: drop-shadow(0 0 10px rgba(255, 122, 24, 0.7));
  animation: hw-drift 15s ease-in-out infinite;
}

/* The base .section-label is dark purple, which is near-invisible on this
   dark banner; the season is a good excuse to fix it here. */
html[data-season="halloween"] .faq-hero .section-label {
  color: var(--azure-light);
}

html[data-season="halloween"] .group-readings .container {
  position: relative;
  z-index: 1;
}

html[data-season="halloween"] .faq-hero .container,
html[data-season="halloween"] .ty-section .container {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  html[data-season="halloween"] .faq-hero::after,
html[data-season="halloween"] .ty-section::after { animation: none; }
}

@media (max-width: 600px) {
  html[data-season="halloween"] .faq-hero::before,
html[data-season="halloween"] .ty-section::before { width: 140px; height: 140px; }
  html[data-season="halloween"] .faq-hero::after,
html[data-season="halloween"] .ty-section::after { background-size: 40px auto; background-position: 90% 82%; }
}

/* ---------- Bat on card hover ----------
   Hovering a session card sends a bat up out of it. Done entirely with a
   pseudo-element so no markup changes are needed, and it disappears with
   the rest of the theme.

   The flight path wobbles horizontally and pulses scaleY on the way up —
   that reads as wingbeats without needing a second animated element.
   .services keeps overflow:hidden for its own gradients, but the bat's
   ~190px climb stays well inside the section, so it is never clipped. */

html[data-season="halloween"] .s-card::after {
  content: '';
  position: absolute;
  left: 50%;
  /* Starts at the card's top edge and climbs clear of it. Starting lower
     kept the whole flight inside a 460px-tall card, where it read as a bug
     crawling over the copy rather than a bat leaving. */
  top: 6px;
  width: 54px;
  height: 27px;
  /* The lit variant, not the plain silhouette: a dark bat on a dark card is
     invisible, so this one carries a pumpkin rim. */
  background: url('assets/halloween-bat-lit.svg') no-repeat center / contain;
  filter: drop-shadow(0 0 10px rgba(255, 122, 24, 0.8));
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transform: translate(-50%, 0) scale(0.55);
}

html[data-season="halloween"] .s-card:hover::after,
html[data-season="halloween"] .s-card:focus-within::after {
  animation: hw-bat-fly 1.5s cubic-bezier(.32, .62, .4, 1) forwards;
}

@keyframes hw-bat-fly {
  0%   { opacity: 0;   transform: translate(-50%, 0)        scale(0.55) rotate(0deg); }
  12%  { opacity: 0.9; transform: translate(-58%, -26px)    scale(0.72) rotate(-8deg) scaleY(0.72); }
  30%  { opacity: 1;   transform: translate(-36%, -66px)    scale(0.85) rotate(6deg)  scaleY(1.1); }
  48%  { opacity: 1;   transform: translate(-64%, -104px)   scale(0.95) rotate(-7deg) scaleY(0.74); }
  66%  { opacity: 0.9; transform: translate(-34%, -140px)   scale(1)    rotate(6deg)  scaleY(1.08); }
  84%  { opacity: 0.5; transform: translate(-56%, -170px)   scale(1.04) rotate(-5deg) scaleY(0.8); }
  100% { opacity: 0;   transform: translate(-44%, -196px)   scale(1.08) rotate(3deg); }
}

/* Stagger the cards so sweeping across the row doesn't fire five identical
   bats in lockstep. */
html[data-season="halloween"] .s-card:nth-child(2):hover::after { animation-duration: 1.7s; }
html[data-season="halloween"] .s-card:nth-child(3):hover::after { animation-duration: 1.35s; }
html[data-season="halloween"] .s-card:nth-child(4):hover::after { animation-duration: 1.62s; }
html[data-season="halloween"] .s-card:nth-child(5):hover::after { animation-duration: 1.44s; }

@media (prefers-reduced-motion: reduce) {
  /* No flight; the bat just fades in and holds. */
  html[data-season="halloween"] .s-card:hover::after,
html[data-season="halloween"] .s-card:focus-within::after {
    animation: none;
    opacity: 0.9;
    transform: translate(-50%, -70px) scale(0.9);
    transition: opacity 0.3s ease;
  }
}

/* ---------- Motion and small screens ---------- */

@media (prefers-reduced-motion: reduce) {
  html[data-season="halloween"] .hero::before,
html[data-season="halloween"] .tiktok-live::before {
    animation: none;
  }
}

@media (max-width: 600px) {
  /* Smaller webs and fewer, smaller bats: at phone width the full-size
     decorations crowd the copy. */
  html[data-season="halloween"] .hero::after,
html[data-season="halloween"] .services::before,
html[data-season="halloween"] .booking::before,
html[data-season="halloween"] .site-footer::before {
    width: 128px;
    height: 128px;
    opacity: 0.22;
  }

  html[data-season="halloween"] .hero::before {
    background-image:
      url('assets/halloween-bat.svg'),
      url('assets/halloween-bat.svg');
    background-position: 8% 14%, 88% 21%;
    background-size: 56px auto, 38px auto;
  }

  html[data-season="halloween"] .tiktok-live::before {
    background-image: url('assets/halloween-bat.svg');
    background-position: 92% 8%;
    background-size: 38px auto;
  }
}

/* ---------- Extra props ----------
   One motif per section, each on a free pseudo-element so no markup
   changes are needed. Kept to one apiece: the sections already carry a
   cobweb, and stacking more turns atmosphere into clutter. */

/* Spider dangling into the services section, over on the left where there
   is no copy. Transform-origin at the top so it swings from its thread. */
html[data-season="halloween"] .services::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 6%;
  width: 72px;
  height: 135px;
  background: url('assets/halloween-spider.svg') no-repeat top center / contain;
  filter: drop-shadow(0 0 8px rgba(255, 122, 24, 0.4));
  transform-origin: 50% 0;
  animation: hw-swing 6.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

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

/* Ghost drifting through the group readings section. */
html[data-season="halloween"] .group-readings::before {
  content: '';
  position: absolute;
  top: 14%;
  right: 5%;
  width: 84px;
  height: 100px;
  background: url('assets/halloween-ghost.svg') no-repeat center / contain;
  opacity: 0.5;
  filter: drop-shadow(0 0 16px rgba(201, 177, 224, 0.5));
  animation: hw-float 9s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes hw-float {
  0%, 100% { transform: translate3d(0, 0, 0)       scaleX(1);    opacity: 0.5; }
  30%      { transform: translate3d(-18px, -22px, 0) scaleX(-1); opacity: 0.62; }
  65%      { transform: translate3d(12px, -10px, 0)  scaleX(-1); opacity: 0.42; }
}

/* Candles in the footer. Chosen over a jack-o'-lantern: the purple wax sits
   in the brand palette and a lit candle reads as séance as much as
   Halloween, which suits a medium's site better than a carved pumpkin.
   Left, not right — the back-to-top button is fixed in the bottom-right
   corner and anything placed there sits directly under it. */
html[data-season="halloween"] .site-footer::after {
  content: '';
  position: absolute;
  left: 5%;
  bottom: 10px;
  width: 96px;
  height: 92px;
  background: url('assets/halloween-pumpkin.svg') no-repeat center bottom / contain;
  animation: hw-flicker 3.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Uneven on purpose: a candle flame does not pulse on a metronome. */
@keyframes hw-flicker {
  0%, 100% { filter: drop-shadow(0 0 13px rgba(255, 150, 40, 0.5)); }
  18%      { filter: drop-shadow(0 0 22px rgba(255, 180, 70, 0.78)); }
  32%      { filter: drop-shadow(0 0 15px rgba(255, 150, 40, 0.55)); }
  55%      { filter: drop-shadow(0 0 27px rgba(255, 190, 90, 0.88)); }
  70%      { filter: drop-shadow(0 0 16px rgba(255, 150, 40, 0.58)); }
  85%      { filter: drop-shadow(0 0 20px rgba(255, 175, 65, 0.72)); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-season="halloween"] .services::after,
  html[data-season="halloween"] .group-readings::before,
  html[data-season="halloween"] .site-footer::after {
    animation: none;
  }
}

@media (max-width: 700px) {
  /* The props compete with the copy at phone width, so the spider and the
     ghost step out and only the pumpkin stays, smaller. */
  html[data-season="halloween"] .services::after,
  html[data-season="halloween"] .group-readings::before {
    display: none;
  }

  html[data-season="halloween"] .site-footer::after {
    width: 64px;
    height: 62px;
    left: 6%;
    opacity: 0.9;
  }
}

/* ============================================
   Seasonal toggle button
   ============================================
   Deliberately NOT scoped to html[data-season="halloween"]: the button has
   to stay styled while the theme is off, otherwise switching back would
   mean hunting for an unstyled control. Everything above this point is
   gated; this block is not. */

.season-toggle-item {
  display: flex;
  align-items: center;
}

.season-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(201, 177, 224, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--lavender);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease,
              background 0.25s ease, transform 0.25s var(--ease-out);
}

.season-toggle svg {
  width: 21px;
  height: auto;
  display: block;
}

.season-toggle:hover,
.season-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 138, 30, 0.6);
  color: #ffb060;
  background: rgba(255, 122, 24, 0.12);
}

/* Lit while the season is on, so the control reads as a state, not a link. */
html[data-season="halloween"] .season-toggle {
  color: #ff9436;
  border-color: rgba(255, 138, 30, 0.55);
  background: rgba(255, 122, 24, 0.14);
}

html[data-season="halloween"] .season-toggle:hover,
html[data-season="halloween"] .season-toggle:focus-visible {
  color: #ffc078;
  background: rgba(255, 122, 24, 0.24);
}

/* In the stacked mobile dropdown the button is a row of its own, so give it
   the same left alignment the links have rather than centring it. */
@media (max-width: 767px) {
  .season-toggle-item {
    justify-content: flex-start;
    padding: 10px 28px;
  }
}