/* Splash screen */

/*
  Timeline (all delays relative to logo-ready):
  0.2s  – logo fades/slides in           (0.6s duration)
  ~1.0s – logo fully visible
  1.5s  – blue panel wipes IN leftward    (0.5s duration)
  1.7s  – logo fades out                  (0.2s duration)
  2.0s  – entire splash wipes OUT right   (0.6s duration) → page revealed

  All animations start paused and are unpaused once the logo image has loaded
  (JS adds .splash-ready to #splash-screen).
*/

#splash-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    /* wipe the whole screen out to the right after the blue panel has covered it */
    animation: splash-screen-out 0.6s cubic-bezier(0.77, 0, 0.18, 1) 2.0s forwards;
    animation-play-state: paused;
}

#splash-screen.splash-ready {
    animation-play-state: running;
}

@keyframes splash-screen-out {
    from { clip-path: inset(0 0%   0 0); }
    to   { clip-path: inset(0 0%   0 100%); }
}

/* Loading text — visible until logo is ready, then hidden */
.splash-loading {
    position: absolute;
    font-size: 11px;
    letter-spacing: 0.15em;
    color: #999;
    text-transform: uppercase;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.splash-ready .splash-loading {
    opacity: 0;
    pointer-events: none;
}

/* Logo */
.splash-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    opacity: 0;
    transform: translateY(20px);
    animation:
        splash-logo-in  0.6s ease 0.2s forwards,
        splash-logo-out 0.2s ease 1.7s forwards;
    animation-play-state: paused;
}

.splash-ready .splash-logo {
    animation-play-state: running;
}

.splash-logo__mark {
    width: 120px;
}

.splash-logo__group {
    width: 80px;
}

@keyframes splash-logo-in {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes splash-logo-out {
    to { opacity: 0; }
}

/* Blue wipe panel */
.splash-panel {
    position: absolute;
    inset: 0;
    background: #0086dc;        /* --color-blue-light */
    clip-path: inset(0 100% 0 0);
    animation: splash-panel-in 0.5s cubic-bezier(0.77, 0, 0.18, 1) 1.5s forwards;
    animation-play-state: paused;
}

.splash-ready .splash-panel {
    animation-play-state: running;
}

/* Wipe in from left */
@keyframes splash-panel-in {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0%   0 0); }
}

body.splash-open {
    overflow: hidden;
}