/* =========================================================
   HALLOWEEN / STARFIELD CHARM THEME
   Activates only when <body class="halloween-mode"> is present.
   Your existing charms.html already adds this class for:
   ?halloween  or  ?from=halloween
   ========================================================= */

body.halloween-mode {
  --h-night: #09070d;
  --h-night-2: #110b16;
  --h-panel: #17101d;
  --h-panel-2: #211426;
  --h-cream: #f7eadc;
  --h-muted: #c7b6c5;
  --h-rose: #d18caf;
  --h-violet: #9a80c7;
  --h-plum: #5f375f;
  --h-auburn: #b96745;
  --h-copper: #d48a5f;
  --h-gold: #d7b36b;
  --h-line: rgba(255, 79, 216, .42);
  --h-neon: #ff4fd8;
  --h-neon-soft: rgba(255, 79, 216, .24);
  --h-neon-mid: rgba(255, 79, 216, .42);
  --h-neon-strong: rgba(255, 79, 216, .7);

  color: var(--h-cream);
  background-color: var(--h-night);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(209,140,175,.14), transparent 20rem),
    radial-gradient(circle at 85% 10%, rgba(154,128,199,.15), transparent 22rem),
    radial-gradient(circle at 78% 70%, rgba(185,103,69,.08), transparent 24rem),

    radial-gradient(circle, rgba(255,255,255,.72) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(215,179,107,.58) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(209,140,175,.45) 0 .8px, transparent 1.2px);
  background-size:
    auto,
    auto,
    auto,
    118px 118px,
    173px 173px,
    257px 257px;
  background-position:
    0 0,
    0 0,
    0 0,
    16px 22px,
    61px 84px,
    104px 31px;
  background-attachment: fixed;
}

/* Header */
body.halloween-mode .site-header {
  background: rgba(9, 7, 13, .90);
  border-bottom: 1px solid rgba(255,79,216,.38);
  box-shadow: 0 0 14px rgba(255,79,216,.08);
  backdrop-filter: blur(18px);
}

body.halloween-mode .nav a,
body.halloween-mode .menu-button,
body.halloween-mode .header-socials a {
  color: var(--h-cream);
}

body.halloween-mode .nav a:not(.shop-link)::after {
  background: linear-gradient(90deg, var(--h-rose), var(--h-gold));
}

body.halloween-mode .shop-link {
  border-color: rgba(255,79,216,.62);
  color: var(--h-cream);
  background: rgba(255,255,255,.02);
}

body.halloween-mode .shop-link:hover {
  background: var(--h-cream);
  color: var(--h-night);
}

@media (max-width: 920px) {
  body.halloween-mode .nav-left {
    background: rgba(9, 7, 13, .98);
    border-bottom-color: rgba(255,79,216,.38);
  }
}

/* Typography + page hero */
body.halloween-mode .page-hero {
  position: relative;
  color: var(--h-cream);
  background:
    radial-gradient(circle at 50% 12%, rgba(154,128,199,.13), transparent 24rem),
    transparent;
}

body.halloween-mode .page-hero::after {
  content: "✦     ☾     ✧";
  display: block;
  margin: 1.55rem auto 0;
  color: rgba(215,179,107,.72);
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: .85em;
  text-indent: .85em;
}

body.halloween-mode .page-hero h1,
body.halloween-mode .page-hero h2 {
  color: var(--h-cream);
  text-shadow: 0 0 32px rgba(209,140,175,.10);
}

body.halloween-mode .page-hero p {
  color: var(--h-muted);
}

body.halloween-mode .eyebrow,
body.halloween-mode .kicker {
  color: var(--h-rose);
}

body.halloween-mode .eyebrow::before {
  color: var(--h-gold);
}

body.halloween-mode .charm-halloween {
  color: var(--h-gold);
}

/* Oracle area */
body.halloween-mode .charm-oracle-section {
  position: relative;
  background:
    radial-gradient(circle at 50% 42%, rgba(95,55,95,.16), transparent 33rem);
}

body.halloween-mode .charm-oracle::before {
  inset: -26px 5% 18px;
  border: 1px solid rgba(255,79,216,.44);
  box-shadow:
    0 0 28px rgba(154,128,199,.10),
    inset 0 0 22px rgba(209,140,175,.04);
}

body.halloween-mode .charm-oracle::after {
  inset: 18px -22px -26px;
  border-color: rgba(209,140,175,.26);
  box-shadow: 0 0 32px rgba(209,140,175,.06);
}

body.halloween-mode .charm-card {
  background:
    radial-gradient(circle at 50% 18%, rgba(215,179,107,.10), transparent 16rem),
    radial-gradient(circle at 18% 20%, rgba(209,140,175,.08), transparent 15rem),
    radial-gradient(circle at 82% 70%, rgba(154,128,199,.09), transparent 18rem),
    linear-gradient(150deg, #1c1222 0%, #110b16 58%, #09070d 100%);
  border: 1px solid rgba(255,79,216,.62);
  box-shadow:
    0 32px 90px rgba(0,0,0,.52),
    0 0 24px rgba(255,79,216,.12),
    inset 0 0 0 1px rgba(255,255,255,.025),
    inset 0 0 55px rgba(154,128,199,.035);
}

/* Decorative celestial corners */
body.halloween-mode .charm-card::before {
  content: "✦";
  color: var(--h-gold);
  text-shadow: 0 0 14px rgba(215,179,107,.25);
}

body.halloween-mode .charm-card::after {
  content: "☾";
  color: var(--h-rose);
  text-shadow: 0 0 16px rgba(209,140,175,.24);
}

/* Seal / charm image */
body.halloween-mode .charm-seal {
  border-color: rgba(255,79,216,.62);
  color: var(--h-gold);
  background:
    radial-gradient(circle at 50% 45%, rgba(209,140,175,.07), transparent 55%),
    rgba(255,255,255,.018);
  box-shadow:
    inset 0 0 0 12px rgba(255,255,255,.012),
    0 0 34px rgba(154,128,199,.10);
}

body.halloween-mode .charm-seal img {
  filter: brightness(0) invert(1) sepia(.15);
}

body.halloween-mode .charm-card h2 {
  color: var(--h-cream);
}

body.halloween-mode .charm-card .charm-prompt,
body.halloween-mode .charm-message {
  color: var(--h-muted);
}

body.halloween-mode .charm-meaning {
  color: #e1bd86;
}

body.halloween-mode .charm-keywords {
  color: var(--h-rose);
}

body.halloween-mode .charm-reset {
  color: #cbbac8;
}

body.halloween-mode .charm-reset:hover {
  color: var(--h-gold);
}

/* Buttons */
body.halloween-mode .btn {
  border-color: rgba(255,79,216,.52);
  color: var(--h-cream);
}

body.halloween-mode .btn-primary {
  background: linear-gradient(135deg, #6b3d61, #3d274d);
  border-color: rgba(255,79,216,.48);
  color: var(--h-cream);
}

body.halloween-mode .btn:hover,
body.halloween-mode .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 30px rgba(0,0,0,.34),
    0 0 20px rgba(209,140,175,.08);
}

body.halloween-mode .btn-light {
  border-color: rgba(255,79,216,.64);
  color: var(--h-cream);
}

body.halloween-mode .charm-card .btn-light:hover {
  background: var(--h-cream);
  color: #1b101d;
}

/* Paper/collection sections become dark panels */
body.halloween-mode .section-paper {
  background:
    linear-gradient(rgba(18,11,22,.94), rgba(18,11,22,.94)),
    radial-gradient(circle at 15% 10%, rgba(209,140,175,.08), transparent 18rem);
  border-color: rgba(255,79,216,.22);
}

body.halloween-mode .section-heading h2,
body.halloween-mode .section h2,
body.halloween-mode .section h3 {
  color: var(--h-cream);
}

body.halloween-mode .section-heading p,
body.halloween-mode .charm-bundle p,
body.halloween-mode .charm-details-grid p {
  color: var(--h-muted);
}

/* Collection cards */
body.halloween-mode .charm-bundle,
body.halloween-mode .charm-details-card {
  position: relative;
  background:
    linear-gradient(145deg, rgba(28,18,34,.96), rgba(14,9,18,.96));
  border: 1px solid rgba(255,79,216,.38);
  box-shadow:
    0 18px 48px rgba(0,0,0,.28),
    0 0 16px rgba(255,79,216,.07),
    inset 0 0 0 1px rgba(255,255,255,.018);
}

body.halloween-mode .charm-bundle::before,
body.halloween-mode .charm-details-card::before {
  content: "✦";
  position: absolute;
  top: .7rem;
  left: .8rem;
  color: rgba(215,179,107,.42);
  font-size: .7rem;
}

body.halloween-mode .charm-bundle::after,
body.halloween-mode .charm-details-card::after {
  content: "☾";
  position: absolute;
  right: .8rem;
  bottom: .65rem;
  color: rgba(209,140,175,.36);
  font-family: var(--serif);
  font-size: .9rem;
}

body.halloween-mode .charm-bundle-number,
body.halloween-mode .charm-price {
  color: var(--h-gold);
}

body.halloween-mode .charm-details-list li {
  border-top-color: rgba(255,79,216,.22);
}

body.halloween-mode .charm-details-list strong {
  color: var(--h-rose);
}

/* Inline result signup */
body.halloween-mode .charm-result-signup {
  border-top-color: rgba(255,79,216,.28);
}

body.halloween-mode .charm-result-signup > p {
  color: var(--h-muted);
}

body.halloween-mode .moonglow-kit-form .formkit-input {
  border-color: rgba(255,79,216,.44);
  background: rgba(255,255,255,.035);
  color: var(--h-cream);
}

body.halloween-mode .moonglow-kit-form .formkit-input::placeholder {
  color: rgba(247,234,220,.56);
}

body.halloween-mode .moonglow-kit-form .formkit-input:focus {
  border-color: var(--h-rose);
  background: rgba(255,255,255,.055);
  box-shadow: 0 0 0 3px rgba(209,140,175,.10);
}

body.halloween-mode .moonglow-subscribe {
  border-color: rgba(255,79,216,.7);
  background: linear-gradient(180deg, #d5a06f 0%, #b96745 100%);
  color: #170d16;
}

/* Newsletter / dark callout */
body.halloween-mode .section-dark {
  background:
    radial-gradient(circle at 50% 0%, rgba(154,128,199,.13), transparent 24rem),
    linear-gradient(145deg, #160e1b, #09070d);
  border-top: 1px solid rgba(255,79,216,.22);
}

body.halloween-mode .newsletter-wrap {
  border-color: rgba(255,79,216,.44);
  background:
    linear-gradient(145deg, rgba(32,20,38,.72), rgba(10,7,13,.62));
  box-shadow:
    inset 0 0 40px rgba(154,128,199,.025),
    0 18px 55px rgba(0,0,0,.18);
}

body.halloween-mode .newsletter-wrap::before {
  content: "✦";
  color: var(--h-gold);
}

body.halloween-mode .newsletter-wrap::after {
  content: "☾";
  color: var(--h-rose);
}

body.halloween-mode .newsletter-wrap p {
  color: var(--h-muted);
}

/* Portfolio/gallery surfaces in case they appear on this page */
body.halloween-mode .portfolio-photo,
body.halloween-mode .gallery-tile figure {
  background: #120c16;
  border-color: rgba(255,79,216,.28);
  box-shadow: 0 18px 50px rgba(0,0,0,.32), 0 0 16px rgba(255,79,216,.08);
}

body.halloween-mode .portfolio-meta p,
body.halloween-mode .gallery-tile span {
  color: var(--h-muted);
}

/* Footer */
body.halloween-mode .site-footer {
  background:
    radial-gradient(circle at 20% 0%, rgba(95,55,95,.16), transparent 22rem),
    #070509;
  border-top: 1px solid rgba(255,79,216,.22);
}

body.halloween-mode .footer-heading {
  color: var(--h-gold);
}

body.halloween-mode .footer-copy,
body.halloween-mode .footer-script,
body.halloween-mode .footer-links a {
  color: #c9bbc7;
}

/* Subtle star shimmer on desktop only */
@media (min-width: 921px) and (prefers-reduced-motion: no-preference) {
  body.halloween-mode {
    animation: halloweenStars 22s linear infinite alternate;
  }

  @keyframes halloweenStars {
    from {
      background-position:
        0 0,
        0 0,
        0 0,
        16px 22px,
        61px 84px,
        104px 31px;
    }
    to {
      background-position:
        0 0,
        0 0,
        0 0,
        28px 34px,
        48px 71px,
        118px 44px;
    }
  }
}

/* Mobile: retain the dark celestial theme without extra visual clutter */
@media (max-width: 640px) {
  body.halloween-mode {
    background-size:
      auto,
      auto,
      auto,
      96px 96px,
      142px 142px,
      210px 210px;
  }

  body.halloween-mode .page-hero::after {
    letter-spacing: .5em;
    text-indent: .5em;
  }
}


/* Neon pink line and border emphasis */
body.halloween-mode .site-header,
body.halloween-mode .charm-card,
body.halloween-mode .charm-oracle::before,
body.halloween-mode .charm-oracle::after,
body.halloween-mode .charm-seal,
body.halloween-mode .btn,
body.halloween-mode .btn-primary,
body.halloween-mode .btn-light,
body.halloween-mode .section-paper,
body.halloween-mode .charm-bundle,
body.halloween-mode .charm-details-card,
body.halloween-mode .newsletter-wrap,
body.halloween-mode .portfolio-photo,
body.halloween-mode .gallery-tile figure,
body.halloween-mode .site-footer,
body.halloween-mode .moonglow-kit-form .formkit-input {
  box-shadow: 0 0 0 1px rgba(255,79,216,.08), 0 0 14px rgba(255,79,216,.08);
}

body.halloween-mode .charm-details-list li,
body.halloween-mode .charm-result-signup,
body.halloween-mode .section-dark,
body.halloween-mode .site-footer {
  border-color: rgba(255,79,216,.24);
}

body.halloween-mode hr,
body.halloween-mode .divider,
body.halloween-mode .rule,
body.halloween-mode .section-divider {
  border-color: rgba(255,79,216,.3);
}