/* Spotlight Movement — canonical landing-page brand tokens.
   Single source of truth for every static page in website/. Link this
   file and use these variables/classes instead of hand-copying hex
   values or gradients into a page's own <style> block.
   See LANDING_PAGE_GUIDELINES.md at the repo root for the full rules. */

:root{
  --sm-black: #06040E;
  --sm-purple: #2D1555;
  --sm-purple-deep: #1A0A2E;
  --sm-gold-dark: #5C3D08;
  --sm-gold-primary: #C8920A;
  --sm-gold-bright: #F5D840;
  --sm-gold-gradient: linear-gradient(135deg, var(--sm-gold-primary), var(--sm-gold-bright), var(--sm-gold-primary));
  --sm-urgency-red: #E11D48;
  --sm-cream: #F5F0E8;

  --sm-surface: var(--sm-black);
  --sm-surface-panel: #120C1E;
  --sm-text: #FFFFFF;
  --sm-text-muted: rgba(255,255,255,0.65);
  --sm-border: rgba(255,255,255,0.12);
  --sm-eyebrow-color: var(--sm-gold-bright);

  --sm-font-display: 'Anton', sans-serif;
  --sm-font-body: 'PT Serif', serif;
  --sm-font-ui: 'Outfit', sans-serif;

  /* Two approved corner systems. A page picks ONE and uses it
     everywhere on that page — never mix A and B on the same page. */
  --sm-radius-btn: 0px;    /* System A (Stage) default: sharp, editorial pages */
  --sm-radius-card: 0px;
}

/* System B (Store): opt in with data-corners="round" on <html> or <body> */
[data-corners="round"]{
  --sm-radius-btn: 999px;
  --sm-radius-card: 28px;
}

[data-theme="light"]{
  --sm-surface: var(--sm-cream);
  --sm-surface-panel: #FFFFFF;
  --sm-text: #12100A;
  --sm-text-muted: rgba(18,16,10,0.65);
  --sm-border: rgba(18,16,10,0.12);
  --sm-eyebrow-color: var(--sm-gold-dark);
}

body{
  background: var(--sm-surface);
  color: var(--sm-text);
  font-family: var(--sm-font-ui);
}

.sm-eyebrow{
  font-family: var(--sm-font-ui);
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--sm-eyebrow-color);
}

.sm-heading{
  font-family: var(--sm-font-display);
  text-transform: uppercase;
  font-weight: 900;
  color: var(--sm-text);
}

.sm-body{
  font-family: var(--sm-font-body);
  color: var(--sm-text-muted);
  line-height: 1.7;
}

/* Canonical gold CTA button. Always the 3-stop gradient, never a flat fill. */
.sm-btn-gold{
  display: inline-block;
  font-family: var(--sm-font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  padding: 1rem 2.2rem;
  border: none;
  color: #1A0A00;
  background: var(--sm-gold-gradient);
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--sm-radius-btn);
}

/* Canonical gold-bordered card. One technique everywhere: a 1.5px
   padding wrapper with the gradient as its background. */
.sm-gold-card{
  padding: 1.5px;
  background: var(--sm-gold-gradient);
  border-radius: var(--sm-radius-card);
}

.sm-gold-card-inner{
  background: var(--sm-surface-panel);
  border-radius: inherit;
  height: 100%;
  padding: 1.5rem;
}

/* ─── Motion — the same effects already live on index.html and
   spotlight-store.html (lamp glow, drifting orbs, fade-up, marquee,
   shimmering gold text). Reuse these named classes for a new animated
   section instead of inventing another keyframe set. ─── */

.sm-anim-lamp{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--sm-gold-bright);
  box-shadow: 0 0 40px 18px rgba(212,175,55,0.5), 0 0 90px 45px rgba(184,134,11,0.25), 0 0 160px 80px rgba(160,120,32,0.12);
  animation: sm-lamp-pulse 3.5s ease-in-out infinite;
}
@keyframes sm-lamp-pulse{
  0%,100%{ box-shadow: 0 0 40px 18px rgba(212,175,55,0.5), 0 0 90px 45px rgba(184,134,11,0.25), 0 0 160px 80px rgba(160,120,32,0.12); }
  50%{ box-shadow: 0 0 60px 28px rgba(212,175,55,0.7), 0 0 130px 65px rgba(184,134,11,0.35), 0 0 220px 110px rgba(160,120,32,0.18); }
}

.sm-anim-beam{
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 100%;
  background: linear-gradient(to bottom, var(--sm-gold-primary) 0%, rgba(184,134,11,0.4) 50%, transparent 100%);
  opacity: 0.25;
  animation: sm-beam-glow 5s ease-in-out infinite;
}
@keyframes sm-beam-glow{ 0%,100%{ opacity:0.15; } 50%{ opacity:0.4; } }

.sm-anim-orb{
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.35; pointer-events: none; z-index: 0;
}
.sm-anim-orb.sm-orb-1{ width: 520px; height: 520px; top: -10%; left: -10%; background: var(--sm-purple); animation: sm-drift-1 26s ease-in-out infinite; }
.sm-anim-orb.sm-orb-2{ width: 420px; height: 420px; bottom: 5%; right: -5%; background: var(--sm-gold-dark); animation: sm-drift-2 30s ease-in-out infinite; }
@keyframes sm-drift-1{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(80px,60px); } }
@keyframes sm-drift-2{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(-60px,-80px); } }

.sm-anim-rise{ opacity: 0; transform: translateY(24px); animation: sm-rise 0.9s ease forwards; }
.sm-anim-rise.sm-delay-1{ animation-delay: 0.15s; }
.sm-anim-rise.sm-delay-2{ animation-delay: 0.3s; }
.sm-anim-rise.sm-delay-3{ animation-delay: 0.45s; }
@keyframes sm-rise{ from{ opacity:0; transform: translateY(24px); } to{ opacity:1; transform: translateY(0); } }

.sm-anim-shimmer-text{
  background: var(--sm-gold-gradient);
  background-size: 300% 300%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: sm-shimmer 6s ease-in-out infinite;
}
@keyframes sm-shimmer{ 0%,100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }

.sm-anim-marquee{ overflow: hidden; white-space: nowrap; }
.sm-anim-marquee-track{ display: inline-block; animation: sm-scroll-left 22s linear infinite; }
@keyframes sm-scroll-left{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
