/* Login-splash overlay — Microsoft sign-in only.
   Loaded only by socialaccount/login.html, on top of calex-uk.css + auth.css. */

#ms-splash{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(circle at 50% 40%, var(--calex-ink-800) 0%, var(--calex-ink-900) 70%);
    pointer-events:none;
    animation:splash-overlay-out 600ms var(--ease-in-out) 4900ms forwards;
}

.splash-stage{
    position:relative;
    width:min(92vw, 620px);
    height:280px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.splash-scene{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:var(--space-5,20px);
    opacity:0;
}

.splash-scene--calex{
    animation:splash-calex-scene 2900ms var(--ease-in-out) both;
}

.splash-compass-brand{
    margin:var(--space-4,16px) 0 0;
    display:flex;
    align-items:baseline;
    gap:10px;
    opacity:0;
    animation:splash-text-in 550ms var(--ease-out) 1350ms both;
}

.splash-compass-name{
    color:#fff;
    font-weight:800;
    font-size:22px;
    letter-spacing:-0.03em;
}

.splash-compass-tag{
    font-size:11px;
    font-weight:700;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:rgba(255,255,255,.6);
}

.splash-calex-logo{
    color:#fff;
    overflow:visible;
    filter:drop-shadow(0 0 24px rgba(158,111,172,.45));
}

.splash-calex-logo .calex-icon,
.splash-calex-logo .calex-wordmark path,
.splash-calex-logo .calex-wordmark polygon{
    fill:currentColor;
}

.splash-calex-logo .calex-icon{
    transform-origin:center;
    opacity:0;
    animation:splash-icon-in 950ms cubic-bezier(.2,.8,.2,1) 250ms both;
}

.splash-calex-logo .calex-wordmark path,
.splash-calex-logo .calex-wordmark polygon{
    opacity:0;
    transform:translateY(10px);
    animation:splash-word-in 620ms var(--ease-out) both;
}

.splash-calex-logo .calex-wordmark path:nth-child(1){ animation-delay:780ms; }
.splash-calex-logo .calex-wordmark polygon{ animation-delay:860ms; }
.splash-calex-logo .calex-wordmark path:nth-child(3){ animation-delay:940ms; }
.splash-calex-logo .calex-wordmark path:nth-child(4){ animation-delay:1020ms; }
.splash-calex-logo .calex-wordmark path:nth-child(5){ animation-delay:1100ms; }

.splash-scene--ms{
    animation:splash-ms-scene 3000ms var(--ease-in-out) 2500ms both;
}

.splash-ms-tiles{
    filter:drop-shadow(0 0 28px rgba(0,164,239,.35));
}

.splash-ms-tile{
    transform-origin:center;
    opacity:0;
    animation:splash-tile-in 480ms cubic-bezier(.2,.8,.2,1) both;
}

.splash-ms-tile.t1{ animation-delay:2800ms; }
.splash-ms-tile.t2{ animation-delay:3000ms; }
.splash-ms-tile.t3{ animation-delay:3200ms; }
.splash-ms-tile.t4{ animation-delay:3400ms; }

.splash-ms-text{
    margin:0;
    color:rgba(255,255,255,.88);
    font-size:var(--size-body-s);
    font-weight:var(--weight-semibold);
    letter-spacing:.04em;
    text-transform:var(--transform-label);
    opacity:0;
    animation:splash-text-in 600ms var(--ease-out) 3700ms both;
}

@keyframes splash-icon-in{
    0%{ opacity:0; transform:scale(.5) rotate(-25deg); }
    65%{ opacity:1; transform:scale(1.1) rotate(4deg); }
    100%{ opacity:1; transform:scale(1) rotate(0deg); }
}

@keyframes splash-word-in{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
}

@keyframes splash-calex-scene{
    0%{ opacity:0; }
    8%{ opacity:1; }
    72%{ opacity:1; }
    100%{ opacity:0; transform:scale(.92); }
}

@keyframes splash-ms-scene{
    0%{ opacity:0; transform:scale(1.06); }
    12%{ opacity:1; transform:scale(1); }
    100%{ opacity:1; transform:scale(1); }
}

@keyframes splash-tile-in{
    0%{ opacity:0; transform:scale(.3) rotate(-12deg); }
    70%{ opacity:1; transform:scale(1.12) rotate(0deg); }
    100%{ opacity:1; transform:scale(1) rotate(0deg); }
}

@keyframes splash-text-in{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
}

@keyframes splash-overlay-out{
    0%{ opacity:1; visibility:visible; }
    90%{ opacity:0; visibility:visible; }
    100%{ opacity:0; visibility:hidden; }
}

body:has(#ms-splash) .auth-card{
    animation:splash-card-in 700ms var(--ease-out) 4900ms both;
}

@keyframes splash-card-in{
    from{ opacity:0; transform:scale(.96) translateY(10px); }
    to{ opacity:1; transform:scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce){
    #ms-splash{ display:none; }
    body:has(#ms-splash) .auth-card{
        animation:none;
        opacity:1;
    }
}