/* =========================================================
   SARDONYX AFRICA — Animation & Motion Layer
   Kept separate from style.css so motion can be tuned,
   disabled, or swapped independently of layout/visuals.
   ========================================================= */

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.25,.8,.25,1), transform .8s cubic-bezier(.25,.8,.25,1);
  will-change: transform, opacity;
}
.reveal.is-visible{ opacity: 1; transform: none; }

.reveal-scale{ opacity:0; transform: scale(.94); transition: opacity .7s ease, transform .7s cubic-bezier(.25,.8,.25,1); }
.reveal-scale.is-visible{ opacity:1; transform:none; }

.reveal-left{ opacity:0; transform: translateX(-36px); transition: opacity .8s ease, transform .8s cubic-bezier(.25,.8,.25,1); }
.reveal-left.is-visible{ opacity:1; transform:none; }

.reveal-right{ opacity:0; transform: translateX(36px); transition: opacity .8s ease, transform .8s cubic-bezier(.25,.8,.25,1); }
.reveal-right.is-visible{ opacity:1; transform:none; }

/* Stagger children of a revealed group */
.reveal-group.is-visible > *{ animation: staggerUp .7s cubic-bezier(.25,.8,.25,1) both; }
.reveal-group.is-visible > *:nth-child(1){ animation-delay: .05s; }
.reveal-group.is-visible > *:nth-child(2){ animation-delay: .14s; }
.reveal-group.is-visible > *:nth-child(3){ animation-delay: .23s; }
.reveal-group.is-visible > *:nth-child(4){ animation-delay: .32s; }
.reveal-group.is-visible > *:nth-child(5){ animation-delay: .41s; }
.reveal-group.is-visible > *:nth-child(6){ animation-delay: .5s; }
.reveal-group:not(.is-visible) > *{ opacity: 0; }

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

@keyframes fadeUp{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform:none; }
}

/* ---------- Hero ---------- */
@keyframes heroZoom{
  from{ transform: scale(1.14); }
  to{ transform: scale(1); }
}
@keyframes heroZoomSlow{
  from{ transform: scale(1.1); }
  to{ transform: scale(1.0); }
}
@keyframes scrollLine{
  0%{ top:-100%; }
  60%{ top:100%; }
  100%{ top:100%; }
}

.hero-inner > *{ animation: fadeUp .9s cubic-bezier(.25,.8,.25,1) both; }
.hero-inner > *:nth-child(1){ animation-delay: .05s; }
.hero-inner > *:nth-child(2){ animation-delay: .18s; }
.hero-inner > *:nth-child(3){ animation-delay: .32s; }
.hero-inner > *:nth-child(4){ animation-delay: .46s; }
.hero-inner > *:nth-child(5){ animation-delay: .6s; }

/* Drifting sardonyx bands used behind hero / section backdrops */
.drift-band{ animation: driftBand 22s ease-in-out infinite alternate; }
.drift-band-slow{ animation: driftBand 34s ease-in-out infinite alternate-reverse; }
@keyframes driftBand{
  0%{ transform: translate3d(0,0,0) rotate(0deg); }
  50%{ transform: translate3d(2%,-3%,0) rotate(2deg); }
  100%{ transform: translate3d(-2%,2%,0) rotate(-1.5deg); }
}

/* ---------- Marquee ---------- */
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.marquee-strip:hover .marquee-track{ animation-play-state: paused; }

/* ---------- Ambient blobs (band-inspired gradients) ---------- */
.ambient-blob{
  position:absolute; border-radius:50%; filter: blur(60px); z-index:0; pointer-events:none;
  animation: floaty 14s ease-in-out infinite;
}
@keyframes floaty{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-16px, 20px) scale(1.06); }
}

/* ---------- Buttons / icons ---------- */
@keyframes pulseDot{
  0%{ box-shadow: 0 0 0 0 rgba(193,94,55,.5); }
  70%{ box-shadow: 0 0 0 10px rgba(193,94,55,0); }
  100%{ box-shadow: 0 0 0 0 rgba(193,94,55,0); }
}
.hero-tag .dot{ animation: pulseDot 2.4s ease-out infinite; }

/* Spin-in for icon badges */
@keyframes spinIn{
  from{ opacity:0; transform: rotate(-90deg) scale(.6); }
  to{ opacity:1; transform:none; }
}
.card:hover .card-icon{ animation: spinIn .5s cubic-bezier(.25,.8,.25,1); }

/* Number count-up utility (value swapped via JS, animation just eases opacity) */
.stat-num{ animation: fadeUp .8s ease both; }

/* Loading-in for tab panels already handled by fadeUp in style.css */

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-group > *{ opacity:1 !important; transform:none !important; }
  .hero-media img{ transform:none !important; }
}