/* ================================================
   Global Loading Spinner - JTL Logo 3D Flip
   ================================================ */

/* Spinner Overlay - Modern Gradient Backdrop */
.global-spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(64deg,#05C7D1 0%,#51FBB7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Active State */
.global-spinner-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Spinner Container */
.global-spinner-container {
    perspective: 1200px;
    width: 88px;
    height: 88px;
}

/* 3D Logo Flipper */
.global-spinner-flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: flipRotate 2s linear infinite;
}

/* Logo Sides (Front = Hell, Back = Dunkel) */
.global-spinner-logo {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Kein sichtbarer Container - nur Logo */
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* Hell-Seite (Vorne) */
.global-spinner-logo.light {
    transform: rotateY(0deg);
}

/* Dunkel-Seite (Hinten) */
.global-spinner-logo.dark {
    transform: rotateY(180deg);
}

/* Logo Images - Größer und 100% Ausfüllung */
.global-spinner-logo img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* 3D Flip Animation */
@keyframes flipRotate {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

/* Loading Text (optional) */
.global-spinner-text {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    animation: pulse 1.5s ease-in-out infinite;
    display: none; /* Für Dev-Modus ausgeblendet */
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* Alternative: Shimmer Effect als zusätzlicher Touch */
.global-spinner-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 100%);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 200%;
    }
}