/* ================================================================
   3KPop.com — Global Design System
   All design tokens, animations, and base styles live here.
   No page or component may define colors or fonts outside this file.
   ================================================================ */

/* ----------------------------------------------------------------
   1. BASE RESET & BOX-SIZING
   ---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
input, textarea, select { font: inherit; }

/* ----------------------------------------------------------------
   2. DESIGN TOKENS — CSS CUSTOM PROPERTIES
   ---------------------------------------------------------------- */
:root {

  /* --- Color: Brand Roles --- */
  --bg-primary:      #0A0010;
  --color-music:     #FF006E;   /* Hot Pink  — music, CTAs, energy  */
  --color-dance:     #8338EC;   /* Purple    — dance, primary accents */
  --color-fandom:    #06D6A0;   /* Cyan      — fandom, community     */
  --color-highlight: #FFD166;   /* Yellow    — highlights, alerts     */

  /* --- Color: Surfaces --- */
  --surface-0:       #0A0010;   /* deepest bg */
  --surface-1:       #110019;   /* card bg    */
  --surface-2:       #1a0028;   /* elevated card */
  --surface-3:       #220034;   /* modal, overlay */

  /* --- Color: White (for text on solid colored buttons) --- */
  --color-white:     #ffffff;

  /* --- Color: Text --- */
  --text-primary:    #F0E6FF;
  --text-secondary:  #C4ADDF;
  --text-muted:      #9B88BB;
  --text-disabled:   #5A4870;
  --text-inverse:    #0A0010;

  /* --- Color: Border --- */
  --border-subtle:   rgba(131, 56, 236, 0.15);
  --border-default:  rgba(131, 56, 236, 0.25);
  --border-strong:   rgba(131, 56, 236, 0.45);
  --border-music:    rgba(255,   0, 110, 0.35);
  --border-fandom:   rgba(  6, 214, 160, 0.30);

  /* --- Color: Glow (used by glow utility classes) --- */
  --glow-music-sm:   0 0 12px  rgba(255,   0, 110, 0.40);
  --glow-music-md:   0 0 28px  rgba(255,   0, 110, 0.55);
  --glow-music-lg:   0 0 52px  rgba(255,   0, 110, 0.65);
  --glow-dance-sm:   0 0 12px  rgba(131,  56, 236, 0.40);
  --glow-dance-md:   0 0 28px  rgba(131,  56, 236, 0.55);
  --glow-dance-lg:   0 0 52px  rgba(131,  56, 236, 0.65);
  --glow-fandom-sm:  0 0 12px  rgba(  6, 214, 160, 0.35);
  --glow-fandom-md:  0 0 28px  rgba(  6, 214, 160, 0.50);
  --glow-fandom-lg:  0 0 52px  rgba(  6, 214, 160, 0.60);
  --glow-yellow-sm:  0 0 12px  rgba(255, 209, 102, 0.35);
  --glow-yellow-md:  0 0 28px  rgba(255, 209, 102, 0.50);
  --glow-yellow-lg:  0 0 52px  rgba(255, 209, 102, 0.60);

  /* --- Typography: Font Families --- */
  --font-display:    'Bebas Neue', 'Noto Sans KR', sans-serif;
  --font-sans:       'Inter', 'Noto Sans KR', sans-serif;
  --font-kr:         'Noto Sans KR', sans-serif;
  --font-mono:       'JetBrains Mono', 'Fira Code', monospace;

  /* --- Typography: Size Scale --- */
  --text-display:    clamp(48px, 10vw, 96px);  /* hero titles           */
  --text-h1:         28px;                      /* page titles           */
  --text-h2:         22px;                      /* section headers       */
  --text-h3:         18px;                      /* sub-headers, cards    */
  --text-body:       16px;                      /* body copy             */
  --text-sm:         13px;                      /* captions, secondary   */
  --text-xs:         11px;                      /* labels, badges, micro */

  /* --- Typography: Line Heights --- */
  --lh-tight:        1.1;
  --lh-snug:         1.35;
  --lh-normal:       1.6;
  --lh-relaxed:      1.75;

  /* --- Typography: Letter Spacing --- */
  --ls-tight:        -0.03em;
  --ls-normal:        0em;
  --ls-wide:          0.06em;
  --ls-wider:         0.12em;
  --ls-widest:        0.2em;

  /* --- Spacing Scale (4px base grid) --- */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;

  /* --- Border Radius --- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 100px;

  /* --- Transitions --- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   120ms;
  --duration-base:   220ms;
  --duration-slow:   400ms;

  /* --- Z-index Scale --- */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-nav:     50;
  --z-modal:  100;
  --z-toast:  200;
}

/* ----------------------------------------------------------------
   3. BODY BASE STYLES (uses tokens)
   ---------------------------------------------------------------- */
body {
  background-color: var(--bg-primary);
  color:            var(--text-primary);
  font-family:      var(--font-sans);
  font-size:        var(--text-body);
}

/* ----------------------------------------------------------------
   4. STARFIELD BACKGROUND (.starfield)
   Pure CSS — no JS. Three layers of pseudo-elements + a ::before
   container give depth via size and speed variation.
   ---------------------------------------------------------------- */

/* Utility: place a starfield layer behind any element */
.starfield {
  position: relative;
  overflow: hidden;
}

.starfield::before,
.starfield::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-below);
  border-radius: inherit;
}

/* --- Star layer 1: small, slow --- */
.starfield::before {
  background-image:
    radial-gradient(1px 1px at   3%  8%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at  12% 21%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at  21%  5%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at  31% 46%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at  41% 15%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at  52% 72%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at  61% 33%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at  73%  9%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at  82% 58%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at  90% 27%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at  97% 80%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at   7% 63%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at  17% 88%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at  28% 37%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at  38% 94%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at  48% 51%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at  57% 14%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at  67% 77%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at  78% 42%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at  87% 68%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(2px 2px at  25% 55%, rgba(255, 0,110,0.50)  0%, transparent 100%),
    radial-gradient(2px 2px at  65% 25%, rgba(131,56,236,0.50)  0%, transparent 100%),
    radial-gradient(2px 2px at  80% 85%, rgba(6,214,160,0.45)   0%, transparent 100%);
  background-size: 200% 200%;
  animation: starfield-drift-slow 60s linear infinite;
}

/* --- Star layer 2: larger, faster, different angle --- */
.starfield::after {
  background-image:
    radial-gradient(1.5px 1.5px at   9% 32%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at  19% 71%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at  34% 18%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at  44% 83%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at  55% 44%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at  69% 62%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at  76% 19%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at  88% 91%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at  94% 38%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(2px   2px   at  14% 97%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(2px   2px   at  36% 60%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(2px   2px   at  60% 10%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(2px   2px   at  72% 47%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(3px   3px   at  43% 29%, rgba(255, 0,110,0.60)  0%, transparent 100%),
    radial-gradient(3px   3px   at  81% 73%, rgba(131,56,236,0.55)  0%, transparent 100%),
    radial-gradient(2.5px 2.5px at  22% 84%, rgba(6,214,160,0.50)  0%, transparent 100%),
    radial-gradient(2px   2px   at  93% 15%, rgba(255,209,102,0.45) 0%, transparent 100%);
  background-size: 180% 180%;
  animation: starfield-drift-fast 38s linear infinite reverse;
  opacity: 0.85;
}

/* --- Twinkling overlay: applied as a sibling child span.starfield-twinkle --- */
.starfield-twinkle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-below);
  background-image:
    radial-gradient(1px 1px at  22% 15%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at  56% 42%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at  84% 72%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at  11% 77%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at  68%  9%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(2px 2px at  39% 63%, rgba(255, 0,110,0.8)  0%, transparent 100%),
    radial-gradient(2px 2px at  73% 31%, rgba(131,56,236,0.8)  0%, transparent 100%),
    radial-gradient(2px 2px at  15% 48%, rgba(6,214,160,0.7)   0%, transparent 100%);
  animation: starfield-twinkle 4s ease-in-out infinite alternate;
}

@keyframes starfield-drift-slow {
  0%   { background-position: 0%   0%; }
  100% { background-position: 100% 100%; }
}

@keyframes starfield-drift-fast {
  0%   { background-position: 100% 0%; }
  100% { background-position: 0%  100%; }
}

@keyframes starfield-twinkle {
  0%   { opacity: 0.3; }
  30%  { opacity: 1.0; }
  60%  { opacity: 0.5; }
  100% { opacity: 0.9; }
}

/* ----------------------------------------------------------------
   5. GLOW UTILITY CLASSES
   ---------------------------------------------------------------- */
.glow-pink {
  box-shadow: var(--glow-music-md);
  transition: box-shadow var(--duration-base) var(--ease-out);
}
.glow-pink:hover {
  box-shadow: var(--glow-music-lg);
}

.glow-purple {
  box-shadow: var(--glow-dance-md);
  transition: box-shadow var(--duration-base) var(--ease-out);
}
.glow-purple:hover {
  box-shadow: var(--glow-dance-lg);
}

.glow-cyan {
  box-shadow: var(--glow-fandom-md);
  transition: box-shadow var(--duration-base) var(--ease-out);
}
.glow-cyan:hover {
  box-shadow: var(--glow-fandom-lg);
}

.glow-yellow {
  box-shadow: var(--glow-yellow-md);
  transition: box-shadow var(--duration-base) var(--ease-out);
}
.glow-yellow:hover {
  box-shadow: var(--glow-yellow-lg);
}

/* Text glow variants */
.glow-text-pink   { text-shadow: var(--glow-music-sm); }
.glow-text-purple { text-shadow: var(--glow-dance-sm); }
.glow-text-cyan   { text-shadow: var(--glow-fandom-sm); }
.glow-text-yellow { text-shadow: var(--glow-yellow-sm); }

/* ----------------------------------------------------------------
   6. HOLOGRAPHIC SHIMMER (.holo-shimmer)
   A CSS-only rainbow shimmer for cards and badges.
   Uses background-size animation to shift a wide gradient.
   ---------------------------------------------------------------- */
.holo-shimmer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.holo-shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    115deg,
    transparent        0%,
    rgba(255, 0, 110,  0.08)  10%,
    rgba(131, 56, 236, 0.12)  25%,
    rgba(  6, 214, 160,0.10)  40%,
    rgba(255, 209, 102,0.12)  55%,
    rgba(131, 56, 236, 0.10)  70%,
    rgba(255, 0, 110,  0.08)  85%,
    transparent       100%
  );
  background-size: 300% 300%;
  animation: holo-shift 4s ease-in-out infinite;
  mix-blend-mode: screen;
}

.holo-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    225deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.00) 40%,
    rgba(255,255,255,0.06) 100%
  );
  background-size: 200% 200%;
  animation: holo-shift 4s ease-in-out infinite reverse;
  mix-blend-mode: overlay;
}

@keyframes holo-shift {
  0%   { background-position:   0%   0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position:   0%   0%; }
}

/* ----------------------------------------------------------------
   7. TYPOGRAPHY UTILITY CLASSES (uses tokens)
   ---------------------------------------------------------------- */
.text-display {
  font-family:     var(--font-display);
  font-size:       var(--text-display);
  line-height:     var(--lh-tight);
  letter-spacing:  var(--ls-tight);
  font-weight:     400; /* Bebas Neue is naturally bold */
}

.text-h1 {
  font-size:       var(--text-h1);
  font-weight:     800;
  line-height:     var(--lh-snug);
  letter-spacing:  var(--ls-tight);
}

.text-h2 {
  font-size:       var(--text-h2);
  font-weight:     700;
  line-height:     var(--lh-snug);
}

.text-h3 {
  font-size:       var(--text-h3);
  font-weight:     600;
  line-height:     var(--lh-normal);
}

.text-body {
  font-size:       var(--text-body);
  line-height:     var(--lh-normal);
}

.text-sm {
  font-size:       var(--text-sm);
  line-height:     var(--lh-normal);
}

.text-xs {
  font-size:       var(--text-xs);
  line-height:     var(--lh-snug);
  letter-spacing:  var(--ls-wide);
  text-transform:  uppercase;
}

/* ----------------------------------------------------------------
   8. COLOR UTILITY CLASSES (uses tokens — no raw hex values)
   ---------------------------------------------------------------- */
.text-music     { color: var(--color-music); }
.text-dance     { color: var(--color-dance); }
.text-fandom    { color: var(--color-fandom); }
.text-highlight { color: var(--color-highlight); }
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }

.bg-surface-0   { background-color: var(--surface-0); }
.bg-surface-1   { background-color: var(--surface-1); }
.bg-surface-2   { background-color: var(--surface-2); }
.bg-surface-3   { background-color: var(--surface-3); }

/* Brand fill utilities */
.fill-music     { background-color: var(--color-music); }
.fill-dance     { background-color: var(--color-dance); }
.fill-fandom    { background-color: var(--color-fandom); }
.fill-highlight { background-color: var(--color-highlight); }

/* Tinted fill utilities */
.fill-music-tint     { background-color: rgba(255,   0, 110, 0.12); }
.fill-dance-tint     { background-color: rgba(131,  56, 236, 0.12); }
.fill-fandom-tint    { background-color: rgba(  6, 214, 160, 0.10); }
.fill-highlight-tint { background-color: rgba(255, 209, 102, 0.12); }

/* Border utilities */
.border-music     { border-color: var(--border-music); }
.border-dance     { border-color: var(--border-default); }
.border-fandom    { border-color: var(--border-fandom); }
.border-subtle    { border-color: var(--border-subtle); }

/* ----------------------------------------------------------------
   9. SPACING UTILITY CLASSES (uses tokens)
   ---------------------------------------------------------------- */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); }
.gap-8 { gap: var(--space-8); }

/* ----------------------------------------------------------------
   10. BORDER RADIUS UTILITY CLASSES
   ---------------------------------------------------------------- */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-pill { border-radius: var(--radius-pill); }

/* ----------------------------------------------------------------
   11. TRANSITION UTILITY CLASSES
   ---------------------------------------------------------------- */
.transition-fast { transition: all var(--duration-fast) var(--ease-out); }
.transition-base { transition: all var(--duration-base) var(--ease-out); }
.transition-slow { transition: all var(--duration-slow) var(--ease-out); }

/* ----------------------------------------------------------------
   12. ADDITIONAL ANIMATION KEYFRAMES
   ---------------------------------------------------------------- */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.animate-fade-in  { animation: fade-in  var(--duration-slow) var(--ease-out) both; }
.animate-scale-in { animation: scale-in var(--duration-slow) var(--ease-out) both; }
.animate-pulse    { animation: pulse-glow 2.4s ease-in-out infinite; }
.animate-spin     { animation: spin 1s linear infinite; }