/* ============================================
   ATAMAP ASSOCIATES — Motion Design
   Subtle animations to make the site feel alive:
   - Floating hero logo (gentle up-down)
   - Animated counter for trust-bar stats
   - Pulsing CTA buttons
   - Animated gradient background on hero
   - Card hover lift + glow
   - Marquee for partner countries
   - Reveal on scroll (already in animations.css, enhanced here)
   - Animated nav underline
   - Stagger fade-in for cards
   ============================================ */

/* ─── 1. Hero logo floating animation ─── */
@keyframes float-gentle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.home-hero__logo-img {
  animation: float-gentle 4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__logo-img,
  .home-hero__logo-wrap {
    animation: none !important;
  }
}

/* ─── 2. Animated hero gradient background ─── */
@keyframes hero-gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.home-hero {
  background: linear-gradient(135deg, var(--color-navy-900) 0%, #141b2d 25%, var(--color-navy-800) 50%, #141b2d 75%, var(--color-navy-900) 100%);
  background-size: 400% 400%;
  animation: hero-gradient-shift 18s ease infinite;
}

@media (prefers-reduced-motion: reduce) {
  .home-hero {
    animation: none;
  }
}

/* ─── 3. (Removed cta-pulse infinite animation — was distracting per audit) ─── */

/* ─── 4. Marquee for partner countries (trust bar) ─── */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.trust-bar__countries {
  overflow: hidden;
  position: relative;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.trust-bar__countries-list {
  display: inline-block;
  white-space: nowrap;
  padding: var(--space-2) 0;
  animation: marquee 30s linear infinite;
}

.trust-bar__countries:hover .trust-bar__countries-list {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .trust-bar__countries-list {
    animation: none;
  }
}

/* ─── 5. Animated counter for stats ─── */
.trust-bar__stat-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.trust-bar__stat-value.is-counting {
  animation: stat-pop 0.6s ease-out;
}

@keyframes stat-pop {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }
  60% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ─── 6. Card hover lift + glow ─── */
.card,
.hero-slide,
.value-card {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.35s ease;
  will-change: transform;
}

.card:hover,
.hero-slide:hover,
.value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(212, 175, 55, 0.2);
}

/* Subtle gold glow on hover for iconified cards */
.card:hover .card__icon,
.hero-slide:hover .hero-slide__eyebrow {
  color: var(--color-accent);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

.card__icon {
  transition: transform 0.3s ease, color 0.3s ease;
}

/* ─── 7. Animated nav underline ─── */
.nav__link {
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width 0.3s ease, left 0.3s ease;
}

.nav__link:hover::after,
.nav__link--active::after {
  width: 100%;
  left: 0;
}

.nav__link--active::after {
  width: 100%;
  left: 0;
}

/* ─── 8. Stagger fade-in for cards in a grid ─── */
@keyframes stagger-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal-stagger > * {
  opacity: 0;
}

.reveal-stagger.is-revealed > * {
  animation: stagger-fade-up 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Stagger delays — 8 children supported */
.reveal-stagger.is-revealed > *:nth-child(1) { animation-delay: 0.05s; }
.reveal-stagger.is-revealed > *:nth-child(2) { animation-delay: 0.12s; }
.reveal-stagger.is-revealed > *:nth-child(3) { animation-delay: 0.19s; }
.reveal-stagger.is-revealed > *:nth-child(4) { animation-delay: 0.26s; }
.reveal-stagger.is-revealed > *:nth-child(5) { animation-delay: 0.33s; }
.reveal-stagger.is-revealed > *:nth-child(6) { animation-delay: 0.40s; }
.reveal-stagger.is-revealed > *:nth-child(7) { animation-delay: 0.47s; }
.reveal-stagger.is-revealed > *:nth-child(8) { animation-delay: 0.54s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-stagger > * {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ─── 9. Section header reveal on scroll ─── */
.section-header {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.section-header.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ─── 10. Hero content entrance animation ─── */
@keyframes hero-content-rise {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-hero__content > * {
  opacity: 0;
  animation: hero-content-rise 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Stagger hero elements */
.home-hero__content > *:nth-child(1) { animation-delay: 0.1s; }  /* logo */
.home-hero__content > *:nth-child(2) { animation-delay: 0.25s; } /* tag */
.home-hero__content > *:nth-child(3) { animation-delay: 0.4s; }  /* h1 */
.home-hero__content > *:nth-child(4) { animation-delay: 0.55s; } /* creds */
.home-hero__content > *:nth-child(5) { animation-delay: 0.7s; }  /* tagline */
.home-hero__content > *:nth-child(6) { animation-delay: 0.85s; } /* subtitle */
.home-hero__content > *:nth-child(7) { animation-delay: 1.0s; }  /* founding */
.home-hero__content > *:nth-child(8) { animation-delay: 1.15s; } /* ctas */

@media (prefers-reduced-motion: reduce) {
  .home-hero__content > * {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ─── 11. Splash page — stronger logo glow on entry ─── */
@keyframes splash-logo-entrance {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(-20px);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

.splash-logo-img {
  animation: splash-logo-entrance 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
            logoGlow 3s ease-in-out 1s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .splash-logo-img {
    animation: none !important;
    opacity: 1;
  }
}

/* ─── 12. Mobile nav slide-in ─── */
.mobile-nav {
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-nav.is-open {
  transform: translateX(0);
}

/* Stagger mobile nav items on open */
.mobile-nav.is-open > * {
  animation: stagger-fade-up 0.4s ease-out forwards;
  opacity: 0;
}

.mobile-nav.is-open > *:nth-child(1) { animation-delay: 0.05s; }
.mobile-nav.is-open > *:nth-child(2) { animation-delay: 0.1s; }
.mobile-nav.is-open > *:nth-child(3) { animation-delay: 0.15s; }
.mobile-nav.is-open > *:nth-child(4) { animation-delay: 0.2s; }
.mobile-nav.is-open > *:nth-child(5) { animation-delay: 0.25s; }
.mobile-nav.is-open > *:nth-child(6) { animation-delay: 0.3s; }
.mobile-nav.is-open > *:nth-child(7) { animation-delay: 0.35s; }
.mobile-nav.is-open > *:nth-child(8) { animation-delay: 0.4s; }
.mobile-nav.is-open > *:nth-child(9) { animation-delay: 0.45s; }
.mobile-nav.is-open > *:nth-child(10) { animation-delay: 0.5s; }

/* ─── 13. Button press / hover micro-interactions ─── */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
  pointer-events: none;
}

.btn:active::before {
  width: 200%;
  height: 200%;
}

.btn:active {
  transform: scale(0.97);
}

/* ─── 14. Floating chat + emergency CTA subtle bobbing ─── */
@keyframes float-cta {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.chat-toggle,
.emergency-cta {
  animation: float-cta 3s ease-in-out infinite;
}

.emergency-cta {
  animation-delay: 1.5s;
}

@media (prefers-reduced-motion: reduce) {
  .chat-toggle,
  .emergency-cta {
    animation: none;
  }
}

/* ─── 15. Accent line animation on section headers ─── */
@keyframes accent-line-grow {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

.section-header.is-revealed .accent-line {
  animation: accent-line-grow 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.accent-line {
  display: inline-block;
  width: 60px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
  margin-bottom: var(--space-3);
  width: 0;
}

/* ─── 16. Newsletter input focus glow ─── */
.newsletter-banner__form .form-input:focus {
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
  border-color: var(--color-accent);
  outline: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* ─── 17. Service card icon pop on hover ─── */
.card:hover .card__icon svg,
.value-card:hover .value-card__icon svg {
  transform: rotate(-8deg) scale(1.1);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card__icon svg,
.value-card__icon svg {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── 18. Subtle particle / sparkle on hero ─── */
.hero-gradient::before,
.hero-gradient::after {
  animation-duration: 8s, 6s;
  animation-iteration-count: infinite, infinite;
}

/* ─── 19. Logo shimmer on hover (header/footer) ─── */
.site-header__logo,
.site-footer__logo {
  position: relative;
  overflow: hidden;
}

.site-header__logo::after,
.site-footer__logo::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.4) 50%, transparent 100%);
  transition: left 0.6s ease;
  pointer-events: none;
}

.site-header__logo:hover::after,
.site-footer__logo:hover::after {
  left: 150%;
}

/* ─── 20. Active nav link with dot indicator ─── */
.nav__link--active {
  position: relative;
}

.nav__link--active::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translateY(-50%) scale(0.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__link--active::before {
    animation: none;
  }
}

/* ─── 21. Service card image / icon glow when revealed ─── */
.reveal-stagger.is-revealed .card .card__icon {
  animation: icon-glow-in 0.8s ease-out;
  animation-fill-mode: backwards;
}

@keyframes icon-glow-in {
  0% {
    opacity: 0;
    filter: drop-shadow(0 0 0 transparent);
  }
  50% {
    opacity: 0.6;
    filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.5));
  }
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 0 transparent);
  }
}

/* ─── 22. Smooth page entrance — fade in body on load ─── */
@keyframes page-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body {
  animation: page-fade-in 0.4s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }
}

/* ─── 23. (Removed — was overriding Rule 10's hero-content-rise animation, causing logo to disappear) ─── */