/* 🎃 Halloween — landing. Built from portal skins: halloween/tokens.css + _map/landing.css + halloween/landing.css. Visuals only. */
/* =============================================================================
   SKIN: halloween — 🎃 Halloween
   Midnight-purple night sky with a glowing moon and drifting fog, pumpkin orange,
   slime-green highlights, cobwebbed card corners, candy-corn sold bars, a few bats.
   Spooky lettering (Creepster) on big headings only; everything people need to READ
   (titles, prices, buttons) stays in a clean font. Motion stops for anyone who has
   "reduce motion" switched on. Portal only.
   ============================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Creepster&family=Rubik:wght@500;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root[data-skin] {
  --sk-scheme: dark;
  --sk-bg: #0d0716;
  --sk-bg-chrome: #07040d;
  --sk-chrome-text: #f6efe4;
  --sk-chrome-text-2: #b8a9cc;
  --sk-chrome-border: #2b1d3f;
  --sk-surface: #1a1026;
  --sk-surface-2: #241634;
  --sk-surface-3: #140c1e;
  --sk-overlay: rgba(5,2,10,.8);
  --sk-text: #f6efe4;
  --sk-text-2: #dcd0ea;
  --sk-text-3: #a897bd;
  --sk-text-4: #75668a;
  --sk-link: #ff8a1f;
  --sk-border: #34234a;
  --sk-border-strong: #4d3569;
  --sk-hairline: rgba(255,138,31,.09);
  --sk-accent: #ff7a00;
  --sk-accent-hover: #ff9a2e;
  --sk-accent-soft: rgba(255,122,0,.16);
  --sk-accent-ink: #1a0b00;
  --sk-grad-a: #ff5e00;
  --sk-grad-b: #ffb000;
  --sk-gradient: linear-gradient(90deg,#ff5e00,#ff8a00 55%,#ffb000);
  --sk-grad-ink: #1a0b00;
  --sk-gold: #ffb000;
  --sk-teal: #8bff3d;
  --sk-navy: #2a1840;
  --sk-success: #8bff3d;
  --sk-warning: #ffb000;
  --sk-danger: #ff3b5c;
  --sk-progress-track: #2a1a3c;
  --sk-progress-fill: #ff7a00;
  --sk-font-head: "Rubik", system-ui, sans-serif;
  --sk-font-body: "Inter", system-ui, sans-serif;
  --sk-head-style: normal;
  --sk-head-weight: 800;
  --sk-head-transform: none;
  --sk-head-tracking: .2px;
  --sk-radius-sm: 8px;
  --sk-radius-btn: 12px;
  --sk-radius-card: 16px;
  --sk-radius-pill: 999px;
  --sk-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(255,122,0,.05);
  --sk-shadow-lg: 0 22px 50px rgba(0,0,0,.7), 0 0 34px rgba(255,122,0,.12);
  --sk-logo-filter: drop-shadow(0 0 12px rgba(255,122,0,.55));
}

/* =============================================================================
   SKIN MAP — HOMEPAGE (public/landing/index.html, the iframe inside "/").
   Shared by ALL skins; reads ONLY --sk-* tokens. The homepage defines its own
   short token set on :root — this file points each one at the skin, plus the
   few literal colours the homepage uses. Section numbers match SKIN-MAP.md (L1–L10).
   ============================================================================= */

/* L1. token bridge */
:root[data-skin] {
  color-scheme: var(--sk-scheme);
  --bg-page: var(--sk-bg);
  --bg-surface: var(--sk-surface);
  --bg-surface-alt: var(--sk-surface-2);
  --accent-primary: var(--sk-accent);
  --accent-primary-hover: var(--sk-accent-hover);
  --accent-gradient-start: var(--sk-grad-a);
  --accent-gradient-end: var(--sk-grad-b);
  --gradient: var(--sk-gradient);
  --accent-gold: var(--sk-gold);
  --accent-teal: var(--sk-teal);
  --accent-navy: var(--sk-navy);
  --text-primary: var(--sk-text);
  --text-secondary: var(--sk-text-3);
  --border-subtle: var(--sk-border);
  --progress-track: var(--sk-progress-track);
  --progress-fill: var(--sk-progress-fill);
  --r-sm: var(--sk-radius-sm);
  --r-btn: var(--sk-radius-btn);
  --r-card: var(--sk-radius-card);
  --r-pill: var(--sk-radius-pill);
  --f-head: var(--sk-font-head);
  --f-body: var(--sk-font-body);
}

/* L2. canvas + chrome */
:root[data-skin] body { background: var(--sk-bg); color: var(--sk-text-3); }
:root[data-skin] .nav { background: color-mix(in srgb, var(--sk-bg-chrome) 96%, transparent); }
:root[data-skin] .footer { background: var(--sk-bg-chrome); }
:root[data-skin] h1, :root[data-skin] h2, :root[data-skin] h3, :root[data-skin] h4, :root[data-skin] .btn { color: var(--sk-text); }
/* header + footer sit on --sk-bg-chrome, so they use the chrome ink */
:root[data-skin] .nav { border-bottom-color: var(--sk-chrome-border); }
:root[data-skin] .nav .logo b, :root[data-skin] .nav .nav-link, :root[data-skin] .nav .btn-outline,
:root[data-skin] .nav .btn-pill, :root[data-skin] .nav-burger { color: var(--sk-chrome-text); border-color: var(--sk-chrome-border); }
:root[data-skin] .nav .logo small { color: var(--sk-chrome-text-2); }
:root[data-skin] .footer { color: var(--sk-chrome-text-2); border-top-color: var(--sk-chrome-border); }
:root[data-skin] .footer .f-head, :root[data-skin] .footer .f-cats a,
:root[data-skin] .footer .trust-box, :root[data-skin] .footer .age, :root[data-skin] .footer .sec-link { color: var(--sk-chrome-text); }
:root[data-skin] .footer .trust-box, :root[data-skin] .footer .f-cats a, :root[data-skin] .footer .f-cats { border-color: var(--sk-chrome-border); } /* social icons keep their brand colours */
:root[data-skin] .footer .age { border-color: var(--sk-chrome-text); }
:root[data-skin] .footer .f-about { background: color-mix(in srgb, var(--sk-chrome-text) 6%, var(--sk-bg-chrome)); }
:root[data-skin] .footer .f-about h3 { color: var(--sk-chrome-text); }
@media (max-width: 980px) { :root[data-skin] .nav-links { background: var(--sk-bg-chrome); } }
:root[data-skin] .btn-red, :root[data-skin] .btn-violet { color: var(--sk-accent-ink); }
:root[data-skin] .btn-violet { background: var(--sk-grad-a); color: var(--sk-grad-ink); }
/* everything sitting ON the gradient uses --sk-grad-ink (dark on metallic skins) */
:root[data-skin] .marquee-item { color: var(--sk-grad-ink); }
:root[data-skin] .stat-dots i { background: color-mix(in srgb, var(--sk-grad-ink) 30%, transparent); }
:root[data-skin] .stat-dots i.on { background: var(--sk-grad-ink); }
:root[data-skin] .stat-slide .stars { color: inherit; }

/* L3. headings follow the skin's heading style */
:root[data-skin] .hero-headline, :root[data-skin] .sec-title, :root[data-skin] .promo-copy h2,
:root[data-skin] .stat-mid strong, :root[data-skin] .w-name, :root[data-skin] .f-head,
:root[data-skin] .f-about h3, :root[data-skin] .tab, :root[data-skin] .nav-link, :root[data-skin] .sec-label, :root[data-skin] .f-cats a {
  font-style: var(--sk-head-style);
  text-transform: var(--sk-head-transform);
}

/* L4. placeholders + wells */
:root[data-skin] .hero-media, :root[data-skin] .card-media, :root[data-skin] .stats > div,
:root[data-skin] .w-strip div { background-color: var(--sk-surface-3); }
:root[data-skin] .hero-card { background: var(--sk-bg); }
:root[data-skin] .hero-info { border-right-color: var(--sk-hairline); }
:root[data-skin] .dd-menu { background: var(--sk-surface); }

/* L5. cards */
:root[data-skin] .card { box-shadow: var(--sk-shadow); }
:root[data-skin] .card:hover { box-shadow: var(--sk-shadow-lg); }
:root[data-skin] .price-pill { background: var(--sk-text); color: var(--sk-bg); }
:root[data-skin] .tab[aria-selected="true"] { background: var(--sk-text); color: var(--sk-bg); }

/* L6. promo banner */
:root[data-skin] .promo {
  background: radial-gradient(120% 140% at 100% 50%, color-mix(in srgb, var(--sk-gold) 14%, transparent), transparent 55%), var(--sk-surface-3);
}
:root[data-skin] .promo-copy .btn { border-color: var(--sk-text); }

/* L7. winners */
:root[data-skin] .w-quote { color: var(--sk-text-2); }
:root[data-skin] .w-pill {
  background: color-mix(in srgb, var(--sk-teal) 14%, transparent);
  color: color-mix(in srgb, var(--sk-teal) 55%, var(--sk-text));
  border-color: color-mix(in srgb, var(--sk-teal) 45%, transparent);
}

/* L8. footer bits */
:root[data-skin] .f-contact svg { stroke: var(--sk-gold); }

/* L10. text sitting on the PAGE background follows the skin ink (the homepage
   hard-codes #fff for these). Text on photos / accent fills / the gradient stays white. */
:root[data-skin] .hero-info h3, :root[data-skin] .price-now, :root[data-skin] .card-title,
:root[data-skin] .sold-label, :root[data-skin] .w-name, :root[data-skin] .sec-label,
:root[data-skin] .tab:hover, :root[data-skin] #moreBtn, :root[data-skin] .promo-copy .btn { color: var(--sk-text); }
:root[data-skin] .hero-headline { color: #fff; }            /* always on a photo */
:root[data-skin] .stat-mid, :root[data-skin] .stat-mid strong { color: var(--sk-grad-ink); } /* on the gradient */
:root[data-skin] .footer .f-links a:hover, :root[data-skin] .footer .f-contact a:hover { color: var(--sk-chrome-text); }

/* L9. links */
:root[data-skin] .sec-link, :root[data-skin] .w-more { color: var(--sk-text); border-bottom-color: var(--sk-accent); }

/* halloween — homepage */
/* Night sky: moon glow top-right, purple haze, faint stars */
:root[data-skin] body {
  background:
    radial-gradient(circle at 86% 7%, rgba(255,236,190,.95) 0 34px, rgba(255,214,140,.35) 36px, rgba(255,180,90,.10) 90px, transparent 190px),
    radial-gradient(1px 1px at 12% 18%, #fff8 99%, transparent), radial-gradient(1px 1px at 33% 9%, #fff6 99%, transparent),
    radial-gradient(1.5px 1.5px at 57% 15%, #fff7 99%, transparent), radial-gradient(1px 1px at 71% 27%, #fff5 99%, transparent),
    radial-gradient(1px 1px at 22% 34%, #fff4 99%, transparent),
    radial-gradient(ellipse at 20% 110%, rgba(139,255,61,.07), transparent 55%),
    linear-gradient(180deg, #1b0d2e 0%, #0d0716 45%, #0a0511 100%) !important;
  background-attachment: fixed !important;
}
/* Low fog drifting along the bottom of the screen */
:root[data-skin] body::after {
  content: ""; position: fixed; left: -20%; right: -20%; bottom: -40px; height: 220px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 20% 60%, rgba(190,170,220,.13), transparent 60%),
              radial-gradient(ellipse at 65% 70%, rgba(190,170,220,.10), transparent 60%),
              radial-gradient(ellipse at 95% 55%, rgba(190,170,220,.12), transparent 55%);
  filter: blur(6px); animation: hw-fog 38s linear infinite alternate;
}
/* Three small bats crossing the sky now and then */
:root[data-skin] body::before {
  content: "🦇   🦇      🦇"; white-space: pre; position: fixed; top: 70px; left: -200px; z-index: 1; pointer-events: none;
  font-size: 18px; opacity: .55; filter: grayscale(1) brightness(.35) drop-shadow(0 0 6px rgba(255,122,0,.4));
  animation: hw-bats 26s linear infinite;
}
@keyframes hw-fog { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes hw-bats { 0% { transform: translate(0,0); } 25% { transform: translate(30vw,22px); } 50% { transform: translate(60vw,-10px); } 75% { transform: translate(90vw,18px); } 100% { transform: translate(calc(100vw + 400px),0); } }

/* Spooky lettering on the big headings only */
:root[data-skin] .hero-headline, :root[data-skin] .sec-title {
  font-family: "Creepster", "Rubik", cursive !important; font-style: normal !important; font-weight: 400 !important;
  letter-spacing: 1.5px !important; color: #ff8a1f !important; text-transform: none !important;
  text-shadow: 0 0 18px rgba(255,122,0,.45), 0 3px 0 #3a1500;
}
:root[data-skin] .eyebrow { color: #8bff3d !important; }

/* Cards: cobweb in the top-right corner, pumpkin glow on hover */
:root[data-skin] .card, :root[data-skin] .hero-card { position: relative; border: 1px solid #3a2752 !important; }
:root[data-skin] .card::after {
  content: ""; position: absolute; top: 0; right: 0; width: 56px; height: 56px; pointer-events: none; z-index: 3;
  border-top-right-radius: inherit; opacity: .38;
  background:
    repeating-radial-gradient(circle at 100% 0, transparent 0 9px, rgba(235,225,255,.7) 9px 10px),
    linear-gradient(225deg, transparent 49.3%, rgba(235,225,255,.7) 49.5% 50.5%, transparent 50.7%),
    linear-gradient(200deg, transparent 49.3%, rgba(235,225,255,.6) 49.5% 50.5%, transparent 50.7%),
    linear-gradient(250deg, transparent 49.3%, rgba(235,225,255,.6) 49.5% 50.5%, transparent 50.7%);
  -webkit-mask: radial-gradient(circle at 100% 0, #000 0 54px, transparent 55px); mask: radial-gradient(circle at 100% 0, #000 0 54px, transparent 55px);
}
:root[data-skin] .card:hover { box-shadow: 0 0 0 1px rgba(255,122,0,.55), 0 18px 44px rgba(0,0,0,.65), 0 0 36px rgba(255,122,0,.22) !important; }
:root[data-skin] .hero-media { border-bottom: 3px solid #ff7a00; }

/* Buttons: glowing pumpkin */
:root[data-skin] .btn-red, :root[data-skin] .btn-violet {
  background: linear-gradient(180deg,#ff9a2e,#ff6a00) !important; color: #1a0b00 !important; border: 0 !important;
  box-shadow: 0 6px 18px rgba(255,106,0,.35), inset 0 1px 0 rgba(255,255,255,.35) !important; font-weight: 800 !important;
}
:root[data-skin] .btn-red:hover, :root[data-skin] .btn-violet:hover { filter: brightness(1.08); box-shadow: 0 8px 26px rgba(255,106,0,.55) !important; }

/* Sold bar = candy corn */
:root[data-skin] .bar { background: #2a1a3c !important; }
:root[data-skin] .bar i { background: linear-gradient(90deg,#fff3d6 0 33%,#ffb000 33% 66%,#ff6a00 66%) !important; background-size: 30px 100% !important; }

/* Pills + tabs */
:root[data-skin] .price-pill { background: #ff7a00 !important; color: #1a0b00 !important; }
:root[data-skin] .tab[aria-selected="true"] { background: #ff7a00 !important; color: #1a0b00 !important; }
:root[data-skin] .iw-tag { background: #8bff3d !important; color: #0d1a00 !important; }
:root[data-skin] .marquee-item { color: #1a0b00 !important; font-weight: 800 !important; } /* dark text on the pumpkin ticker */

/* Keep page content above the fog */
:root[data-skin] .wrap, :root[data-skin] .section, :root[data-skin] .footer, :root[data-skin] .nav { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  :root[data-skin] body::after, :root[data-skin] body::before { animation: none !important; }
  :root[data-skin] body::before { display: none; }
}
@media (max-width: 640px) {
  :root[data-skin] body::before { font-size: 14px; top: 58px; }
  :root[data-skin] .card::after { width: 42px; height: 42px; }
}