/* ============================================================
   Green City Builders - Animations
   ============================================================ */

/* ─── Float ─── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

/* ─── Pulse Gold ─── */
@keyframes pulseGold {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.animate-pulse-gold { animation: pulseGold 2s ease-in-out infinite; }

/* ─── Marquee ─── */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 30s linear infinite; }

/* ─── Fade In Up ─── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }

/* ─── Fade In Left ─── */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
.animate-fade-in-left { animation: fadeInLeft 0.6s ease-out forwards; }

/* ─── Fade In Right ─── */
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
.animate-fade-in-right { animation: fadeInRight 0.6s ease-out forwards; }

/* ─── Pulse Ring ─── */
@keyframes pulseRing {
  0% { transform: scale(0.9); opacity: 0.7; }
  70% { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
.animate-pulse-ring { animation: pulseRing 2s infinite; }

/* ─── Soft Vibrate ─── */
@keyframes softVibrate {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-1px); }
  40% { transform: translateX(1px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}
.animate-soft-vibrate { animation: softVibrate 0.35s ease-in-out; }

/* ─── Vibrate Loop (WhatsApp / Inquiry floating buttons) ─── */
.animate-vibrate-loop { animation: softVibrate 0.35s ease-in-out 5s infinite; }

/* ─── Drawer ─── */
@keyframes drawerSlideIn {
  0% { transform: translateX(100%) rotateY(-8deg); opacity: 0; }
  100% { transform: translateX(0) rotateY(0); opacity: 1; }
}
@keyframes drawerSlideOut {
  0% { transform: translateX(0) rotateY(0); opacity: 1; }
  100% { transform: translateX(100%) rotateY(-8deg); opacity: 0; }
}
.animate-drawer-in { animation: drawerSlideIn 0.35s ease-out forwards; }
.animate-drawer-out { animation: drawerSlideOut 0.3s ease-in forwards; }

/* ─── Ping ─── */
@keyframes ping { 0% { transform: scale(1); opacity: 1; } 75%, 100% { transform: scale(2); opacity: 0; } }
.animate-ping { animation: ping 1s cubic-bezier(0,0,0.2,1) infinite; }

/* ─── Spin ─── */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

/* ─── Bounce ─── */
@keyframes bounce { 0%,100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); } }
.animate-bounce { animation: bounce 1s infinite; }

/* ─── Pulse ─── */
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }

/* ─── Shake ─── */
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.animate-shake { animation: shake 0.5s ease-in-out; }

/* ─── Fade In ─── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }

/* ─── Slide Up ─── */
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.animate-slide-up { animation: slideUp 0.5s ease-out forwards; }

/* ─── Scale In ─── */
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.animate-scale-in { animation: scaleIn 0.3s ease-out forwards; }

/* ─── Toast ─── */
@keyframes toastSlideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastSlideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
.toast-enter { animation: toastSlideIn 0.3s ease-out forwards; }
.toast-exit { animation: toastSlideOut 0.3s ease-in forwards; }

/* ─── Scroll Reveal (triggered by JS via IntersectionObserver) ─── */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.reveal-left.revealed { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.reveal-right.revealed { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.9); transition: opacity 0.4s ease-out, transform 0.4s ease-out; }
.reveal-scale.revealed { opacity: 1; transform: scale(1); }

/* ─── Stagger Container (parent triggers children with delays) ─── */
.stagger-container > .stagger-item { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.stagger-container.revealed > .stagger-item:nth-child(1) { transition-delay: 0.04s; }
.stagger-container.revealed > .stagger-item:nth-child(2) { transition-delay: 0.08s; }
.stagger-container.revealed > .stagger-item:nth-child(3) { transition-delay: 0.12s; }
.stagger-container.revealed > .stagger-item:nth-child(4) { transition-delay: 0.16s; }
.stagger-container.revealed > .stagger-item:nth-child(5) { transition-delay: 0.20s; }
.stagger-container.revealed > .stagger-item:nth-child(6) { transition-delay: 0.24s; }
.stagger-container.revealed > .stagger-item:nth-child(7) { transition-delay: 0.28s; }
.stagger-container.revealed > .stagger-item:nth-child(8) { transition-delay: 0.32s; }
.stagger-container.revealed > .stagger-item:nth-child(9) { transition-delay: 0.36s; }
.stagger-container.revealed > .stagger-item:nth-child(10) { transition-delay: 0.40s; }
.stagger-container.revealed > .stagger-item:nth-child(11) { transition-delay: 0.44s; }
.stagger-container.revealed > .stagger-item:nth-child(12) { transition-delay: 0.48s; }
.stagger-container.revealed > .stagger-item { opacity: 1; transform: translateY(0); }

/* ─── Stagger Scale (cards scale in with stagger) ─── */
.stagger-scale > .stagger-item { opacity: 0; transform: scale(0.9); transition: opacity 0.4s ease-out, transform 0.4s ease-out; }
.stagger-scale.revealed > .stagger-item:nth-child(1) { transition-delay: 0.04s; }
.stagger-scale.revealed > .stagger-item:nth-child(2) { transition-delay: 0.08s; }
.stagger-scale.revealed > .stagger-item:nth-child(3) { transition-delay: 0.12s; }
.stagger-scale.revealed > .stagger-item:nth-child(4) { transition-delay: 0.16s; }
.stagger-scale.revealed > .stagger-item:nth-child(5) { transition-delay: 0.20s; }
.stagger-scale.revealed > .stagger-item:nth-child(6) { transition-delay: 0.24s; }
.stagger-scale.revealed > .stagger-item:nth-child(7) { transition-delay: 0.28s; }
.stagger-scale.revealed > .stagger-item:nth-child(8) { transition-delay: 0.32s; }
.stagger-scale.revealed > .stagger-item:nth-child(9) { transition-delay: 0.36s; }
.stagger-scale.revealed > .stagger-item:nth-child(10) { transition-delay: 0.40s; }
.stagger-scale.revealed > .stagger-item { opacity: 1; transform: scale(1); }

/* ─── Count up ─── */
.count-up { display: inline-block; }

/* ─── Card hover lift ─── */
.card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(26,77,46,0.1); }

/* ─── Cursor blink ─── */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.cursor-blink { animation: blink 0.8s step-end infinite; }

/* ─── Typing cursor pulse ─── */
@keyframes typingPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
.typing-cursor { animation: typingPulse 0.8s ease-in-out infinite; }

/* ─── Transition delays ─── */
.delay-100 { transition-delay: 0.1s !important; }
.delay-150 { transition-delay: 0.15s !important; }
.delay-200 { transition-delay: 0.2s !important; }
.delay-300 { transition-delay: 0.3s !important; }
.delay-400 { transition-delay: 0.4s !important; }
.delay-500 { transition-delay: 0.5s !important; }
.delay-600 { transition-delay: 0.6s !important; }

/* ─── Floating Action Stack Animations ─── */
@keyframes redUrgencyPulse {
0% { transform: scale(0.88); opacity: 0.72; }
70% { transform: scale(1.22); opacity: 0.12; }
100% { transform: scale(1.28); opacity: 0; }
}
@keyframes redUrgencyRing {
0% { transform: scale(0.82); opacity: 0.55; }
100% { transform: scale(1.34); opacity: 0; }
}
@keyframes contactVibrate {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
3% { transform: translate(1px, -1px) rotate(-0.5deg); }
6% { transform: translate(-1px, 1px) rotate(0.5deg); }
9% { transform: translate(1px, 1px) rotate(0deg); }
12% { transform: translate(0, 0) rotate(0deg); }
}

/* ─── Safe area padding ─── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 1023px) {
    main { padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
  }
}
@media (max-width: 1023px) {
  footer { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important; }
}