/* ==========================================================================
   ISLAMIC NET GLOBAL EDUCATION - ADVANCED ANIMATIONS & INTERACTIONS
   Hardware-accelerated CSS Animations, Hover Effects, and Transitions
   ========================================================================== */

/* Keyframe Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -28px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-32px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(32px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.92, 0.92, 0.92);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes floatSubtle {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -8px, 0);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
  }
  50% {
    box-shadow: 0 0 28px rgba(56, 189, 248, 0.45);
  }
}

@keyframes whatsappPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Page Entrance Sequence Classes */
.animate-fade-up {
  animation: fadeInUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-down {
  animation: fadeInDown 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-left {
  animation: fadeInLeft 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-right {
  animation: fadeInRight 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-zoom-in {
  animation: zoomIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-float {
  animation: floatSubtle 5s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* Stagger Delay Helpers */
.delay-50  { animation-delay: 50ms; }
.delay-100 { animation-delay: 100ms; }
.delay-150 { animation-delay: 150ms; }
.delay-200 { animation-delay: 200ms; }
.delay-250 { animation-delay: 250ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* Scroll-triggered Reveal System */
.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-left {
  opacity: 0;
  transform: translate3d(-30px, 0, 0);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-right {
  opacity: 0;
  transform: translate3d(30px, 0, 0);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-scale {
  opacity: 0;
  transform: scale3d(0.92, 0.92, 0.92);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale3d(1, 1, 1);
}

/* Enhanced Card Interactivity */
.card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: 0 16px 32px rgba(11, 27, 61, 0.1), 0 0 0 1px rgba(37, 99, 235, 0.15);
  border-color: rgba(37, 99, 235, 0.3);
}

.card img {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover img {
  transform: scale(1.05);
}

/* Button Animations */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.25s ease,
              color 0.25s ease;
}

.btn:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}

.btn:active {
  transform: translate3d(0, 1px, 0);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}

.btn svg {
  transition: transform 0.25s ease;
}

.btn:hover svg {
  transform: translate3d(3px, 0, 0);
}

/* Floating WhatsApp Pulse */
.whatsapp-float {
  animation: whatsappPulse 2.5s infinite;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1) rotate(4deg);
}

/* Mobile Staggered Menu Links Animation */
.nav-links.active .nav-link {
  animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.nav-links.active .nav-link:nth-child(1) { animation-delay: 50ms; }
.nav-links.active .nav-link:nth-child(2) { animation-delay: 90ms; }
.nav-links.active .nav-link:nth-child(3) { animation-delay: 130ms; }
.nav-links.active .nav-link:nth-child(4) { animation-delay: 170ms; }
.nav-links.active .nav-link:nth-child(5) { animation-delay: 210ms; }
.nav-links.active .nav-link:nth-child(6) { animation-delay: 250ms; }
.nav-links.active .nav-link:nth-child(7) { animation-delay: 290ms; }
.nav-links.active .nav-link:nth-child(8) { animation-delay: 330ms; }
.nav-links.active .nav-link:nth-child(9) { animation-delay: 370ms; }

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }

  .whatsapp-float {
    animation: none !important;
  }
}