/* ===== HERO GRADIENT ===== */
.hero-gradient {
  background: linear-gradient(
    135deg,
    #ECFDF5 0%,
    #D1FAE5 15%,
    #A7F3D0 30%,
    #6EE7B7 50%,
    #34D399 65%,
    #059669 80%,
    #065F46 100%
  );
}

/* Subtle dot pattern overlay */
.hero-dots {
  background-image: radial-gradient(circle, rgba(6, 78, 59, 0.4) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ===== FLOATING HERO DECORATIONS ===== */
.hero-float-1 {
  animation: float-slow 8s ease-in-out infinite;
}
.hero-float-2 {
  animation: float-medium 6s ease-in-out infinite;
}
.hero-float-3 {
  animation: float-fast 5s ease-in-out infinite;
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-20px) scale(1.05); }
}
@keyframes float-medium {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-15px) rotate(5deg); }
}
@keyframes float-fast {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* ===== SCROLL REVEAL (progressive enhancement) ===== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
}

.reveal {
  will-change: opacity, transform;
}

/* JS adds this class when element enters viewport */
.reveal-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Default state for reduced-motion users — always visible */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== NAVBAR SCROLLED STATE ===== */
#site-header.scrolled {
  background: rgba(254, 253, 248, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 12px rgba(6, 78, 59, 0.08);
}

/* ===== SERVICE CARD HOVER ===== */
.service-card {
  transform: translateY(0);
}

/* ===== SMOOTH SCROLL ===== */
html {
  scroll-behavior: smooth;
}

/* ===== FOCUS STYLES ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #10B981;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== MOBILE MENU TRANSITION ===== */
#mobile-menu {
  animation: slideDown 0.25s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== RESPONSIVE TWEAKS ===== */
@media (max-width: 640px) {
  .hero-gradient {
    background: linear-gradient(
      160deg,
      #ECFDF5 0%,
      #A7F3D0 35%,
      #34D399 60%,
      #065F46 100%
    );
  }
}