:root {
  color-scheme: dark light;
}

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

@keyframes floatPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.animate-fade-in {
  animation: fadeIn 0.35s ease-out forwards;
}

.page-transition-root {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  will-change: opacity, transform;
}

.page-transition-root.page-transition-visible {
  opacity: 1;
  transform: translateY(0);
}

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  min-height: 100vh;
  font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  background-color: #f8fafc;
  background-image:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.16), transparent 24%),
    radial-gradient(circle at bottom right, rgba(99, 102, 241, 0.14), transparent 20%),
    linear-gradient(180deg, #f8fafc 0%, #eef2ff 38%, #e2e8f0 100%);
  background-attachment: fixed;
  color: #111827;
}

html.dark body {
  background-color: #020617;
  background-image:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 24%),
    radial-gradient(circle at bottom right, rgba(168, 85, 247, 0.10), transparent 20%),
    linear-gradient(180deg, #020617 0%, #0f172a 45%, #111827 100%);
  color: #f8fafc;
}

body::selection {
  background: rgba(59, 130, 246, 0.35);
  color: #ffffff;
}

.glass-panel {
  background-color: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.glass-panel-dark {
  background-color: rgba(15, 23, 42, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

#main-header.header-scrolled {
  background-color: rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-color: rgba(203, 213, 225, 0.12) !important;
  box-shadow: 0 18px 60px -36px rgba(15, 23, 42, 0.15) !important;
}

html.dark #main-header.header-scrolled {
  background-color: rgba(15, 23, 42, 0.16) !important;
  border-color: rgba(30, 41, 59, 0.14) !important;
  box-shadow: 0 18px 60px -36px rgba(0, 0, 0, 0.22) !important;
}