/*
 * Race-day loading moment (see js/raceday.js). Every rule here is inert unless raceday.js has
 * mounted the lockup overlay (.rd-hold) or set <html data-race-day="...">, which it only does
 * on a race day. Plain CSS on purpose: no Razor or Tailwind change.
 */

/* ---- MAUI boot lockup (over Supwell/wwwroot/index.html's loader) ----------------------------
   A fixed overlay beside #app on the loader's cream ground, so it outlives Blazor's first
   render and the first page renders underneath. Centred like the loader, and the lockup takes
   the exact box of today's .logo-image (200 x 72.66, 1rem under it) with the caption in the
   36px spinner slot, so the mark sits where the logo would. z-index 9999 keeps it over the
   page but under #blazor-error-ui (10000), as the everyday loader is. raceday.js checks that
   position is fixed before keeping it, so a missing stylesheet means no overlay at all. */
.rd-hold {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background-color: #efeae6; /* the loader's surface-200 cream */
    opacity: 1;
    /* FADE_MS in raceday.js; easing is the app's --ease-in-out motion token. */
    transition: opacity 250ms var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));
}
/* Fading out: never swallow a tap meant for the page underneath. */
.rd-hold.rd-out { opacity: 0; pointer-events: none; }

.rd-hold > .rd { display: flex; flex-direction: column; align-items: center; }
.rd-hold > .rd--chicago { --rd-ink: #C8102E; --rd-glyph: #C8102E; }
.rd-hold > .rd--nyc { --rd-ink: #1B3768; --rd-glyph: #D9581A; }

.rd-hold .rd-mark { position: relative; width: 200px; height: 72.66px; margin-bottom: 1rem; }
.rd-hold .rd-word { position: absolute; top: 0; left: 0; width: 200px; height: 72.66px; display: block; fill: var(--rd-ink); }

/* Glyphs are separate HTML boxes (not SVG children) so transform/opacity animate on the
   compositor while the WebView boots. Delays are inline per glyph (pop from 0ms, 60ms apart;
   idle from 1.3s, which only a slow boot reaches). */
.rd-hold .rd-g {
    position: absolute; display: block; opacity: 0; will-change: transform, opacity;
    animation-name: rd-pop, rd-turn;
    animation-duration: 360ms, 2000ms;
    animation-timing-function: ease, cubic-bezier(.45, 0, .2, 1);
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
}
.rd-hold .rd--nyc .rd-g { animation-name: rd-pop, rd-pulse; }
.rd-hold .rd-g svg { display: block; width: 100%; height: 100%; fill: var(--rd-glyph); }
.rd-hold .rd-dot { border-radius: 50%; background: var(--rd-glyph); }

/* Caption starts at 120ms and is readable by ~200ms, so even the minimum hold shows it. */
.rd-hold .rd-cap {
    height: 36px; white-space: nowrap; text-transform: uppercase;
    font: 500 11px/14px 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: .5px;
    color: #3F4531; /* olive ink, 8.4:1 on the cream ground */
    opacity: 0; animation: rd-cap 240ms cubic-bezier(.2, .8, .2, 1) 120ms both;
}

@keyframes rd-pop {
    0%   { opacity: 0; transform: scale(.3) rotate(-60deg); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
    55%  { opacity: 1; transform: scale(1.14) rotate(0deg); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
    100% { opacity: 1; transform: none; }
}
/* A 60deg turn lands a six-point star on the same silhouette, so the loop has no visible jump. */
@keyframes rd-turn  { 0% { transform: rotate(0deg); } 21%, 100% { transform: rotate(60deg); } }
@keyframes rd-pulse { 0% { transform: scale(1); } 10% { transform: scale(1.3); } 21%, 100% { transform: scale(1); } }
@keyframes rd-cap   { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Reduced motion: a static lockup, and raceday.js removes it without the fade. */
@media (prefers-reduced-motion: reduce) {
    .rd-hold { transition: none; }
    .rd-hold .rd .rd-g, .rd-hold .rd .rd-cap { animation: none; opacity: 1; transform: none; }
}

/* ---- Spinners, Chicago only ----------------------------------------------------------------
   Pull-to-refresh (Feed .pull-to-refresh-*, Posts / Marketplace / Mileage .ptr-*) and the
   Medium/Large LoadingSpinner ring (border-t-black appears only in LoadingSpinner.razor; Small,
   inside buttons, keeps its ring). A spinner marked .rd-plain also keeps its ring: Routes.razor's
   Authorizing / LoadingContent screens sit under the black logo, and a red star there would
   make a half lockup. Remote config can keep the loader and drop this part with
   "spinners": false (raceday.js sets data-race-day-spinners="off"). */
html[data-race-day="chicago"]:not([data-race-day-spinners="off"]) .pull-to-refresh-spinner,
html[data-race-day="chicago"]:not([data-race-day-spinners="off"]) .ptr-spinner,
html[data-race-day="chicago"]:not([data-race-day-spinners="off"]) .pull-to-refresh-arrow,
html[data-race-day="chicago"]:not([data-race-day-spinners="off"]) .ptr-arrow,
html[data-race-day="chicago"]:not([data-race-day-spinners="off"]) .animate-spin.border-t-black.h-8:not(.rd-plain),
html[data-race-day="chicago"]:not([data-race-day-spinners="off"]) .animate-spin.border-t-black.h-12:not(.rd-plain) {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath fill='%23C8102E' d='M60 0L71 40.95L111.96 30L82 60L111.96 90L71 79.05L60 120L49 79.05L8.04 90L38 60L8.04 30L49 40.95Z'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}
/* Refreshing: the star turns in place of the ring, 1.6s per turn (each page's own spin keyframes). */
html[data-race-day="chicago"]:not([data-race-day-spinners="off"]) .pull-to-refresh-spinner,
html[data-race-day="chicago"]:not([data-race-day-spinners="off"]) .ptr-spinner {
    border: 0; border-radius: 0; animation-duration: 1.6s;
}
/* Dragging: the arrow becomes the star; its existing .ready rotate(180deg) becomes a half-turn twirl. */
html[data-race-day="chicago"]:not([data-race-day-spinners="off"]) .pull-to-refresh-arrow > path,
html[data-race-day="chicago"]:not([data-race-day-spinners="off"]) .ptr-arrow > path { display: none; }
/* LoadingSpinner Medium (h-8) and Large (h-12): star at 62% of the box. Two plain selectors, not
   :is(), so an older Android WebView cannot drop these lists (and the ring border with them). */
html[data-race-day="chicago"]:not([data-race-day-spinners="off"]) .animate-spin.border-t-black.h-8:not(.rd-plain),
html[data-race-day="chicago"]:not([data-race-day-spinners="off"]) .animate-spin.border-t-black.h-12:not(.rd-plain) {
    border-width: 0; border-color: transparent; border-radius: 0;
    background-size: 62% 62%; animation-duration: 1.6s;
}
/* Reduced motion: half speed. These are the 1.6s selectors verbatim, so each scores the same and
   wins by coming later; Small (h-4) LoadingSpinners are not matched and keep their 1s ring. */
@media (prefers-reduced-motion: reduce) {
    html[data-race-day="chicago"]:not([data-race-day-spinners="off"]) .pull-to-refresh-spinner,
    html[data-race-day="chicago"]:not([data-race-day-spinners="off"]) .ptr-spinner,
    html[data-race-day="chicago"]:not([data-race-day-spinners="off"]) .animate-spin.border-t-black.h-8:not(.rd-plain),
    html[data-race-day="chicago"]:not([data-race-day-spinners="off"]) .animate-spin.border-t-black.h-12:not(.rd-plain) { animation-duration: 3.2s; }
}