/* ============================================================
   SITE-15 — Animation Layer
============================================================ */

/* ---- Fade-in on load ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim-fade-up { animation: fadeUp .5s var(--ease) both; }
.anim-fade-in { animation: fadeIn .5s var(--ease) both; }
.anim-scale-in { animation: scaleIn .4s var(--ease) both; }

/* Stagger delays */
.anim-d1 { animation-delay: .08s; }
.anim-d2 { animation-delay: .16s; }
.anim-d3 { animation-delay: .24s; }
.anim-d4 { animation-delay: .32s; }
.anim-d5 { animation-delay: .4s; }
.anim-d6 { animation-delay: .48s; }

/* ---- Scroll-triggered (JS adds .is-visible) ---- */
[data-anim] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
[data-anim].is-visible {
  opacity: 1; transform: translateY(0);
}

/* ---- Hero map pulse ---- */
@keyframes pulse {
  0%, 100% { opacity: .6; r: 2; }
  50%      { opacity: 1; r: 3; }
}
.world-map .dot--highlight {
  animation: pulse 2s ease-in-out infinite;
}

/* ---- Counter animation (JS-driven) ---- */
.stat__num { transition: opacity .3s; }

/* ---- Country card entrance ---- */
.country-card {
  opacity: 0; transform: translateY(12px);
  transition: opacity .35s var(--ease), transform .35s var(--ease),
              box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.country-card.is-shown {
  opacity: 1; transform: translateY(0);
}

/* ---- FAQ accordion ---- */
.faq-a {
  transition: max-height .3s var(--ease);
}

/* ---- Nav link hover line ---- */
.mastnav a {
  position: relative;
}
.mastnav a::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 2px; background: var(--primary);
  transition: width var(--t) var(--ease);
}
.mastnav a:hover::after,
.mastnav a.is-active::after {
  width: 100%;
}

/* ---- Button hover glow ---- */
.btn--accent {
  position: relative;
  overflow: hidden;
}
.btn--accent::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transform: translateX(-100%);
  transition: transform .5s var(--ease);
}
.btn--accent:hover::after {
  transform: translateX(100%);
}

/* ---- Smooth search results transition ---- */
.country-grid {
  transition: opacity .25s var(--ease);
}
.country-grid.is-filtering {
  opacity: .5;
}

/* ---- Mobile menu animation ---- */
@keyframes menuSlide {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mobile-nav {
  animation: menuSlide .25s var(--ease);
}