/* ═══════════════════════════════════════════════════════
   SHIAI PRO · Animations
   ═══════════════════════════════════════════════════════ */

/* ─── AOS (Animate on Scroll) ──────── */
[data-aos] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: .7s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
[data-aos].aos-animate { opacity: 1; }

[data-aos="fade-up"] { transform: translateY(48px); }
[data-aos="fade-up"].aos-animate { transform: translateY(0); }

[data-aos="fade-right"] { transform: translateX(-48px); }
[data-aos="fade-right"].aos-animate { transform: translateX(0); }

[data-aos="fade-left"] { transform: translateX(48px); }
[data-aos="fade-left"].aos-animate { transform: translateX(0); }

[data-aos="zoom-in"] { transform: scale(0.8); }
[data-aos="zoom-in"].aos-animate { transform: scale(1); }

[data-aos-delay="100"] { transition-delay: .1s; }
[data-aos-delay="200"] { transition-delay: .2s; }
[data-aos-delay="300"] { transition-delay: .3s; }
[data-aos-delay="400"] { transition-delay: .4s; }
[data-aos-delay="500"] { transition-delay: .5s; }
[data-aos-delay="700"] { transition-delay: .7s; }
[data-aos-delay="900"] { transition-delay: .9s; }

/* ─── Page load ─────────────────────── */
body { animation: page-in .4s ease both; }
@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── Header scroll highlight ─────── */
.header { transition: background .3s; }

/* ─── Mockup bars fill ──────────────── */
@keyframes bar-fill {
  from { height: 4px; }
  to   { height: var(--h); }
}
.mdb__bar { animation: bar-fill 1.2s cubic-bezier(.16,1,.3,1) both; }
.mdb__bar:nth-child(1) { animation-delay: .1s; }
.mdb__bar:nth-child(2) { animation-delay: .2s; }
.mdb__bar:nth-child(3) { animation-delay: .3s; }
.mdb__bar:nth-child(4) { animation-delay: .4s; }
.mdb__bar:nth-child(5) { animation-delay: .5s; }
.mdb__bar:nth-child(6) { animation-delay: .6s; }

/* ─── Belt ladder fill ──────────────── */
.bl__fill {
  animation: bar-width 1.4s cubic-bezier(.16,1,.3,1) both .8s;
}
@keyframes bar-width {
  from { width: 0; }
}

/* ─── Progress bar ──────────────────── */
.pm__bp-fill {
  animation: progress-fill 2s cubic-bezier(.16,1,.3,1) both 1s;
}
@keyframes progress-fill {
  from { width: 0; }
}

/* ─── Feature cards tilt ──────────── */
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.feat__screen:hover { transform: translateY(-6px) rotate(-0.5deg); }

/* ─── Nav link underline ─────────── */
.nav__link { position: relative; }


/* ─── Plan card shimmer on featured ── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.plan--featured .plan__name {
  background: linear-gradient(90deg, var(--brand-darker), var(--brand), var(--brand-darker));
  background-size: 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
  letter-spacing: 1px;
}

/* ─── Stat counter pulse ─────────── */
@keyframes pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.stats__big-num.popped { animation: pop .4s ease; }

/* ─── Blog card thumb zoom ─────────── */
.blog__thumb {
  overflow: hidden;
  transition: transform .4s ease;
}
.blog__card:hover .blog__thumb { transform: scale(1.03); }

/* ─── Forall card border glow ──────── */
.forall__card {
  position: relative;
  overflow: hidden;
}
.forall__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform .3s ease;
  transform-origin: left;
}
.forall__card:hover::before { transform: scaleX(1); }

/* ─── Integration item icon spin ───── */
.int__item:hover .int__icon {
  animation: spin-once .5s ease;
}
@keyframes spin-once {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}



/* ─── Hero title line reveal ─────── */
.hero__title {
  animation: title-reveal .8s cubic-bezier(.16,1,.3,1) .3s both;
}
@keyframes title-reveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__desc {
  animation: title-reveal .8s cubic-bezier(.16,1,.3,1) .45s both;
}
.hero__actions {
  animation: title-reveal .8s cubic-bezier(.16,1,.3,1) .6s both;
}
.hero__trust {
  animation: title-reveal .8s cubic-bezier(.16,1,.3,1) .75s both;
}
.hero__tag {
  animation: title-reveal .8s cubic-bezier(.16,1,.3,1) .15s both;
}

/* ─── Smooth scroll indicator on hero ── */
.hero::after {
  content: '';
  position: absolute;
  bottom: 80px; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 50px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.3));
  animation: scroll-indicate 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scroll-indicate {
  0%   { opacity: 0; transform: translateX(-50%) scaleY(0); transform-origin: top; }
  40%  { opacity: 1; transform: translateX(-50%) scaleY(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1); }
}

/* ─── Quote card featured pulse border ── */
.quote__card--featured {
  animation: border-pulse 3s ease-in-out infinite;
}
@keyframes border-pulse {
  0%,100% { box-shadow: none; }
  50%      { box-shadow: none; }
}