/* ═══════════════════════════════════════════════════════
   CINEPLEX — Design System  ("Aurora Glass")
   Dark luxury fintech aesthetic: near-black green-tinted bg,
   one aurora gradient, frosted glass, single gold accent.
   Source of truth for tokens — never invent new colors,
   shadows, or radii outside this file.
═══════════════════════════════════════════════════════ */

:root {
  /* Backgrounds */
  --bg-base: #0b0f0d;
  --bg-elevated: #111613;
  --aurora: radial-gradient(ellipse 80% 60% at 50% 0%,
            rgba(255, 255, 255, 0.14), transparent 70%);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-hover: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.08);
  --ds-blur: 24px;
  --ds-blur-mobile: 12px;

  /* Accent — white, ONE per screen region */
  --accent: #ffffff;
  --accent-hover: #e6e6e6;
  --accent-text: #0a0a0c;

  /* Text */
  --text-primary: #f5f5f2;
  --text-secondary: rgba(255, 255, 255, 0.65);
  --text-muted: rgba(255, 255, 255, 0.45);

  /* Geometry */
  --radius-card: 20px;
  --radius-pill: 999px;
  --radius-input: 14px;

  /* Motion */
  --ds-ease: cubic-bezier(0.25, 0.8, 0.3, 1);   /* ease-out — barcha animatsiyalar shu egri chiziqda */
  --ds-dur: 0.2s;

  /* Motion — davomiylik tokenlari (yagona manba; har bir animatsiya shu --dur-* larni ishlatadi) */
  --dur-xfast:  0.15s;   /* yopish/dismiss — ochilishdan doim tezroq */
  --dur-fast:   0.18s;   /* sahifa chiqishi (route exit) */
  --dur-base:   0.2s;    /* umumiy fade / overlay fon */
  --dur-mid:    0.22s;   /* sahifa/modal kirishi, karta kirishi */
  --dur-reveal: 0.5s;    /* katta panellar (glass bo'limlar) kirishi */
  --dur-hold:   0.4s;    /* "dwell" — joyida turish pauzasi */
  --dur-slow:   0.6s;    /* katta ochilish (intro aurora) */

  /* Motion — stagger (pog'onali kechikish) qadamlari */
  --dur-stagger-card:  0.04s;   /* 40ms — grid kartalari */
  --dur-stagger-panel: 0.05s;   /* 50ms — bosh sahifa glass panellari */
  --dur-stagger-inner: 0.06s;   /* 60ms — modal ichidagi kontent */

  /* Type */
  --ds-font: 'Inter', -apple-system, system-ui, sans-serif;
}

/* ── Glass panel recipe (cards, modals, navbar, dropdowns) ── */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--ds-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--ds-blur)) saturate(1.2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
}

@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(20, 25, 22, 0.92); }
}

/* ── Buttons ── */
.btn-ds-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius-pill);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease);
}
.btn-ds-accent:hover { background: var(--accent-hover); transform: scale(1.03); }
.btn-ds-accent:active { transform: scale(0.97); }

.btn-ds-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg);
  color: var(--text-primary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(var(--ds-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--ds-blur)) saturate(1.2);
  cursor: pointer;
  transition: background var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease);
}
.btn-ds-glass:hover { background: var(--glass-bg-hover); transform: scale(1.03); }
.btn-ds-glass:active { transform: scale(0.97); }

@media (max-width: 768px) {
  .glass, .btn-ds-glass {
    backdrop-filter: blur(var(--ds-blur-mobile)) saturate(1.2);
    -webkit-backdrop-filter: blur(var(--ds-blur-mobile)) saturate(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-ds-accent, .btn-ds-glass { transition: opacity var(--ds-dur) ease; }
  .btn-ds-accent:hover, .btn-ds-glass:hover,
  .btn-ds-accent:active, .btn-ds-glass:active { transform: none; }
}