/* ============================================
   ROTATE / PULSE LOADING ANIMATION STYLES
   ============================================
   This file contains styles for the Rotate / Pulse Loading Animation with #222 background.
   To use this loader, include this CSS file and use the HTML structure:
   <div class="blazor-loader-rotate-pulse">
       <div class="blazor-loader-rotate-pulse-inner">
           <div class="blazor-loader-rotate-pulse-text">LOADING...</div>
       </div>
   </div>
   <div id="particleCanvas-Blue"></div>
   <div id="particleCanvas-White"></div>
   
   Also include particles.js library and app.js script:
   <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
   <script src="js/app.js"></script>
   ============================================ */

:root {
    --loader-background-color: white; /* #111;*/
}

/* Loading container with #111 background (darker) */
.loading-container-rotate-pulse,
.profile-loading-container {
    background: var(--loader-background-color);
}

/* Rotate / Pulse Loading Animation - Nested Rings Loader */
.blazor-loader-rotate-pulse {
    position: relative;
    width: 240px;
    height: 240px;
    border: 5px solid #1B5F70;
    border-radius: 120px;
    box-sizing: border-box;
    margin: 0 auto;
}

.blazor-loader-rotate-pulse::after {
    content: " ";
    display: block;
    background: var(--loader-background-color);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 120%;
    transform: translate(-50%, -50%);
    transform-origin: center;
    z-index: 0;
    animation: outer-rotate2 30s infinite linear;
}

.blazor-loader-rotate-pulse-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    color: #888;
    text-align: center;
    border: 5px solid #2a7a8f;
    border-radius: 100px;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    z-index: 20;
}

.blazor-loader-rotate-pulse-inner::after {
    content: " ";
    display: block;
    background: var(--loader-background-color);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 106%;
    transform: translate(-50%, -50%);
    transform-origin: center;
    z-index: -1;
    animation: outer-rotate1 15s infinite linear;
}

.blazor-loader-rotate-pulse-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    font-size: 14px;
    line-height: 13px;
    text-align: center;
    border: 5px solid #3d95ab;
    border-radius: 70px;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    z-index: 20;
    animation: text-colour 1s alternate linear infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blazor-loader-rotate-pulse-text::before {
    content: " ";
    display: block;
    background: var(--loader-background-color);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    height: 40px;
    transform: translate(-50%, -50%);
    transform-origin: center;
    z-index: -1;
    animation: outer-rotate2 3.5s infinite linear;
}

.blazor-loader-rotate-pulse-text::after {
    content: var(--blazor-load-percentage-text, "");
    background: none;
    width: auto;
    height: auto;
    animation: none;
    position: static;
    transform: none;
    margin-left: 0.5rem;
    display: inline;
}

/* Particle canvases for background effect */
#particleCanvas-Blue,
#particleCanvas-White {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

#particleCanvas-Blue {
    width: 300px;
    height: 300px;
}

#particleCanvas-White {
    width: 100%;
    height: 50%;
    opacity: 0.1;
}

/* Ensure particles.js canvas fills its container */
#particleCanvas-Blue canvas,
#particleCanvas-White canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* Keyframes for Rotate / Pulse Loading Animation */
@keyframes outer-rotate1 {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes outer-rotate2 {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@keyframes text-colour {
    0% {
        color: #1B5F70;
    }
    50% {
        color: #3d95ab;
    }
    100% {
        color: #1B5F70;
    }
}