/* Custom CSS Animations & Keyframes */

/* Reveal Animations Base */
.reveal-fade,
.reveal-slide-up,
.reveal-slide-left,
.reveal-slide-right,
.reveal-scale {
  opacity: 0;
  visibility: hidden;
  transition-property: opacity, transform, visibility;
  transition-duration: 0.8s;
  transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

.reveal-slide-up {
  transform: translateY(40px);
}

.reveal-slide-left {
  transform: translateX(40px);
}

.reveal-slide-right {
  transform: translateX(-40px);
}

.reveal-scale {
  transform: scale(0.92);
}

/* Active State Triggered via Intersection Observer in JS */
.reveal-active {
  opacity: 1;
  visibility: visible;
  transform: translate(0) scale(1) !important;
}

/* Staggered Transition Delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }

/* Interactive Hover Animations */

/* Hover Lift */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: var(--elevation-high);
}

/* Image Zoom */
.img-zoom-container {
  overflow: hidden;
}

.img-zoom-container img {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

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

/* Button Pulse/Scale Effect */
.btn-pulse {
  transition: transform 0.2s ease, filter 0.2s ease;
}

.btn-pulse:active {
  transform: scale(0.95);
}

/* Subtle Shimmer for Bento Cards */
.shimmer-effect {
  position: relative;
  overflow: hidden;
}

.shimmer-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: left 0.75s ease;
}

.shimmer-effect:hover::after {
  left: 150%;
}

/* Button Ripple effect styling */
.ripple {
  position: absolute;
  background: rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-full);
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Sticky Header Scroll transition */
header.sticky-header {
  transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

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

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* Parallax scroll helper */
.parallax-bg {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Counter transition styles */
.counter-value {
  transition: opacity 0.5s ease;
}
.counter-value.animating {
  opacity: 0.7;
}