/* Next Generation Tech — shared keyframes & motion utility classes */

/* Scroll reveal (paired with reveal.js IntersectionObserver) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { transition-delay: calc(var(--i, 0) * 80ms); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Typing caret for the rotating services line */
.type-caret { display: inline-block; width: 2px; margin-left: 2px; background: var(--glow); animation: caretBlink 1s steps(1) infinite; }
@keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .type-caret { animation: none; opacity: 1; } }

/* Self-drawing timeline line (transform-based, not stroke-dashoffset).
   Vertical (scaleY) on the stacked mobile layout, horizontal (scaleX) once the steps
   go side-by-side at desktop width — see home.css's matching .timeline-track breakpoint. */
.timeline-line { transform: scaleY(0); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.timeline-line.in { transform: scaleY(1); }
@media (min-width: 768px) {
  .timeline-line { transform: scaleX(0); }
  .timeline-line.in { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .timeline-line { transform: scaleY(1) scaleX(1); transition: none; }
}

/* Floating logo breathe (hero) */
@keyframes ngtFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero-logo-float { animation: ngtFloat 5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hero-logo-float { animation: none; } }