/* NEO Parking Custom Styles & Animations */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  --primary-dark: #0B132B;
  --secondary-dark: #1C2541;
  --accent-teal: #F15A24;       /* Brand Orange */
  --accent-teal-hover: #D94E1F; /* Brand Orange Hover */
  --accent-cyan: #5E50A1;       /* Brand Purple */
  --text-light: #F8FAFC;
  --text-dark: #0F172A;
}

body {
  font-family: 'Outfit', sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--primary-dark);
}
::-webkit-scrollbar-thumb {
  background: var(--secondary-dark);
  border-radius: 4px;
  border: 1px solid var(--accent-teal);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-teal);
}

/* Base Utility Classes */
.bg-smart-dark {
  background-color: var(--primary-dark);
}

.bg-smart-gradient {
  background: linear-gradient(135deg, #0B132B 0%, #151226 50%, #1C2541 100%);
}

.bg-teal-gradient {
  background: linear-gradient(135deg, #F15A24 0%, #E74C3C 100%);
}

.bg-cyan-gradient {
  background: linear-gradient(135deg, #5E50A1 0%, #4B3F8A 100%);
}

.text-teal-gradient {
  background: linear-gradient(135deg, #F15A24 0%, #5E50A1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Glassmorphism Styles */
.glass-card {
  background: rgba(28, 37, 65, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-card-hover:hover {
  background: rgba(28, 37, 65, 0.55);
  border-color: rgba(241, 90, 36, 0.4);
  box-shadow: 0 10px 30px -10px rgba(241, 90, 36, 0.3);
  transform: translateY(-4px);
}

/* Glow Effects */
.glow-teal {
  box-shadow: 0 0 20px rgba(241, 90, 36, 0.35); /* Mapped to brand orange */
}

.glow-teal-hover:hover {
  box-shadow: 0 0 25px rgba(94, 80, 161, 0.5); /* Mapped to brand purple */
}

.glow-orange {
  box-shadow: 0 0 20px rgba(241, 90, 36, 0.35);
}

.glow-purple {
  box-shadow: 0 0 20px rgba(94, 80, 161, 0.35);
}

.glow-green {
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.35);
}

/* Keyframe Animations */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; box-shadow: 0 0 10px rgba(16, 185, 129, 0.2); }
  50% { opacity: 1; box-shadow: 0 0 25px rgba(52, 211, 153, 0.6); }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes spot-ping {
  0% { transform: scale(0.9); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(0.9); opacity: 0.5; }
}

/* Animation Classes */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 3s infinite;
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in-left {
  animation: fade-in-left 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in-right {
  animation: fade-in-right 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Scroll Animation Hooks (for standard reveals) */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

/* Diagonal Separators */
.diagonal-bg {
  position: relative;
}
.diagonal-bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: white;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* Form Styling */
.floating-label-group {
  position: relative;
}

.floating-label-group input:focus ~ label,
.floating-label-group input:not(:placeholder-shown) ~ label,
.floating-label-group textarea:focus ~ label,
.floating-label-group textarea:not(:placeholder-shown) ~ label {
  top: -10px;
  font-size: 0.75rem;
  color: var(--accent-teal);
  background-color: white;
  padding: 0 4px;
}

.floating-label-group label {
  position: absolute;
  pointer-events: none;
  left: 12px;
  top: 14px;
  transition: 0.2s ease all;
  color: #94a3b8;
}

.floating-label-group-dark input:focus ~ label,
.floating-label-group-dark input:not(:placeholder-shown) ~ label {
  top: -10px;
  font-size: 0.75rem;
  color: var(--accent-cyan);
  background-color: var(--secondary-dark);
  padding: 0 4px;
}

.floating-label-group-dark label {
  position: absolute;
  pointer-events: none;
  left: 12px;
  top: 14px;
  transition: 0.2s ease all;
  color: #64748b;
}