@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');
@font-face{

    font-family:"Vatsal-logo";

    src:url("../../assets/data/vatsal-logo-font.woff2") format("woff2");

    font-display:swap;
}


:root {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

body {
  font-family: var(--font-sans);
  background-color: #020205;
  color: #ffffff;
  overflow-x:hidden;
}

/* Hide scrollbar but keep scroll functionality */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Scrollbar thin specs */
.scrollbar-thin::-webkit-scrollbar {
  width: 4px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(6, 182, 212, 0.2);
  border-radius: 10px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: rgba(6, 182, 212, 0.4);
}

/* Keyframe Animations */
@keyframes globe-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes slow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-slow-bounce {
  animation: slow-bounce 8s ease-in-out infinite;
}

@keyframes deep-pulse {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.35; }
}

.animate-deep-pulse {
  animation: deep-pulse 12s ease-in-out infinite;
}
/* ---------- V3 Mobile Intro ---------- */

@media (max-width:480px){

#intro-screen{
    overflow:hidden;
    padding:16px;
}

#intro-screen>div{
    max-height:calc(100dvh - 32px);
    overflow:hidden;
    padding:22px 18px;
    gap:18px;
}

#intro-screen h1{
    font-size:clamp(2rem,10vw,3rem);
}

#launch-btn{
    min-height:52px;
}

}
/* Starfield canvas overlay styling */
#starfield-canvas {
  background: radial-gradient(circle at bottom, #070715 0%, #020205 80%);
}

/* Vertical Timeline Node Glow styles */
.timeline-dot {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-dot.active {
  background-color: #06b6d4;
  box-shadow: 0 0 12px #06b6d4, 0 0 24px rgba(6, 182, 212, 0.4);
}

.timeline-label {
  transition: all 0.3s ease;
}

.timeline-label.active {
  color: #ffffff;
  font-weight: 700;
  transform: translateX(2px);
}

/* Fade in entering sequence animation class */
.fade-in {
  animation: fadeIn 1.2s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ---------- Mobile HUD ---------- */

@media (max-width:768px){

#left-timeline,
#right-console{
    display:none!important;
}

#hud-deck{
    top:8px;
    left:8px;
    right:8px;
    gap:8px;
}

#hud-deck>div{
    padding:8px 10px;
}

}
/* ---------- Planet Scaling ---------- */

@media (max-width:480px){

.w-80.h-80,
.w-96.h-96,
.md\:w-\[480px\],
.md\:h-\[480px\]{
    width:min(72vw,300px)!important;
    height:min(72vw,300px)!important;
}

section{
    padding-left:18px;
    padding-right:18px;
}

}
.vatsal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 20px;
}
.vatsal-home{

    font-family:"Vatsal-logo";

    text-decoration:none;

    color:#776e65;

    font-size:18px;

    line-height:1;

    display:inline-block;
}