/* The Live Tracker animation on the home page: a scripted tour of the real field tracker, shot with a moving camera.
   It is built the way the Dashboards animation is (dash-anim.css / .js): the stage, the 1440-wide "world", the camera, the
   cursor and the closing words are that animation's own classes (.da-*). What the camera films is the tracker itself, running
   in a frame (tracker-anim-frame.html: the tracker's own page and styles, with an invented job and nothing saved or synced).
   The five coloured bars of the tracker mark are the first and last thing on screen: they fly down into the rings of the home
   screen and, at the end, leave them and gather into the mark beside "Live Tracker". */
.ta-ifr { position: absolute; left: 50px; top: 0; width: 1340px; height: 900px; border: 0; border-radius: 22px; box-shadow: 0 24px 70px rgba(50,40,110,.22), 0 0 0 1px rgba(120,100,200,.12); background: #efecff; pointer-events: none; display: block; transition: opacity 1.4s ease, filter 1.4s ease; }
.ta-fx { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; pointer-events: none; z-index: 3; }
.ta-sfx { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.ta-fl { position: absolute; box-sizing: border-box; border: 0 solid; border-radius: 999px; will-change: left, top, width, height; }
.da-world.ta-back .ta-ifr { opacity: .3; filter: blur(5px); }
.ta-toast { position: absolute; z-index: 70; padding: 12px 20px; border-radius: 14px; background: #16141f; color: #fff; font: 600 17px/1.2 var(--font); opacity: 0; transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1); transform: translateY(10px); pointer-events: none; white-space: nowrap; }
.ta-toast.on { opacity: 1; transform: none; }

/* the closing words: the Live Tracker end card (symbol is the tracker's five bars) */
.da-words > span.long { font-size: clamp(14px, 5.3cqw, 84px); max-width: 14ch; justify-self: center; }
.endcard.lt .fw { background: linear-gradient(90deg, #4299e1, #9f7aea 36%, #48bb78 58%, #38b2ac 76%, #ed8936); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.endcard.lt .sym { width: .9em; height: .76em; margin: -.4em 0 0 .18em; filter: drop-shadow(0 .05em .08em rgba(70,50,140,.2)); }
.endcard.lt .fin { translate: -.54em 0; } .da.static .endcard.lt .fin { translate: -.54em 0; }
.endcard.lt.now .sym { transition: none; }
.da.static .ta-ifr { opacity: .16; filter: blur(6px); }
/* paused / reduced-motion view: the words sit in a row, so "8X faster…" gets a line of its own */
.da.static .da-words > span.long { flex: 0 0 100%; max-width: none; }