/**
 * JUQOR — Base
 * 
 * Reset global, body, scrollbar e animações reutilizáveis.
 */

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

/* ── Body ── */
html, body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

body {
  font-family: var(--fh);
  background: var(--bg0);
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* ── Links ── */
a { color: var(--a); text-decoration: none; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 3px; }

/* ── Seleção ── */
::selection { background: var(--a2); color: var(--t0); }

/* ── Telas ── */
.screen {
  display: none;
  height: 100vh;
  height: 100dvh;
  flex-direction: column;
  overflow: hidden;
}
.screen.active {
  display: flex;
}

/* ══════════════════════════════════════
   ANIMAÇÕES GLOBAIS
   ══════════════════════════════════════ */

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes slideDown {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--a3); }
  50% { box-shadow: 0 0 0 20px transparent; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Classes de animação */
.fade { animation: fadeIn 0.5s ease-out both; }
.fade-1 { animation-delay: 0.1s; }
.fade-2 { animation-delay: 0.2s; }
.fade-3 { animation-delay: 0.3s; }
.fade-4 { animation-delay: 0.4s; }
.fade-5 { animation-delay: 0.5s; }
.fade-6 { animation-delay: 0.6s; }

.pop { animation: pop 0.4s var(--ease-bounce); }
.slide-up { animation: slideUp 0.35s cubic-bezier(0.33, 1, 0.68, 1); }
.spin { animation: spin 1.2s linear infinite; }

/* ── Safe area (iPhone notch) ── */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}