/* ============================================================
   SINC LOADING INDICATORS  -  site-wide
   ------------------------------------------------------------
   Pure-CSS replacement for the loading_*.gif images that every
   eo:CallbackPanel has used via <div class='loading'></div>.
   No image request, crisp on any DPI, and it picks up the brand
   green from the design token when one is available.

   This file is the ONE home for these rules. It used to live in
   sinc-setup.css, which only three masters load; it was pulled
   out so every master can link it and the loader is the same
   everywhere. sinc-setup.css no longer defines them.

   SPECIFICITY - why the rules are prefixed with `html`
   The legacy sheets (2016min, 2016, sinc18, sinc19, tt9, tt10,
   sinc, all_sports, sitepro/*) each declared:
       div.loading            -> 0,0,1,1
       .sincGreen div.loading -> 0,0,2,1
   Those declarations are being removed, but a browser holding a
   cached copy of an old sheet would still apply them, and this
   file is not always the last stylesheet in the head. Prefixing
   with `html` lifts us one element above each of them, so the
   new loader wins on specificity rather than on source order:
       html div.loading            -> 0,0,1,2
       html .sincGreen div.loading -> 0,0,2,2

   TOKENS
   --setup-* only exist where sinc-setup.css is loaded, so every
   var() here carries the literal fallback. Do not drop them.

   Variants:
     div.loading / .sinc-loader  - the rail (default everywhere)
     .on-dark                    - light track for dark panels
     .sinc-loader-bracket        - large regions, see below
     .sinc-loader-wrap + -text   - optional caption
   ============================================================ */

html div.loading,
html .sincGreen div.loading,
html .sinc-loader {
    display: block;
    position: relative;
    width: 100%;
    max-width: 180px;
    height: 16px;
    margin: 0 auto;
    overflow: hidden;
    /* kill the inherited gif from the legacy stylesheets */
    background: none;
    background-image: none;
}
/* the track */
html div.loading::before,
html .sincGreen div.loading::before,
html .sinc-loader::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    margin-top: -2px;
    border-radius: 99px;
    background: rgba(100, 116, 139, .22);
}
/* the sweep */
html div.loading::after,
html .sincGreen div.loading::after,
html .sinc-loader::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 4px;
    width: 42%;
    margin-top: -2px;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, var(--setup-accent, #5cb830), transparent);
    animation: sincRailSweep 1.15s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes sincRailSweep {
    0%   { left: -45%; }
    100% { left: 100%; }
}
/* On a dark event-branded panel the grey track disappears - opt in with .on-dark. */
html .sinc-loader.on-dark::before,
html div.loading.on-dark::before { background: rgba(255, 255, 255, .18); }

/* ---------- optional: bracket loader ----------
   Two seeds draw in, join, and resolve to a winner. Bigger and more
   characterful than the rail - use it where a callback replaces a
   large region and a thin bar would leave an empty hole.
   Markup: <div class="sinc-loader-bracket">
             <i class="sl-s1"></i><i class="sl-s2"></i><i class="sl-v"></i>
             <i class="sl-out"></i><i class="sl-dot"></i></div>            */
.sinc-loader-bracket {
    display: block;
    position: relative;
    width: 74px;
    height: 52px;
    margin: 0 auto;
}
.sinc-loader-bracket i {
    position: absolute;
    display: block;
    background: var(--setup-accent, #5cb830);
    border-radius: 99px;
}
.sinc-loader-bracket .sl-s1 { left: 0; top: 6px; width: 26px; height: 5px;
    animation: sincBrkSeed 1.9s ease-in-out infinite; }
.sinc-loader-bracket .sl-s2 { left: 0; bottom: 6px; width: 26px; height: 5px;
    animation: sincBrkSeed 1.9s ease-in-out .16s infinite; }
.sinc-loader-bracket .sl-v { left: 26px; top: 8px; bottom: 8px; width: 5px;
    transform-origin: top; animation: sincBrkJoin 1.9s ease-in-out .34s infinite; }
.sinc-loader-bracket .sl-out { left: 31px; top: calc(50% - 2.5px); width: 0; height: 5px;
    animation: sincBrkOut 1.9s ease-in-out .5s infinite; }
.sinc-loader-bracket .sl-dot { left: 66px; top: calc(50% - 5px); width: 10px; height: 10px;
    border-radius: 50%; background: var(--setup-primary, #0f172a); opacity: 0;
    animation: sincBrkDot 1.9s ease-in-out .74s infinite; }
.sinc-loader-bracket.on-dark .sl-dot { background: #fff; }
@keyframes sincBrkSeed {
    0%, 8%    { width: 0;    opacity: 0; }
    22%, 72%  { width: 26px; opacity: 1; }
    90%, 100% { width: 26px; opacity: 0; }
}
@keyframes sincBrkJoin {
    0%, 8%    { transform: scaleY(0); opacity: 0; }
    26%, 72%  { transform: scaleY(1); opacity: 1; }
    90%, 100% { transform: scaleY(1); opacity: 0; }
}
@keyframes sincBrkOut {
    0%, 8%    { width: 0;    opacity: 0; }
    30%, 72%  { width: 32px; opacity: 1; }
    90%, 100% { width: 32px; opacity: 0; }
}
@keyframes sincBrkDot {
    0%, 10%   { opacity: 0; transform: scale(.4); }
    34%, 72%  { opacity: 1; transform: scale(1); }
    90%, 100% { opacity: 0; transform: scale(1); }
}

/* Optional caption under either loader. */
.sinc-loader-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 34px 12px; }
.sinc-loader-wrap .sinc-loader-text { font-family: 'DM Sans', 'Segoe UI', Arial, sans-serif;
    font-size: .82rem; font-weight: 500; color: var(--setup-text-muted, #94a3b8); }

@media (prefers-reduced-motion: reduce) {
    html div.loading::after, html .sincGreen div.loading::after,
    html .sinc-loader::after { animation: none; left: 29%; }
    .sinc-loader-bracket i { animation: none; opacity: 1; }
    .sinc-loader-bracket .sl-out { width: 32px; }
    .sinc-loader-bracket .sl-dot { opacity: 1; transform: scale(1); }
}