/* ==============================================
   NUVION.AI - Main Styles
   ============================================== */

/* Base Variables */
:root {
  --color-bg-primary: #000000;
  --color-bg-secondary: #050505;
  --color-bg-card: #111111;
  --color-text-primary: #ffffff;
  --color-text-secondary: #a3a3a3;
  --color-border: rgba(255, 255, 255, 0.1);
  --color-accent: #ffffff;
}

/* Font Families */
.font-jakarta {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.font-serif {
  font-family: 'Playfair Display', serif;
}

/* Glass Effect */
.glass-panel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Selection */
::selection {
  background: rgba(255, 255, 255, 0.3);
  color: #000000;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #000000;
}

::-webkit-scrollbar-thumb {
  background: #333333;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

/* Utility Classes */
.reveal {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}

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

/* Button Hover Effects */
.btn-hover-scale {
  transition: all 0.3s ease;
}

.btn-hover-scale:hover {
  transform: scale(1.02);
}

/* Gradient Text */
.gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #666666 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Card Hover Effect */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-4px);
}

/* --- Nuvion AI Landing Page Specific Styles --- */

/* Animations */
.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif; }

@keyframes orbit {
  0% { transform: rotate(0deg) translateX(120px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}

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

.animate-float { animation: float 6s ease-in-out infinite; }
.delay-1000 { animation-delay: 1s; }
.delay-2000 { animation-delay: 2s; }

.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Canvas Background */
#dotsCanvas {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none; opacity: 0.4;
}

.bg-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(circle at center, transparent 0%, #000 90%);
  z-index: 2; pointer-events: none;
}

/* Tech Stack Styles */
.tech-item {
  opacity: 0.5; filter: grayscale(100%); transition: all 0.3s ease;
  display: flex; align-items: center; gap: 0.75rem; cursor: default;
}
.tech-item:hover { opacity: 1; filter: grayscale(0%); }

/* Advantage Cards 3D Effect */
#lenora-advantage .adv-card { opacity: 1; transition: opacity 500ms ease-out; }
#lenora-advantage.is-visible .adv-card { opacity: 1; }
#lenora-advantage .adv-card-inner {
  width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(0.19, 1, 0.22, 1);
}
#lenora-advantage .adv-card-face { position: absolute; inset: 0; backface-visibility: hidden; }
#lenora-advantage .adv-card-back { transform: rotateY(180deg); }

#lenora-advantage.state-1 .adv-card-left .adv-card-inner { transform: rotateZ(-6deg) rotateY(-18deg); }
#lenora-advantage.state-1 .adv-card-right .adv-card-inner { transform: rotateZ(6deg) rotateY(18deg); }
#lenora-advantage.state-2 .adv-card-left .adv-card-inner { transform: translateX(-40px) rotateY(40deg) rotateZ(-4deg); }
#lenora-advantage.state-2 .adv-card-right .adv-card-inner { transform: translateX(40px) rotateY(-40deg) rotateZ(4deg); }
#lenora-advantage.state-3 .adv-card-inner { transform: rotateY(180deg); }

/* Global Utilities */
.glass-panel {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.text-gradient {
    background: linear-gradient(to right, #ffffff, #a3a3a3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Animations */
@keyframes shimmer {
    100% { transform: translateX(100%); }
}