/* In-page loader: circle + waves in CSS.
   PR-SEO-1: the boot screen went away with wwwroot/index.html - marketing pages arrive already
   rendered, so there is nothing to wait for and nothing to cover the page with. What is left here
   is the IN-PAGE loader (WaterFillProgress), still used while an article body streams in. */

.pms-water-progress {
    --pms-water-pct: var(--blazor-load-percentage, 0%);
    /* Cyan of the startup and of the CSS "liquid" */
    --pms-water-cyan: #00b7f1;
    --pms-water-size: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.pms-water-progress--sm {
    --pms-water-size: 5.5rem;
}

.pms-water-progress--lg {
    --pms-water-size: 10rem;
}

.pms-water-progress__circle {
    position: relative;
    width: var(--pms-water-size);
    height: var(--pms-water-size);
    border-radius: 50%;
    background: #ffffff;
    /* No visible ring: a minimal transparent border (structure / clipping only) */
    border: 1px solid transparent;
    box-sizing: border-box;
    overflow: hidden;
    flex-shrink: 0;
}

.pms-water-progress__fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--pms-water-pct);
    max-height: 100%;
    background: var(--pms-water-cyan);
    transition: height 0.2s ease-out;
    overflow: hidden;
}

.pms-water-progress--indeterminate .pms-water-progress__fill {
    height: 45%;
    transition: none;
    animation: pms-water-indeterminate-h 2.6s ease-in-out infinite;
}

@keyframes pms-water-indeterminate-h {
    0%, 100% {
        height: 40%;
    }

    50% {
        height: 56%;
    }
}

/* Wave on top of the liquid — same colour; SVG tiles with a continuous period (no jump) */
.pms-water-progress__waves {
    position: absolute;
    left: 0;
    right: 0;
    top: -20px;
    height: 40px;
    overflow: hidden;
    pointer-events: none;
}

.pms-water-progress__wave {
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 64' preserveAspectRatio='none'%3E%3Cpath fill='%2300b7f1' d='M0 34 C66.7 8 133.3 8 200 34 S333.3 60 400 34 S533.3 8 600 34 S666.7 60 800 34 L800 80 L0 80 Z'/%3E%3C/svg%3E");
    background-size: 400px 40px;
    background-repeat: repeat-x;
    background-position: 0 0;
    animation: pms-water-wave-slide 3.2s linear infinite;
    will-change: transform;
}

.pms-water-progress__wave--b {
    top: 5px;
    opacity: 0.94;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 64' preserveAspectRatio='none'%3E%3Cpath fill='%2300b7f1' d='M0 28 C100 48 150 10 250 28 S400 6 550 28 S650 48 800 28 L800 80 L0 80 Z'/%3E%3C/svg%3E");
    background-size: 320px 40px;
    animation: pms-water-wave-slide-reverse 4.6s linear infinite;
}

@keyframes pms-water-wave-slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-400px);
    }
}

@keyframes pms-water-wave-slide-reverse {
    from {
        transform: translateX(-320px);
    }

    to {
        transform: translateX(0);
    }
}

.pms-water-progress__centered-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1rem;
}

.pms-water-progress__caption {
    font-family: var(--pms-body-font, "Alexandria", sans-serif);
    font-size: 0.95rem;
    color: var(--pms-muted, #758592);
    text-align: center;
    max-width: 28rem;
    margin: 0;
}