/* Curling Analyzer — shared polish for every tab: motion, loading states, focus.
   Loaded before each page's own <style>, so a page's look always wins; this only adds
   transitions, the loading bar, spinners and entrance animations. ui.js drives them. */

:root {
  --ca-accent: var(--accent, #3b82f6);
  --ca-ease: cubic-bezier(.2, .7, .2, 1);
  --ca-fast: .14s;
  --ca-med: .26s;
}

/* ---- smooth controls ---- */
button, select, input, textarea, .chip, .tab, .seg, .shot, a, summary {
  transition: background-color var(--ca-fast) ease, border-color var(--ca-fast) ease,
              color var(--ca-fast) ease, box-shadow var(--ca-fast) ease,
              opacity var(--ca-fast) ease, transform .09s ease, filter var(--ca-fast) ease;
}
button:not(:disabled):hover { filter: brightness(1.12); }
button:not(:disabled):active { transform: translateY(1px) scale(.985); }
:focus-visible { outline: 2px solid var(--ca-accent); outline-offset: 2px; border-radius: 6px; }
input:focus, select:focus, textarea:focus { border-color: var(--ca-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ca-accent) 25%, transparent); outline: none; }
summary { cursor: pointer; }
details[open] > :not(summary) { animation: ca-in var(--ca-med) var(--ca-ease) both; }

/* dark, thin scrollbars */
* { scrollbar-width: thin; scrollbar-color: #39414f transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2f3644; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #435066; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- things appearing: panels, a game's page, messages ---- */
@keyframes ca-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ca-fade { from { opacity: 0; } to { opacity: 1; } }
.panel, #pane > *, #empty, .ca-in { animation: ca-in var(--ca-med) var(--ca-ease) both; }
#pane > *:nth-child(2) { animation-delay: .03s; } #pane > *:nth-child(3) { animation-delay: .06s; }
#pane > *:nth-child(4) { animation-delay: .09s; } #pane > *:nth-child(n+5) { animation-delay: .12s; }
body { animation: ca-fade .3s ease both; }

/* a status line that just changed */
@keyframes ca-flash { from { opacity: .25; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.ca-flash { animation: ca-flash .3s var(--ca-ease) both; }

/* ---- the loading bar: top edge, while the app waits on the server ---- */
#ca-topbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 99999; pointer-events: none;
             opacity: 0; transition: opacity .3s ease; }
#ca-topbar.on { opacity: 1; }
#ca-topbar > div { height: 100%; width: 100%; transform-origin: left; transform: scaleX(0);
                   background: linear-gradient(90deg, var(--ca-accent), #60a5fa, #22c55e);
                   box-shadow: 0 0 10px var(--ca-accent), 0 0 4px var(--ca-accent);
                   transition: transform .25s var(--ca-ease); }

/* ---- spinners ---- */
@keyframes ca-spin { to { transform: rotate(360deg); } }
.ca-spin { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; border-radius: 50%;
           border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor;
           animation: ca-spin .7s linear infinite; }
.ca-spin.lg { width: 28px; height: 28px; border-width: 3px; color: var(--ca-accent); }
.ca-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 20px;
              color: var(--muted, #9aa4b2); text-align: center; }
/* a button whose action is running: dimmed, with a spinner where its text starts */
button.ca-busy { position: relative; pointer-events: none; opacity: .85; }
button.ca-busy::before { content: ''; display: inline-block; width: .85em; height: .85em; margin-right: .45em;
                         vertical-align: -0.1em; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3);
                         border-top-color: currentColor; animation: ca-spin .7s linear infinite; }

/* ---- progress bars (downloads, analyses, reels): smooth fill, a sheen while running ---- */
.ca-fill { transition: width .45s var(--ca-ease) !important; position: relative; overflow: hidden; }
@keyframes ca-sheen { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.ca-fill.ca-running::after { content: ''; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  animation: ca-sheen 1.4s ease-in-out infinite; }
.ca-fill.ca-done { background: var(--accent2, #22c55e) !important; }

/* ---- toasts ---- */
#ca-toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px;
             z-index: 99998; pointer-events: none; }
.ca-toast { pointer-events: auto; max-width: 380px; padding: 10px 14px; border-radius: 10px; font-size: 13px;
            background: #1d2330; color: var(--fg, #e8ecf3); border: 1px solid #333c4d;
            box-shadow: 0 10px 30px rgba(0, 0, 0, .45); animation: ca-in .25s var(--ca-ease) both; }
.ca-toast.ok { border-color: #1f5136; } .ca-toast.err { border-color: #6b2a2a; }
.ca-toast.out { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }

/* ---- step guides (Games: what's next for this game) ---- */
.ca-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.ca-step { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
           font-size: 12px; border: 1px solid var(--line, #2b313d); color: var(--muted, #9aa4b2); background: #12161e; }
.ca-step.done { color: var(--accent2, #22c55e); border-color: #1f5136; background: #10201a; }
.ca-step.next { color: #fff; border-color: var(--ca-accent); background: color-mix(in srgb, var(--ca-accent) 22%, #12161e); }
.ca-step b { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important;
                           transition-duration: .001s !important; }
}