/* ==========================================================================
   main.css — Pop Up Padel Indonesia
   CSS Variables, base reset, typography, global utilities
   ========================================================================== */

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  /* --- Colors: Primary --- */
  --color-primary-blue: #4B72DB;
  --color-primary-purple: #9282ED;
  --color-primary-purple-soft: #CDC6F6;

  /* --- Colors: Accent --- */
  --color-accent-green: #04DD7C;
  --color-accent-green-dark: #169858;
  --color-accent-lime: #B0F000;
  --color-accent-orange: #FF9933;

  /* --- Colors: Neutral --- */
  --color-ink: #0E1230;
  --color-ink-soft: #2A2F4A;
  --color-ink-muted: #6B6F8A;
  --color-paper: #FAFAFB;
  --color-paper-warm: #F4F3FA;
  --color-line: #E5E3F2;
  --color-line-soft: #EFEDF7;

  /* --- Colors: Semantic --- */
  --color-success: #04DD7C;
  --color-warning: #FF9933;
  --color-danger: #E5484D;

  /* --- Gradients --- */
  --gradient-brand: linear-gradient(135deg, #4B72DB 0%, #9282ED 50%, #CDC6F6 100%);
  --gradient-energy: linear-gradient(135deg, #9282ED 0%, #04DD7C 100%);
  --gradient-hero: linear-gradient(160deg, #4B72DB 0%, #6B5FDB 45%, #9282ED 100%);
  --gradient-dark-overlay: linear-gradient(180deg, rgba(14,18,48,0) 0%, rgba(14,18,48,0.85) 100%);
  --gradient-mesh: radial-gradient(at 20% 30%, #9282ED 0%, transparent 50%),
                   radial-gradient(at 80% 20%, #4B72DB 0%, transparent 50%),
                   radial-gradient(at 50% 80%, #04DD7C 0%, transparent 50%);

  /* --- Typography --- */
  --font-display: 'Bricolage Grotesque', 'Poppins', system-ui, sans-serif;
  --font-sans: 'Poppins', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --fs-h1: clamp(2.75rem, 6vw, 5.5rem);
  --fs-h2: clamp(2rem, 4vw, 3.5rem);
  --fs-h3: clamp(1.5rem, 2.5vw, 2.25rem);
  --fs-h4: clamp(1.25rem, 2vw, 1.5rem);
  --fs-subhead: 1.125rem;
  --fs-body: 1rem;
  --fs-caption: 0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 0.95;
  --lh-snug: 1.1;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.12em;

  /* --- Spacing (8pt grid) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  96px;
  --space-9:  128px;
  --space-10: 160px;

  /* --- Radius --- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-xs:         0 1px 2px rgba(14, 18, 48, 0.04);
  --shadow-sm:         0 2px 8px rgba(14, 18, 48, 0.06);
  --shadow-md:         0 8px 24px rgba(75, 114, 219, 0.08), 0 2px 8px rgba(14, 18, 48, 0.04);
  --shadow-lg:         0 24px 48px rgba(75, 114, 219, 0.12), 0 4px 16px rgba(14, 18, 48, 0.06);
  --shadow-xl:         0 32px 64px rgba(75, 114, 219, 0.18), 0 8px 24px rgba(14, 18, 48, 0.08);
  --shadow-glow-brand: 0 0 40px rgba(146, 130, 237, 0.35);
  --shadow-glow-green: 0 0 32px rgba(4, 221, 124, 0.4);

  /* --- Motion --- */
  --ease-out-expo:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quint:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:    200ms;
  --duration-base:    350ms;
  --duration-slow:    700ms;

  /* --- Layout --- */
  --max-w-container: 1280px;
  --max-w-prose:     65ch;
  --nav-h:           80px;
  --nav-h-scrolled:  64px;

  /* --- Z-index --- */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== BASE RESET ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }

/* ===== IMAGE SKELETON LOADING ===== */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.4s ease;
  background: linear-gradient(
    90deg,
    var(--color-paper-warm) 25%,
    var(--color-line)       50%,
    var(--color-paper-warm) 75%
  );
  background-size: 200% 100%;
  animation: img-shimmer 1.4s ease-in-out infinite;
}
img[loading="lazy"][data-loaded] {
  opacity: 1;
  animation: none;
  background: none;
}
@keyframes img-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul, ol { list-style: none; padding: 0; }
a { text-decoration: none; color: inherit; }

/* ===== TYPOGRAPHY ===== */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-normal);
}

/* ===== SELECTION ===== */
::selection { background: var(--color-primary-purple); color: white; }

/* ===== FOCUS ===== */
:focus-visible {
  outline: 2px solid var(--color-primary-purple);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===== EYEBROW ===== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-primary-purple);
}
.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--color-accent-green);
  border-radius: 50%;
  flex-shrink: 0;
}
.eyebrow--light {
  color: rgba(255, 255, 255, 0.85);
}
.eyebrow--light::before {
  background: var(--color-accent-green);
}

/* ===== LAYOUT UTILITIES ===== */
.container {
  width: 100%;
  max-width: var(--max-w-container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 768px) { .container { padding-inline: var(--space-5); } }
@media (min-width: 1024px) { .container { padding-inline: var(--space-6); } }

.section {
  padding-block: var(--space-8);
}
.section--sm { padding-block: var(--space-6); }
.section--lg { padding-block: var(--space-9); }
.section--xl { padding-block: var(--space-10); }

/* ===== SKIP LINK ===== */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-3);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary-purple);
  color: white;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: top var(--duration-fast);
}
.skip-link:focus { top: var(--space-3); }

/* ===== SCREEN READER ONLY ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===== TEXT UTILITIES ===== */
.text-gradient {
  background: var(--gradient-energy);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient-brand {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== SCROLL REVEAL ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-out-expo) var(--reveal-delay, 0ms),
              transform var(--duration-slow) var(--ease-out-expo) var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ===== DECORATIVE ELEMENTS ===== */
.deco-circle {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.deco-checker {
  --size: 12px;
  background-image:
    linear-gradient(45deg, var(--color-accent-green) 25%, transparent 25%),
    linear-gradient(-45deg, var(--color-accent-green) 25%, transparent 25%);
  background-size: var(--size) var(--size);
  background-position: 0 0, 0 calc(var(--size) / 2);
  opacity: 0.9;
  pointer-events: none;
}

.deco-dots {
  background-image: radial-gradient(circle, var(--color-line) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.6;
}

/* ===== SECTION HEADER ===== */
.section-head {
  max-width: 720px;
  margin-bottom: var(--space-6);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head__lead {
  margin-top: var(--space-3);
  font-size: var(--fs-subhead);
  color: var(--color-ink-muted);
  max-width: var(--max-w-prose);
}
.section-head--center .section-head__lead { margin-inline: auto; }
.section-head h2 { margin-top: var(--space-2); }