/* Tournament stage timeline — motion + progress affordances.
   Loaded globally; every selector is prefixed `stage-tl-`. */

/* Container reveals on render. */
.stage-tl {
    animation: stage-tl-fade 0.4s ease-out both;
}

/* Each column pops in, lightly staggered by --d (stage order). */
.stage-tl-col {
    animation: stage-tl-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--d, 0) * 55ms);
}

/* Active (in-progress) node: pulsing halo. */
.stage-tl-node {
    position: relative;
}

.stage-tl-node--active {
    animation: stage-tl-pulse 2s ease-in-out infinite;
}

/* Progress ring around the active node, filled by --progress (0–100). */
.stage-tl-node--active::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: conic-gradient(
        var(--mud-palette-success) calc(var(--progress, 0) * 1%),
        rgba(255, 255, 255, 0.22) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    pointer-events: none;
}

/* Connector carrying work out of the active stage: a sheen travels along it. */
.stage-tl-conn {
    position: relative;
    overflow: hidden;
}

.stage-tl-conn--flow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    animation: stage-tl-flow 1.4s linear infinite;
}

@keyframes stage-tl-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes stage-tl-pop {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes stage-tl-pulse {
    0%, 100% { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(33, 150, 243, 0.55); }
    50%      { box-shadow: 0 2px 9px rgba(0, 0, 0, 0.25), 0 0 0 9px rgba(33, 150, 243, 0); }
}

@keyframes stage-tl-flow {
    from { transform: translateX(-100%); }
    to   { transform: translateX(350%); }
}

/* Honour reduced-motion preferences. The pulse (shadow only) and progress ring
   carry live status, so they stay; only positional movement is toned down. */
@media (prefers-reduced-motion: reduce) {
    /* Swap the slide/scale entrance for a plain fade. */
    .stage-tl-col {
        animation: stage-tl-fade 0.4s ease-out both;
        animation-delay: calc(var(--d, 0) * 55ms);
    }

    /* Drop the travelling sheen (transform-based motion). */
    .stage-tl-conn--flow::after {
        animation: none;
    }
}