/* Custom CSS Styles */
:root {
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom animations */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes glow {
  from {
    box-shadow: 0 0 20px rgba(52, 211, 153, 0.3);
  }
  to {
    box-shadow: 0 0 30px rgba(52, 211, 153, 0.6);
  }
}

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Button styles */
.btn-primary {
  @apply bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 text-white border-0 px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-emerald-500/25 inline-flex items-center;
}

.btn-primary-large {
  @apply bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 text-white border-0 px-8 py-4 rounded-lg font-medium transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-emerald-500/25 inline-flex items-center text-lg;
}

.btn-secondary-large {
  @apply border border-white/30 text-white hover:bg-white/10 px-8 py-4 rounded-lg font-medium transition-all duration-300 backdrop-blur-sm inline-flex items-center text-lg;
}

/* Form styles */
.form-input {
  @apply w-full bg-slate-800/50 border border-emerald-400/30 text-white placeholder:text-white/50 focus:border-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-400/25 rounded-lg px-4 py-3 transition-all duration-300;
}

.form-input:hover {
  @apply border-emerald-400/50 bg-slate-800/70;
}

.form-input:focus {
  @apply border-emerald-400 bg-slate-800/80 transform -translate-y-0.5 shadow-lg shadow-emerald-400/10;
}

.form-label {
  @apply text-white/90 mb-2 flex items-center text-sm font-medium;
}

.form-group {
  @apply space-y-2 relative;
}

.form-error {
  @apply text-red-400 text-sm mt-1 flex items-center absolute -bottom-6 left-0;
}

.form-success {
  @apply text-emerald-400 text-sm mt-1 flex items-center;
}

/* Form validation styles */
.form-input:invalid:not(:placeholder-shown) {
  @apply border-red-400 bg-red-500/10;
}

.form-input:valid:not(:placeholder-shown) {
  @apply border-emerald-400 bg-emerald-500/10;
}

/* Form section styles */
.form-section {
  @apply bg-gradient-to-br from-slate-800/50 to-emerald-900/30 border border-emerald-400/20 backdrop-blur-sm rounded-2xl p-8 shadow-2xl;
}

.form-section-title {
  @apply text-2xl font-bold mb-6 text-emerald-400 flex items-center;
}

.form-section-subtitle {
  @apply text-white/70 mb-8;
}

/* Form grid layouts */
.form-grid {
  @apply grid md:grid-cols-2 gap-6;
}

/* Form button styles */
.form-submit {
  @apply w-full bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 text-white border-0 px-6 py-4 rounded-lg font-medium transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-emerald-500/25 inline-flex items-center justify-center text-lg disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100;
}

.form-submit:disabled {
  @apply opacity-50 cursor-not-allowed hover:scale-100;
}

/* Form loading state */
.form-loading {
  @apply opacity-75 cursor-wait;
}

/* Form success state */
.form-success-state {
  @apply bg-emerald-500/20 border-emerald-400/30;
}

/* Form error state */
.form-error-state {
  @apply bg-red-500/20 border-red-400/30;
}

/* Select styles */
select.form-input {
  @apply appearance-none bg-no-repeat bg-right pr-10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2334d399'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

/* Textarea styles */
textarea.form-input {
  @apply resize-none;
}

/* Form animations */
@keyframes formShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.form-error-shake {
  animation: formShake 0.5s ease-in-out;
}

/* Form focus ring animation */
@keyframes focusRing {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.form-input:focus {
  animation: focusRing 1.5s ease-in-out infinite;
}

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

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Navigation active state */
.nav-link.active {
  color: var(--emerald-400) !important;
}

/* Hero animations */
.hero-title {
  animation: slideUp 1s ease-out;
}

.hero-subtitle {
  animation: slideUp 1s ease-out 0.2s both;
}

.hero-buttons {
  animation: slideUp 1s ease-out 0.4s both;
}

.hero-stats {
  animation: slideUp 1s ease-out 0.6s both;
}

/* Fade in sections */
.fade-in-section {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Floating elements */
.floating-element {
  animation: float 6s ease-in-out infinite;
}

/* Navbar scroll effect */
.navbar-scrolled {
  background: rgba(0, 0, 0, 0.95) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

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

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--emerald-500), var(--teal-500));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, var(--emerald-600), var(--teal-600));
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .floating-element {
    display: none;
  }
}

/* Loading animation for images */
img {
  transition: opacity 0.3s ease;
}

img[data-loaded="false"] {
  opacity: 0;
}

img[data-loaded="true"] {
  opacity: 1;
}

/* Focus styles for accessibility */
button:focus,
input:focus,
textarea:focus,
a:focus {
  outline: 2px solid var(--emerald-400);
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .fixed,
  #back-to-top,
  nav {
    display: none !important;
  }
}

/* Mobile menu styles */
#mobile-menu {
  transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1);
  will-change: opacity, transform;
}

#mobile-menu.open {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

#mobile-menu.closed {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-12px) !important;
}

/* Mobile menu button styles */
#mobile-menu-btn {
  position: relative;
  z-index: 51;
}

/* Mobile menu link styles */
#mobile-menu a {
  display: block;
  padding: 0.75rem 0;
  transition: all 0.2s ease;
}

#mobile-menu a:hover {
  transform: translateX(5px);
}

/* Mobile menu button icon transition */
#mobile-menu-btn i {
  transition: transform 0.3s ease;
}

#mobile-menu-btn[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* Enhanced glassmorphism for mobile menu */
#mobile-menu {
  box-shadow: 0 8px 32px 0 rgba(16, 185, 129, 0.25), 0 1.5px 6px 0 rgba(0,0,0,0.10);
  border: 1.5px solid rgba(52, 211, 153, 0.15);
  backdrop-filter: blur(18px) saturate(160%);
}