/* Home page motion (#4176), matched to the Figma "/main" frame (#4182).
   Every animation loops on the frame's one 10.413s timeline (--loop), as the
   Figma does: the tracks themselves are generated from its motion export into
   home-figma-motion.css, one class per animated node (.f-<node id>). Only
   opacity and transforms (translate, scale, rotate) animate. With
   prefers-reduced-motion: reduce nothing moves: the page shows the frame's
   resting state, and the h1 reads "Every PR [ cross-checked ]". The hero's
   "Pause motion" button stops every loop on the page (WCAG 2.2.2): these CSS
   tracks the same way off-screen sections are paused, and the integrations
   flow (home-loop.js) at its current step. The h1's word swap keeps the
   Figma's timing, but its offsets are measured from the rendered words
   (home-motion.js), since the Figma's pixel offsets assume its own text
   metrics. */
:root{--loop:10.413s;--ease-out:cubic-bezier(.22,1,.36,1)}

/* the generated tracks animate these numbers; each node's transform reads them */
@property --fx{syntax:"<number>";inherits:false;initial-value:0}
@property --fy{syntax:"<number>";inherits:false;initial-value:0}
@property --fr{syntax:"<number>";inherits:false;initial-value:0}
@property --fsx{syntax:"<number>";inherits:false;initial-value:1}
@property --fsy{syntax:"<number>";inherits:false;initial-value:1}
[class*=" f-"],[class^="f-"]{translate:calc(var(--fx) * 1px) calc(var(--fy) * 1px);scale:var(--fsx) var(--fsy);rotate:calc(var(--fr) * 1rad)}

.hx-tag .br,.hx-tag .lead{display:inline-block}
.hx-tag .tw{position:relative;display:inline-grid;justify-items:center}
.hx-tag .w{grid-area:1/1;white-space:nowrap}
/* until the script has measured the words, only the first one sizes the box */
.hx-tag:not(.rot) :is(.w2,.w3){position:absolute}
.hx-tag .w2,.hx-tag .w3,.hx-tag .sword{opacity:0}
.hx-tag .sword{position:absolute;left:0;top:9px;width:2px;height:64px;background:#34d399;box-shadow:0 0 16px rgba(0,255,135,.8)}

/* pause button: home-motion.js shows it (.on) when there is motion to pause,
   and toggles .motion-paused on the root; no script, no button */
.mo-pause{display:none}
.mo-pause:focus-visible{outline:2px solid var(--brand-light);outline-offset:2px}

@media (prefers-reduced-motion:no-preference){
  /* the pause switch: the hero's bottom-right corner; in the flow on phones */
  .mo-pause.on{position:absolute;right:16px;bottom:12px;z-index:3;display:inline-flex;padding:6px 12px;border:1px solid rgba(110,231,183,.25);border-radius:999px;background:rgba(5,14,11,.7);color:#a7c9bb;font:500 12px var(--font-mono);cursor:pointer}
  @media (max-width:899px){.mo-pause.on{position:relative;right:auto;bottom:auto;display:flex;width:max-content;margin:0 auto 24px}}

  /* the h1's bracketed word: cross-checked -> prompt-ready -> verified, the
     brackets closing round each one and a light sword crossing the swap */
  /* "Every PR" travels with its bracket, as the Figma's sentence does */
  .hx-tag.rot .lead{animation:tg-lead var(--loop) linear infinite}
  .hx-tag.rot .br-r{animation:tg-br var(--loop) linear infinite}
  .hx-tag.rot .w1{animation:tg-w1 var(--loop) linear infinite}
  .hx-tag.rot .w2{animation:tg-w2 var(--loop) linear infinite}
  .hx-tag.rot .w3{animation:tg-w3 var(--loop) linear infinite}
  .hx-tag.rot .sword{animation:tg-sword var(--loop) linear infinite,tg-sword-o var(--loop) linear infinite}

  /* each node's title turns green with its highlight */
  .rn-1 b::after,.rn-1>span:last-child::after{animation:f4695-opacity var(--loop) linear infinite}
  .rn-2 b::after,.rn-2>span:last-child::after{animation:f4706-opacity var(--loop) linear infinite}
  .rn-3 b::after,.rn-3>span:last-child::after{animation:f4724-opacity var(--loop) linear infinite}
  .rn-4 b::after,.rn-4>span:last-child::after{animation:f4715-opacity var(--loop) linear infinite}
  .rn-5 b::after,.rn-5>span:last-child::after{animation:f4733-opacity var(--loop) linear infinite}

  /* off-screen sections pause (home-motion.js), and everything does when
     the visitor turns on the hero's pause switch */
  .mo-off *,.mo-off *::before,.mo-off *::after,.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
}

@keyframes tg-lead{0%,15.918%,49.563%,65.918%,99.563%,100%{translate:var(--d1) 0}16.604%,32.147%,66.604%,82.147%{translate:var(--d2) 0}32.834%,48.814%,82.834%,98.814%{translate:var(--d3) 0}}
@keyframes tg-br{0%,15.918%,49.563%,65.918%,99.563%,100%{translate:calc(-1 * var(--d1)) 0}16.604%,32.147%,66.604%,82.147%{translate:calc(-1 * var(--d2)) 0}32.834%,48.814%,82.834%,98.814%{translate:calc(-1 * var(--d3)) 0}}
@keyframes tg-w1{0%,15.918%,49.563%,65.918%,99.563%,100%{opacity:1}16.604%,48.814%,66.604%,98.814%{opacity:0}}
@keyframes tg-w2{0%,15.918%,32.834%,65.918%,82.834%,100%{opacity:0}16.604%,32.147%,66.604%,82.147%{opacity:1}}
@keyframes tg-w3{0%,32.147%,49.563%,82.147%,99.563%,100%{opacity:0}32.834%,48.814%,82.834%,98.814%{opacity:1}}
@keyframes tg-sword{0%,15.762%,50%,65.762%,100%{translate:var(--d1) 0}16.792%,66.792%{translate:calc(var(--W) - var(--d2)) 0}31.991%,81.991%{translate:var(--d2) 0}33.021%,83.021%{translate:calc(var(--W) - var(--d3)) 0}48.658%,98.658%{translate:var(--d3) 0}49.75%,99.75%{translate:calc(var(--W) - var(--d1)) 0}}
@keyframes tg-sword-o{0%,15.73%,16.854%,31.96%,33.084%,48.627%,49.813%,65.73%,66.854%,81.96%,83.084%,98.627%,99.813%,100%{opacity:0}15.793%,16.76%,32.022%,32.99%,48.689%,49.719%,65.793%,66.76%,82.022%,82.99%,98.689%,99.719%{opacity:1}}