/* ========================================
   SPLASH_ROUND.CSS - Rounded-square (squircle) splash derived from splash_circle
   All colors inherit from --primary-accent (change once)
   Container, middle plate and progress ring all share the same rounded shape.
   Progress is driven by --progress (0..1), set on .mud-wasm-cont by loader.js
   Drop-in replacement: swap the <link> to css/splash_rounded.css
   ======================================== */

/* Registered so the ring fills smoothly between loader.js updates */
@property --progress {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

body.splash-page:has(.mud-wasm-cont) {
    --primary-accent: var(--brand-primary);
    --primary-dark: color-mix(in srgb, var(--primary-accent) 65%, black 35%);
    --primary-light: color-mix(in srgb, var(--primary-accent) 85%, white 15%);
    --primary-glow: color-mix(in srgb, var(--primary-accent) 55%, white 45%);
    --accent-alpha-20: color-mix(in srgb, var(--primary-accent) 20%, transparent 80%);
    --accent-alpha-40: color-mix(in srgb, var(--primary-accent) 40%, transparent 60%);
    --accent-alpha-60: color-mix(in srgb, var(--primary-accent) 60%, transparent 40%);
    --text-primary: #ffffff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-accent) 80%, #1b1f3b) 0%, color-mix(in srgb, var(--primary-accent) 60%, #111) 50%, color-mix(in srgb, var(--primary-accent) 70%, #020b17) 100%);
    background-size: 400% 400%;
    animation: gradientFlow 18s ease infinite;
    min-height: 100vh;
    overflow: hidden;
}

@keyframes gradientFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Montserrat", "Roboto", system-ui, -apple-system, sans-serif;
}

#app {
    min-height: 100vh;
}

/* Rounded-square container */
.mud-wasm-cont {
    --box-size: clamp(280px, 50vmin, 420px);
    --corner: 0.28; /* corner roundness as a fraction of the box size */
    --ring-thickness: 6px;
    --ring-inset: 16px; /* distance between card edge and ring */
    --plate-inset: calc(var(--ring-inset) + var(--ring-thickness) + 4px);
    --plate-size: calc(var(--box-size) - (var(--plate-inset) * 2));
    --logo-size: calc(var(--plate-size) * 0.5);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--box-size);
    height: var(--box-size);
    /* inner layers subtract their inset from the radius so every corner stays concentric */
    border-radius: calc(var(--box-size) * var(--corner));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)), radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--primary-accent) 85%, white 15%) 0%, color-mix(in srgb, var(--primary-accent) 70%, #1b1f3b 30%) 60%, color-mix(in srgb, var(--primary-accent) 55%, #111 45%) 100%);
    background-blend-mode: overlay, normal;
    backdrop-filter: blur(22px) saturate(200%);
    -webkit-backdrop-filter: blur(22px) saturate(200%);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.14),
        0 28px 60px rgba(3, 10, 20, 0.30),
        inset 0 1px 0 rgba(255,255,255,0.08);
    isolation: isolate;
    transition: --progress 0.4s ease-out;
    animation: boxFloat 5s ease-in-out infinite;
}

@keyframes boxFloat {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, calc(-50% - 6px)); }
}

/* Middle plate: inner rounded square the logo sits on */
.mud-wasm-cont::after {
    content: "";
    position: absolute;
    inset: var(--plate-inset);
    border-radius: calc(var(--box-size) * var(--corner) - var(--plate-inset));
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.16) 0%, transparent 55%),
        linear-gradient(160deg,
            color-mix(in srgb, var(--primary-accent) 82%, white 18%) 0%,
            color-mix(in srgb, var(--primary-accent) 70%, black 30%) 70%,
            color-mix(in srgb, var(--primary-accent) 62%, black 38%) 100%);
    pointer-events: none;
    z-index: 0;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.24),
        inset 0 -10px 20px rgba(0,0,0,0.18);
    opacity: 0.95;
}

/* Rounded progress ring: same shape as the card, mirrored so it fills clockwise from the top as seen on screen */
.mud-wasm-cont::before {
    content: "";
    position: absolute;
    inset: var(--ring-inset);
    border-radius: calc(var(--box-size) * var(--corner) - var(--ring-inset));
    padding: var(--ring-thickness);
    background: conic-gradient(from -90deg,
        var(--primary-dark) 0turn,
        var(--primary-light) calc(var(--progress, 0) * 1turn - 0.04turn),
        var(--primary-glow) calc(var(--progress, 0) * 1turn),
        var(--accent-alpha-20) calc(var(--progress, 0) * 1turn) 1turn);
    /* Keep only the border band: outer rounded rect minus inner rounded rect */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 6px var(--accent-alpha-60));
    /* mirror horizontally so the fill runs the opposite way round */
    transform: scaleX(-1);
    pointer-events: none;
    z-index: 1;
}

.splash-logo::after {
    display: none;
}

.splash-logo {
    width: var(--logo-size);
    height: var(--logo-size);
    max-width: calc(var(--plate-size) - 40px);
    max-height: calc(var(--plate-size) - 40px);
    box-sizing: border-box;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: none;
    padding: 0;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.25));
    animation: logoBreath 3.2s ease-in-out infinite;
    z-index: 2;
    position: relative;
    overflow: visible;
}

@keyframes logoBreath {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

.splash-logo[src], .splash-logo img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

/* Percentage sits just below the card, in a pill that echoes the rounded look */
.loader-percent {
    position: absolute;
    bottom: -46px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: clamp(14px, 2.8vmin, 18px);
    text-shadow: 0 2px 12px rgba(0,0,0,0.35);
    animation: percentFade 2s ease-in-out infinite;
}

@keyframes percentFade {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

/* Hide legacy bar */
.loader-progress,
.loader-bar {
    display: none !important;
}

@media (max-width: 540px) {
    .mud-wasm-cont {
        --box-size: 220px;
        --ring-thickness: 5px;
        --ring-inset: 13px;
    }

    .loader-percent {
        bottom: -40px;
        font-size: clamp(12px, 3.4vmin, 15px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mud-wasm-cont,
    .splash-logo,
    .loader-percent {
        animation: none;
        transition: none;
    }
}