/* =========================================================================
   THE PUNAI STUDIO — STATIC STYLESHEET
   India's Next-Gen AI Film Studio
   ========================================================================= */


@font-face {
  font-family: 'Nasalization';
  src: url('nasalization.woff') format('woff');
}



:root {
  --bg-primary: #0B0F19;
  --accent-cobalt: #2F80ED;
  --accent-silver: #E2E8F0;
  --card-slate: #111827;
  --elevated-navy: #161B2C;
  --glow-sky: #60A5FA;
  --amber-signal: #F5A623;
  --emerald-accent: #10B981;
}

body {
  background-color: #0B0F19;
  color: #E2E8F0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Headings Typography */
h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.heading-tight {
  letter-spacing: -0.035em;
}

.font-nasalization, .font-logo {
  font-family: 'Orbitron', 'Space Grotesk', sans-serif;
  letter-spacing: 0.06em;
  font-weight: 800;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Custom Sleek Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0B0F19;
}
::-webkit-scrollbar-thumb {
  background: #1E293B;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #2F80ED;
}

/* Glassmorphism Classes */
.glass-pill {
  background: rgba(11, 15, 25, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.glass-panel {
  background: rgba(17, 24, 39, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(47, 128, 237, 0.2);
}

.glass-card-interactive {
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.8) 0%, rgba(11, 15, 25, 0.9) 100%);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(47, 128, 237, 0.18);
  border-radius: 20px;
}

/* Sunburst Rays & Lighting Overlays */
.bg-sunburst-rays {
  background-image: 
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(47, 128, 237, 0.22), transparent 70%),
    radial-gradient(circle at 80% 30%, rgba(96, 165, 250, 0.12), transparent 45%),
    radial-gradient(circle at 20% 70%, rgba(47, 128, 237, 0.1), transparent 40%);
}

.bg-hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(11, 15, 25, 0.85) 0%,
    rgba(11, 15, 25, 0.45) 40%,
    rgba(11, 15, 25, 0.95) 100%
  );
}

/* Technical Grid for AI Agents Lab */
.bg-tech-grid {
  background-size: 36px 36px;
  background-image: 
    linear-gradient(to right, rgba(47, 128, 237, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(47, 128, 237, 0.08) 1px, transparent 1px);
}

/* Metallic Silver Styling for Pillars & Footer */
.bg-silver-metallic {
  background: linear-gradient(180deg, #F8FAFC 0%, #E2E8F0 45%, #CBD5E1 100%);
  color: #0F172A;
}

/* Dynamic Blue Line Hover Indicator for ALL Navigation Items */
.nav-btn-link {
  position: relative;
  transition: all 0.2s ease;
}

.nav-btn-link .nav-bar-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background-color: #2F80ED;
  border-radius: 9999px;
  box-shadow: 0 0 10px rgba(47, 128, 237, 0.9), 0 0 4px #2F80ED;
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  transform-origin: center;
}

.nav-btn-link:hover .nav-bar-indicator,
.nav-btn-link.active-nav .nav-bar-indicator {
  transform: scaleX(1);
  opacity: 1;
}

.nav-btn-link.active-nav {
  color: #FFFFFF !important;
  font-weight: 700;
}

/* Keyframe Animations */
@keyframes pulseGlow {
  0% { opacity: 0.2; transform: scale(0.95); }
  100% { opacity: 0.45; transform: scale(1.05); }
}

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

.animate-pulse-glow {
  animation: pulseGlow 8s ease-in-out infinite alternate;
}

.animate-float {
  animation: floatAnim 6s ease-in-out infinite;
}