/* ==========================================================================
   eInvoice.pk — animations
   Reveal classes only apply when JS adds .js to <html>, so content is
   always visible without JavaScript.
   ========================================================================== */

/* Scroll reveal: a short fade-up, staggered within a group */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Hero entrance: the one orchestrated moment on the page */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(24px) rotate(1.5deg); }
  to   { opacity: 1; transform: rotate(0); }
}
@keyframes chip-in {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: none; }
}
.js .hero-copy > * { animation: rise-in .7s cubic-bezier(.2, .7, .2, 1) both; }
.js .hero-copy > :nth-child(2) { animation-delay: .06s; }
.js .hero-copy > :nth-child(3) { animation-delay: .12s; }
.js .hero-copy > :nth-child(4) { animation-delay: .18s; }
.js .hero-copy > :nth-child(5) { animation-delay: .24s; }
.js .invoice-sheet { animation: sheet-in .9s .15s cubic-bezier(.2, .7, .2, 1) both; }
.js .chip-cloud { animation: chip-in .5s 1.1s both; }
.js .chip-report { animation: chip-in .5s 1.3s both; }

/* Sending pulse on the FBR status pill */
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(138, 83, 0, .25); }
  50%      { box-shadow: 0 0 0 6px rgba(138, 83, 0, 0); }
}
.invoice-sheet[data-stage="2"] .st-2 { animation: pulse-dot 1s ease-in-out infinite; }

/* Mini bar chart grows once */
@keyframes bar-grow { from { transform: scaleY(.1); } to { transform: none; } }
.js .mini-bars i { transform-origin: bottom; animation: bar-grow .6s cubic-bezier(.2, .7, .2, 1) both; }
.js .mini-bars i:nth-child(1) { animation-delay: 1.4s; }
.js .mini-bars i:nth-child(2) { animation-delay: 1.48s; }
.js .mini-bars i:nth-child(3) { animation-delay: 1.56s; }
.js .mini-bars i:nth-child(4) { animation-delay: 1.64s; }
.js .mini-bars i:nth-child(5) { animation-delay: 1.72s; }

/* FAQ answer opening */
@keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.faq-item[open] .faq-body { animation: faq-open .25s ease-out; }

/* Modal */
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.service-modal[open] { animation: modal-in .22s ease-out; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}