/* SugarCalle - stars gradient layer.
   Deep purple/navy background with subtle multicolor stars.
   References tokens.css. */

body.stars {
  background: #14081A;
  color: var(--cream-bg);
  position: relative;
}

.stars-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 10%, rgba(91, 30, 90, 0.7), transparent 55%),
    radial-gradient(ellipse at 70% 90%, rgba(27, 77, 94, 0.6), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(40, 12, 55, 0.4), transparent 70%),
    #14081A;
}

.star {
  position: absolute;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 6px currentColor);
  animation: star-twinkle 4s var(--ease-out) infinite;
  opacity: 0.6;
}
.star.outline {
  background: transparent !important;
  outline: 1.5px solid currentColor;
  clip-path: none;
  border-radius: 50%;
  filter: drop-shadow(0 0 8px currentColor);
}
.star.tiny  { animation-duration: 2.6s; opacity: 0.45; }
.star.small { animation-duration: 3.4s; opacity: 0.55; }
.star.med   { animation-duration: 4.2s; opacity: 0.7; }
.star.big   { animation-duration: 5.6s; opacity: 0.85; }

@keyframes star-twinkle {
  0%, 100% { opacity: var(--low, 0.3); transform: scale(0.85); }
  50%      { opacity: var(--hi, 0.95); transform: scale(1.15); }
}

/* Sections become translucent panes over stars - cards stay opaque */
body.stars .hero { background: transparent; }
body.stars .hero::after { display: none; }
body.stars .section--alt {
  background: rgba(255, 246, 238, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
body.stars .cta-strip { background: transparent; }
body.stars .site-header {
  background: rgba(20, 8, 26, 0.78);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: rgba(244, 182, 216, 0.18);
}
body.stars .site-header .brand-mark {
  color: var(--cream);
}
body.stars .nav a { color: var(--cream); }
body.stars .nav a:hover { color: var(--brand); }

body.stars .hero h1 { color: var(--cream); }
body.stars .hero h1 .stroke { -webkit-text-stroke-color: var(--cream); }
body.stars .hero h1 .teal { color: var(--teal); }
body.stars .hero p.lede { color: rgba(255, 246, 238, 0.85); }
body.stars .hero-meta { color: rgba(255, 246, 238, 0.7); }
body.stars .hero-meta .dot { background: var(--brand); box-shadow: 0 0 0 4px rgba(233, 30, 142, 0.30); }
body.stars .btn--ghost {
  color: var(--cream);
  border-color: var(--cream);
}
body.stars .btn--ghost:hover { background: var(--cream); color: var(--ink); }

body.stars .cta-strip h2 { color: var(--cream); }
body.stars .cta-strip h2 .pink { color: var(--brand); }
body.stars .cta-strip p { color: rgba(255, 246, 238, 0.8); }

body.stars main { position: relative; z-index: 1; }
body.stars .site-header { z-index: 20; }
body.stars .footer { position: relative; z-index: 1; }
body.stars .band { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .star { animation: none; }
}