/* Session transitions. Shared by login, hub entry and logout. */
html.splash-active { overflow: hidden; }
.splash, .logout-page {
    --motion-surface: #101f2b;
    --motion-wash: #203d39;
    --motion-line: #90a99e3d;
    --motion-ink: #9bd5bb;
}
:root[data-theme="light"] .splash,
:root[data-theme="light"] .logout-page {
    --motion-surface: #eeeee7;
    --motion-wash: #dce5d7;
    --motion-line: #647d652b;
    --motion-ink: #49745d;
}
.splash {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
    color: var(--text);
    background: radial-gradient(ellipse at 50% 40%, var(--motion-wash), transparent 65%), var(--motion-surface);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s;
}
.splash-active .splash { opacity: 1; visibility: visible; pointer-events: auto; }
.splash-brand { display: flex; flex-direction: column; align-items: center; gap: 25px; width: min(320px, 100%); }
.splash-brand img { display: block; width: 136px; height: auto; }
.splash-label { margin: 0; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.6; }
.splash-active .splash-brand { animation: session-arrive .35s ease both; }
.splash-active .sso-main { visibility: hidden; }
.splash-active .hub-header, .splash-active .hub-welcome,
.splash-active .hub-section-heading, .splash-active .app-card { animation-play-state: paused; }
.session-motion { width: 180px; height: 56px; color: var(--motion-ink); }
.session-motion svg { display: block; width: 100%; height: 100%; overflow: visible; }
.session-motion__rail { stroke: var(--motion-line); stroke-width: 2; stroke-linecap: round; }
.session-motion__port { stroke: currentColor; stroke-width: 1.5; fill: var(--motion-surface); animation: session-port 1.6s ease-in-out infinite alternate; }
.session-motion__port--end { animation-delay: -.8s; }
.session-motion__stream circle { fill: currentColor; animation: session-transfer 1.6s linear infinite; }
.session-motion__stream circle:nth-child(2) { animation-delay: -.53s; }
.session-motion__stream circle:nth-child(3) { animation-delay: -1.06s; }
.session-motion--leaving .session-motion__stream circle { animation-direction: reverse; }
.session-motion__done { display: none; }
.session-motion--complete .session-motion__rail,
.session-motion--complete .session-motion__port,
.session-motion--complete .session-motion__stream { display: none; }
.session-motion--complete .session-motion__done { display: block; animation: session-confirm .35s cubic-bezier(.2,.8,.2,1) both; }
.session-motion__done circle { fill: var(--motion-line); }
.session-motion__done path { stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 32; stroke-dashoffset: 32; animation: session-check .3s .12s ease forwards; }
.logout-page .sso-main { padding: 96px 24px 40px; }
.logout-page { background: radial-gradient(ellipse at 50% 40%, var(--motion-wash), transparent 65%), var(--motion-surface); }
:root[data-theme="light"] .logout-page { background: radial-gradient(ellipse at 50% 40%, var(--motion-wash), transparent 65%), var(--motion-surface); }
.logout-splash { width: min(460px, 100%); text-align: center; }
.logout-splash__content { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 40px 24px; animation: session-arrive .4s ease both; }
.logout-splash__logo { display: block; width: 136px; max-width: 60%; height: auto; }
.logout-splash__copy { display: grid; gap: 12px; }
.logout-splash h1 { margin: 0; font-size: clamp(23px, 4vw, 28px); line-height: 1.3; font-weight: 550; letter-spacing: -.035em; }
.logout-splash p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.logout-splash a { justify-self: center; color: var(--accent); font-size: 12px; line-height: 1.6; text-decoration: underline; text-underline-offset: 4px; }
:root[data-theme="light"] .logout-splash__logo { filter: brightness(0) saturate(100%) invert(14%) sepia(18%) saturate(1541%) hue-rotate(173deg) brightness(94%) contrast(93%); }
@keyframes session-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) { .logout-splash__content { padding: 32px 8px; } }
@media (prefers-reduced-motion: reduce) {
    .splash { transition: none; }
}

.logout-splash__content { gap: 18px; }
.logout-splash__logo { animation: session-brand-breathe 2.6s ease-in-out infinite; }
.logout-splash__copy { animation: session-arrive .45s .1s ease both; }
.logout-splash[data-session-complete="true"] .logout-splash__logo { animation: none; }
@keyframes session-transfer { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(100px); opacity: 0; } }
@keyframes session-port { from { stroke-opacity: .4; } to { stroke-opacity: 1; } }
@keyframes session-brand-breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes session-confirm { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes session-check { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .splash-active .splash-brand, .logout-splash__content, .logout-splash__logo, .logout-splash__copy,
    .session-motion__port, .session-motion__stream circle, .session-motion__done, .session-motion__done path { animation: none !important; }
    .session-motion__stream circle:nth-child(1) { transform: translateX(10px); }
    .session-motion__stream circle:nth-child(2) { transform: translateX(50px); }
    .session-motion__stream circle:nth-child(3) { transform: translateX(90px); }
    .session-motion__done path { stroke-dashoffset: 0; }
}