/* ========================================
   PREMIUM SCROLL ANIMATIONS
   ======================================== */

/* ---- FADE ANIMATIONS ---- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-80px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(80px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* ---- SCALE ANIMATIONS ---- */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleInBottomRight {
  from {
    opacity: 0;
    transform: scale(0.8) translateX(-40px) translateY(40px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateX(0) translateY(0);
  }
}

/* ---- PARALLAX & DEPTH ---- */
@keyframes slideInParallaxLeft {
  from {
    opacity: 0;
    transform: translateX(-120px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInParallaxRight {
  from {
    opacity: 0;
    transform: translateX(120px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ---- LINE REVEAL ANIMATION ---- */
@keyframes lineReveal {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* ---- TEXT WORD REVEAL ---- */
@keyframes textReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- FLOATING ANIMATION ---- */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* ---- GLOW ANIMATION ---- */
@keyframes glowPulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(59, 178, 74, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(59, 178, 74, 0.6);
  }
}

/* ========================================
   ANIMATION CLASSES
   ======================================== */

/* Base animation class */
.scroll-animate {
  opacity: 0;
  will-change: transform, opacity;
  transition: all 0.3s ease;
}

/* Fade animations */
.anim-fade-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

.anim-fade-down {
  animation: fadeInDown 0.8s ease-out forwards;
}

.anim-fade-left {
  animation: fadeInLeft 0.8s ease-out forwards;
}

.anim-fade-right {
  animation: fadeInRight 0.8s ease-out forwards;
}

.anim-fade {
  animation: fadeIn 0.8s ease-out forwards;
}

/* Scale animations */
.anim-scale-in {
  animation: scaleIn 0.8s ease-out forwards;
}

.anim-scale-in-bottom-right {
  animation: scaleInBottomRight 0.8s ease-out forwards;
}

/* Parallax animations */
.anim-parallax-left {
  animation: slideInParallaxLeft 1s ease-out forwards;
}

.anim-parallax-right {
  animation: slideInParallaxRight 1s ease-out forwards;
}

/* Text animations */
.anim-text-reveal {
  animation: textReveal 0.8s ease-out forwards;
}

/* Float animation */
.anim-float {
  animation: float 3s ease-in-out infinite;
}

/* Glow pulse */
.anim-glow {
  animation: glowPulse 2s ease-in-out infinite;
}

/* ========================================
   STAGGER DELAYS (for multiple elements)
   ======================================== */

.stagger-1 {
  animation-delay: 0s;
}

.stagger-2 {
  animation-delay: 0.15s;
}

.stagger-3 {
  animation-delay: 0.3s;
}

.stagger-4 {
  animation-delay: 0.45s;
}

.stagger-5 {
  animation-delay: 0.6s;
}

.stagger-6 {
  animation-delay: 0.75s;
}

.stagger-7 {
  animation-delay: 0.9s;
}

.stagger-8 {
  animation-delay: 1.05s;
}

.stagger-9 {
  animation-delay: 1.2s;
}

.stagger-10 {
  animation-delay: 1.35s;
}

/* ========================================
   SECTION-SPECIFIC ANIMATIONS
   ======================================== */

/* Section 2: Left content and Right image */
#section-2 .sec2-left-wrapper {
  animation: slideInParallaxLeft 1s ease-out forwards;
}

/* Section 3: Text and Carousel */
#section-3 .sec3-text-col {
  animation: fadeInLeft 1s ease-out forwards;
}

#section-3 .sec3-carousel-col {
  animation: fadeInRight 1s ease-out forwards;
}

/* Section 4: Text and Map */
#section-4 .sec4-left-wrapper {
  animation: slideInParallaxLeft 1s ease-out forwards;
}

#section-4 iframe {
  animation: slideInParallaxRight 1s ease-out forwards;
}

/* Section 5: Highlight cards */
#section-5 .sec5-highlight-con {
  animation: fadeInUp 0.8s ease-out forwards;
}

/* Section 6: Text and Carousel */
#section-6 .sec6-text-con {
  animation: fadeInLeft 0.8s ease-out forwards;
}

#section-6 .category-carousel {
  animation: fadeInRight 0.8s ease-out forwards;
}

/* Section 7: Text and Plans */
#section-7 .sec7-text-con {
  animation: fadeInUp 0.8s ease-out forwards;
}

#section-7 .sec7-master-floor-con {
  animation: scaleIn 0.8s ease-out forwards;
}

/* Section 8: Project cards */
#section-8 .sec8-card {
  animation: fadeInUp 0.8s ease-out forwards;
}

/* Section 2a: Unit cards */
#section-2a .sec2a-card {
  animation: scaleIn 0.8s ease-out forwards;
}

/* ========================================
   ENHANCED HOVER EFFECTS
   ======================================== */

.sec2a-card {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sec2a-card:hover {
  transform: translateY(-15px);
  box-shadow: 0 20px 60px rgba(59, 178, 74, 0.3);
}

.sec8-card {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sec8-card:hover {
  transform: translateY(-12px);
}

.sec5-highlight-con {
  transition: all 0.4s ease-out;
}

.sec5-highlight-con:hover {
  transform: scale(1.05);
}

/* ========================================
   LOADED STATE (when animation completes)
   ======================================== */

.anim-loaded {
  opacity: 1;
  animation-play-state: paused;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
  @keyframes fadeInLeft {
    from {
      opacity: 0;
      transform: translateX(-40px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes fadeInRight {
    from {
      opacity: 0;
      transform: translateX(40px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInParallaxLeft {
    from {
      opacity: 0;
      transform: translateX(-60px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInParallaxRight {
    from {
      opacity: 0;
      transform: translateX(60px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  #section-2 .sec2-left-wrapper {
    animation: fadeInUp 0.8s ease-out forwards;
  }

  #section-2 .sec2-right-wrapper {
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.2s;
  }

  #section-3 .sec3-text-col {
    animation: fadeInUp 0.8s ease-out forwards;
  }

  #section-3 .sec3-carousel-col {
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.2s;
  }

  #section-4 .sec4-left-wrapper {
    animation: fadeInUp 0.8s ease-out forwards;
  }

  #section-4 iframe {
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.2s;
  }
}