/* =======================================================================
   TrainingAndPlacements — animations.css
   Reveal-on-scroll states are defined here (base .in-view rules live in
   main.css next to each component); this file holds the shared engine
   classes, magnetic-button effect, and micro-interactions.
   ======================================================================= */

[data-reveal],
.catalog-card,
.plan__item,
.process__step,
.outcomes__stat{
  will-change: opacity, transform;
}

/* Magnetic CTA button: nudges toward the cursor within a small radius. */
.btn--magnetic{ transition: transform .18s var(--ease), background .25s var(--ease); }

/* Header shadow state toggled by JS on scroll (transition already in main.css). */

/* Card corner-bracket sweep-in, staggered slightly via CSS custom property
   set inline by JS for a light "typeset" feel across the catalog grid. */
.catalog-card{ transition-delay: var(--stagger, 0ms); }
.plan__item{ transition-delay: var(--stagger, 0ms); }

/* Number count-up ticks: subtle scale pulse each time a digit updates. */
@keyframes count-pulse{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.04); }
  100%{ transform: scale(1); }
}
[data-count].is-counting{ animation: count-pulse .12s ease-out; display:inline-block; }

/* Mobile menu icon morphs into an "X" when open. */
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
.menu-toggle span{ transition: transform .25s var(--ease), opacity .2s var(--ease); }

/* Testimonial slide fade paired with the track's transform (main.css). */
.testimonial-slide{ transition: opacity .4s var(--ease); }