:root {
    --cinematic-cyan: #58cfff;
    --cinematic-green: #47e1aa;
    --cinematic-void: #00050b;
}

.cinematic-sound-toggle,
.login-cinematic-sound-choice {
    min-height: 34px;
    padding: 8px 12px;
    color: #8198ad;
    border: 1px solid rgba(88, 207, 255, 0.28);
    border-radius: 8px;
    background: rgba(3, 13, 23, 0.82);
    cursor: pointer;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.cinematic-sound-toggle:hover,
.cinematic-sound-toggle:focus-visible,
.login-cinematic-sound-choice:hover,
.login-cinematic-sound-choice:focus-visible,
.cinematic-sound-toggle.is-enabled,
.login-cinematic-sound-choice.is-enabled {
    color: #effaff;
    border-color: rgba(71, 225, 170, 0.65);
    background: rgba(19, 80, 75, 0.24);
    box-shadow: 0 0 22px rgba(71, 225, 170, 0.12);
}

.login-cinematic-sound-choice {
    position: absolute;
    left: 50%;
    bottom: clamp(22px, 6vh, 66px);
    z-index: 4;
    display: grid;
    gap: 3px;
    min-width: min(260px, calc(100vw - 42px));
    min-height: 46px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition:
        opacity 650ms ease 560ms,
        transform 650ms cubic-bezier(0.16, 1, 0.3, 1) 560ms;
}

.login-cinematic-sound-choice small {
    color: #61798f;
    font-size: 7px;
    letter-spacing: 0.18em;
}

.login-intro-logo-visible .login-cinematic-sound-choice {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.login-intro-logo-lifted .login-cinematic-sound-choice {
    opacity: 0;
    pointer-events: none;
}

.command-launch-transition,
.command-arrival-transition {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #edf8ff;
    background:
        radial-gradient(circle at 50% 46%, rgba(31, 135, 213, 0.22), transparent 29%),
        radial-gradient(circle at 50% 48%, rgba(71, 225, 170, 0.08), transparent 42%),
        var(--cinematic-void);
    opacity: 0;
    pointer-events: none;
    isolation: isolate;
    transition: opacity 360ms ease;
}

.command-launch-transition::before,
.command-arrival-transition::before {
    position: absolute;
    inset: -35%;
    z-index: -1;
    content: "";
    opacity: 0;
    background:
        conic-gradient(
            from 210deg at 50% 50%,
            transparent,
            rgba(88, 207, 255, 0.15),
            transparent 19%,
            rgba(71, 225, 170, 0.08),
            transparent 38%
        );
    transform: scale(0.6) rotate(-9deg);
    transition: opacity 700ms ease, transform 1300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.command-launch-transition.is-active,
.command-arrival-transition.is-active {
    opacity: 1;
}

.command-launch-transition.is-active::before,
.command-arrival-transition.is-active::before {
    opacity: 1;
    transform: scale(1.08) rotate(8deg);
}

.command-launch-core,
.command-arrival-core {
    display: grid;
    justify-items: center;
    gap: 8px;
    width: min(520px, calc(100vw - 40px));
    opacity: 0;
    transform: scale(0.82);
    filter: blur(16px);
    transition:
        opacity 600ms ease 90ms,
        transform 1000ms cubic-bezier(0.16, 1, 0.3, 1) 50ms,
        filter 720ms ease 50ms;
}

.command-launch-transition.is-active .command-launch-core,
.command-arrival-transition.is-active .command-arrival-core {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

.command-launch-core img,
.command-arrival-core img {
    width: min(330px, 66vw, 48vh);
    height: auto;
    filter:
        brightness(0.86)
        saturate(0.88)
        drop-shadow(0 0 28px rgba(54, 169, 245, 0.24));
}

.command-launch-core span,
.command-arrival-core span {
    color: #82a4bc;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.34em;
}

.command-launch-core strong,
.command-arrival-core strong {
    color: #e9f8ff;
    font-size: clamp(14px, 2.4vw, 22px);
    letter-spacing: 0.22em;
    text-shadow: 0 0 22px rgba(88, 207, 255, 0.28);
}

.command-arrival-transition {
    opacity: 1;
}

.command-arrival-transition.is-releasing {
    opacity: 0;
    transition-duration: 820ms;
}

.command-arrival-transition.is-releasing .command-arrival-core {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(12px);
    transition-delay: 0ms;
    transition-duration: 780ms;
}

.member-portal-page.command-launching {
    overflow: hidden;
}

.member-portal-page.command-launching > :not(.command-launch-transition) {
    opacity: 0.12;
    filter: blur(12px);
    transform: scale(1.012);
}

@media (max-width: 700px) {
    .cinematic-sound-toggle {
        width: 100%;
        min-width: 0;
    }

    .command-launch-core img,
    .command-arrival-core img {
        width: min(310px, 76vw, 44vh);
    }

    .command-launch-core strong,
    .command-arrival-core strong {
        font-size: 13px;
        letter-spacing: 0.14em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-cinematic-sound-choice,
    .command-launch-transition,
    .command-arrival-transition {
        display: none !important;
    }
}