/* =====================================================
   EchoGrid Animation Engine v2 — animation.css
   Location: /css/animation.css
   -----------------------------------------------------
   Triggered via IntersectionObserver (adds .visible)
   Apply any .fade-, .slide-, .zoom-, .spin-, .pulse-,
   .wiggle-, or .float- class to your element.
   ===================================================== */


/* ======================================
   1. Fade Animations (Opacity Only)
   ====================================== */

.fade-in {
  opacity: 0;
  animation: fadeIn 2s ease-in-out forwards;
}

.fade-in-delay {
  opacity: 0;
  animation: fadeIn 2s ease-in-out 1s forwards;
}

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


/* ======================================
   2. Fade + Direction (Subtle Movement)
   ====================================== */

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 2s ease-in-out forwards;
}

.fade-up-delay {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 2s ease-in-out 1s forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.fade-down {
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeDown 2s ease-in-out forwards;
}

.fade-down-delay {
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeDown 2s ease-in-out 1s forwards;
}

@keyframes fadeDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.fade-left {
  opacity: 0;
  transform: translateX(20px);
  animation: fadeLeft 2s ease-in-out forwards;
}

.fade-left-delay {
  opacity: 0;
  transform: translateX(20px);
  animation: fadeLeft 2s ease-in-out 1s forwards;
}

@keyframes fadeLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


.fade-right {
  opacity: 0;
  transform: translateX(-20px);
  animation: fadeRight 2s ease-in-out forwards;
}

.fade-right-delay {
  opacity: 0;
  transform: translateX(-20px);
  animation: fadeRight 2s ease-in-out 1s forwards;
}

@keyframes fadeRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* ======================================
   3. Fade In + Up (Blended Transition)
   ====================================== */

.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 2s ease-in-out forwards;
}

.fade-in-up-delay {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 2s ease-in-out 1s forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ======================================
   4. Zoom Animations
   ====================================== */

.zoom-in {
  opacity: 0;
  transform: scale(0.95);
  animation: zoomIn 1.5s ease-out forwards;
}

.zoom-in-delay {
  opacity: 0;
  transform: scale(0.95);
  animation: zoomIn 1.5s ease-out 1s forwards;
}

@keyframes zoomIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* ======================================
   5. Spin (Slow Rotate Entrance)
   ====================================== */

.spin-in {
  opacity: 0;
  transform: rotate(-90deg);
  animation: spinIn 1.5s ease-out forwards;
}

@keyframes spinIn {
  to {
    opacity: 1;
    transform: rotate(0deg);
  }
}


/* ======================================
   6. Float (Subtle Floating on Load)
   ====================================== */

.float-in {
  opacity: 0;
  transform: translateY(10px);
  animation: floatIn 2s ease-in-out forwards;
}

@keyframes floatIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ======================================
   7. Pulse (Heartbeat Pop)
   ====================================== */

.pulse-in {
  opacity: 0;
  animation: pulseIn 2s ease-out forwards;
}

@keyframes pulseIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


/* ======================================
   8. Wiggle (Playful Shake)
   ====================================== */

.wiggle-in {
  opacity: 0;
  animation: wiggleIn 1s ease-in-out forwards;
}

@keyframes wiggleIn {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(3deg);
  }
  50% {
    opacity: 1;
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* ======================================
   9. Slide In (Side Entrance — No Fade)
   ====================================== */

.slide-in-left {
  transform: translateX(-100%);
  animation: slideInLeft 1.5s ease-out forwards;
}

@keyframes slideInLeft {
  to {
    transform: translateX(0);
  }
}

.slide-in-right {
  transform: translateX(100%);
  animation: slideInRight 1.5s ease-out forwards;
}

@keyframes slideInRight {
  to {
    transform: translateX(0);
  }
}


/* ======================================
   10. Blur In (Deblur While Entering)
   ====================================== */

.blur-in {
  opacity: 0;
  filter: blur(6px);
  animation: blurIn 1.5s ease-out forwards;
}

@keyframes blurIn {
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* ======================================
   11. Tilt In (3D Feel Rotation)
   ====================================== */

.tilt-in {
  opacity: 0;
  transform: perspective(600px) rotateY(-15deg);
  transform-origin: left;
  animation: tiltIn 1.2s ease-out forwards;
}

@keyframes tiltIn {
  to {
    opacity: 1;
    transform: perspective(600px) rotateY(0);
  }
}

/* =====================================================
   9. Advanced Visual Effects (Layered + Expressive)
   -----------------------------------------------------
   These effects go beyond basic fades and slides.
   Use them to add dramatic, modern energy to elements.
   Mix, match, and stack with delay or direction classes.
   Note: Some use transforms, filters, or glows.
   ===================================================== */

/* Fade + Scale Up */
.fade-scale-up {
  opacity: 0;
  transform: scale(0.95) translateY(20px);
  animation: fadeScaleUp 1.5s ease-out forwards;
}

@keyframes fadeScaleUp {
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Fade + Rotate */
.fade-rotate {
  opacity: 0;
  transform: rotate(-15deg);
  animation: fadeRotate 1.5s ease-out forwards;
}

@keyframes fadeRotate {
  to {
    opacity: 1;
    transform: rotate(0deg);
  }
}

/* Fade + Glow In */
.glow-in {
  opacity: 0;
  filter: blur(2px) brightness(0.8);
  animation: glowIn 2s ease-out forwards;
}

@keyframes glowIn {
  to {
    opacity: 1;
    filter: blur(0) brightness(1);
  }
}

/* Slide In Left (no fade) */
.slide-in-left {
  transform: translateX(-100px);
  opacity: 0;
  animation: slideInLeft 1.5s ease-out forwards;
}

@keyframes slideInLeft {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide In Right (no fade) */
.slide-in-right {
  transform: translateX(100px);
  opacity: 0;
  animation: slideInRight 1.5s ease-out forwards;
}

@keyframes slideInRight {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Blur In (sharpens as it enters) */
.blur-in {
  opacity: 0;
  filter: blur(8px);
  animation: blurIn 1.5s ease-out forwards;
}

@keyframes blurIn {
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* Tilt In (3D Style) */
.tilt-in {
  opacity: 0;
  transform: rotateY(10deg) translateX(30px);
  transform-origin: left;
  animation: tiltIn 1.8s ease-out forwards;
}

@keyframes tiltIn {
  to {
    opacity: 1;
    transform: rotateY(0deg) translateX(0);
  }
}