/* ============================================================
TPG – Animations (separate file)
Only motion/transition rules, no layout responsibilities
All styles prefixed with tpg-
============================================================ */

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .tpg-animateIn,
  .tpg-progItem{
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ---------- Generic: soft section reveal ---------- */
/* Add class="tpg-animateIn" to any .tpg-card or section block */
.tpg-animateIn{
  opacity: 0;
  transform: translateY(10px);
  animation: tpgFadeUp 520ms ease-out forwards;
}

@keyframes tpgFadeUp{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Optional stagger helpers (if you want a sequence) */
.tpg-animateDelay-1{ animation-delay: 80ms; }
.tpg-animateDelay-2{ animation-delay: 160ms; }
.tpg-animateDelay-3{ animation-delay: 240ms; }
.tpg-animateDelay-4{ animation-delay: 320ms; }
.tpg-animateDelay-5{ animation-delay: 400ms; }


/* ---------- Programs list: “fall in place” ---------- */
/* Works without JS by using nth-child delays */
/* ============================================================
TPG – Animations (scroll-triggered)
============================================================ */

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .tpg-progItem{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Start state: only if the list is marked for scroll animation */
/* ---------- Drop-in list (scroll-triggered) ---------- */
/* Works for ANY container that has data-tpg-animate="drop" */

[data-tpg-animate="drop"] > *{
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 520ms cubic-bezier(.2,.8,.2,1),
              transform 520ms cubic-bezier(.2,.8,.2,1);
}

[data-tpg-animate="drop"].is-visible > *{
  opacity: 1;
  transform: translateY(0);
}

/* Stagger */
[data-tpg-animate="drop"].is-visible > *:nth-child(1){ transition-delay: 80ms; }
[data-tpg-animate="drop"].is-visible > *:nth-child(2){ transition-delay: 460ms; }
[data-tpg-animate="drop"].is-visible > *:nth-child(3){ transition-delay: 540ms; }
[data-tpg-animate="drop"].is-visible > *:nth-child(4){ transition-delay: 620ms; }
[data-tpg-animate="drop"].is-visible > *:nth-child(5){ transition-delay: 700ms; }
[data-tpg-animate="drop"].is-visible > *:nth-child(6){ transition-delay: 880ms; }
[data-tpg-animate="drop"].is-visible > *:nth-child(7){ transition-delay: 960ms; }
[data-tpg-animate="drop"].is-visible > *:nth-child(8){ transition-delay: 1040ms; }


/* ---------- Testimonials rail: subtle momentum feel ---------- */
/* Keeps it lightweight; user scrolls, but it feels smoother */
.tpg-testiRail{
  scroll-behavior: smooth;
}

/* Optional: card hover lift (desktop only) */
@media (hover:hover){
  .tpg-testiCard{
    transition: transform 180ms ease, box-shadow 180ms ease;
  }
  .tpg-testiCard:hover{
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  }
}