/* LineScout motion layer (2026-10-27). Loaded LAST on every page, after ui.css, so every sport moves the same way.
   motion.js adds the classes below; with JS off or "reduce motion" on, nothing here hides or moves anything.
   Rules: animate transform/opacity/width only, every count-up runs once, live scores never animate. */

/* scroll reveal: cards below the fold wait for the screen before their entrance plays */
.ls-wait { animation-play-state: paused !important; }
.ls-rv { opacity: 0; transform: translateY(14px); }
.ls-rv.ls-in { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: var(--ls-d, 0ms); }
.ls-bar-wait { width: 0 !important; }
.ls-col-wait { height: 0 !important; }
/* chance rings (home best bets): the arc fills around the number */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
.ls-ring-wait { --p: 0 !important; }
.ls-rows-wait > * { opacity: 0; }

/* odds that moved since you last looked: a short tint, then back to normal */
.ls-up, .ls-dn, .ls-mv { transition: none; border-radius: 6px; }
.ls-up { background: var(--win-dim) !important; color: var(--win) !important; }
.ls-dn { background: var(--loss-dim) !important; color: var(--loss) !important; }
.ls-mv { background: var(--info-dim) !important; }
.ls-fade { transition: background-color .9s var(--ease), color .9s var(--ease); }
.ls-arr { font-style: normal; font-size: 10px; margin-left: 3px; }

/* pick rows: a thin stripe on the left edge shows how likely the pick is (selected rows keep their green bar) */
.row[data-id][style*="--ls-tier"] { background-image: linear-gradient(var(--ls-tier), var(--ls-tier)); background-size: 3px 100%; background-repeat: no-repeat; }
.row[data-id]:hover { background-color: rgba(255,255,255,.02); }

/* top tabs: one pill slides between tabs */
.pk-tabs.ls-ind-on { position: relative; }
.pk-tabs.ls-ind-on a { position: relative; z-index: 1; }
.pk-tabs.ls-ind-on a.on { background: transparent; }
.ls-ind { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 9px; background: #F1F5F9; z-index: 0; pointer-events: none;
  transition: transform .38s var(--ease), width .38s var(--ease); }

/* bet slip: a chip flies from the + to the slip, and the count bumps */
.ls-fly { position: fixed; z-index: 9999; left: 0; top: 0; padding: 4px 10px; border-radius: var(--r-pill); background: var(--win); color: var(--bg);
  font: 700 12px/1.2 var(--font); pointer-events: none; box-shadow: var(--sh-2); will-change: transform, opacity; }
.ls-bump { animation: lsBump .45s var(--ease); }
@keyframes lsBump { 40% { transform: scale(1.4); } }
.ls-ring { width: 34px; height: 34px; flex: none; vertical-align: middle; margin-right: 8px; }
.ls-ring circle { fill: none; stroke-width: 4; }
.ls-ring .bg { stroke: rgba(255,255,255,.08); }
.ls-ring .fg { stroke: var(--win); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .9s var(--ease), stroke .3s; }
.ls-ringwrap { display: flex; align-items: center; }

/* a bet that just won: one green sweep across the row */
.ls-won { position: relative; overflow: hidden; }
.ls-won::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(78,238,82,.22), transparent);
  transform: translateX(-100%); animation: lsSweep 1.1s var(--ease) .2s forwards; }
@keyframes lsSweep { to { transform: translateX(100%); } }

/* charts that draw themselves */
.ls-draw { transition: stroke-dashoffset 1.6s var(--ease); }

/* results: each week tile flips in */
.ls-flip { animation: lsFlip .5s var(--ease) both; animation-delay: var(--ls-d, 0ms); transform-origin: 50% 0; }
@keyframes lsFlip { from { opacity: 0; transform: perspective(500px) rotateX(-80deg); } }

/* "Loading…" messages get the same shimmer as the page skeleton */
.ls-load { display: grid; gap: 8px; }
.ls-load .ls-sk { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--s2) 0%, rgba(255,255,255,.07) 50%, var(--s2) 100%);
  background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.ls-load .ls-sk:nth-child(1) { width: 55%; } .ls-load .ls-sk:nth-child(2) { width: 85%; } .ls-load .ls-sk:nth-child(3) { width: 40%; }
.ls-load .ls-lt { font-size: var(--fs-12); color: var(--t4); }

/* one empty-state style everywhere: icon, a line, the next step */
.empty.ls-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 22px 14px; }
.ls-empty .ls-eic { width: 30px; height: 30px; color: var(--t4); opacity: .8; }

/* LineScout mark drawing itself: the swoosh sweeps in, then the four bars rise */
.ls-mark { display: block; overflow: visible; }
.ls-mark .sw { clip-path: inset(0 100% 0 0); animation: lsSwoosh .9s var(--ease) .05s forwards; }
.ls-mark .br { transform-box: view-box; transform: scaleY(0); animation: lsBar .45s var(--ease) forwards; }
.ls-mark .b1 { transform-origin: 165px 58px; animation-delay: .7s; } .ls-mark .b2 { transform-origin: 175px 53px; animation-delay: .8s; }
.ls-mark .b3 { transform-origin: 186px 46px; animation-delay: .9s; } .ls-mark .b4 { transform-origin: 198px 38px; animation-delay: 1s; }
@keyframes lsSwoosh { to { clip-path: inset(0 0 0 0); } }
@keyframes lsBar { to { transform: scaleY(1); } }
#ptr .ls-mark { width: 26px; height: 20px; }
#ptr .ls-mark .sw, #ptr .ls-mark .br { animation-iteration-count: infinite; animation-duration: 1.4s; }

/* sticky game header: appears once the matchup card scrolls away, tinted with both teams' colors */
.ls-gbar { position: fixed; left: 0; right: 0; top: 0; z-index: 30; padding: calc(8px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
  display: flex; align-items: center; gap: 10px; transform: translateY(-110%); transition: transform .35s var(--ease);
  background: linear-gradient(90deg, var(--ls-ta, transparent), rgba(8,15,23,.0) 45%, rgba(8,15,23,.0) 55%, var(--ls-th, transparent)), rgba(8,15,23,.82);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid var(--line-strong); box-shadow: var(--sh-2); }
.ls-gbar.on { transform: none; }
.ls-gbar.under { padding-top: 8px; z-index: 29; }
.ls-gbar img { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--s2); }
.ls-gbar b { flex: 1; min-width: 0; font-size: var(--fs-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-gbar .chip { font: 600 12px var(--mono); color: var(--t2); white-space: nowrap; }
.ls-gbar .ls-gx { color: var(--t3); text-decoration: none; font-size: 18px; padding: 0 4px; }
.card.hero.ls-tint { background-image: linear-gradient(100deg, var(--ls-ta, transparent), transparent 40%, transparent 60%, var(--ls-th, transparent)); }

/* glass + float (welcome page and the home hero) */
.ls-glass { position: relative; transform-style: preserve-3d; will-change: transform; }
.ls-sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  background: radial-gradient(240px circle at var(--mx, 30%) var(--my, 0%), rgba(255,255,255,.09), transparent 60%); opacity: 0; transition: opacity .35s; }
.ls-glass:hover .ls-sheen, .ls-glass.ls-touch .ls-sheen { opacity: 1; }
.ls-float { animation: lsBob 6s ease-in-out infinite; animation-delay: var(--ls-fd, 0s); }
.ls-float { translate: 0 var(--ls-py, 0px); }
@keyframes lsBob { 0%, 100% { translate: 0 var(--ls-py, 0px); } 50% { translate: 0 calc(var(--ls-py, 0px) - 10px); } }
.ls-tile-lift { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.ls-tile-lift:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }

@media (prefers-reduced-motion: reduce) {
  /* tiered: big movement off; fills, counts, draws and color changes stay (see motion.js) */
  .ls-wait { animation-play-state: running !important; }
  .ls-rv { opacity: 1; transform: none; }
  .ls-float, .ls-flip, .ls-won::after, .ls-bump { animation: none; }
  .ls-ind, .ls-gbar { transition: none; }
  /* tokens.css cuts every animation/transition to .01ms under reduce motion; the gentle ones get their time back */
  .ls-mark .sw { animation-duration: .9s !important; } .ls-mark .br { animation-duration: .45s !important; }
  .ls-draw { transition-duration: 1.6s !important; }
  .ls-ring .fg { transition-duration: .9s !important; }
  .ls-fade { transition-duration: .9s !important; }
  .ls-load .ls-sk { animation-duration: 1.3s !important; animation-iteration-count: infinite !important; }
}

/* the ring sits inside slip tiles without a box of its own */
.ns-tiles .ls-ringwrap, .tiles .ls-ringwrap { padding: 0 !important; border: 0 !important; background: none !important; border-radius: 0 !important; display: flex; align-items: center; gap: 8px; }
.ns-tiles .ls-ring { width: 28px; height: 28px; margin-right: 0; }