/* Pioneer.SSO Animation Library - Gallery Edition
   10 Production-Ready Themes - 2026
*/

:root {
    --sso-accent: #58a6ff; /* Default Pioneer Blue */
    --fastop-red: #FF0000;
    --fastop-yellow: #FFEF00;
}

/* ========================================
   THEME 1: Digital Pulse (Shield with expanding rings)
   ======================================== */
.sso-theme-digitalpulse {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background: #0f172a;
}

.sso-pulse-shield {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3rem;
}

.sso-pulse-ring {
    border: 4px solid var(--sso-accent);
    border-radius: 50%;
    height: 100px;
    width: 100px;
    position: absolute;
    animation: sso-pulse-out 2s infinite;
}

.sso-shield-icon {
    font-size: 3.5rem;
    color: var(--sso-accent);
    z-index: 10;
}

@keyframes sso-pulse-out {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* ========================================
   THEME 2: Identity Bridge (Person to Building transfer)
   ======================================== */
.sso-theme-identitybridge {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background: #0f172a;
    gap: 4rem;
}

.sso-identity-person {
    font-size: 3rem;
    color: white;
}

.sso-identity-ball {
    width: 20px;
    height: 20px;
    background: var(--sso-accent);
    border-radius: 50%;
    animation: sso-slide-right 2s infinite linear;
    box-shadow: 0 0 20px var(--sso-accent);
}

.sso-identity-building {
    font-size: 3rem;
    color: var(--sso-accent);
}

@keyframes sso-slide-right {
    0% {
        transform: translateX(-60px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(60px);
        opacity: 0;
    }
}

/* ========================================
   THEME 3: Glassmorphism (Shimmering glass card)
   ======================================== */
.sso-theme-glassmorphism {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background: #0f172a;
}

.sso-glass-card {
    background: linear-gradient( 90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.05) 75% );
    background-size: 200% 100%;
    animation: sso-glass-shimmer 2s infinite;
    padding: 4rem;
    border-radius: 25px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.1);
}

.sso-glass-spinner {
    width: 3rem;
    height: 3rem;
    border: 4px solid rgba(88, 166, 255, 0.3);
    border-top-color: var(--sso-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes sso-glass-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

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

/* ========================================
   THEME 4: Fastop Zip (Branded text with flowing bar)
   ======================================== */
.sso-theme-fastopzip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background: #FF0000;
}

.sso-fastop-title {
    font-size: 6rem;
    font-weight: bold;
    font-style: italic;
    letter-spacing: -4px;
    transform: skewX(-10deg);
    color: white;
    margin-bottom: 1rem;
}

.sso-fastop-track {
    width: 300px;
    height: 4px;
    background: rgba(255,255,255,0.2);
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
}

.sso-fastop-bar {
    background: #FFEF00;
    height: 100%;
    width: 40%;
    position: absolute;
    animation: sso-fastop-flow 1.5s infinite ease-in-out;
}

@keyframes sso-fastop-flow {
    0% {
        left: -40%;
    }

    100% {
        left: 100%;
    }
}

/* ========================================
   THEME 5: Fuel Gauge (Semicircle gauge with needle)
   ======================================== */
.sso-theme-fuelgauge {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background: #0f172a;
}

.sso-gauge-container {
    width: 160px;
    height: 80px;
    border: 8px solid white;
    border-bottom: none;
    border-top-left-radius: 160px;
    border-top-right-radius: 160px;
    position: relative;
}

.sso-gauge-needle {
    width: 75px;
    height: 5px;
    background: var(--sso-accent);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform-origin: left center;
    animation: sso-gauge-sweep 2s infinite alternate ease-in-out;
}

@keyframes sso-gauge-sweep {
    0% {
        transform: rotate(-90deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* ========================================
   THEME 6: Receipt Scroll (Paper receipt animation)
   ======================================== */
.sso-theme-receiptscroll {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background: #0f172a;
}

.sso-receipt-paper {
    width: 160px;
    height: 220px;
    background: #fff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.sso-receipt-line {
    height: 3px;
    background: #333;
    margin: 4px 0;
    animation: sso-paper-scroll 3s infinite linear;
}

@keyframes sso-paper-scroll {
    0% {
        transform: translateY(100%);
    }

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

/* ========================================
   THEME 7: Price Flip (Flip-board digits)
   ======================================== */
.sso-theme-priceflip {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background: #0f172a;
    gap: 0.5rem;
}

.sso-flip-digit {
    background: #111;
    padding: 12px 20px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 3.5rem;
    color: var(--sso-accent);
    border: 1px solid #333;
    animation: sso-flip-spin 2s infinite;
}

@keyframes sso-flip-spin {
    0% {
        transform: rotateX(0deg);
    }

    50% {
        transform: rotateX(90deg);
        opacity: 0.5;
    }

    100% {
        transform: rotateX(0deg);
    }
}

/* ========================================
   THEME 8: Matrix Rain (Terminal text falling)
   ======================================== */
.sso-theme-matrixrain {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background: #FF0000;
    font-family: 'Courier New', monospace;
    color: #FFEF00;
    font-size: 1.2rem;
}

.sso-matrix-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sso-matrix-line {
    animation: sso-matrix-fade 1.2s infinite;
}

@keyframes sso-matrix-fade {
    0% {
        opacity: 0;
        transform: translateY(-15px);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(15px);
    }
}

/* ========================================
   THEME 9: Satellite Orbit (Satellite orbiting globe)
   ======================================== */
.sso-theme-satelliteorbit {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background: #0f172a;
}

.sso-orbit-container {
    position: relative;
    width: 220px;
    height: 220px;
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 50%;
    animation: sso-orbit-rotate 4s infinite linear;
}

.sso-satellite {
    position: absolute;
    top: -15px;
    left: 50%;
    font-size: 2rem;
    color: var(--sso-accent);
}

.sso-globe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4.5rem;
    animation: sso-orbit-rotate 4s infinite linear reverse;
}

@keyframes sso-orbit-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   THEME 10: Glass Progress (Glassmorphic progress bar)
   ======================================== */
.sso-theme-glassprogress {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background: #0f172a;
}

.sso-progress-card {
    width: 400px;
    padding: 25px;
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

.sso-progress-track {
    height: 10px;
    background: rgba(0,0,0,0.3);
    border-radius: 5px;
    overflow: hidden;
}

.sso-progress-bar {
    height: 100%;
    background: var(--sso-accent);
    animation: sso-bar-grow 2s infinite ease-in-out;
}

@keyframes sso-bar-grow {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/* ========================================
   GLOBAL OVERLAYS
   ======================================== */
.sso-loading-container {
    position: absolute;
    width: 100%;
    bottom: 15%;
    text-align: center;
    z-index: 100;
}

.sso-loading-text {
    color: white;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.5rem;
    text-shadow: 0 0 15px rgba(0,0,0,0.9);
    margin-bottom: 10px;
}

/* ========================================
   ADMIN PREVIEW CONTAINERS
   ======================================== */
.preview-window {
    background-color: #000;
    cursor: default;
    border: 1px solid #444;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

    /* Dashboard Fix: Scale down for preview mode */
    .preview-window [class^="sso-theme-"] {
        height: 100% !important;
        width: 100% !important;
        transform: scale(0.6);
        transform-origin: center;
    }