/* ============================================================
   MPSP — animations.css
   Keyframes + AOS overrides + hover motion + entrance effects
   ============================================================ */

/* ── 1. KEYFRAME DEFINITIONS ───────────────────────────────── */

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

@keyframes floatYSlow {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

@keyframes pulse-ring {
  0%   { transform: scale(0.90); opacity: 0.8; }
  50%  { transform: scale(1.05); opacity: 0.4; }
  100% { transform: scale(0.90); opacity: 0.8; }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

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

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

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

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

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes borderPulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(27,79,138,0); }
  50%       { box-shadow: 0 0 0 8px rgba(27,79,138,0.18); }
}

@keyframes accentPulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(245,158,11,0); }
  50%       { box-shadow: 0 0 0 10px rgba(245,158,11,0.18); }
}

@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── 2. HERO SHAPE DECORATORS ──────────────────────────────── */

.hero-shape-1 {
  animation: floatY 5s ease-in-out infinite;
}

.hero-shape-2 {
  animation: floatY 7s ease-in-out infinite 1s;
}

/* extra decorative ring used on hero right column */
.hero-shape-ring {
  position:   absolute;
  bottom:     -30px;
  right:      -30px;
  width:      160px;
  height:     160px;
  border:     2px dashed rgba(255,255,255,0.20);
  border-radius: 50%;
  animation:  spin-slow 30s linear infinite;
}

/* ── 3. FLOATING BADGE (about section exp badge) ───────────── */

.about-exp-badge {
  animation: floatYSlow 4s ease-in-out infinite;
}

/* ── 4. STAT NUMBER ENTRANCE ───────────────────────────────── */

.stat-number.counted {
  animation: countUp 0.5s ease-out forwards;
}

/* ── 5. PLAY BUTTON PULSE ──────────────────────────────────── */

.play-btn {
  animation: accentPulse 2.5s ease-in-out infinite;
}

/* ── 6. HERO BADGE SHIMMER ─────────────────────────────────── */

.hero-badge {
  background-size:  200% auto;
  animation: shimmer 3.5s linear infinite;
}

/* ── 7. TOPBAR SOCIAL ICON ENTRANCE ───────────────────────── */

.mpsp-topbar .topbar-social:nth-child(1) { animation-delay: 0.0s; }
.mpsp-topbar .topbar-social:nth-child(2) { animation-delay: 0.1s; }
.mpsp-topbar .topbar-social:nth-child(3) { animation-delay: 0.2s; }
.mpsp-topbar .topbar-social:nth-child(4) { animation-delay: 0.3s; }
.mpsp-topbar .topbar-social:nth-child(5) { animation-delay: 0.4s; }

/* ── 8. NAVBAR SCROLLED TRANSITION ─────────────────────────── */

.mpsp-navbar { transition: box-shadow 0.30s ease, background 0.30s ease; }

/* ── 9. STEP NUMBER HOVER ──────────────────────────────────── */

.apply-step:hover .step-num {
  animation: borderPulse 1s ease-out 1;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

/* ── 10. FACILITY ITEM ICON ANIMATE ────────────────────────── */

.facility-item:hover .fac-num {
  background: var(--primary);
  color:      var(--white);
  transition: var(--transition);
}

/* ── 11. FOOTER SOCIAL HOVER ───────────────────────────────── */

.footer-social-link:hover {
  animation: scaleIn 0.2s ease-out;
}

/* ── 12. EVENT DATE BADGE BOUNCE ────────────────────────────── */

.event-card:hover .event-date-badge {
  transform:  scale(1.08);
  transition: transform 0.25s ease;
}

/* ── 13. PROGRAM CARD IMAGE ZOOM ────────────────────────────── */

.program-card .program-img-wrap img {
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.program-card:hover .program-img-wrap img {
  transform: scale(1.06);
}

/* ── 14. GALLERY HOVER OVERLAY FADE ────────────────────────── */

.gallery-grid-item::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: rgba(27,79,138,0.35);
  opacity:    0;
  transition: opacity 0.30s ease;
}

.gallery-grid-item:hover::after { opacity: 1; }

/* ── 15. PAGE BANNER ENTRANCE ───────────────────────────────── */

.mpsp-page-banner .banner-title {
  animation: fadeInUp 0.7s ease-out both;
}

.mpsp-page-banner .breadcrumb {
  animation: fadeInUp 0.7s ease-out 0.2s both;
}

/* ── 16. CLINICAL OVERLAY SLIDE ────────────────────────────── */

.clinical-overlay h5 { transition: transform 0.35s ease; }
.clinical-overlay p  { transition: opacity 0.35s ease 0.05s, transform 0.35s ease 0.05s; }

/* ── 17. WELCOME MODAL ENTRANCE ─────────────────────────────── */

#welcomeModal .modal-dialog {
  animation: scaleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── 18. PARTNER SLIDER FADE EDGES ──────────────────────────── */

.mpsp-partners .slick-track {
  display:     flex;
  align-items: center;
}

/* ── 19. BUTTON RIPPLE (CSS-only approximation) ─────────────── */

.btn-primary-custom,
.mpsp-navbar .btn-apply,
.btn-outline-custom {
  position: relative;
  overflow: hidden;
}

.btn-primary-custom::after,
.mpsp-navbar .btn-apply::after,
.btn-outline-custom::after {
  content:       '';
  position:      absolute;
  inset:         0;
  background:    rgba(255,255,255,0.15);
  border-radius: inherit;
  opacity:       0;
  transition:    opacity 0.25s ease;
}

.btn-primary-custom:hover::after,
.mpsp-navbar .btn-apply:hover::after,
.btn-outline-custom:hover::after { opacity: 1; }

/* ── 20. AOS GLOBAL OVERRIDES ───────────────────────────────── */

/* Ensure AOS uses our timing — matches main.js AOS.init options */
[data-aos] {
  transition-duration: 700ms !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Tighter delay steps */
[data-aos-delay="100"] { transition-delay: 100ms !important; }
[data-aos-delay="200"] { transition-delay: 200ms !important; }
[data-aos-delay="300"] { transition-delay: 300ms !important; }
[data-aos-delay="400"] { transition-delay: 400ms !important; }
[data-aos-delay="500"] { transition-delay: 500ms !important; }
[data-aos-delay="600"] { transition-delay: 600ms !important; }

/* AOS once — do NOT re-animate on scroll up */
[data-aos].aos-animate { transition-delay: inherit; }

/* Disable AOS for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    transition: none !important;
    transform:  none !important;
    opacity:    1   !important;
  }
  .hero-shape-1,
  .hero-shape-2,
  .hero-shape-ring,
  .about-exp-badge,
  .play-btn { animation: none !important; }
}