/* Loading states of the public tournament page (events.js). Kept here rather
   than in Tailwind utilities: the page loads Tailwind from the CDN, and these
   are keyframes and pseudo-elements that utilities do not express well. */

/* A thin bar across the very top. It trickles towards 85 % while a page is on
   its way and is driven by the number of answered sources in the loading view. */
.ev-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: 0;
    height: 3px;
    background: #FFE850;
    transition: width .3s ease-out;
}
.ev-bar.is-loading { width: 8%; }
.ev-bar.is-navigating {
    width: 85%;
    transition: width 8s cubic-bezier(.1, .7, .3, 1);
}

/* Placeholder cards with a yellow shimmer passing over them. */
.ev-sk {
    position: relative;
    overflow: hidden;
    background: #eef0f3;
    border-radius: 6px;
}
.ev-sk::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 232, 80, .35), transparent);
    animation: ev-shine 1.3s ease-in-out infinite;
}
@keyframes ev-shine { to { transform: translateX(100%); } }

.ev-spin { animation: ev-spin 1s linear infinite; }
@keyframes ev-spin { to { transform: rotate(360deg); } }

/* One chip per source: a pulsing yellow dot until it answers. */
.ev-src .ev-dot {
    background: #FFE850;
    animation: ev-pulse 1s ease-in-out infinite;
}
.ev-src.is-done .ev-dot { background: #16a34a; animation: none; }
.ev-src.is-done .ev-label { color: #111827; }
.ev-src.is-done .ev-state { color: #16a34a; }
.ev-src.is-failed .ev-dot { background: #dc2626; animation: none; }
.ev-src.is-failed .ev-state { color: #dc2626; }
@keyframes ev-pulse { 50% { opacity: .3; } }

.ev-fade-in { animation: ev-fade .35s ease-out both; }
@keyframes ev-fade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ev-sk::after,
    .ev-spin,
    .ev-src .ev-dot,
    .ev-fade-in { animation: none; }
    .ev-bar,
    .ev-bar.is-navigating { transition: none; }
}