/*
 * Full-page biometric transition overlay for login, logout, and reloads.
 * Critical rules are duplicated inline in partials/portal-transition.blade.php
 * so the loader paints before any external CSS arrives.
 */
#portal-transition {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 22px;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(0, 155, 145, 0.22), transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(18, 214, 176, 0.14), transparent 50%),
        linear-gradient(190deg, #0A0E1B 0%, #0B1226 55%, #090D19 100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
}

#portal-transition.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#portal-transition.is-leaving {
    opacity: 0;
    visibility: hidden;
}

.portal-transition__visual {
    position: relative;
    width: min(220px, 52vw);
    aspect-ratio: 1;
}

.portal-transition__ring {
    position: absolute;
    inset: 0;
    margin: auto;
    border: 1px solid rgba(34, 230, 196, 0.22);
    border-radius: 50%;
    animation: portal-ring-breathe 4.2s ease-in-out infinite;
}

.portal-transition__ring--outer {
    width: 100%;
    height: 100%;
}

.portal-transition__ring--inner {
    width: 76%;
    height: 76%;
    animation-delay: -1.6s;
    border-color: rgba(45, 212, 191, 0.18);
}

.portal-transition__fingerprint {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 56%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    filter: drop-shadow(0 18px 34px rgba(18, 214, 176, 0.18));
}

.portal-transition__fingerprint svg {
    width: 100%;
    height: 100%;
}

.portal-transition__scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 26%;
    background: linear-gradient(180deg, transparent, rgba(34, 230, 196, 0.55), transparent);
    mix-blend-mode: screen;
    animation: portal-scan-sweep 3.4s ease-in-out infinite;
}

.portal-transition__pulse {
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    border: 1.5px solid rgba(34, 230, 196, 0.55);
    animation: portal-pulse-ring 2.6s ease-out infinite;
}

.portal-transition__label {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #22E6C4;
    display: flex;
    align-items: center;
    gap: 8px;
}

.portal-transition__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22E6C4;
    box-shadow: 0 0 0 0 rgba(34, 230, 196, 0.55);
    animation: portal-pulse-dot 1.8s infinite;
}

html.portal-navigating body > :not(#portal-transition) {
    visibility: hidden !important;
}

html.portal-ready:not(.portal-navigating) #portal-transition {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes portal-ring-breathe {
    0%, 100% { transform: scale(0.96); opacity: 0.4; }
    50% { transform: scale(1.03); opacity: 0.75; }
}

@keyframes portal-scan-sweep {
    0% { transform: translateY(-140%); opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translateY(400%); opacity: 0; }
}

@keyframes portal-pulse-ring {
    0% { transform: scale(0.7); opacity: 0.7; }
    100% { transform: scale(1.9); opacity: 0; }
}

@keyframes portal-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 230, 196, 0.55); }
    50% { box-shadow: 0 0 0 6px rgba(34, 230, 196, 0); }
}

@media (prefers-reduced-motion: reduce) {
    #portal-transition *,
    #portal-transition::before,
    #portal-transition::after {
        animation: none !important;
        transition: none !important;
    }
}