/* ============================================================
   ANIMATIONS — scroll reveal, hover micro-interactions, hero intro
   Pure CSS; triggered by .in-view class added via animations.js
   ============================================================ */

/* ---- Respect users who prefer reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---- Base reveal state (hidden until in view) ---- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: none; }

/* Directional variants */
.reveal.from-right { transform: translateX(60px); }
.reveal.from-left  { transform: translateX(-60px); }
.reveal.zoom-in    { transform: scale(.9); }
.reveal.in-view.from-right,
.reveal.in-view.from-left,
.reveal.in-view.zoom-in { transform: none; }

/* ---- Stagger: children of a .stagger container animate in sequence ---- */
.stagger > * {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity .6s cubic-bezier(.16,1,.3,1),
    transform .6s cubic-bezier(.16,1,.3,1);
}
.stagger.in-view > * { opacity: 1; transform: none; }
.stagger.in-view > *:nth-child(1) { transition-delay: .05s; }
.stagger.in-view > *:nth-child(2) { transition-delay: .12s; }
.stagger.in-view > *:nth-child(3) { transition-delay: .19s; }
.stagger.in-view > *:nth-child(4) { transition-delay: .26s; }
.stagger.in-view > *:nth-child(5) { transition-delay: .33s; }
.stagger.in-view > *:nth-child(6) { transition-delay: .40s; }
.stagger.in-view > *:nth-child(7) { transition-delay: .47s; }
.stagger.in-view > *:nth-child(8) { transition-delay: .54s; }
.stagger.in-view > *:nth-child(9) { transition-delay: .61s; }

/* ============ HERO INTRO ANIMATION (plays on load) ============ */
@keyframes heroUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: none; }
}
@keyframes barGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes slowZoom {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

.hero h1,
.hero p,
.hero-actions { opacity: 0; animation: heroUp .9s cubic-bezier(.16,1,.3,1) forwards; }
.hero h1 { animation-delay: .15s; }
.hero p  { animation-delay: .35s; }
.hero-actions { animation-delay: .55s; }

/* Animated gold accent bar on the hero */
.hero::after { transform-origin: top; animation: barGrow 1s cubic-bezier(.16,1,.3,1) .2s both; }

/* Slow Ken-Burns zoom on the hero background image (the vignette ::before defined in styles.css) */
.hero::before { animation: slowZoom 9s ease-out both; }

/* ============ MICRO-INTERACTIONS ============ */

/* Icon tiles gently rotate/pop on card hover */
.card .icon-tile,
.partner-card .icon-tile,
.consult-card .icon-tile,
.info-item .icon-tile {
  transition: transform .35s cubic-bezier(.16,1,.3,1), background .3s ease, color .3s ease;
}
.card:hover .icon-tile { transform: translateY(-3px) rotate(-6deg) scale(1.08); }
.consult-card:hover .icon-tile { transform: rotate(6deg) scale(1.08); }
.partner-card:hover .icon-tile { transform: scale(1.12); }

/* Buttons: animate the arrow icon on hover */
.btn .icon { transition: transform .25s ease; }
.btn:hover .icon { transform: translateX(-6px); } /* RTL: arrow points/moves leftward */

/* Stat number subtle pop when revealed */
.stats.in-view .stat .num { animation: heroUp .8s cubic-bezier(.16,1,.3,1) both; }

/* Floating animation for the about infinity logo */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.about-logo .icon { animation: float 4s ease-in-out infinite; }

/* Chips: pop in with a little bounce */
.chips.in-view .chip { animation: chipPop .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes chipPop {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}
.chips.in-view .chip:nth-child(1) { animation-delay: .05s; }
.chips.in-view .chip:nth-child(2) { animation-delay: .10s; }
.chips.in-view .chip:nth-child(3) { animation-delay: .15s; }
.chips.in-view .chip:nth-child(4) { animation-delay: .20s; }
.chips.in-view .chip:nth-child(5) { animation-delay: .25s; }
.chips.in-view .chip:nth-child(6) { animation-delay: .30s; }
.chips.in-view .chip:nth-child(7) { animation-delay: .35s; }
.chips.in-view .chip:nth-child(8) { animation-delay: .40s; }
.chips.in-view .chip:nth-child(9) { animation-delay: .45s; }

/* Navbar shadow appears once scrolled */
.navbar { transition: box-shadow .3s ease, background .3s ease; }
.navbar.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.07); }

/* CTA band shimmer on the gold button */
.cta-band .btn-gold { position: relative; overflow: hidden; }
.cta-band .btn-gold::before {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg);
}
.cta-band .btn-gold:hover::before { animation: shimmer .8s ease; }
@keyframes shimmer { to { left: 130%; } }