@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400..700;1,400..700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

body {
  background-color: #08080a; /* Premium off-black deep warm slate */
  color: #ededf0;
  overflow-x: hidden;
  letter-spacing: -0.011em;
}

/* Custom glass morphism card utilities */
.glass-panel {
  background: rgba(13, 13, 17, 0.7);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-panel-hover:hover {
  border-color: rgba(249, 115, 22, 0.25);
  box-shadow: 0 12px 35px -12px rgba(249, 115, 22, 0.12);
}

/* Sparkle orbital animations */
@keyframes orbit-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.orbiting-ring {
  animation: orbit-slow 24s linear infinite;
}

/* Scrollbar customization */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #08080a;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(249, 115, 22, 0.3);
}

/* Content layout transitions */
.animate-enterPage {
  animation: pageFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* Custom animations for tailwind elements since we are on v3 CDN */
.animate-in {
  animation-duration: 300ms;
  animation-fill-mode: both;
}

.fade-in {
  animation-name: fadeIn;
}

.slide-in-from-bottom-3 {
  animation-name: slideInFromBottom;
}

.zoom-in-95 {
  animation-name: zoomIn95;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes zoomIn95 {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
