/* FLICKUPSCORE MOTION SYSTEM
   Broadcast-inspired movement with progressive enhancement and reduced-motion support. */
:root {
  --fs-motion-ease: cubic-bezier(.2,.72,.18,1);
  --fs-motion-fast: 180ms;
  --fs-motion-medium: 520ms;
  --fs-motion-slow: 900ms;
}

/* Subtle page entrance and top-of-page progress rail. */
html.fs-motion-ready body { animation: fs-page-enter 640ms var(--fs-motion-ease) both; }
.fs-scroll-progress {
  position: fixed;
  z-index: 1200;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--fs-lime);
  box-shadow: 0 0 14px rgba(196,255,9,.5);
  will-change: transform;
}
.fs-header { transition: box-shadow 260ms ease, background-color 260ms ease, border-color 260ms ease; }
.fs-header.is-scrolled { background: rgba(3,5,10,.985); border-bottom-color: rgba(196,255,9,.28); box-shadow: 0 12px 36px rgba(0,0,0,.34); }

/* Scroll reveals: content remains visible when JavaScript or observers are unavailable. */
html.fs-motion-ready [data-fs-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(.992);
  transition: opacity 720ms var(--fs-motion-ease), transform 820ms var(--fs-motion-ease);
  transition-delay: var(--fs-reveal-delay, 0ms);
}
html.fs-motion-ready [data-fs-reveal].fs-in-view {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}
html.fs-motion-ready [data-fs-reveal="left"] { transform: translate3d(-34px,0,0); }
html.fs-motion-ready [data-fs-reveal="right"] { transform: translate3d(34px,0,0); }
html.fs-motion-ready [data-fs-reveal="zoom"] { transform: translate3d(0,16px,0) scale(.94); }
html.fs-motion-ready [data-fs-reveal].fs-in-view[data-fs-reveal="left"],
html.fs-motion-ready [data-fs-reveal].fs-in-view[data-fs-reveal="right"],
html.fs-motion-ready [data-fs-reveal].fs-in-view[data-fs-reveal="zoom"] { transform: translate3d(0,0,0) scale(1); }

/* Hero choreography: copy, geometry and title enter in separate beats. */
.fs-hero-copy > .fs-kicker,
.fs-hero-copy > h1,
.fs-hero-copy > p,
.fs-hero-copy > .fs-hero-actions,
.fs-hero-copy > .fs-hero-footnote { animation: fs-hero-rise 760ms var(--fs-motion-ease) both; }
.fs-hero-copy > .fs-kicker { animation-delay: 90ms; }
.fs-hero-copy > h1 { animation-delay: 190ms; }
.fs-hero-copy > p { animation-delay: 300ms; }
.fs-hero-copy > .fs-hero-actions { animation-delay: 410ms; }
.fs-hero-copy > .fs-hero-footnote { animation-delay: 520ms; }
.fs-art-ring { animation: fs-ring-turn 38s linear infinite; transform-origin: center; }
.fs-art-checker { animation: fs-checker-drift 18s ease-in-out infinite alternate; }
.fs-art-ball { animation: fs-ball-float 6.5s ease-in-out infinite; }
.fs-art-cross { animation: fs-cross-turn 17s ease-in-out infinite; }
.fs-hero-grid { animation: fs-grid-breathe 9s ease-in-out infinite alternate; }
.fs-hero-side { animation: fs-side-enter 900ms 420ms var(--fs-motion-ease) both; }

/* Moving ticker: JS duplicates its text so the crawl loops without a blank gap. */
.fs-ticker-copy { min-width: 0; overflow: hidden; white-space: nowrap; }
.fs-ticker-track { display: inline-flex; width: max-content; align-items: center; gap: 54px; animation: fs-ticker-crawl 24s linear infinite; }
.fs-ticker-track span { display: inline-block; padding-right: 6px; }
.fs-ticker:hover .fs-ticker-track { animation-play-state: paused; }
.fs-ticker-mark { transition: transform 300ms ease, color 300ms ease; }
.fs-ticker:hover .fs-ticker-mark { transform: translateX(4px); color: var(--fs-paper); }

/* Fixture cards and editorial tiles get a small broadcast-style light sweep. */
.fixture-card, .news-card, .fs-league-tile, .team-directory-card, .fs-aside-card, .fs-team-chip {
  transform: translateZ(0);
  transition: transform 320ms var(--fs-motion-ease), border-color 260ms ease, box-shadow 320ms ease, background-color 260ms ease;
}
.fixture-card::after, .news-card::after, .fs-league-tile::after, .team-directory-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -120%;
  left: -50%;
  width: 32%;
  height: 340%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform: rotate(22deg);
  transition: left 650ms var(--fs-motion-ease), opacity 260ms ease;
}
.fixture-card:hover::after, .news-card:hover::after, .fs-league-tile:hover::after, .team-directory-card:hover::after { left: 130%; opacity: 1; }
.fixture-card:hover, .news-card:hover, .fs-league-tile:hover, .team-directory-card:hover { box-shadow: 0 18px 38px rgba(0,0,0,.32), 0 0 0 1px rgba(196,255,9,.1); }
.fs-league-tile .fs-league-art { transition: transform 550ms var(--fs-motion-ease); }
.fs-league-tile:hover .fs-league-art { transform: rotate(-12deg) scale(1.08); }
.fs-league-tile > i { transition: transform 240ms ease, background 240ms ease; }
.fs-league-tile:hover > i { transform: translate(4px,-4px); }

/* Buttons, links and form controls. */
.fs-button, .fs-search-link, .fs-arrow-link span { position: relative; overflow: hidden; }
.fs-button::after, .fs-search-link::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -130%;
  width: 70%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  transition: left 560ms var(--fs-motion-ease);
  pointer-events: none;
}
.fs-button:hover::after, .fs-search-link:hover::after { left: 150%; }
.fs-nav a { transition: color 220ms ease, transform 220ms ease; }
.fs-nav a:hover { transform: translateY(-2px); }
.fs-brand-mark { transition: transform 320ms var(--fs-motion-ease), box-shadow 320ms ease; }
.fs-brand:hover .fs-brand-mark { transform: rotate(-8deg) scale(1.08); box-shadow: 0 0 22px rgba(196,255,9,.2); }
input, select, button { transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }

/* Live-state motion is attached only to genuine LIVE labels supplied by the data feed. */
.status-live { position: relative; }
.status-live::before { animation: fs-live-pulse 1.7s ease-out infinite; }
.fs-live-dot { animation: fs-live-pulse-ring 2s ease-out infinite; }
.match-centre-score b, .fixture-score { display: inline-block; }
html.fs-motion-ready .fs-in-view .match-centre-score b,
html.fs-motion-ready .fs-in-view .fixture-score { animation: fs-score-pop 550ms 160ms var(--fs-motion-ease) both; }

/* Optional horizontal scrollers can use this class without changing markup. */
.fs-horizontal-track { scrollbar-width: thin; scrollbar-color: var(--fs-lime) #101b2b; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.fs-horizontal-track > * { scroll-snap-align: start; }

/* Keyboard accessibility: do not animate focus targets out of view. */
:focus-visible { scroll-margin-block: 110px; }

@keyframes fs-page-enter { from { opacity: .72; } to { opacity: 1; } }
@keyframes fs-hero-rise { from { opacity: 0; transform: translate3d(0,22px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes fs-side-enter { from { opacity: 0; transform: translate3d(18px,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes fs-ring-turn { to { rotate: 360deg; } }
@keyframes fs-checker-drift { from { translate: -1.5% 1%; } to { translate: 2% -1.5%; } }
@keyframes fs-ball-float { 0%,100% { translate: 0 0; rotate: -1deg; } 50% { translate: 0 -9px; rotate: 1.4deg; } }
@keyframes fs-cross-turn { 0%,100% { rotate: 0deg; scale: 1; } 50% { rotate: 90deg; scale: .82; } }
@keyframes fs-grid-breathe { from { opacity: .17; translate: 0 0; } to { opacity: .34; translate: 0 -8px; } }
@keyframes fs-ticker-crawl { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fs-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(3,5,10,.45); } 70% { box-shadow: 0 0 0 6px rgba(3,5,10,0); } 100% { box-shadow: 0 0 0 0 rgba(3,5,10,0); } }
@keyframes fs-live-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(196,255,9,.42); } 70% { box-shadow: 0 0 0 7px rgba(196,255,9,0); } 100% { box-shadow: 0 0 0 0 rgba(196,255,9,0); } }
@keyframes fs-score-pop { 0% { transform: translateY(8px) scale(.88); opacity: .4; } 72% { transform: translateY(-2px) scale(1.04); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }

/* Smaller devices get short, transform-only reveals; no continuous hero choreography. */
@media (max-width: 780px) {
  .fs-art-ring { animation-duration: 54s; }
  .fs-art-checker { animation-duration: 26s; }
  .fs-art-ball { animation-duration: 8s; }
  .fs-ticker-track { animation-duration: 32s; }
}
@media (hover: none) {
  .fixture-card:hover, .news-card:hover, .fs-league-tile:hover, .team-directory-card:hover { transform: none; }
  .fixture-card::after, .news-card::after, .fs-league-tile::after, .team-directory-card::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.fs-motion-ready body { animation: none; }
  html.fs-motion-ready [data-fs-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fs-art-ring, .fs-art-checker, .fs-art-ball, .fs-art-cross, .fs-hero-grid,
  .fs-hero-copy > *, .fs-hero-side, .fs-ticker-track, .fs-live-dot,
  .status-live::before, html.fs-motion-ready .fs-in-view .match-centre-score b,
  html.fs-motion-ready .fs-in-view .fixture-score { animation: none !important; }
  .fs-scroll-progress { display: none; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Tiny parallax offset is driven by pointer movement on desktop only. */
.fs-hero-art { translate: var(--fs-parallax-x, 0px) var(--fs-parallax-y, 0px); transition: translate 180ms ease-out; }
html.fs-page-leaving body { opacity: 0; transform: translateY(5px); transition: opacity 130ms ease, transform 130ms ease; }