/* =========================================================
   CHOCOLATE TRIPZ™ — Galactic background + color layer
   Pure CSS (no image requests). Loads instantly.
   Linked LAST so it lifts the palette off pure black.
   ========================================================= */

:root {
  --space-base: #0a0913;      /* deep indigo base (replaces pure black) */
  --neb-violet: rgba(120, 70, 190, 0.30);
  --neb-magenta: rgba(180, 60, 150, 0.26);
  --neb-blue: rgba(45, 95, 200, 0.24);
  --neb-teal: rgba(30, 160, 160, 0.20);
  --neb-gold: rgba(201, 169, 110, 0.16);
}

/* Base lifts from #0A0A0A to a deep, coloured space indigo */
body { background-color: var(--space-base); }

/* Nebula clouds — fixed behind all content (overrides shell.css topo layer) */
body::before {
  background:
    radial-gradient(58% 46% at 80% 8%,  var(--neb-magenta), transparent 60%),
    radial-gradient(60% 55% at 50% -6%, var(--neb-violet),  transparent 62%),
    radial-gradient(52% 44% at 10% 30%, var(--neb-blue),    transparent 60%),
    radial-gradient(60% 52% at 58% 92%, var(--neb-teal),    transparent 62%),
    radial-gradient(46% 40% at 30% 62%, var(--neb-gold),    transparent 62%),
    radial-gradient(70% 60% at 90% 70%, var(--neb-violet),  transparent 60%);
  opacity: 1;
}

/* Star field — fixed, tiled tiny SVG (≈2 KB, cached, GPU-cheap) */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27340%27%20height%3D%27340%27%3E%3Ccircle%20cx%3D%27129.9%27%20cy%3D%27188.8%27%20r%3D%271.14%27%20fill%3D%27%23CFE3FF%27%20opacity%3D%270.48%27%2F%3E%3Ccircle%20cx%3D%2715.1%27%20cy%3D%27102.8%27%20r%3D%270.84%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.67%27%2F%3E%3Ccircle%20cx%3D%27171.8%27%20cy%3D%2749.9%27%20r%3D%271.08%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.43%27%2F%3E%3Ccircle%20cx%3D%27204.3%27%20cy%3D%27239.9%27%20r%3D%271.02%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.46%27%2F%3E%3Ccircle%20cx%3D%27107.9%27%20cy%3D%27201.6%27%20r%3D%271.03%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.41%27%2F%3E%3Ccircle%20cx%3D%2746.3%27%20cy%3D%27319.6%27%20r%3D%270.45%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.49%27%2F%3E%3Ccircle%20cx%3D%277.4%27%20cy%3D%27140.2%27%20r%3D%271.39%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.35%27%2F%3E%3Ccircle%20cx%3D%27232.2%27%20cy%3D%27201.4%27%20r%3D%271.09%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.29%27%2F%3E%3Ccircle%20cx%3D%27142.4%27%20cy%3D%27234.8%27%20r%3D%271.44%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.82%27%2F%3E%3Ccircle%20cx%3D%27199.8%27%20cy%3D%27133.8%27%20r%3D%271.29%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.89%27%2F%3E%3Ccircle%20cx%3D%2759.9%27%20cy%3D%27197.3%27%20r%3D%271.23%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.16%27%2F%3E%3Ccircle%20cx%3D%27224.1%27%20cy%3D%27199.5%27%20r%3D%271.04%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.45%27%2F%3E%3Ccircle%20cx%3D%27323.3%27%20cy%3D%27258.3%27%20r%3D%270.46%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.22%27%2F%3E%3Ccircle%20cx%3D%2729.3%27%20cy%3D%27285.9%27%20r%3D%270.67%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.43%27%2F%3E%3Ccircle%20cx%3D%27308.9%27%20cy%3D%27325.3%27%20r%3D%271.07%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.81%27%2F%3E%3Ccircle%20cx%3D%2728.3%27%20cy%3D%27125.9%27%20r%3D%270.38%27%20fill%3D%27%23EAD08A%27%20opacity%3D%270.72%27%2F%3E%3Ccircle%20cx%3D%27203.0%27%20cy%3D%27282.2%27%20r%3D%271.37%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.41%27%2F%3E%3Ccircle%20cx%3D%27115.6%27%20cy%3D%27110.1%27%20r%3D%270.84%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.8%27%2F%3E%3Ccircle%20cx%3D%27254.8%27%20cy%3D%27196.0%27%20r%3D%270.38%27%20fill%3D%27%23CFE3FF%27%20opacity%3D%270.57%27%2F%3E%3Ccircle%20cx%3D%2737.5%27%20cy%3D%27314.3%27%20r%3D%270.45%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.32%27%2F%3E%3Ccircle%20cx%3D%27171.1%27%20cy%3D%2717.7%27%20r%3D%270.46%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.43%27%2F%3E%3Ccircle%20cx%3D%27158.1%27%20cy%3D%27222.5%27%20r%3D%270.39%27%20fill%3D%27%23EAD08A%27%20opacity%3D%270.25%27%2F%3E%3Ccircle%20cx%3D%27335.7%27%20cy%3D%2759.3%27%20r%3D%270.98%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.51%27%2F%3E%3Ccircle%20cx%3D%27269.9%27%20cy%3D%2787.3%27%20r%3D%270.57%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.62%27%2F%3E%3Ccircle%20cx%3D%27134.9%27%20cy%3D%27180.6%27%20r%3D%270.66%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.65%27%2F%3E%3Ccircle%20cx%3D%27257.4%27%20cy%3D%2778.7%27%20r%3D%271.44%27%20fill%3D%27%23CFE3FF%27%20opacity%3D%270.24%27%2F%3E%3Ccircle%20cx%3D%2731.6%27%20cy%3D%27130.5%27%20r%3D%271.03%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.37%27%2F%3E%3Ccircle%20cx%3D%2736.9%27%20cy%3D%27315.5%27%20r%3D%270.92%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.24%27%2F%3E%3Ccircle%20cx%3D%27116.9%27%20cy%3D%27143.4%27%20r%3D%270.67%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.45%27%2F%3E%3Ccircle%20cx%3D%27273.4%27%20cy%3D%27221.0%27%20r%3D%271.37%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.26%27%2F%3E%3Ccircle%20cx%3D%27256.1%27%20cy%3D%27136.9%27%20r%3D%271.26%27%20fill%3D%27%23E7C6F5%27%20opacity%3D%270.61%27%2F%3E%3Ccircle%20cx%3D%27276.2%27%20cy%3D%27134.6%27%20r%3D%271.13%27%20fill%3D%27%23CFE3FF%27%20opacity%3D%270.23%27%2F%3E%3Ccircle%20cx%3D%27104.2%27%20cy%3D%27283.7%27%20r%3D%271.01%27%20fill%3D%27%23C9F5EC%27%20opacity%3D%270.76%27%2F%3E%3Ccircle%20cx%3D%27274.3%27%20cy%3D%27314.8%27%20r%3D%270.87%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.71%27%2F%3E%3Ccircle%20cx%3D%27328.7%27%20cy%3D%27310.7%27%20r%3D%270.57%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.64%27%2F%3E%3Ccircle%20cx%3D%27147.1%27%20cy%3D%2772.2%27%20r%3D%271.31%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.7%27%2F%3E%3Ccircle%20cx%3D%27166.6%27%20cy%3D%27223.3%27%20r%3D%271.07%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.85%27%2F%3E%3Ccircle%20cx%3D%27112.6%27%20cy%3D%27256.5%27%20r%3D%270.57%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.28%27%2F%3E%3Ccircle%20cx%3D%278.6%27%20cy%3D%27232.6%27%20r%3D%271.25%27%20fill%3D%27%23C9F5EC%27%20opacity%3D%270.84%27%2F%3E%3Ccircle%20cx%3D%27230.2%27%20cy%3D%27291.4%27%20r%3D%271.45%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.34%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat; background-size: 340px 340px;
  opacity: 0.85; animation: ct-twinkle 8s ease-in-out infinite;
}
@keyframes ct-twinkle { 0%,100% { opacity: 0.62; } 50% { opacity: 0.92; } }

/* A couple of soft, larger glows drifting for depth (compositor-only) */
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: ct-drift 30s ease-in-out infinite alternate; }
}
@keyframes ct-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(0,-1.5%,0) scale(1.04); } }

/* =========================================================
   MORE COLOUR across the page (per-flavour accents used harder)
   ========================================================= */

/* Colourful announcement bar */
.announce-bar {
  background: linear-gradient(90deg, #2c1a52 0%, #7a2b74 30%, #b0417a 50%, #7a2b74 70%, #2c1a52 100%);
  color: var(--ct-cream);
}

/* Per-flavour coloured top-stripe + coloured blend tag on product cards */
.product-card { overflow: visible; }
.product-card .pc-media { border-top: 3px solid var(--flavor-accent, var(--ct-gold)); }
.pc-blend { color: var(--flavor-accent, var(--ct-gold)); }
.pc-name:hover { color: var(--flavor-accent, var(--ct-gold-warm)); }

/* Coin cards — let the flavour colour read on the label too */
.coin-base { color: var(--flavor-accent, var(--ct-gold)); opacity: 0.9; }

/* Coloured value strip + section glows */
.value-strip {
  background: linear-gradient(90deg, rgba(120,70,190,0.18), rgba(180,60,150,0.14), rgba(30,160,160,0.14), rgba(201,169,110,0.16));
}
.value-strip-inner { color: var(--ct-cream); }
.value-strip-inner span::before { color: var(--ct-gold-warm); }

/* Eyebrows pick up a subtle cosmic tint gradient underline */
.eyebrow::before, .eyebrow::after {
  background: linear-gradient(90deg, transparent, var(--ct-gold));
}

/* Flavour band on flavors page + PDP accents brighter */
.pdp-badge { box-shadow: 0 0 18px -6px var(--flavor-accent, var(--ct-gold)); }

/* Cards / panels get a faint coloured edge-glow on hover */
.product-card:hover { box-shadow: 0 18px 60px rgba(0,0,0,0.6), 0 0 32px -10px var(--flavor-accent, var(--ct-gold)); }
.coin-card:hover { box-shadow: 0 0 40px -14px var(--flavor-accent, var(--ct-gold)); }

/* Chips (shop filters) get a cosmic active state */
.chip.is-active { box-shadow: 0 0 16px -4px var(--ct-gold); }

/* Cosmic gradient utility for hero words */
.text-cosmic {
  background: linear-gradient(100deg, #E7C6F5 0%, #CFE3FF 35%, var(--ct-gold-warm) 70%, #C9F5EC 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* keep content above the star/nebula layers */
main, header, footer, section, .announce-bar { position: relative; z-index: 1; }