/**
 * SESSIONVAULT - SPLASH, DECRYPTION & OVERLAY ANIMATIONS
 * --------------------------------------------------------
 * 1. Progress Bar & Upload Spinner Animations
 * 2. Touch & Unlock Interactive States
 * 3. Sequential Splash Screen Animation
 * 4. Decrypting Vault Overlay
 * 5. Mobile Portrait Lock Overlay
 * ========================================================
 */

/* ======================================================== */
/* 1. PROGRESS & SPINNER ANIMATIONS                         */
/* ======================================================== */
@keyframes slide-loader {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(250%);
    }
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.spinner-circle {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

/* ======================================================== */
/* 2. TOUCH & UNLOCK INTERACTIVE STATES                     */
/* ======================================================== */
.unlock-option {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.unlock-option * {
    pointer-events: none;
}

.unlock-option:active div {
    transform: scale(0.95);
    filter: brightness(0.95);
}

/* Prevent text selection on ALL full-screen blocking overlays */
#passkey-lock-overlay,
#login-gate-overlay,
#global-loader-overlay,
#app-splash-screen,
#decrypting-overlay {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* ======================================================== */
/* 3. SEQUENTIAL SPLASH SCREEN ANIMATION                    */
/* ======================================================== */
#app-splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    min-height: 100vh;
    background-color: #f8fafc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: max(20px, 5vh) 16px 40px 16px;
    box-sizing: border-box;
    z-index: 99999;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.45s ease-out 0.65s, visibility 0.45s ease-out 0.65s;
}

#app-splash-screen.splash-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.splash-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 380px;
    margin-bottom: 32px;
    flex-shrink: 0;
    transform: translateY(calc(50vh - max(20px, 5vh) - 48px));
    transition: transform 0.75s cubic-bezier(0.25, 1, 0.5, 1);
}

#app-splash-screen.splash-hidden .splash-container {
    transform: translateY(0);
}

.logo-circle {
    opacity: 0;
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: center;
    animation: popCircle 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.circle-1 {
    animation-delay: 0.20s;
}

.circle-2 {
    animation-delay: 0.32s;
}

.circle-3 {
    animation-delay: 0.44s;
}

.circle-4 {
    animation-delay: 0.56s;
}

.logo-line {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: scaleIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.line-1 {
    animation-delay: 0.75s;
}

.line-2 {
    animation-delay: 0.90s;
}

.line-3 {
    animation-delay: 1.05s;
}

.logo-polygon {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    animation: drawHexagon 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.20s forwards;
}

.brand-text-group {
    opacity: 0;
    transform: translateY(12px);
    animation: slideUpText 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.60s forwards;
    text-align: center;
}

@keyframes popCircle {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    70% {
        transform: scale(1.3);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes drawHexagon {
    to {
        stroke-dashoffset: 0;
        fill: #e2e8f0;
    }
}

@keyframes slideUpText {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ======================================================== */
/* 4. DECRYPTING VAULT OVERLAY                              */
/* ======================================================== */
#decrypting-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #f8fafc;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 1;
    transition: opacity 0.4s ease-out;
}

.decrypt-logo {
    animation: pulse-vault 1.5s infinite ease-in-out;
}

.decrypt-text {
    margin-top: 24px;
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.5px;
    animation: pulse-text 1.5s infinite ease-in-out;
}

@keyframes pulse-vault {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(0.95);
        opacity: 0.8;
    }
}

@keyframes pulse-text {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

/* ======================================================== */
/* 5. MOBILE PHONE PORTRAIT LOCK OVERLAY                    */
/* ======================================================== */
@media screen and (max-height: 600px) and (max-width: 950px) and (orientation: landscape) {
    body>*:not(#portrait-lock-overlay) {
        display: none !important;
    }

    #portrait-lock-overlay {
        display: flex !important;
    }
}

#portrait-lock-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #0f172a;
    z-index: 9999999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    box-sizing: border-box;
}