/* base.css — converted from src/index.css (global tokens shared by every page) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  --color-accent-50: #eef2ff; --color-accent-100: #e0e7ff; --color-accent-200: #c7d2fe;
  --color-accent-300: #a5b4fc; --color-accent-400: #818cf8; --color-accent-500: #6366f1;
  --color-accent-600: #4f46e5; --color-accent-900: #312e81; --color-accent-950: #1e1b4b;
  --color-accent-500-rgb: 99, 102, 241;
}

:root[data-theme="emerald"] {
  --color-accent-50: #ecfdf5; --color-accent-100: #d1fae5; --color-accent-200: #a7f3d0;
  --color-accent-300: #6ee7b7; --color-accent-400: #34d399; --color-accent-500: #10b981;
  --color-accent-600: #059669; --color-accent-900: #064e3b; --color-accent-950: #022c22;
  --color-accent-500-rgb: 16, 185, 129;
}

:root[data-theme="rose"] {
  --color-accent-50: #fff1f2; --color-accent-100: #ffe4e6; --color-accent-200: #fecdd3;
  --color-accent-300: #fda4af; --color-accent-400: #fb7185; --color-accent-500: #f43f5e;
  --color-accent-600: #e11d48; --color-accent-900: #881337; --color-accent-950: #4c0519;
  --color-accent-500-rgb: 244, 63, 94;
}

:root[data-theme="amber"] {
  --color-accent-50: #fffbeb; --color-accent-100: #fef3c7; --color-accent-200: #fde68a;
  --color-accent-300: #fcd34d; --color-accent-400: #fbbf24; --color-accent-500: #f59e0b;
  --color-accent-600: #d97706; --color-accent-900: #78350f; --color-accent-950: #451a03;
  --color-accent-500-rgb: 245, 158, 11;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: #020617;
  color: #f8fafc;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui;
}

.font-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; }

/* Custom Scrollbar for Dark Theme */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

.animate-marquee { animation: marquee 60s linear infinite; }
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes shimmer {
  100% { transform: translateX(100%); }
}
.animate-\[shimmer_2s_infinite\] { animation: shimmer 2s infinite; }
.animate-\[shimmer_2\.5s_infinite\] { animation: shimmer 2.5s infinite; }

#scroll-progress { transition: transform 0.15s ease-out; }

/* Shared polish utilities used across pages */
.page-fade-in {
  animation: pageFadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.elevate-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.elevate-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5);
  border-color: rgba(99, 102, 241, 0.35);
}

/* Generic staggered card entrance — dipakai lewat inline style="animation-delay:...s" */
.card-stagger-in {
  opacity: 0;
  animation: cardStaggerIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes cardStaggerIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Scroll-reveal: tambahkan class "reveal-up" ke section/elemen manapun,
   dan initScrollReveal() (app.js) akan otomatis animasi-in pas discroll
   masuk viewport — dipakai global di semua halaman, bukan cuma docs/home. */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-up.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Buttons: subtle shine sweep on hover, dipakai lewat class "btn-shine" */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.btn-shine:hover::after { left: 130%; }

/* Kartu utama halaman auth/redeem/profile: masuk dengan sedikit scale+fade,
   dan strip warna di atasnya (sudah ada di markup) dikasih shimmer halus. */
.auth-card-in {
  animation: authCardIn 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes authCardIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-card-in > .absolute.top-0.left-0.w-full.h-1 {
  background: linear-gradient(90deg, var(--color-accent-500), var(--color-accent-300), var(--color-accent-500));
  background-size: 200% 100%;
  animation: authStripShimmer 3s linear infinite;
}
@keyframes authStripShimmer {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .page-fade-in { animation: none; }
  .elevate-card:hover { transform: none; }
  .card-stagger-in { animation: none; opacity: 1; }
  .reveal-up { opacity: 1; transform: none; transition: none; }
  .btn-shine::after { display: none; }
  .auth-card-in { animation: none; }
  .auth-card-in > .absolute.top-0.left-0.w-full.h-1 { animation: none; }
}