/* The boot screen, shown from first paint until the WASM runtime takes over. Every colour is
   written with a literal fallback: this stylesheet has to stand on its own if tokens.css is
   slow, because there is nothing else on screen to fall back to.

   Declared here for IDE resolution only — Blazor sets the load percentage at runtime. */
:root {
    --blazor-load-percentage: 0%;
    --blazor-load-percentage-text: "0%";
}

.loading {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    background:
        radial-gradient(58rem 34rem at 12% -10%, rgba(140, 198, 63, 0.20), transparent 62%),
        radial-gradient(52rem 32rem at 88% 4%, rgba(15, 117, 188, 0.16), transparent 62%),
        linear-gradient(180deg, var(--brand-cream, #FFF9EC) 0%, var(--color-page, #F3F4F6) 70%);
}

/* The mark is a disc, so width and height are the same number and either would do; width stays the
   one that is written down, to match every other rule that sizes it.

   It is also the progress indicator. There used to be a static mark here and a separate filling
   carrot below it, which put two carrots on one screen — one of them inert. Now the logo itself
   fills, so there is one carrot and it is the one that means something. */
.loading-mark {
    position: relative;
    width: 8rem;
    animation: kc-boot-breathe 2.6s ease-in-out infinite;
}

/* Both element types: the boot screen inlines the two layers as <svg> because it must paint before
   anything is fetched, while StartupScreen loads the same two files as <img>. */
.loading-mark > svg,
.loading-mark > img {
    display: block;
    width: 100%;
    height: auto;
}

/* Bottom-up rather than left-to-right: the carrot stands on its tip, so filling it along its own
   length is the only direction that reads as one carrot colouring in rather than a bar sweeping
   across a picture. inset()'s first value is the distance from the TOP, hence the subtraction.

   The transition runs the whole time. Blazor reports the download in coarse jumps, and without it
   the mark steps between states rather than filling. */
.loading-mark-fill {
    position: absolute;
    inset: 0;
    clip-path: inset(calc(100% - var(--blazor-load-percentage, 0%)) 0 0 0);
    transition: clip-path 0.3s ease-out;
}

/* Indeterminate cut, for the sign-in callback: the same screen, but nothing is being counted, so
   the carrot fills and empties on a loop instead of tracking a percentage. Filling and draining the
   same way round reads as one carrot being coloured in over and over, not as progress restarting. */
.loading-mark--busy .loading-mark-fill {
    animation: kc-mark-cycle 2s ease-in-out infinite;
    transition: none;
}

@keyframes kc-mark-cycle {
    0%       { clip-path: inset(100% 0 0 0); }
    45%, 62% { clip-path: inset(0 0 0 0); }
    100%     { clip-path: inset(0 0 100% 0); }
}

/* Kept even though the mark now fills: WASM initialisation continues after the download has already
   reported 100%, and without it the screen looks hung for that last stretch. */
@keyframes kc-boot-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
    .loading-mark { animation: none; }
    .loading-mark-fill { transition: none; }
}