/* ═══════════════════════════════════════════════════════════════════
   KRAFTED BY NAE — IMMERSIVE THEME SYSTEM  v2.0
   Each theme is a world, not a palette.
   Layers: body → ambient → shell → particles → floaters → UI → veil
═══════════════════════════════════════════════════════════════════ */

/* ── Theme Transition Veil ────────────────────────────────────────── */
.theme-veil {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: 0;
  will-change: opacity;
  transition: opacity 0.2s ease;
}
.theme-veil.flash { opacity: 1; }

/* ── Particle Canvas ──────────────────────────────────────────────── */
#themeParticles {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  width: 100vw; height: 100vh;
}

/* ── SVG Floaters (replacing emoji) ──────────────────────────────── */
/* position:fixed so floaters live in the viewport layer, not inside
   the page-shell card — they appear as part of the world background,
   never overlapping text or buttons in the content area. */
.season-floaters {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 2; overflow: hidden;
}
.sf {
  position: absolute; opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transition: opacity 0.8s ease;
}
/* Floaters are atmospheric background decor — beautiful but never in the way.
   0.42 opacity keeps them clearly in the background layer while still
   contributing strongly to the season's mood. */
[data-theme] .sf {
  opacity: 0.42;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.22));
}

/* Halloween floaters are darker by nature — bring them up a touch */
[data-theme="halloween"] .sf { opacity: 0.52; }

/* Pride floaters are bright and joyful — dial up slightly */
[data-theme="pride"] .sf { opacity: 0.48; }

/* Per-theme floater motion — each season moves differently */
[data-theme="summer"] .sf {
  animation: sfSummer var(--dur, 9s) ease-in-out infinite var(--delay, 0s);
}
@keyframes sfSummer {
  0%,100% { transform: translateY(0) rotate(0deg) scale(1); }
  25%     { transform: translateY(-22px) rotate(7deg) scale(1.06); }
  55%     { transform: translateY(-8px) rotate(-3deg) scale(0.96); }
  80%     { transform: translateY(-18px) rotate(5deg) scale(1.03); }
}

[data-theme="winter"] .sf {
  animation: sfWinter var(--dur, 11s) ease-in-out infinite var(--delay, 0s);
}
@keyframes sfWinter {
  0%,100% { transform: translateX(0) translateY(0) rotate(0deg); }
  25%     { transform: translateX(10px) translateY(-16px) rotate(18deg); }
  60%     { transform: translateX(-7px) translateY(6px) rotate(-12deg); }
  80%     { transform: translateX(5px) translateY(-8px) rotate(8deg); }
}

[data-theme="fall"] .sf {
  animation: sfFall var(--dur, 10s) ease-in-out infinite var(--delay, 0s);
}
@keyframes sfFall {
  0%    { transform: translateX(0) translateY(0) rotate(0deg); }
  20%   { transform: translateX(14px) translateY(10px) rotate(-22deg); }
  45%   { transform: translateX(-10px) translateY(18px) rotate(18deg); }
  70%   { transform: translateX(12px) translateY(8px) rotate(-12deg); }
  100%  { transform: translateX(0) translateY(0) rotate(0deg); }
}

[data-theme="spring"] .sf {
  animation: sfSpring var(--dur, 8s) ease-in-out infinite var(--delay, 0s);
}
@keyframes sfSpring {
  0%,100% { transform: translateY(0) translateX(0) rotate(0deg); }
  33%     { transform: translateY(-24px) translateX(12px) rotate(14deg); }
  66%     { transform: translateY(-12px) translateX(-10px) rotate(-9deg); }
}

[data-theme="labor-day"] .sf {
  animation: sfLabor var(--dur, 7s) ease-in-out infinite var(--delay, 0s);
}
@keyframes sfLabor {
  0%,100% { transform: translateY(0) scale(1); }
  30%     { transform: translateY(-20px) scale(1.1); }
  65%     { transform: translateY(-8px) scale(0.95); }
}

/* ── Button/CTA micro-interactions for all themes ─────────────────── */
[data-theme] .scta-primary,
[data-theme] .scta-secondary {
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}
[data-theme] .scta-primary:hover { transform: translateY(-3px); }
[data-theme] .scta-secondary:hover { transform: translateY(-2px); }

/* ═══════════════════════════════════════════════════════════════════
   ☀️  SUMMER — Golden hour. Warm linen. Outdoor craft fairs. Sunsets.
═══════════════════════════════════════════════════════════════════ */
[data-theme="summer"] {
  --teal: #C8680A; --teal-deep: #92420A; --berry: #E07030; --amber: #F6B84A;
  --cream: #FFF8EE; --cream-deep: #FDEFD4;
}

/* Body: warm golden-hour wash — soft amber from upper right, blush at bottom */
[data-theme="summer"] body {
  background-color: #FFF0D8;
  background-image:
    radial-gradient(ellipse 90% 60% at 90% 0%, rgba(255,190,50,0.38) 0%, transparent 58%),
    radial-gradient(ellipse 70% 50% at 8% 100%, rgba(255,120,60,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255,255,255,0.08) 0%, transparent 65%),
    repeating-linear-gradient(108deg, rgba(200,104,10,0.018) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(-12deg, rgba(200,104,10,0.012) 0 1px, transparent 1px 15px);
}

/* Page shell: warm cream parchment */
[data-theme="summer"] .page-shell {
  background: linear-gradient(180deg,
    rgba(255,252,244,0.98) 0%,
    rgba(255,245,228,0.96) 100%);
  box-shadow:
    0 50px 100px -30px rgba(160,80,10,0.20),
    0 0 0 1px rgba(200,104,10,0.10),
    inset 0 1px 0 rgba(255,230,140,0.55);
}

/* Primary CTA — warm amber-coral with golden glow */
[data-theme="summer"] .scta-primary {
  background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
  box-shadow:
    0 6px 28px rgba(180,83,9,0.38),
    0 2px 8px rgba(180,83,9,0.22),
    inset 0 1px 0 rgba(255,220,100,0.3);
  border: none;
}
[data-theme="summer"] .scta-primary:hover {
  box-shadow:
    0 12px 40px rgba(180,83,9,0.48),
    0 3px 12px rgba(180,83,9,0.28),
    inset 0 1px 0 rgba(255,220,100,0.3);
}

/* Trust cards — warm parchment instead of stark white */
[data-theme="summer"] .trust-card {
  background: #FFF8EE;
  border-color: rgba(200,104,10,0.10);
}

/* Hero art glow — warm golden haze behind the logo */
[data-theme="summer"] .hero-art img {
  filter: drop-shadow(0 0 28px rgba(217,119,6,0.22));
}

/* Season banner — warm golden sunrise, clean and airy */
[data-theme="summer"] .season-banner {
  display: block;
  background: linear-gradient(90deg, #B45309 0%, #D97706 30%, #F59E0B 60%, #D97706 80%, #B45309 100%);
  color: #FFF8EE;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 11px 20px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(100,40,0,0.25);
}

/* ═══════════════════════════════════════════════════════════════════
   ❄️  WINTER — Fireplace. Knitted blankets. Gold candlelight.
═══════════════════════════════════════════════════════════════════ */
[data-theme="winter"] {
  --teal: #2B6FA8; --teal-deep: #153A6B; --berry: #1A3A8B; --amber: #5B9EC9;
  --cream: #F3F7FC; --cream-deep: #E0EBF5;
}

/* Dark sky body — deep midnight blue with subtle starfield texture */
[data-theme="winter"] body {
  background-color: #141F30;
  background-image:
    radial-gradient(ellipse 80% 55% at 50% -5%, rgba(180,215,255,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 35% 25% at 80% 75%, rgba(80,140,200,0.09) 0%, transparent 50%),
    radial-gradient(ellipse 25% 20% at 15% 30%, rgba(100,160,220,0.07) 0%, transparent 40%),
    repeating-linear-gradient(90deg,  rgba(100,160,220,0.025) 0 1px, transparent 1px 50px),
    repeating-linear-gradient(180deg, rgba(100,160,220,0.018) 0 1px, transparent 1px 50px);
}

/* Page shell: crisp light card floating on dark night */
[data-theme="winter"] .page-shell {
  background: linear-gradient(180deg,
    rgba(243,247,252,0.975) 0%,
    rgba(228,237,248,0.96) 100%);
  box-shadow:
    0 60px 120px -30px rgba(8,18,50,0.7),
    0 0 0 1px rgba(90,158,200,0.18),
    0 0 60px rgba(90,158,200,0.06) inset;
}

/* Headings */
[data-theme="winter"] h1,
[data-theme="winter"] h2,
[data-theme="winter"] .section-head h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 600; letter-spacing: 0.03em;
}
[data-theme="winter"] .italic-accent {
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
}

/* Primary CTA — midnight navy with silver shimmer */
[data-theme="winter"] .scta-primary {
  background: linear-gradient(135deg, #1A3A8B 0%, #0F2260 100%);
  box-shadow:
    0 6px 28px rgba(20,50,130,0.45),
    0 0 0 1px rgba(90,158,200,0.3),
    inset 0 1px 0 rgba(180,220,255,0.22);
  border: none;
}
[data-theme="winter"] .scta-primary:hover {
  box-shadow:
    0 12px 40px rgba(20,50,130,0.55),
    0 0 0 1px rgba(90,158,200,0.45),
    inset 0 1px 0 rgba(180,220,255,0.22);
  filter: brightness(1.1);
}

/* Season banner — dark navy, elegant serif */
[data-theme="winter"] .season-banner {
  display: block;
  background: linear-gradient(90deg, #0C1A48 0%, #1A3A8B 40%, #153268 75%, #0C1A48 100%);
  color: #C0DEFF;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem; letter-spacing: 0.12em;
  padding: 11px 20px; text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   🍂  FALL — Bonfires. Coffee shops. Amber light. Wood grain.
═══════════════════════════════════════════════════════════════════ */
[data-theme="fall"] {
  --teal: #A04E18; --teal-deep: #7A2E0A; --berry: #8B3A1A; --amber: #D47530;
  --cream: #FCF0E0; --cream-deep: #F0DFC4;
}

/* Deep ember body — charred wood with amber light */
[data-theme="fall"] body {
  background-color: #231208;
  background-image:
    radial-gradient(ellipse 95% 45% at 18% -5%, rgba(210,100,20,0.28) 0%, transparent 58%),
    radial-gradient(ellipse 55% 65% at 92% 85%, rgba(120,55,12,0.22) 0%, transparent 52%),
    radial-gradient(ellipse 40% 30% at 55% 45%, rgba(200,80,20,0.06) 0%, transparent 50%),
    repeating-linear-gradient(135deg, rgba(150,70,20,0.035) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(45deg,  rgba(150,70,20,0.025) 0 1px, transparent 1px 10px);
}

/* Page shell: warm amber-cream */
[data-theme="fall"] .page-shell {
  background: linear-gradient(180deg,
    rgba(252,240,224,0.975) 0%,
    rgba(244,228,202,0.96) 100%);
  box-shadow:
    0 55px 110px -28px rgba(70,25,5,0.6),
    0 0 0 1px rgba(180,88,28,0.14),
    inset 0 1px 0 rgba(255,240,210,0.85);
}

/* Headings */
[data-theme="fall"] h1,
[data-theme="fall"] h2,
[data-theme="fall"] .section-head h2 {
  font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 9; font-weight: 600;
}

/* Primary CTA — deep amber with fire glow */
[data-theme="fall"] .scta-primary {
  background: linear-gradient(135deg, #A04E18 0%, #7A2E0A 100%);
  box-shadow:
    0 6px 28px rgba(120,46,10,0.45),
    0 2px 8px rgba(120,46,10,0.25),
    inset 0 1px 0 rgba(255,200,140,0.2);
  border: none;
}
[data-theme="fall"] .scta-primary:hover {
  box-shadow:
    0 12px 40px rgba(120,46,10,0.55),
    0 3px 12px rgba(120,46,10,0.3),
    inset 0 1px 0 rgba(255,200,140,0.2);
}

/* Season banner — ember gradient */
[data-theme="fall"] .season-banner {
  display: block;
  background: linear-gradient(90deg, #7A2E0A 0%, #C05520 35%, #D47530 60%, #7A2E0A 100%);
  color: #FFE8C0;
  font-family: 'Fraunces', serif;
  letter-spacing: 0.06em;
  padding: 10px 20px; text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   🌸  SPRING — Cherry blossoms. Morning dew. Butterflies. Fresh yarn.
═══════════════════════════════════════════════════════════════════ */
[data-theme="spring"] {
  --teal: #8B3A6B; --teal-deep: #6B2E7A; --berry: #B8466B; --amber: #D4568A;
  --cream: #FDF5F8; --cream-deep: #F5E4EE;
}

/* Blush sky body — soft pink dawn */
[data-theme="spring"] body {
  background-color: #EDD8E5;
  background-image:
    radial-gradient(ellipse 90% 65% at 50% -8%, rgba(255,190,215,0.45) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 95% 80%, rgba(200,100,140,0.15) 0%, transparent 48%),
    radial-gradient(ellipse 40% 35% at 5%  65%, rgba(140,195,120,0.12) 0%, transparent 42%),
    radial-gradient(ellipse 30% 25% at 70% 20%, rgba(255,220,235,0.2) 0%, transparent 35%);
}

/* Page shell: whisper-white with blush shadow */
[data-theme="spring"] .page-shell {
  background: linear-gradient(180deg,
    rgba(253,245,248,0.975) 0%,
    rgba(248,232,242,0.96) 100%);
  box-shadow:
    0 45px 90px -25px rgba(160,70,110,0.22),
    0 0 0 1px rgba(200,100,140,0.1),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

/* Headings */
[data-theme="spring"] h1,
[data-theme="spring"] h2,
[data-theme="spring"] .section-head h2 {
  font-family: 'Playfair Display', serif; font-weight: 700;
}
[data-theme="spring"] .italic-accent {
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700;
}

/* Primary CTA — berry plum with petal glow */
[data-theme="spring"] .scta-primary {
  background: linear-gradient(135deg, #B8466B 0%, #8B2A52 100%);
  box-shadow:
    0 6px 28px rgba(184,70,107,0.38),
    0 2px 8px rgba(184,70,107,0.2),
    inset 0 1px 0 rgba(255,200,220,0.25);
  border: none;
}
[data-theme="spring"] .scta-primary:hover {
  box-shadow:
    0 12px 40px rgba(184,70,107,0.48),
    0 3px 12px rgba(184,70,107,0.28),
    inset 0 1px 0 rgba(255,200,220,0.25);
}

/* Season banner — blossom gradient, italic serif */
[data-theme="spring"] .season-banner {
  display: block;
  background: linear-gradient(90deg, #8B2A52 0%, #B8466B 40%, #C45080 70%, #8B2A52 100%);
  color: #FFE8F2;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  letter-spacing: 0.05em;
  padding: 10px 20px; text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   🇺🇸  LABOR DAY — Vintage Americana. County fairs. Denim. Stars.
═══════════════════════════════════════════════════════════════════ */
[data-theme="labor-day"] {
  --teal: #1B3A6B; --teal-deep: #0F2548; --berry: #B81C35; --amber: #C82030;
  --cream: #FAF6F0; --cream-deep: #EEE8DC;
}

/* Deep patriotic night sky */
[data-theme="labor-day"] body {
  background-color: #0A1428;
  background-image:
    radial-gradient(ellipse 85% 50% at 50% -5%, rgba(180,28,52,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 65% 45% at 100% 100%, rgba(27,58,107,0.28) 0%, transparent 52%),
    radial-gradient(ellipse 30% 20% at 20% 40%, rgba(255,255,255,0.04) 0%, transparent 40%),
    repeating-linear-gradient(90deg,  rgba(255,255,255,0.018) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 40px);
}

/* Page shell: linen cream with double patriotic ring */
[data-theme="labor-day"] .page-shell {
  background: linear-gradient(180deg,
    rgba(250,246,240,0.975) 0%,
    rgba(238,232,220,0.96) 100%);
  box-shadow:
    0 55px 110px -28px rgba(10,18,50,0.7),
    0 0 0 2px rgba(184,28,52,0.18),
    0 0 0 5px rgba(27,58,107,0.1),
    inset 0 1px 0 rgba(255,252,245,0.9);
}

/* Headings */
[data-theme="labor-day"] h1,
[data-theme="labor-day"] h2,
[data-theme="labor-day"] .section-head h2 {
  font-family: 'Rye', serif; letter-spacing: 0.02em;
}
[data-theme="labor-day"] .italic-accent {
  font-family: 'Rye', serif; font-style: normal;
}

/* Primary CTA — patriotic red */
[data-theme="labor-day"] .scta-primary {
  background: linear-gradient(135deg, #B81C35 0%, #8A1025 100%);
  box-shadow:
    0 6px 28px rgba(184,28,52,0.42),
    0 2px 8px rgba(184,28,52,0.22),
    inset 0 1px 0 rgba(255,200,200,0.2);
  border: none;
}
[data-theme="labor-day"] .scta-primary:hover {
  box-shadow:
    0 12px 40px rgba(184,28,52,0.52),
    0 3px 12px rgba(184,28,52,0.28),
    inset 0 1px 0 rgba(255,200,200,0.2);
}

/* Season banner — red → navy Americana gradient, Rye font */
[data-theme="labor-day"] .season-banner {
  display: block;
  background: linear-gradient(90deg, #8A1025 0%, #B81C35 30%, #1B3A6B 65%, #0F2548 100%);
  color: #FFFAF5;
  font-family: 'Rye', serif;
  letter-spacing: 0.1em;
  padding: 10px 20px; text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD THEME PICKER CARDS
═══════════════════════════════════════════════════════════════════ */
.theme-world-card {
  border-radius: 16px;
  cursor: pointer;
  overflow: hidden;
  border: 2px solid transparent;
  transition: all 0.25s ease;
  position: relative;
}
.theme-world-card:hover { transform: translateY(-2px); }
.theme-world-card.active { border-color: currentColor; }

/* Preview atmosphere strips */
.theme-world-preview {
  height: 72px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.theme-world-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.18) 100%);
}

.twp-default  { background: linear-gradient(135deg, #E4D7C1 0%, #B8466B 50%, #2C7A6B 100%); }
.twp-summer   { background: linear-gradient(135deg, #D8EFE3 0%, rgba(255,218,45,0.6) 40%, #1E8A52 100%); }
.twp-winter   { background: linear-gradient(135deg, #141F30 0%, #1A3A8B 50%, #B8D8F8 100%); }
.twp-fall     { background: linear-gradient(135deg, #231208 0%, #A04E18 45%, #F4C060 100%); }
.twp-spring   { background: linear-gradient(135deg, #EDD8E5 0%, #B8466B 50%, #C8E8B8 100%); }
.twp-laborday { background: linear-gradient(135deg, #0A1428 0%, #B81C35 50%, #1B3A6B 100%); }

/* Floating decorative SVG inside preview */
.twp-floater {
  position: absolute;
  z-index: 2;
  opacity: 0.85;
  animation: twpFloat 4s ease-in-out infinite;
}
@keyframes twpFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-6px) rotate(8deg); }
}

.theme-world-body {
  padding: 12px 14px;
  background: #FFFDF9;
}
.theme-world-name {
  font-weight: 800;
  font-size: 0.9rem;
  color: #3A2E25;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.theme-world-season {
  font-size: 0.68rem;
  font-weight: 600;
  color: #9C8878;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.theme-world-feel {
  font-size: 0.73rem;
  color: #6B5D4F;
  line-height: 1.45;
  margin-top: 5px;
  font-style: italic;
}
.theme-world-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: auto;
}

/* ─── New theme preview strips ──────────────────────────────────── */
.twp-halloween { background: linear-gradient(135deg, #12071E 0%, #3D0F6A 45%, #E07020 100%); }
.twp-pride     { background: linear-gradient(90deg, #FF3060 0%, #FF8C00 20%, #FFD700 40%, #00B840 60%, #0060E0 80%, #8000CC 100%); }

/* ═══════════════════════════════════════════════════════════════════
   🎃  HALLOWEEN — Midnight magic. Pumpkins. Spells. Warm candlelight.
═══════════════════════════════════════════════════════════════════ */
[data-theme="halloween"] {
  --teal: #C05010; --teal-deep: #8A2E05; --berry: #6D35A0; --amber: #E07020;
  --cream: #F2EBF8; --cream-deep: #E0D0F0;
}

/* Midnight sky — deep purple with amber moon glow from upper right */
[data-theme="halloween"] body {
  background-color: #12071E;
  background-image:
    radial-gradient(ellipse 65% 55% at 88% 2%, rgba(220,110,20,0.38) 0%, transparent 52%),
    radial-gradient(ellipse 45% 40% at 10% 85%, rgba(90,20,140,0.28) 0%, transparent 50%),
    radial-gradient(ellipse 55% 35% at 50% 50%, rgba(60,10,100,0.12) 0%, transparent 55%),
    repeating-linear-gradient(135deg, rgba(100,30,160,0.028) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(45deg, rgba(200,80,20,0.02) 0 1px, transparent 1px 12px);
}

/* Page shell: lavender-cream with candlelight shadow */
[data-theme="halloween"] .page-shell {
  background: linear-gradient(180deg,
    rgba(242,235,248,0.975) 0%,
    rgba(228,215,240,0.96) 100%);
  box-shadow:
    0 55px 110px -28px rgba(18,6,40,0.78),
    0 0 0 1px rgba(109,53,160,0.2),
    0 0 0 4px rgba(220,110,20,0.07),
    inset 0 1px 0 rgba(255,240,200,0.55);
}

/* Headings */
[data-theme="halloween"] h1,
[data-theme="halloween"] h2,
[data-theme="halloween"] .section-head h2 {
  font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 9; font-weight: 600;
}

/* Primary CTA — pumpkin orange with ember glow */
[data-theme="halloween"] .scta-primary {
  background: linear-gradient(135deg, #C85010 0%, #8A2E05 100%);
  box-shadow:
    0 6px 28px rgba(200,80,16,0.52),
    0 2px 8px rgba(200,80,16,0.28),
    inset 0 1px 0 rgba(255,200,120,0.28);
  border: none;
}
[data-theme="halloween"] .scta-primary:hover {
  box-shadow:
    0 12px 40px rgba(200,80,16,0.65),
    0 3px 12px rgba(200,80,16,0.38),
    inset 0 1px 0 rgba(255,200,120,0.28);
}

/* Season banner — deep midnight purple with amber text */
[data-theme="halloween"] .season-banner {
  display: block;
  background: linear-gradient(90deg, #12071E 0%, #3D0F6A 35%, #1A0430 65%, #12071E 100%);
  color: #FFBA60;
  font-family: 'Fraunces', serif;
  letter-spacing: 0.08em;
  padding: 10px 20px; text-align: center;
}

/* Floater animation — eerie drift */
[data-theme="halloween"] .sf {
  animation: sfHalloween var(--dur, 9s) ease-in-out infinite var(--delay, 0s);
}
@keyframes sfHalloween {
  0%,100% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); }
  20%     { transform: translateX(8px) translateY(-14px) rotate(-8deg) scale(1.04); }
  50%     { transform: translateX(-10px) translateY(-6px) rotate(6deg) scale(0.97); }
  75%     { transform: translateX(6px) translateY(-18px) rotate(-4deg) scale(1.02); }
}

/* ═══════════════════════════════════════════════════════════════════
   🌈  PRIDE — Love is love. Bold. Joyful. Made for everyone.
═══════════════════════════════════════════════════════════════════ */
[data-theme="pride"] {
  --teal: #D4006C; --teal-deep: #A8004E; --berry: #7B00D4; --amber: #FF8C00;
  --cream: #FFFAFC; --cream-deep: #FFE8F4;
}

/* Warm white body with rainbow color rays from top */
[data-theme="pride"] body {
  background-color: #FFF8FC;
  background-image:
    radial-gradient(ellipse 70% 50% at 15% -5%, rgba(255,48,96,0.14) 0%, transparent 48%),
    radial-gradient(ellipse 60% 50% at 50% -5%, rgba(255,200,0,0.12) 0%, transparent 45%),
    radial-gradient(ellipse 70% 50% at 85% -5%, rgba(0,96,224,0.13) 0%, transparent 48%),
    radial-gradient(ellipse 45% 55% at 5%  75%, rgba(140,0,220,0.07) 0%, transparent 48%),
    radial-gradient(ellipse 45% 55% at 95% 75%, rgba(0,184,64,0.07) 0%, transparent 48%);
}

/* Page shell: luminous white with rainbow shimmer glow */
[data-theme="pride"] .page-shell {
  background: linear-gradient(180deg,
    rgba(255,250,252,0.98) 0%,
    rgba(255,240,250,0.97) 100%);
  box-shadow:
    0 45px 90px -25px rgba(150,0,100,0.18),
    0 0 0 2px rgba(212,0,108,0.12),
    0 0 0 5px rgba(0,96,224,0.06),
    inset 0 1px 0 rgba(255,255,255,1);
}

/* Headings */
[data-theme="pride"] h1,
[data-theme="pride"] h2,
[data-theme="pride"] .section-head h2 {
  font-family: 'Playfair Display', serif; font-weight: 700;
}
[data-theme="pride"] .italic-accent {
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700;
}

/* Primary CTA — full rainbow gradient */
[data-theme="pride"] .scta-primary {
  background: linear-gradient(135deg, #FF3060 0%, #FF8C00 20%, #FFD000 40%, #00B840 60%, #0060E0 80%, #8000CC 100%);
  box-shadow:
    0 6px 28px rgba(200,0,100,0.35),
    0 2px 8px rgba(200,0,100,0.2),
    inset 0 1px 0 rgba(255,255,255,0.35);
  border: none;
}
[data-theme="pride"] .scta-primary:hover {
  box-shadow:
    0 12px 40px rgba(200,0,100,0.48),
    0 3px 12px rgba(200,0,100,0.28),
    inset 0 1px 0 rgba(255,255,255,0.35);
  filter: brightness(1.07) saturate(1.12);
}

/* Season banner — full rainbow sweep */
[data-theme="pride"] .season-banner {
  display: block;
  background: linear-gradient(90deg, #FF3060 0%, #FF8C00 18%, #FFD000 36%, #00B840 54%, #0060E0 72%, #8000CC 90%, #FF3060 100%);
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 10px 20px; text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.22);
}

/* Floater animation — joyful bounce */
[data-theme="pride"] .sf {
  animation: sfPride var(--dur, 8s) ease-in-out infinite var(--delay, 0s);
}
@keyframes sfPride {
  0%,100% { transform: translateY(0) rotate(0deg) scale(1); }
  25%     { transform: translateY(-22px) rotate(12deg) scale(1.09); }
  50%     { transform: translateY(-8px) rotate(-6deg) scale(0.94); }
  75%     { transform: translateY(-18px) rotate(9deg) scale(1.05); }
}