/* =====================================================================
   STFBE - Gaya kustom pelengkap Tailwind
   Palet: putih, biru FBE (#1e40af / #2563eb), aksen kuning (#facc15)
   Dark mode: navy, white, yellow
   ===================================================================== */

:root {
  --fbe-blue: #1e40af;
  --fbe-blue-light: #2563eb;
  --fbe-yellow: #facc15;
  --fbe-navy: #0b1220;
}

html { scroll-behavior: smooth; }

/* ---------------------------------------------------------------------
   TEMA & KONTRAS (light / dark)
   Kunci: color-scheme mengikuti kelas .dark (bukan preferensi OS), agar
   kontrol native seperti dropdown <select> ikut kontras saat tema di-toggle.
   --------------------------------------------------------------------- */
html          { color-scheme: light; }
html.dark     { color-scheme: dark; }

/* Opsi dropdown <select> — jaminan kontras lintas browser (Firefox/Chrome/Edge) */
select option,
select optgroup { background-color: #ffffff; color: #111827; }
html.dark select option,
html.dark select optgroup { background-color: #0f1729; color: #f3f4f6; }

/* Teks pada kontrol <select> tertutup selalu terbaca di dark mode */
html.dark select { color: #f3f4f6; }

/* Placeholder lebih terbaca di dark mode */
html.dark ::placeholder { color: rgba(203, 213, 225, .55); opacity: 1; }

/* Autofill Chrome agar tidak putih menyilaukan di dark mode */
html.dark input:-webkit-autofill,
html.dark select:-webkit-autofill,
html.dark textarea:-webkit-autofill {
  -webkit-text-fill-color: #f3f4f6;
  -webkit-box-shadow: 0 0 0 1000px #0f1729 inset;
  caret-color: #f3f4f6;
}

/* Scrollbar mengikuti tema */
html.dark { scrollbar-color: #334155 #0b1220; }

/* Saat Lenis aktif, matikan smooth bawaan agar tidak bentrok */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------------------------------------------------------------------
   REVEAL ON SCROLL (IntersectionObserver)
   --------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="zoom"]  { transform: scale(.94); }
[data-reveal].is-visible[data-reveal="left"],
[data-reveal].is-visible[data-reveal="right"] { transform: translateX(0); }
[data-reveal].is-visible[data-reveal="zoom"]  { transform: scale(1); }

/* Delay bertingkat */
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }

/* ---------------------------------------------------------------------
   OVERLAPPING SECTIONS (sticky stack)
   Setiap .stack-panel menempel (sticky) lalu ditumpuk panel berikutnya.
   --------------------------------------------------------------------- */
.stack {
  position: relative;
}
.stack-panel {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* efek skala mengecil saat tertumpuk (diatur via JS variabel --stack-scale) */
.stack-panel > .stack-inner {
  width: 100%;
  transform: scale(var(--stack-scale, 1));
  transform-origin: top center;
  transition: transform .1s linear;
}

/* Progress bar scroll di atas halaman */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--fbe-blue-light), var(--fbe-yellow));
  z-index: 60;
  transition: width .1s linear;
}

/* Aksen dekoratif */
.hero-blob {
  filter: blur(60px);
  opacity: .35;
  animation: float 9s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-24px) scale(1.05); }
}

/* Kartu peserta baris */
.peserta-row:nth-child(even) { background: rgba(37,99,235,.03); }
.cell-input {
  width: 100%;
  padding: .375rem .5rem;
  font-size: .8125rem;
  border-radius: .375rem;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  outline: none;
}
.cell-input:focus {
  border-color: var(--fbe-blue-light);
  background: rgba(37,99,235,.05);
}

/* Hormati preferensi reduce-motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-blob { animation: none; }
  .stack-panel { position: relative; min-height: auto; }
}

/* Spinner */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }