/* 
  =========================================
  PREMIUM CONSTRUCTION COMPANY WEBSITE
  ANIMATIONS STYLESHEET (animation.css)
  =========================================
*/

/* Custom Transitions & Hover States */
:root {
  --transition-fast: 0.2s ease-out;
  --transition-normal: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-slow: 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Core Animation Base Classes for Scroll Reveal */
.reveal {
  opacity: 0;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  will-change: opacity, transform;
}

/* Fade Up */
.reveal-fade-up {
  transform: translateY(40px);
}
.reveal-fade-up.active {
  opacity: 1;
  transform: translateY(0);
}

/* Fade Left */
.reveal-fade-left {
  transform: translateX(-40px);
}
.reveal-fade-left.active {
  opacity: 1;
  transform: translateX(0);
}

/* Fade Right */
.reveal-fade-right {
  transform: translateX(40px);
}
.reveal-fade-right.active {
  opacity: 1;
  transform: translateX(0);
}

/* Zoom In */
.reveal-zoom-in {
  transform: scale(0.95);
}
.reveal-zoom-in.active {
  opacity: 1;
  transform: scale(1);
}

/* Stagger Delay Utilities */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* Image Hover Zoom Animation */
.image-zoom-container {
  overflow: hidden;
  position: relative;
}

.image-zoom-container img {
  transition: transform var(--transition-slow);
}

.image-zoom-container:hover img {
  transform: scale(1.08);
}

/* Premium Gold Shimmer Effect on Hover */
@keyframes goldShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Luxury Card Hover Lift */
.hover-lift {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.hover-lift:hover {
  transform: translateY(-8px);
  border-color: var(--color-gold) !important;
  box-shadow: 0 15px 30px rgba(212, 175, 55, 0.15);
}

/* Keyframe for Spinning/Pulsing Elements (e.g. badge icons) */
@keyframes goldPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(212, 175, 55, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
  }
}

.pulse-gold {
  animation: goldPulse 2s infinite;
}