/* ==========================================================================
   NXAURA ACADEMY - Ultra-Modern Aura Design System & Animations
   Luxury Editorial Serif (Fraunces) + Inter + Sky & Mountain Backgrounds (15% Opacity)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --obsidian: #0A0B0E;
  --obsidian-card: #12141A;
  --obsidian-subtle: #181B24;
  --clay: #F4F0EB;
  --clay-muted: rgba(244, 240, 235, 0.65);
  --clay-dim: rgba(244, 240, 235, 0.4);
  --saffron: #F59E0B;
  --saffron-light: #FBBF24;
  --vermillion: #E11D48;
  --vermillion-glow: #F43F5E;
  --cyan-accent: #00E5FF;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: var(--obsidian);
  color: var(--clay);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

.font-serif {
  font-family: 'Fraunces', Georgia, serif;
  font-feature-settings: "liga" on, "calt" on;
}

.font-mono-tech {
  font-family: 'Space Grotesk', monospace;
}

/* Fluid Typography */
.text-hero-fluid {
  font-size: clamp(2.5rem, 6vw + 1rem, 4.75rem);
  line-height: 1.05;
}

.text-section-fluid {
  font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem);
  line-height: 1.1;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--obsidian);
}
::-webkit-scrollbar-thumb {
  background: #232733;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--saffron);
}

/* ==========================================================================
   ANIMATED SKY & MOUNTAIN BACKGROUND EFFECTS (15% OPACITY)
   ========================================================================== */

/* 1. Sky Animation Layer (15% Opacity) */
.sky-bg-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.15;
  z-index: 0;
}

.sky-stars-layer {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(1.5px 1.5px at 20px 30px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 40px 70px, #F59E0B, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 90px 40px, #00E5FF, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 160px 120px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 230px 180px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 290px 90px, #FBBF24, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 340px 210px, #00E5FF, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 400px 60px, #ffffff, rgba(0,0,0,0));
  background-size: 450px 300px;
  animation: skyDrift 60s linear infinite;
}

.sky-aurora-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 20%, rgba(0, 229, 255, 0.5) 0%, rgba(245, 158, 11, 0.3) 40%, transparent 80%);
  animation: auroraPulse 14s ease-in-out infinite alternate;
}

@keyframes skyDrift {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-30px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes auroraPulse {
  0% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08) translateY(10px); }
  100% { opacity: 0.6; transform: scale(1); }
}

/* 2. Mountain Silhouette Layer (15% Opacity) */
.mountain-bg-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.15;
  z-index: 1;
  line-height: 0;
}

.mountain-ridge-back {
  width: 100%;
  height: auto;
  fill: #F59E0B;
  animation: mountainSway 35s ease-in-out infinite alternate;
}

.mountain-ridge-front {
  width: 100%;
  height: auto;
  fill: #00E5FF;
  animation: mountainSway 25s ease-in-out infinite alternate-reverse;
}

@keyframes mountainSway {
  0% { transform: translateX(0); }
  100% { transform: translateX(-15px); }
}

/* Background Cyber Grid with Radial Mask */
.bg-grid-aura {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(244, 240, 235, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244, 240, 235, 0.03) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 70%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 70%, transparent 100%);
}

/* Dynamic Ambient Glow Orbs */
.aura-orb-saffron {
  position: absolute;
  width: min(600px, 90vw);
  height: min(600px, 90vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0) 70%);
  filter: blur(80px);
  pointer-events: none;
  animation: floatOrb1 16s ease-in-out infinite alternate;
}

.aura-orb-vermillion {
  position: absolute;
  width: min(550px, 85vw);
  height: min(550px, 85vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 29, 72, 0.12) 0%, rgba(225, 29, 72, 0) 70%);
  filter: blur(80px);
  pointer-events: none;
  animation: floatOrb2 20s ease-in-out infinite alternate-reverse;
}

@keyframes floatOrb1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.08); }
  100% { transform: translate(-30px, 40px) scale(0.95); }
}

@keyframes floatOrb2 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, 30px) scale(1.1); }
  100% { transform: translate(30px, -40px) scale(0.9); }
}

/* Spotlight Card Hover Effect (Mouse Reactive) */
.spotlight-card {
  position: relative;
  background-color: var(--obsidian-card);
  border: 1px solid rgba(244, 240, 235, 0.08);
  border-radius: 1.5rem;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.spotlight-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(
    500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(245, 158, 11, 0.08),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.spotlight-card:hover::before {
  opacity: 1;
}

.spotlight-card:hover {
  border-color: rgba(245, 158, 11, 0.35);
  transform: translateY(-4px);
}

/* Keyframe Animations */
@keyframes scanLine {
  0% { top: 0%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.animate-scan {
  animation: scanLine 3.2s ease-in-out infinite;
}

@keyframes pulseSoft {
  0%, 100% { opacity: 0.35; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.06); }
}

.animate-pulse-soft {
  animation: pulseSoft 2.5s ease-in-out infinite;
}

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

.animate-float {
  animation: floatGentle 4.5s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.4; filter: blur(12px); }
  50% { opacity: 0.85; filter: blur(18px); }
}

.animate-glow-pulse {
  animation: glowPulse 4s ease-in-out infinite;
}

@keyframes spinSlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spinSlow 32s linear infinite;
}

/* Scroll Triggered Reveal Classes */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Flip Card Simulator */
.flip-card {
  perspective: 1000px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.flip-card.revealed .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 1rem;
}
.flip-card-back {
  transform: rotateY(180deg);
}

/* Modal styles */
.modal-overlay {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}
.modal-content {
  transform: scale(0.94) translateY(24px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-overlay.active .modal-content {
  transform: scale(1) translateY(0);
}

/* Mobile drawer animation */
#mobile-menu {
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}



/* ==========================================================================
   GOLDEN PILL & FROSTED PILL BUTTON SYSTEM
   ========================================================================== */
.btn-golden-pill {
  background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 50%, #D97706 100%) !important;
  color: #0F172A !important;
  border: 1px solid rgba(254, 240, 138, 0.85) !important;
  box-shadow: 0 4px 18px -2px rgba(245, 158, 11, 0.45), 0 0 12px rgba(251, 191, 36, 0.35) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  display: inline-flex;
  align-items: center;
}

.btn-golden-pill,
.btn-golden-pill *,
.btn-golden-pill div,
.btn-golden-pill span,
.btn-golden-pill svg {
  color: #0F172A !important;
  fill: currentColor;
}

.btn-golden-pill svg path,
.btn-golden-pill svg circle,
.btn-golden-pill svg line {
  stroke: #0F172A !important;
}

.btn-golden-pill:hover {
  background: linear-gradient(135deg, #FEF08A 0%, #FBBF24 50%, #B45309 100%) !important;
  box-shadow: 0 6px 26px -2px rgba(245, 158, 11, 0.65), 0 0 20px rgba(251, 191, 36, 0.5) !important;
  transform: translateY(-2px);
}

.btn-golden-pill:active {
  transform: translateY(0);
}

.btn-frosted-pill {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(203, 213, 225, 0.85) !important;
  color: #0F172A !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.dark .btn-frosted-pill {
  background: rgba(18, 20, 26, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #F8FAFC !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.btn-frosted-pill:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #F59E0B !important;
  color: #D97706 !important;
  transform: translateY(-2px);
}

html.dark .btn-frosted-pill:hover {
  background: rgba(30, 34, 45, 0.9) !important;
  border-color: #FBBF24 !important;
  color: #FBBF24 !important;
  box-shadow: 0 6px 24px rgba(245, 158, 11, 0.25) !important;
}

@keyframes goldenHeartbeat {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; filter: blur(30px); }
}

.animate-golden-heartbeat {
  animation: goldenHeartbeat 3.5s ease-in-out infinite alternate;
}