/**
 * JUQOR — Base v2
 * Reset, body, scrollbar, animações
 */

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

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;
  font-size: 14px;
}

a { color: var(--a); text-decoration: none; }

/* Scrollbar refinada */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 3px; transition: background .2s; }
::-webkit-scrollbar-thumb:hover { background: var(--b3); }

::selection { background: var(--a2); color: var(--t0); }

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

/* Animações */
@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 fadeInFast { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--a3); } 50% { box-shadow: 0 0 0 16px transparent; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.fade    { animation: fadeIn 0.5s var(--ease-out) both; }
.fade-1  { animation-delay: .08s; }
.fade-2  { animation-delay: .16s; }
.fade-3  { animation-delay: .24s; }
.fade-4  { animation-delay: .32s; }
.fade-5  { animation-delay: .40s; }
.fade-6  { animation-delay: .48s; }

.pop      { animation: pop 0.4s var(--ease-bounce); }
.slide-up { animation: slideUp 0.35s var(--ease-out); }
.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);
  }
}