/* ============================================================
   Skycap Loans — Scroll Animation Styles
   Triggered via Intersection Observer in animations.js
   Applies to: index.html, requirements.html, contacts.html
   ============================================================ */

/* Base hidden state — elements start invisible and slightly offset.
   The .animated class is added by JS when element enters viewport. */
[data-animate] {
  opacity: 0;
  will-change: opacity, transform;
  /* Respect user preference for reduced motion */
}

@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate].animated {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Keyframe definitions ──────────────────────────────────── */

@keyframes skycap-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes skycap-fade-down {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0);     }
}

@keyframes skycap-fade-left {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0);    }
}

@keyframes skycap-fade-right {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0);     }
}

@keyframes skycap-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Animated state — applied by JS ───────────────────────── */

[data-animate="fade-up"].animated {
  animation: skycap-fade-up 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

[data-animate="fade-down"].animated {
  animation: skycap-fade-down 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

[data-animate="fade-left"].animated {
  animation: skycap-fade-left 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

[data-animate="fade-right"].animated {
  animation: skycap-fade-right 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

[data-animate="fade-in"].animated {
  animation: skycap-fade-in 0.7s ease forwards;
}

/* ── Stagger delays for sibling groups ────────────────────── */
/* Applied via data-delay attribute by JS */
[data-delay="1"] { animation-delay: 0.08s  !important; }
[data-delay="2"] { animation-delay: 0.16s  !important; }
[data-delay="3"] { animation-delay: 0.24s  !important; }
[data-delay="4"] { animation-delay: 0.32s  !important; }
[data-delay="5"] { animation-delay: 0.40s  !important; }
[data-delay="6"] { animation-delay: 0.48s  !important; }