/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-xjun2jpaxv] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-xjun2jpaxv] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-vr22jfusss],
.components-reconnect-repeated-attempt-visible[b-vr22jfusss],
.components-reconnect-failed-visible[b-vr22jfusss],
.components-pause-visible[b-vr22jfusss],
.components-resume-failed-visible[b-vr22jfusss],
.components-rejoining-animation[b-vr22jfusss] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-vr22jfusss],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-vr22jfusss],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-vr22jfusss],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-vr22jfusss],
#components-reconnect-modal.components-reconnect-retrying[b-vr22jfusss],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-vr22jfusss],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-vr22jfusss],
#components-reconnect-modal.components-reconnect-failed[b-vr22jfusss],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-vr22jfusss] {
    display: block;
}


#components-reconnect-modal[b-vr22jfusss] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-vr22jfusss 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-vr22jfusss 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-vr22jfusss 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-vr22jfusss]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-vr22jfusss 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-vr22jfusss {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-vr22jfusss {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-vr22jfusss {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-vr22jfusss] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-vr22jfusss] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-vr22jfusss] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-vr22jfusss] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-vr22jfusss] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-vr22jfusss] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-vr22jfusss] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-vr22jfusss 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-vr22jfusss] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-vr22jfusss {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/UI/HeroAnimation.razor.rz.scp.css */
@keyframes hero-pulse-b-gqqeqbojty {
    0%, 100% { opacity: 0.6; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
}

.animate-hero-pulse-slow[b-gqqeqbojty] {
    animation: hero-pulse-b-gqqeqbojty 8s ease-in-out infinite;
}

.animate-hero-pulse-slower[b-gqqeqbojty] {
    animation: hero-pulse-b-gqqeqbojty 12s ease-in-out infinite;
}

@keyframes hero-float-slow-b-gqqeqbojty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes hero-float-medium-b-gqqeqbojty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

@keyframes hero-float-fast-b-gqqeqbojty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.animate-hero-float-slow[b-gqqeqbojty] { animation: hero-float-slow-b-gqqeqbojty 6s ease-in-out infinite; }
.animate-hero-float-medium[b-gqqeqbojty] { animation: hero-float-medium-b-gqqeqbojty 5s ease-in-out infinite; }
.animate-hero-float-fast[b-gqqeqbojty] { animation: hero-float-fast-b-gqqeqbojty 4.5s ease-in-out infinite; }

/* Halo glow that follows the mouse. JS keeps --mouse-x / --mouse-y in sync; CSS
   uses them to position a radial gradient. Defaults center the glow so the very
   first paint (before mousemove fires) still looks intentional. The magnet snap
   (button hover) is interpolated by JS via rAF, not CSS transitions — this avoids
   the @property/Razor-tag-parsing tarpit and gives us full easing control. */
.hero-halo[b-gqqeqbojty] {
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
                                rgba(19, 91, 236, 0.22),
                                transparent 55%);
}

/* [data-hero-halo] is on the parent <section> in Home.razor. Blazor's CSS isolation
   only scopes the SUBJECT (rightmost) selector, so .hero-halo gets the scope marker
   and the parent attribute matches unscoped — exactly what we want. */
[data-hero-halo]:hover .hero-halo[b-gqqeqbojty] {
    opacity: 1;
}