/* ============================================================
   OKAKA FOOTBALL ACADEMY — Animation Classes
   ============================================================ */

.fade-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.fade-up.visible { opacity: 1; transform: translateY(0); }

.fade-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.fade-left.visible { opacity: 1; transform: translateX(0); }

.fade-right { opacity: 0; transform: translateX(40px); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.fade-right.visible { opacity: 1; transform: translateX(0); }

.zoom-in { opacity: 0; transform: scale(0.9); transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.zoom-in.visible { opacity: 1; transform: scale(1); }

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }
.stagger-7 { transition-delay: 0.7s; }
.stagger-8 { transition-delay: 0.8s; }

.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,0.12); }

.hover-glow { transition: all 0.3s ease; }
.hover-glow:hover { box-shadow: 0 0 30px rgba(27,122,61,0.2); }

/* Lazy Load */
.lazy-img { opacity: 0; transition: opacity 0.5s ease; }
.lazy-img.loaded { opacity: 1; }
.lazy-img.error { opacity: 0.3; }

/* Image Reveal */
.img-reveal {
  position: relative;
  overflow: hidden;
}
.img-reveal img { transform: scale(1.05); transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease; opacity: 0; }
.img-reveal.revealed img { transform: scale(1); opacity: 1; }

.fade-in { opacity: 0; transition: opacity 0.6s ease; }
.fade-in.visible { opacity: 1; }
.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; }