/* ================================================================
   css/base.css — Virtual Lab TJKT
   Reset, base element styles, global utilities, keyframe animations
   ================================================================ */

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

/*
 * KRITIS: Override [hidden] dengan !important agar atribut HTML hidden
 * tidak bisa di-override oleh rule CSS apapun (mis. display:flex pada
 * .modal-overlay, .quiz-result, dll.). Tanpa ini, elemen ber-class
 * display:flex tetap tampil meskipun hidden sudah di-set via JS.
 */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

/* ----------------------------------------------------------------
   BODY — Grid background halus
   ---------------------------------------------------------------- */
body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-main);
  line-height: 1.6;
  min-height: 100vh;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ----------------------------------------------------------------
   UTILITAS AKSESIBILITAS
   ---------------------------------------------------------------- */

/* Hanya untuk screen reader — tidak terlihat secara visual */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ----------------------------------------------------------------
   KEYFRAME ANIMATIONS — Dipakai lintas komponen
   ---------------------------------------------------------------- */

/* Fade + slide up — digunakan pada tab panel dan halaman */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Modal masuk dengan spring effect */
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* Halaman intro masuk */
@keyframes introPageIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Halaman intro keluar */
@keyframes introPageOut {
  to { opacity: 0; transform: translateY(-20px); }
}

/* Splash: ikon muncul dengan spring */
@keyframes splashIconPop {
  from { opacity: 0; transform: scale(0.5) rotate(-15deg); }
  to   { opacity: 1; transform: scale(1)   rotate(0deg); }
}

/* Splash: ring berputar */
@keyframes splashRingSpin {
  to { transform: rotate(360deg); }
}

/* Splash: LED berkedip */
@keyframes splashLedBlink {
  from { opacity: 0.2; filter: none; }
  to   { opacity: 1;   filter: drop-shadow(0 0 4px var(--accent)); }
}

/* Splash: glow berdenyut */
@keyframes splashGlowPulse {
  0%, 100% { transform: scale(1);   opacity: 0.6; }
  50%       { transform: scale(1.3); opacity: 1; }
}

/* Splash: elemen fade + naik */
@keyframes splashFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Splash: partikel mengambang ke atas */
@keyframes particleFloat {
  0%   { opacity: 0;    transform: translateY(0)     scale(0); }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.2; }
  100% { opacity: 0;    transform: translateY(-120vh) scale(1.5); }
}

/* Header: ikon berdenyut */
@keyframes iconPulse {
  0%, 100% { filter: drop-shadow(0 0 4px var(--accent)); }
  50%       { filter: drop-shadow(0 0 12px var(--accent)); }
}