/* FLICKUPSCORE — MOTION COMPLETION LAYER
   Finishes the broadcast-style interaction language across every page. */
:root {
  --fs-motion-cubic: cubic-bezier(.16, 1, .3, 1);
  --fs-motion-spring: cubic-bezier(.2, .85, .25, 1.18);
}

/* Full-site arrival choreography */
html.fs-motion-ready .fs-topline,
html.fs-motion-ready .fs-header,
html.fs-motion-ready .fs-ticker,
html.fs-motion-ready .fs-ad-wrap {
  animation: fs-chrome-drop 680ms var(--fs-motion-cubic) both;
}
html.fs-motion-ready .fs-topline { animation-delay: 30ms; }
html.fs-motion-ready .fs-header { animation-delay: 90ms; }
html.fs-motion-ready .fs-ticker { animation-delay: 150ms; }
html.fs-motion-ready .fs-ad-wrap { animation-delay: 210ms; }
html.fs-motion-ready .fs-nav a {
  animation: fs-nav-arrive 520ms var(--fs-motion-cubic) both;
  animation-delay: var(--fs-nav-delay, 190ms);
}
html.fs-motion-ready .fs-brand-mark { animation: fs-brand-stamp 650ms var(--fs-motion-spring) 220ms both; }
html.fs-motion-ready .fs-search-link { animation: fs-search-stamp 560ms var(--fs-motion-cubic) 330ms both; }

/* Stronger, intentional section reveals */
html.fs-motion-ready [data-fs-reveal] {
  will-change: opacity, transform;
  backface-visibility: hidden;
}
html.fs-motion-ready [data-fs-reveal].fs-in-view { will-change: auto; }
html.fs-motion-ready .fs-section-top {
  position: relative;
  isolation: isolate;
}
html.fs-motion-ready .fs-section-top::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--fs-lime), rgba(196,255,9,0));
  transition: width 900ms var(--fs-motion-cubic);
}
html.fs-motion-ready .fs-section-top.fs-in-view::after { width: min(100%, 560px); }
html.fs-motion-ready .fs-section-top .fs-kicker { transition: letter-spacing 520ms var(--fs-motion-cubic), opacity 520ms ease; }
html.fs-motion-ready .fs-section-top.fs-in-view .fs-kicker { letter-spacing: 2.2px; }

/* Inner-page hero gets the same editorial movement as the homepage hero. */
.fs-page-hero { --fs-page-hero-scroll: 0px; }
.fs-page-hero::after {
  transition: opacity 500ms ease, transform 850ms var(--fs-motion-cubic);
  transform: translate3d(0, var(--fs-page-hero-scroll), 0) rotate(-12deg);
}
html.fs-motion-ready .fs-page-hero.fs-in-view::after { animation: fs-page-hero-beam 1.1s var(--fs-motion-cubic) both; }
.fs-page-hero .fs-page-hero-stamp { transition: transform 420ms var(--fs-motion-spring), background-color 280ms ease, color 280ms ease; }
.fs-page-hero .fs-page-hero-stamp:hover { transform: translateY(-4px) rotate(-2deg); }

/* The home hero responds to both scroll and pointer motion. */
.fs-hero-art { translate: var(--fs-parallax-x, 0px) calc(var(--fs-parallax-y, 0px) - var(--fs-scroll-y, 0px)); }
.fs-hero-grid { transform: translate3d(0, var(--fs-grid-scroll, 0px), 0); }
.fs-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -55%;
  left: -65%;
  width: 34%;
  height: 210%;
  pointer-events: none;
  opacity: 0;
  transform: rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(196,255,9,.08), rgba(255,255,255,.10), transparent);
}
html.fs-motion-ready .fs-hero.fs-in-view::after { animation: fs-hero-sweep 1.8s 700ms var(--fs-motion-cubic) both; }
.fs-hero-copy h1 { text-wrap: balance; }
.fs-hero-copy h1 em { display: inline-block; transform-origin: 20% 80%; }
html.fs-motion-ready .fs-hero.fs-in-view .fs-hero-copy h1 em { animation: fs-title-accent 850ms 520ms var(--fs-motion-spring) both; }
.fs-art-caption { animation: fs-caption-drift 7s ease-in-out infinite; }
.fs-art-checker { background-size: 100% 100%; }

/* Ambient geometry travels a little as each section crosses the viewport. */
.fs-community-pattern { transform: translate3d(0, var(--fs-pattern-scroll, 0px), 0); transition: opacity 650ms ease; }
html.fs-motion-ready .fs-community-band.fs-in-view .fs-community-pattern { animation: fs-pattern-glow 5s ease-in-out infinite alternate; }
.fs-news-feature::after { animation: fs-editorial-drift 15s ease-in-out infinite alternate; }
.fs-league-tile::before { background-size: 130% 130%; transition: background-position 800ms var(--fs-motion-cubic), opacity 500ms ease; background-position: 0 0; }
.fs-league-tile:hover::before { background-position: 100% 100%; opacity: .72; }
.fs-league-tile .fs-league-art { transform-origin: 70% 30%; }
.fs-league-tile:hover .fs-league-art { rotate: 8deg; }

/* Match cards: reveal, edge light and small score emphasis. */
.fixture-card, .news-card, .team-directory-card, .fs-league-tile, .fs-aside-card {
  transform-origin: 50% 70%;
}
.fixture-card:before { transition: width 320ms var(--fs-motion-cubic), background-color 320ms ease; }
.fixture-card:hover:before { width: 5px; background: var(--fs-lime); }
.fixture-card .fixture-card-top,
.fixture-card .fixture-card-bottom { transition: background-color 300ms ease; }
.fixture-card:hover .fixture-card-top { background: rgba(196,255,9,.035); }
.fixture-card:hover .fixture-card-bottom { background: rgba(196,255,9,.045); }
.fixture-card .fixture-score { transition: text-shadow 300ms ease, transform 300ms var(--fs-motion-spring); }
.fixture-card:hover .fixture-score { text-shadow: 0 0 18px rgba(196,255,9,.28); transform: scale(1.07); }
.news-card h2, .news-card h3 { transition: color 260ms ease, transform 360ms var(--fs-motion-cubic); }
.news-card:hover h2, .news-card:hover h3 { transform: translateX(3px); }
.team-directory-card::before { transition: transform 750ms var(--fs-motion-cubic), border-color 450ms ease, box-shadow 450ms ease; }
.team-directory-card:hover::before { transform: scale(1.18) translate(-4px, 4px); border-color: rgba(196,255,9,.62); box-shadow: 0 0 0 20px rgba(196,255,9,.04), 0 0 0 42px rgba(196,255,9,.025); }
.fs-team-chip, .team-chip { transition: transform 280ms var(--fs-motion-spring), background-color 260ms ease, color 260ms ease, border-color 260ms ease; }
.fs-team-chip:hover, .team-chip:hover { transform: translateY(-3px); }

/* Pointer spotlight is inserted as a decorative span by motion.js. */
.fs-pointer-glow {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(240px circle at var(--fs-spot-x, 50%) var(--fs-spot-y, 50%), rgba(196,255,9,.11), transparent 68%);
  transition: opacity 300ms ease;
}
.fs-spot-active > .fs-pointer-glow { opacity: 1; }
.fixture-card > *, .news-card > *, .team-directory-card > *, .fs-league-tile > *, .fs-aside-card > * { position: relative; }
.fs-pointer-glow { position: absolute !important; }

/* Navigation: animated underline, staggered arrival and a real mobile menu transition. */
.fs-nav a { transform-origin: 50% 100%; }
.fs-nav a::after { height: 2px; box-shadow: 0 0 10px rgba(196,255,9,.55); }
.fs-nav a:hover::after, .fs-nav a.is-active::after { transition-duration: 320ms; }
.fs-brand-mark { transform-origin: 50% 50%; }
.fs-menu-toggle { position: relative; overflow: hidden; }
.fs-menu-toggle > span:not(.visually-hidden) { transition: transform 300ms var(--fs-motion-cubic), opacity 180ms ease, width 300ms ease; transform-origin: center; }
.fs-menu-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fs-menu-toggle[aria-expanded="true"] > span:nth-child(2) { transform: translateY(0) rotate(-45deg); }
.fs-menu-toggle[aria-expanded="true"] > span:nth-child(3) { opacity: 0; }
.fs-search-link span, .fs-button span, .fs-arrow-link span { transition: transform 320ms var(--fs-motion-spring); }
.fs-search-link:hover span, .fs-button:hover span, .fs-arrow-link:hover span { transform: translate(3px, -2px); }
.fs-button, .fs-search-link { translate: var(--fs-magnet-x, 0px) var(--fs-magnet-y, 0px); }

/* Forms and filters feel active, not static. */
.fs-tool-panel { position: relative; }
.fs-tool-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 2px;
  background: var(--fs-lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 650ms var(--fs-motion-cubic);
}
.fs-tool-panel.fs-in-view::before { transform: scaleX(1); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--fs-lime) !important;
  box-shadow: 0 0 0 3px rgba(196,255,9,.10), 0 0 20px rgba(196,255,9,.06);
}
.fs-search-form input { transition: box-shadow 250ms ease, border-color 250ms ease, background-color 250ms ease; }
.fs-search-form:focus-within { filter: drop-shadow(0 8px 18px rgba(0,0,0,.18)); }
.fs-filters label, .fs-filters .filter-field { transition: color 220ms ease; }

/* Premium skeleton shimmer; only shown while data is genuinely loading. */
.loading-state {
  position: relative;
  overflow: hidden;
  background: linear-gradient(110deg, #0a1423 28%, #12243a 42%, #0a1423 58%);
  background-size: 220% 100%;
  animation: fs-skeleton-flow 2.1s ease-in-out infinite;
}
.loading-state::after {
  content: "";
  display: block;
  width: 42%;
  height: 1px;
  margin: 13px auto 0;
  background: linear-gradient(90deg, transparent, var(--fs-lime), transparent);
  animation: fs-loading-line 1.8s ease-in-out infinite;
}
.empty-state { animation: fs-empty-arrive 620ms var(--fs-motion-cubic) both; }

/* Advertisement spaces remain clearly labelled but gain a subtle idle edge. */
.top-ad-banner, .sidebar-ad-box, .ad-banner-content, .ad-placeholder-box {
  transition: border-color 350ms ease, box-shadow 350ms ease, background-color 350ms ease;
}
.top-ad-banner:hover, .sidebar-ad-box:hover { border-color: rgba(196,255,9,.28); box-shadow: 0 12px 28px rgba(0,0,0,.2); }

/* Match-centre scene: the two sides enter from opposite directions. */
html.fs-motion-ready .match-centre-score strong:first-child { transform: translateX(-18px); opacity: .25; transition: transform 750ms var(--fs-motion-cubic), opacity 750ms ease; }
html.fs-motion-ready .match-centre-score strong:last-child { transform: translateX(18px); opacity: .25; transition: transform 750ms var(--fs-motion-cubic), opacity 750ms ease; }
html.fs-motion-ready .match-centre-card.fs-in-view .match-centre-score strong { transform: translateX(0); opacity: 1; }
html.fs-motion-ready .match-centre-card.fs-in-view .match-centre-score b { animation: fs-score-pop 650ms 250ms var(--fs-motion-spring) both; }
.match-centre-card::after { animation: fs-match-pattern-drift 24s linear infinite; }
.team-profile-head::after { animation: fs-editorial-drift 17s ease-in-out infinite alternate; }

/* Footer is injected after the HTML parser; the document observer reveals it as well. */
.site-footer-global { position: relative; overflow: hidden; }
.site-footer-global::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--fs-lime), rgba(196,255,9,0));
  transition: transform 1s var(--fs-motion-cubic);
}
.site-footer-global.fs-in-view::before { transform: scaleX(1); }
.footer-nav-row a, .footer-links a { transition: color 220ms ease, transform 220ms ease; }
.footer-nav-row a:hover, .footer-links a:hover { transform: translateY(-2px); }

/* Page exit / arrival */
html.fs-motion-ready body { animation: fs-document-arrive 720ms var(--fs-motion-cubic) both; }
html.fs-page-leaving body { opacity: 0; transform: translateY(8px) scale(.998); filter: blur(2px); transition: opacity 175ms ease, transform 175ms ease, filter 175ms ease; }

@keyframes fs-chrome-drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fs-nav-arrive { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fs-brand-stamp { 0% { opacity: 0; transform: rotate(-20deg) scale(.65); } 70% { opacity: 1; transform: rotate(5deg) scale(1.12); } 100% { transform: rotate(0) scale(1); } }
@keyframes fs-search-stamp { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fs-document-arrive { from { opacity: .78; } to { opacity: 1; } }
@keyframes fs-page-hero-beam { from { opacity: .1; } to { opacity: .6; } }
@keyframes fs-hero-sweep { 0% { left: -65%; opacity: 0; } 18% { opacity: .8; } 100% { left: 140%; opacity: 0; } }
@keyframes fs-title-accent { 0% { transform: translateY(12px) rotate(2deg); opacity: .45; } 75% { transform: translateY(-3px) rotate(-1deg); opacity: 1; } 100% { transform: translateY(0) rotate(0); opacity: 1; } }
@keyframes fs-caption-drift { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes fs-pattern-glow { from { opacity: .12; } to { opacity: .23; } }
@keyframes fs-editorial-drift { from { translate: 0 0; } to { translate: -15px -5px; } }
@keyframes fs-skeleton-flow { 0%,100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes fs-loading-line { 0% { transform: translateX(-70%); opacity: .15; } 50% { opacity: .8; } 100% { transform: translateX(170%); opacity: .15; } }
@keyframes fs-empty-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fs-match-pattern-drift { from { background-position: 0 0; } to { background-position: 75px 0; } }

@media (max-width: 780px) {
  /* Keep navigation rendered so it can animate closed/open instead of popping in. */
  .fs-nav {
    display: flex !important;
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-9px) scaleY(.985);
    transform-origin: top center;
    transition: max-height 420ms var(--fs-motion-cubic), opacity 230ms ease, transform 350ms var(--fs-motion-cubic), visibility 0s linear 420ms;
  }
  .fs-nav.is-open {
    display: flex !important;
    visibility: visible;
    opacity: 1;
    max-height: min(78vh, 520px);
    pointer-events: auto;
    transform: translateY(0) scaleY(1);
    transition: max-height 480ms var(--fs-motion-cubic), opacity 260ms ease 45ms, transform 350ms var(--fs-motion-cubic), visibility 0s;
  }
  .fs-nav a { opacity: 0; transform: translateY(-6px); }
  .fs-nav.is-open a { animation: fs-nav-arrive 360ms var(--fs-motion-cubic) both; }
  .fs-nav.is-open a:nth-child(1) { animation-delay: 45ms; }
  .fs-nav.is-open a:nth-child(2) { animation-delay: 80ms; }
  .fs-nav.is-open a:nth-child(3) { animation-delay: 115ms; }
  .fs-nav.is-open a:nth-child(4) { animation-delay: 150ms; }
  .fs-nav.is-open a:nth-child(5) { animation-delay: 185ms; }
  .fs-nav.is-open a:nth-child(6) { animation-delay: 220ms; }
  .fs-nav.is-open a:nth-child(7) { animation-delay: 255ms; }
  .fs-nav.is-open a:nth-child(8) { animation-delay: 290ms; }
  .fs-nav:not(.is-open) a { animation: none; opacity: 0; }
  .fs-hero::after { display: none; }
  .fs-pointer-glow { display: none; }
}

@media (max-width: 520px) {
  .fs-scroll-progress { height: 2px; }
  .fs-ticker-track { gap: 30px; }
  .fs-community-pattern { opacity: .12; }
  .fs-nav.is-open { max-height: min(78vh, 480px); }
}

@media (hover: none) {
  .fixture-card:hover, .news-card:hover, .team-directory-card:hover, .fs-league-tile:hover { transform: none; }
  .fs-pointer-glow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.fs-motion-ready .fs-topline, html.fs-motion-ready .fs-header,
  html.fs-motion-ready .fs-ticker, html.fs-motion-ready .fs-ad-wrap,
  html.fs-motion-ready .fs-nav a, html.fs-motion-ready .fs-brand-mark,
  html.fs-motion-ready .fs-search-link, html.fs-motion-ready body,
  html.fs-motion-ready .fs-page-hero.fs-in-view::after,
  html.fs-motion-ready .fs-hero.fs-in-view::after,
  html.fs-motion-ready .fs-hero.fs-in-view .fs-hero-copy h1 em,
  html.fs-motion-ready .fs-community-band.fs-in-view .fs-community-pattern,
  .fs-art-caption, .fs-news-feature::after, .match-centre-card::after,
  .team-profile-head::after, .loading-state, .loading-state::after,
  .empty-state, .fs-nav a, .site-footer-global::before {
    animation: none !important;
    transition: none !important;
  }
  .fs-hero-art, .fs-hero-grid, .fs-community-pattern, .fs-page-hero::after { transform: none !important; translate: none !important; }
  .fs-pointer-glow { display: none !important; }
}

/* Final component-specific finishing touches. */
.fs-aside-card { position: relative; overflow: hidden; }
.fs-ticker:focus-within .fs-ticker-track { animation-play-state: paused; }
.fs-ticker-copy { mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); }
.fs-results-head .fs-text-button,
.fs-breadcrumb a,
.fs-text-button,
.fs-arrow-link { transition: color 240ms ease, letter-spacing 260ms ease; }
.fs-results-head .fs-text-button:hover,
.fs-text-button:hover,
.fs-arrow-link:hover { color: #fff; letter-spacing: 1.35px; }
.fs-ad-label { transition: color 300ms ease, letter-spacing 300ms ease; }
.fs-ad-wrap:hover .fs-ad-label, .fs-home-aside:hover > .fs-ad-label { color: var(--fs-lime); letter-spacing: 2.4px; }
.fs-breadcrumb a:hover { color: var(--fs-lime); }
.fs-search-summary { transition: color 250ms ease; }
.fs-search-form:focus-within + .fs-search-summary { color: #dbe8f5; }
.fs-live-dot { animation: fs-dot-breathe 2.8s ease-in-out infinite; }
.fs-team-cloud .team-chip { animation: fs-chip-arrive 460ms var(--fs-motion-cubic) both; }
.fs-team-cloud .team-chip:nth-child(2) { animation-delay: 45ms; }
.fs-team-cloud .team-chip:nth-child(3) { animation-delay: 90ms; }
.fs-team-cloud .team-chip:nth-child(4) { animation-delay: 135ms; }
.fs-team-cloud .team-chip:nth-child(5) { animation-delay: 180ms; }
.fs-team-cloud .team-chip:nth-child(6) { animation-delay: 225ms; }
@keyframes fs-dot-breathe { 0%,100% { box-shadow: 0 0 0 3px rgba(196,255,9,.10), 0 0 0 0 rgba(196,255,9,0); } 50% { box-shadow: 0 0 0 4px rgba(196,255,9,.16), 0 0 12px 2px rgba(196,255,9,.15); } }
@keyframes fs-chip-arrive { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .fs-live-dot, .fs-team-cloud .team-chip { animation: none !important; }
}