/* ==========================================================================
   CUCSR — Animations
   ========================================================================== */

/* ---- Scroll reveal (used sparingly, staggered by JS via --d) ---- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-group.is-visible .reveal-item {
  opacity: 1; transform: translateY(0);
}
.reveal-item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

/* ---- Hero: node path draw-in ---- */
@keyframes draw-path {
  from { stroke-dashoffset: var(--len, 1000); }
  to { stroke-dashoffset: 0; }
}
@keyframes pop-node {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.hero-graphic path.path-line {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  animation: draw-path 1.6s var(--ease-out) forwards;
  animation-delay: 0.2s;
}
.hero-graphic circle.node {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  animation: pop-node 0.5s var(--ease-out) forwards;
}
.hero-graphic .fade-in-up {
  opacity: 0;
  animation: fade-up 0.7s var(--ease-out) forwards;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-title { opacity: 0; animation: fade-up 0.8s var(--ease-out) forwards; animation-delay: 0.1s; }
.hero-sub   { opacity: 0; animation: fade-up 0.8s var(--ease-out) forwards; animation-delay: 0.25s; }
.hero-cta   { opacity: 0; animation: fade-up 0.8s var(--ease-out) forwards; animation-delay: 0.4s; }
.hero-stats { opacity: 0; animation: fade-up 0.8s var(--ease-out) forwards; animation-delay: 0.55s; }

/* ---- Marquee (industries / professions tag scroller) ---- */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: var(--sp-2);
  animation: marquee-scroll 32s linear infinite;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
.marquee-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}

/* ---- Progress ring for stats / accordion chevron already handled in components ---- */

@media (prefers-reduced-motion: reduce) {
  .hero-graphic path.path-line { animation: none; stroke-dashoffset: 0; }
  .hero-graphic circle.node { animation: none; opacity: 1; transform: none; }
  .hero-title, .hero-sub, .hero-cta, .hero-stats { animation: none; opacity: 1; }
  .marquee-track { animation: none; }
  .reveal { opacity: 1; transform: none; }
}