/*
 * Pre-boot splash, shared by Bis.Public and Bis.Admin.
 *
 * Sequence:
 * 1. The i appears first.
 * 2. B and S move in softly from opposite sides.
 * 3. The dot lands last.
 * 4. The completed logo rests in a very subtle breathing loop.
 *
 * Loaded as a normal <link rel="stylesheet"> in <head>, same as tokens.css /
 * base.css, so it is already applied on first paint - before the Blazor
 * WebAssembly runtime has downloaded or mounted. No JavaScript is required for
 * the visuals themselves; boot-splash.js only handles the handoff once Blazor
 * has started.
 */
html,
body {
    margin: 0;
    overflow-x: hidden;
}

/* Keep the Blazor root invisible while it is being mounted. The splash is a
   sibling overlay, so Blazor can replace #app without removing it before the
   exit transition has completed. */
#app {
    min-height: 100dvh;
    opacity: 0;
    transition: opacity 0.44s ease;
}

body.app-ready #app {
    opacity: 1;
}

.boot-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: clamp(0.8rem, 2.4vmin, 1.15rem);
    min-height: 100dvh;
    padding: 1.5rem;
    box-sizing: border-box;
    background: var(--color-background, #fff8f5);
    color: var(--color-primary, #f4846e);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.42s ease, visibility 0s linear 0s;
}

.boot-splash--leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.42s ease, visibility 0s linear 0.42s;
}

.boot-splash__logo {
    /* vmin keeps the logo a stable size in portrait AND landscape on mobile;
       clamped so it never gets tiny on small phones or oversized on
       tablets/desktop. */
    --boot-logo-size: clamp(140px, 52vmin, 240px);
    position: relative;
    width: var(--boot-logo-size);
    height: var(--boot-logo-size);
    will-change: transform;
    overflow: visible;
    transform-origin: center;
    animation: bl-breathe 3.8s 1.45s ease-in-out infinite;
}

/* Static SVG artwork is rasterized inside independently animated HTML layers.
   Positions and bounds use the original 1080-unit logo coordinate system. */
.boot-splash__piece {
    position: absolute;
}

.bl,
.bl-dot-bounce,
.boot-splash__piece svg {
    display: block;
    width: 100%;
    height: 100%;
}

.boot-splash__piece svg {
    overflow: visible;
}

.bl {
    transform-origin: center;
    will-change: transform, opacity;
}

.bl-i {
    animation: bl-i-appear 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.bl-b {
    animation: bl-b-gather 0.8s 0.16s cubic-bezier(0.2, 0.82, 0.2, 1) both;
}

.bl-s {
    animation: bl-s-gather 0.8s 0.16s cubic-bezier(0.2, 0.82, 0.2, 1) both;
}

.bl-dot {
    transform-origin: 50% 100%;
    animation: bl-dot-land 0.64s 0.68s cubic-bezier(0.22, 0.9, 0.26, 1) both;
}

/* Landing and repeating bounce use separate HTML layers. */
.bl-dot-bounce {
    transform-origin: 50% 100%;
    will-change: transform;
    animation: bl-dot-bounce 1.08s 1.34s cubic-bezier(0.45, 0, 0.35, 1) infinite;
}

@keyframes bl-i-appear {
    from {
        opacity: 0;
        transform: translateY(calc(var(--boot-logo-size) * 0.0111111111)) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes bl-b-gather {
    0% {
        opacity: 0;
        transform: translateX(calc(var(--boot-logo-size) * -0.0833333333)) rotate(-2deg);
    }

    78% {
        opacity: 1;
        transform: translateX(calc(var(--boot-logo-size) * 0.0055555556)) rotate(0deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

@keyframes bl-s-gather {
    0% {
        opacity: 0;
        transform: translateX(calc(var(--boot-logo-size) * 0.0833333333)) rotate(2deg);
    }

    78% {
        opacity: 1;
        transform: translateX(calc(var(--boot-logo-size) * -0.0055555556)) rotate(0deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

@keyframes bl-dot-land {
    0% {
        opacity: 0;
        transform: translateY(calc(var(--boot-logo-size) * -0.0851851852)) scale(0.9);
    }

    72% {
        opacity: 1;
        transform: translateY(calc(var(--boot-logo-size) * 0.0074074074)) scale(1.025);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes bl-dot-bounce {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    38% {
        transform: translateY(calc(var(--boot-logo-size) * -0.0314814815)) scale(0.985, 1.015);
    }

    58% {
        transform: translateY(0) scale(1.025, 0.975);
    }

    72% {
        transform: translateY(calc(var(--boot-logo-size) * -0.0074074074)) scale(0.995, 1.005);
    }

    86% {
        transform: translateY(0) scale(1.008, 0.992);
    }
}

@keyframes bl-breathe {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.008);
    }
}

@media (prefers-reduced-motion: reduce) {
    #app,
    .boot-splash {
        transition: none;
    }

    .boot-splash__logo,
    .bl,
    .bl-dot-bounce {
        animation: none;
        will-change: auto;
    }

    .bl,
    .bl-dot-bounce {
        opacity: 1;
        transform: none;
    }
}