/* ============================================
   Animations & micro-interactions
   ============================================ */

html {
  scroll-behavior: smooth;
}

/* ----- Keyframes ----- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

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

@keyframes pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 14px rgba(196, 30, 58, 0.4); }
  50% { transform: scale(1.03); box-shadow: 0 8px 24px rgba(196, 30, 58, 0.5); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

@keyframes floatShape {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.06; }
  33% { transform: translate(15px, -15px) scale(1.05); opacity: 0.08; }
  66% { transform: translate(-10px, 10px) scale(0.98); opacity: 0.05; }
}

/* Country flags orbit around globe */
@keyframes orbit-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ----- Hero entrance (staggered) ----- */
.hero.hero-times .hero-inner .hero-tagline,
.hero-ea .hero-ea-content .hero-tagline {
  animation: heroFadeIn 0.7s ease-out forwards;
  opacity: 0;
}

.hero.hero-times .hero-inner .hero-headline,
.hero-ea .hero-ea-content .hero-headline {
  animation: heroFadeIn 0.8s ease-out 0.15s forwards;
  opacity: 0;
}

.hero.hero-times .hero-inner .hero-subline,
.hero-ea .hero-ea-content .hero-subline {
  animation: heroFadeIn 0.8s ease-out 0.3s forwards;
  opacity: 0;
}

.hero.hero-times .hero-inner .hero-buttons,
.hero-ea .hero-ea-content .hero-buttons {
  animation: heroFadeIn 0.8s ease-out 0.45s forwards;
  opacity: 0;
}

/* Hero floating shapes (subtle) ----- */
.hero.hero-times::before,
.hero.hero-times::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
  animation: floatShape 12s ease-in-out infinite;
}

.hero.hero-times::before {
  width: 280px;
  height: 280px;
  top: 10%;
  right: 5%;
}

.hero.hero-times::after {
  width: 180px;
  height: 180px;
  bottom: 15%;
  left: 8%;
  animation-delay: -4s;
}

/* ----- Scroll reveal ----- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* Stagger children */
.reveal-stagger > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.25s; }
.reveal-stagger > *:nth-child(6) { transition-delay: 0.3s; }
.reveal-stagger > *:nth-child(7) { transition-delay: 0.35s; }
.reveal-stagger > *:nth-child(8) { transition-delay: 0.4s; }
.reveal-stagger > *:nth-child(9) { transition-delay: 0.45s; }
.reveal-stagger > *:nth-child(10) { transition-delay: 0.5s; }
.reveal-stagger > *:nth-child(11) { transition-delay: 0.55s; }
.reveal-stagger > *:nth-child(12) { transition-delay: 0.6s; }

/* ----- Button hover effects ----- */
.btn-hero-primary {
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s !important;
  box-shadow: 0 4px 16px rgba(196, 30, 58, 0.35);
}

.btn-hero-primary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 10px 28px rgba(196, 30, 58, 0.45) !important;
}

.btn-hero-secondary {
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.btn-hero-secondary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
}

.navbar-custom .btn-cta,
.btn-primary-custom,
.btn-support-cta {
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s !important;
}

.navbar-custom .btn-cta:hover,
.btn-primary-custom:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(196, 30, 58, 0.35);
}

.btn-support-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(1, 33, 105, 0.35);
}

/* ----- Card hover (lift + glow) ----- */
.why-card {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.3s !important;
}

.why-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(1, 33, 105, 0.15) !important;
}

.why-card:hover .why-card-icon {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

.why-card-icon {
  transition: transform 0.3s ease;
}

.support-card {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.3s !important;
}

.support-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 36px rgba(196, 30, 58, 0.12) !important;
  border-color: rgba(196, 30, 58, 0.25) !important;
}

.cost-preview-card {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, color 0.3s !important;
}

.cost-preview-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1) !important;
}

.testimonial-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.3s !important;
}

.testimonial-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(1, 33, 105, 0.2) !important;
}

.university-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s, color 0.25s !important;
}

.university-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(196, 30, 58, 0.12) !important;
}

.step-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s !important;
}

.step-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(196, 30, 58, 0.1) !important;
  border-color: rgba(196, 30, 58, 0.2) !important;
}

/* ----- Nav link hover ----- */
.navbar-custom .nav-link {
  transition: color 0.25s, background 0.25s, transform 0.2s !important;
}

.navbar-custom .nav-link:hover {
  transform: translateY(-1px);
}

/* ----- CTA strip button ----- */
.cta-strip .btn-cta-light,
.cta-strip .btn-light {
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s !important;
}

.cta-strip .btn-cta-light:hover,
.cta-strip .btn-light:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15) !important;
}

/* ----- Float buttons ----- */
.float-contact .btn-whatsapp,
.float-contact .btn-call {
  transition: transform 0.3s, box-shadow 0.3s !important;
}

.float-contact .btn-whatsapp:hover,
.float-contact .btn-call:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

/* ----- Top bar ----- */
.btn-top-cta {
  transition: transform 0.25s, background 0.25s !important;
}

.btn-top-cta:hover {
  transform: scale(1.05);
}

/* ----- Form submit button ----- */
.btn-form-submit {
  transition: transform 0.25s, background 0.25s, box-shadow 0.25s !important;
}

.btn-form-submit:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(196, 30, 58, 0.35);
}

/* ----- Section heading reveal ----- */
.reveal-heading .section-heading,
.reveal-heading .section-subheading {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-heading.revealed .section-heading,
.reveal-heading.revealed .section-subheading {
  opacity: 1;
  transform: translateY(0);
}

.reveal-heading.revealed .section-subheading {
  transition-delay: 0.1s;
}