:root {
  --background: 210 30% 96%;
  --foreground: 222 47% 8%;
  --primary: 175 65% 34%;
  --muted-foreground: 215 20% 42%;
}

.dark {
  --background: 222 47% 4%;
  --foreground: 210 40% 98%;
  --primary: 175 100% 40%;
  --muted-foreground: 215 20.2% 65.1%;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: hsl(var(--primary)); }

body {
  background-color: hsl(var(--background));
  width: 100%;
  height: 100dvh;
  font-family: "Space Mono", "Segoe UI", Tahoma, Arial, sans-serif;
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  margin: 0;
}

/* ---------- Entrance animations ---------- */
@keyframes fade-up-12 { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade-up-16 { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade-up-20 { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes fade-up-24 { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fade-drop  { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes fade-in    { from { opacity: 0; } to { opacity: 1; } }

.anim-up-sm, .anim-up, .anim-up-20, .anim-up-lg, .anim-drop, .anim-fade {
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-up-sm { animation-name: fade-up-12; animation-duration: 0.6s; }
.anim-up    { animation-name: fade-up-16; animation-duration: 0.7s; }
.anim-up-20 { animation-name: fade-up-20; animation-duration: 0.5s; }
.anim-up-lg { animation-name: fade-up-24; animation-duration: 0.8s; }
.anim-drop  { animation-name: fade-drop;  animation-duration: 0.5s; }
.anim-fade  { animation-name: fade-in;    animation-duration: 0.8s; }

/* ---------- Background drift ---------- */
@keyframes drift {
  0%   { transform: translate(-10%, -10%); }
  50%  { transform: translate(10%, 10%); }
  100% { transform: translate(-10%, -10%); }
}
.bg-drift { animation: drift 25s linear infinite; }

/* ---------- Hero dim state ---------- */
.hero {
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero.is-dimmed {
  opacity: 0.15;
  transform: scale(0.97);
  filter: blur(6px);
  pointer-events: none;
}

/* ---------- Overlay + panels ---------- */
.overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.overlay.is-open { opacity: 1; }

.panel {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.35s cubic-bezier(0.22, 1.1, 0.36, 1),
              transform 0.45s cubic-bezier(0.22, 1.1, 0.36, 1);
}
.panel.is-open {
  opacity: 1;
  transform: scale(1);
}