/* ==========================================================================
   EngageMinds — animations.css
   Subtle CSS3 motion: fade/slide/scale reveal (paired with IntersectionObserver
   in js/main.js), floating decorative shapes, gradient motion and hover states.
   Everything here respects prefers-reduced-motion at the bottom of the file.
   ========================================================================== */

/* Scroll-reveal base states — main.js toggles .is-visible via IntersectionObserver */
[data-animate] {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-animate="fade-up"] { transform: translateY(28px); }
[data-animate="fade-in"] { transform: translateY(0); }
[data-animate="fade-left"] { transform: translateX(-28px); }
[data-animate="fade-right"] { transform: translateX(28px); }
[data-animate="scale-in"] { transform: scale(0.92); }

[data-animate].is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Stagger children within a group via inline --delay custom property */
[data-animate] { transition-delay: var(--delay, 0ms); }

/* Floating decorative elements (hero hexagons, dots) */
@keyframes em-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes em-float-sm {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(4deg); }
}

.animate-float { animation: em-float 5.5s ease-in-out infinite; }
.animate-float-sm { animation: em-float-sm 4.5s ease-in-out infinite; }
.animate-float-slow { animation: em-float 8s ease-in-out infinite; }

/* Gradient shimmer used on primary buttons already handled via background-position
   transition in style.css; this keyframe is for the hero's soft glow accent */
@keyframes em-glow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.06); }
}

.animate-glow { animation: em-glow 4s ease-in-out infinite; }

/* Fade-in for the whole page shell on load */
@keyframes em-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.page-shell { animation: em-page-in 0.5s ease; }

/* Spin used for loading/transition micro-interactions (kept minimal) */
@keyframes em-spin {
  to { transform: rotate(360deg); }
}

.animate-spin-slow { animation: em-spin 12s linear infinite; }

/* Pulse ring for the WhatsApp floating button */
@keyframes em-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
  70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.fab-whatsapp { animation: em-pulse-ring 2.6s ease-out infinite; }

/* Card hover lift is transition-based (see style.css); add a subtle scale-in
   for icons on hover to reinforce interactivity */
.programme-card:hover .hex-icon,
.module-card:hover .hex-icon {
  transform: translateY(-4px) scale(1.04);
}

/* Marquee-free logo wall hover already handled; add gentle entrance for the
   trusted-brand grid using the shared [data-animate] system (see main.js) */

/* Accordion chevron rotation is handled by Bootstrap; add a smoother ease */
.accordion-button::after { transition: transform 0.3s ease; }

/* Skeleton shimmer, reserved for future dynamic content loading states */
@keyframes em-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.animate-shimmer {
  background: linear-gradient(90deg, var(--em-mist) 0px, rgba(255,255,255,0.6) 40px, var(--em-mist) 80px);
  background-size: 200px 100%;
  animation: em-shimmer 1.6s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Reduced motion: disable all non-essential animation/transition/parallax
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }

  .animate-float,
  .animate-float-sm,
  .animate-float-slow,
  .animate-glow,
  .animate-spin-slow,
  .fab-whatsapp {
    animation: none !important;
  }
}