/* Motion: hero rise-in, the ECG trace, hiring blips, scroll reveals and photo drift.
   The trace and the blips run unconditionally, as they did in the design: a 1.4px line drawing
   itself and 7px dots pulsing, not content moving. Everything else sits inside a
   (prefers-reduced-motion: no-preference) block, so a reduced-motion viewer still gets the
   finished, static page: nothing here hides content on its own.
   motion.js adds .reveal to [data-reveal] elements and the children of [data-reveal-group],
   then .is-visible when they scroll into view (stagger via transition-delay set from script). */

@keyframes txmTrace {
  0% { stroke-dashoffset: 1300; }
  55% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1300; }
}
@keyframes txmBlip {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

.trace-path { animation: txmTrace 4.6s cubic-bezier(0.5, 0, 0.35, 1) 0.7s infinite; }
.team-blip { animation: txmBlip 2.6s ease-in-out infinite; }
.team-tile:nth-child(2) .team-blip { animation-delay: 0.4s; }
.team-tile:nth-child(3) .team-blip { animation-delay: 0.8s; }
.team-tile:nth-child(4) .team-blip { animation-delay: 1.2s; }
.team-tile:nth-child(5) .team-blip { animation-delay: 1.6s; }
.team-tile:nth-child(6) .team-blip { animation-delay: 2s; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes txmRise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }

  .rise { animation: txmRise 0.7s ease both; }
  .rise-slow { animation-duration: 0.9s; }

  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1),
      padding-left 0.25s ease,
      background 0.25s ease,
      box-shadow 0.2s ease,
      border-color 0.2s ease;
  }
  .reveal.is-visible { opacity: 1; transform: none; }

  /* Drift headroom: 34px of travel each way (DRIFT_PX in motion.js) without uncovering an edge. */
  [data-drift] img {
    height: calc(100% + 68px);
    margin-top: -34px;
    transition: transform 0.4s ease-out;
    will-change: transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}