/* ============================================================
   Tech Minds — motion pass, phase one (2026-07)
   Loaded sitewide (47 static pages + WordPress via tm-motion.php).
   All pre-animation hidden states are scoped under html.motion,
   which is only ever added by motion.js when JS runs, GSAP loaded,
   and prefers-reduced-motion is NOT set. No JS -> fully visible.
   Animates transform/opacity only.
   ============================================================ */

/* ---------- D5: View Transitions API page fade (zero JS) ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: tm-vt-out .3s ease both; }
  ::view-transition-new(root) { animation: tm-vt-in .3s ease both; }
}
@keyframes tm-vt-out { to { opacity: 0; } }
@keyframes tm-vt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- D1: hero split-line masks (structure built by JS) ---------- */
html.motion .m-line { display: block; overflow: hidden; }
html.motion .m-line-in { display: block; }

/* ---------- D2: reveals ---------- */
html.motion .rv,
html.motion [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.2, .8, .2, 1), transform .6s cubic-bezier(.2, .8, .2, 1);
}
html.motion .rv.in,
html.motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- D3: magnetic CTA (movement is JS, emphasis is CSS) ---------- */
[data-magnetic] .m-label { display: inline-flex; align-items: center; gap: 8px; pointer-events: none; }
[data-magnetic]:focus-visible { outline: 2px solid #4F7EFF; outline-offset: 3px; }

/* ---------- D4: marquee (mechanism; no instance placed in phase one) ---------- */
[data-marquee] { display: block; overflow: hidden; }
[data-marquee] .m-track { display: flex; width: -moz-max-content; width: max-content; }
[data-marquee] .m-seg { display: flex; align-items: center; flex: 0 0 auto; }
html.motion [data-marquee] .m-track { animation: tm-marquee 38s linear infinite; }
[data-marquee]:hover .m-track,
[data-marquee]:focus-within .m-track { animation-play-state: paused; }
@keyframes tm-marquee { to { transform: translateX(-50%); } }

/* ---------- Reduced motion: fully static, fully visible ---------- */
@media (prefers-reduced-motion: reduce) {
  html.motion .rv,
  html.motion [data-reveal],
  html.motion .m-line-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.motion [data-marquee] .m-track { animation: none !important; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
  [data-magnetic], [data-magnetic] .m-label { transform: none !important; }
}