/*
 * infrADAC Map
 * Copyright (c) 2025 Galaxy Pixel Studios. All rights reserved.
 *
 * This software and its source code are the intellectual property of 
 * Galaxy Pixel Studios and are protected under international copyright law.
 *
 * Unauthorised copying, modification, distribution, or use of this software, 
 * in whole or in part, without prior written permission from Galaxy Pixel Studios 
 * is strictly prohibited.
 *
 * For enquiries regarding licencing or usage, please contact Galaxy Pixel Studios.
 */

/* loading-modal.css */
#loading-modal {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(23, 40, 59, 0.92);
    backdrop-filter: blur(5px);
    z-index: 9999 !important;
    overflow: hidden;
}

#loading-modal .loading-particles {
    position: absolute;
    inset: 0;
}

#loading-modal .loading-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#loading-modal .loading-icon-shell {
    position: relative;
    width: 60px;
    height: 60px;
    display: grid;
    flex: 0 0 60px;
    place-items: center;
    transform-origin: center;
    will-change: transform, opacity, filter;
}

#loading-modal .loading-icon-shell::before {
    content: "";
    position: absolute;
    inset: -2px;
    border: 1px solid var(--loading-ring-outline, rgba(255, 95, 21, .25));
    border-radius: 50%;
    box-shadow: 0 0 25px var(--loading-ring-shadow, rgba(255, 95, 21, .14));
}

#loading-modal .loading-icon-ring {
    position: absolute;
    inset: -3px;
    border: 2px solid transparent;
    border-radius: 50%;
    transform: rotate(0deg);
    will-change: transform;
}

#loading-modal .loading-icon-ring.is-front {
    z-index: 2;
    border-top-color: var(--loading-ring-accent, #ff5f15);
    border-right-color: var(--loading-ring-front-trail, rgba(255, 95, 21, .58));
    filter: drop-shadow(0 0 3px var(--loading-ring-front-shadow, rgba(255, 95, 21, .32)));
}

#loading-modal .loading-icon-ring.is-back {
    z-index: 1;
    inset: -1px;
    border-top-color: var(--loading-ring-back-leading, rgba(255, 173, 132, .34));
    border-right-color: var(--loading-ring-back-trail, rgba(255, 95, 21, .18));
    opacity: .78;
}

    #loading-modal img.loading-icon {
        position: relative;
        z-index: 3;
        width: 46px;
        height: 46px;
        object-fit: contain;
        transform-origin: center;
        animation: none !important;
    }

    #loading-modal img.loading-brand {
        width: 100px;
        height: auto;
        margin-top: 10px;
    }

#loading-modal .loading-message {
    min-width: 230px;
    margin: 10px 0 0;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 16px;
    text-align: center;
}

    #loading-modal img.loading-brand {
        animation: none !important;
    }

#loading-modal.is-entering-map-active .loading-icon-shell {
    transform: scale(var(--loading-exit-scale, 36));
    opacity: 0.12;
    filter: blur(6px) drop-shadow(0 0 24px var(--loading-ring-front-shadow, rgba(255, 95, 21, 0.68)));
    transition:
        transform 1.42s cubic-bezier(0.44, 0.02, 0.24, 1),
        opacity 1.12s ease 0.18s,
        filter 1.18s ease 0.12s;
}

#loading-modal.is-entering-map-active .loading-brand,
#loading-modal.is-entering-map-active .loading-message {
    opacity: 0;
    transform: translateY(10px) scale(1.04);
    transition: opacity 0.42s ease 0.1s, transform 0.48s ease 0.1s;
}

#loading-modal.is-entering-map-active .loading-particles {
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.18s ease 0.08s, transform 1.42s cubic-bezier(0.44, 0.02, 0.24, 1);
}

@media (prefers-reduced-motion: reduce) {
    #loading-modal .loading-icon-ring.is-front {
        transform: rotate(24deg);
    }

    #loading-modal .loading-icon-ring.is-back {
        transform: rotate(-32deg);
    }
}