/* Launch spinner — the ring of dots the old app showed while a presentation opened.
   Deliberately large: it is read from across a room, not from close up.

   SOURCE OF TRUTH for the look. wwwroot/display/room.html carries a copy of these
   rules inline, because that page must render with no server and no second file
   fetched — every style it uses is inline for the same reason. Change one, change
   the other. */

.st-launch-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    background: rgba(10, 12, 20, 0.82);
    backdrop-filter: blur(6px);
}

.st-launch-spinner {
    position: relative;
    width: 140px;
    height: 140px;
}

/* Twelve dots on a circle. Each is placed by rotating its container, then pushed
   out to the rim — so the ring resizes with the parent and needs no trigonometry. */
.st-launch-spinner span {
    position: absolute;
    inset: 0;
    display: block;
}

.st-launch-spinner span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    border-radius: 50%;
    background: var(--st-launch-dot, #fff);
    animation: st-launch-fade 1.2s linear infinite;
}

.st-launch-spinner span:nth-child(1) { transform: rotate(0deg); }
.st-launch-spinner span:nth-child(2) { transform: rotate(30deg); }
.st-launch-spinner span:nth-child(3) { transform: rotate(60deg); }
.st-launch-spinner span:nth-child(4) { transform: rotate(90deg); }
.st-launch-spinner span:nth-child(5) { transform: rotate(120deg); }
.st-launch-spinner span:nth-child(6) { transform: rotate(150deg); }
.st-launch-spinner span:nth-child(7) { transform: rotate(180deg); }
.st-launch-spinner span:nth-child(8) { transform: rotate(210deg); }
.st-launch-spinner span:nth-child(9) { transform: rotate(240deg); }
.st-launch-spinner span:nth-child(10) { transform: rotate(270deg); }
.st-launch-spinner span:nth-child(11) { transform: rotate(300deg); }
.st-launch-spinner span:nth-child(12) { transform: rotate(330deg); }

.st-launch-spinner span:nth-child(1)::before { animation-delay: -1.2s; }
.st-launch-spinner span:nth-child(2)::before { animation-delay: -1.1s; }
.st-launch-spinner span:nth-child(3)::before { animation-delay: -1.0s; }
.st-launch-spinner span:nth-child(4)::before { animation-delay: -0.9s; }
.st-launch-spinner span:nth-child(5)::before { animation-delay: -0.8s; }
.st-launch-spinner span:nth-child(6)::before { animation-delay: -0.7s; }
.st-launch-spinner span:nth-child(7)::before { animation-delay: -0.6s; }
.st-launch-spinner span:nth-child(8)::before { animation-delay: -0.5s; }
.st-launch-spinner span:nth-child(9)::before { animation-delay: -0.4s; }
.st-launch-spinner span:nth-child(10)::before { animation-delay: -0.3s; }
.st-launch-spinner span:nth-child(11)::before { animation-delay: -0.2s; }
.st-launch-spinner span:nth-child(12)::before { animation-delay: -0.1s; }

@keyframes st-launch-fade {
    0%   { opacity: 1;    transform: scale(1); }
    100% { opacity: 0.12; transform: scale(0.6); }
}

.st-launch-caption {
    color: #fff;
    font-size: clamp(1.1rem, 2.2vw, 2rem);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-align: center;
    animation: st-launch-pulse 1.6s ease-in-out infinite;
}

/* The seconds since the press, counting up under the step (2026-10-03). */
.st-launch-elapsed {
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(0.95rem, 1.6vw, 1.4rem);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

@keyframes st-launch-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* A station operator can turn animation off system-wide; respect it rather than
   flashing at someone who asked us not to. */
@media (prefers-reduced-motion: reduce) {
    .st-launch-spinner span::before,
    .st-launch-caption {
        animation-duration: 3s;
    }
}