/* ConnectAlign - Loading Animation */
/* Extracted to independent CSS file */
/* Animated background shown while Blazor WebAssembly loads */

/* ===================================
   Keyframe Animation
   =================================== */
@keyframes slide {
    0% {
        transform: translateX(-25%);
    }

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

/* ===================================
   Animated Gradient Background
   =================================== */
/* Three-layered animated gradient with purple tones */
.mud-wasm {
    animation: slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, #594ae2 50%, #7467ef 50%);
    bottom: 0;
    left: -50%;
    opacity: .5;
    position: fixed;
    right: -50%;
    top: 0;
    z-index: -1;
}

/* ===================================
   Logo Container
   =================================== */
/* Centered logo display with responsive padding */
.mud-wasm-cont {
    left: 50%;
    padding: 10vmin;
    position: fixed;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* ===================================
   Usage Example (inside index.html)
   =================================== */
/*
<div id="app">
    <div style="height:100%;width:100%;margin:0;position:fixed;">
        <!-- Main gradient layer (3 seconds) -->
        <div class="mud-wasm"></div>

        <!-- Second layer, reverse direction (4 seconds) -->
        <div class="mud-wasm" style="animation-direction:alternate-reverse;animation-duration:4s;"></div>

        <!-- Third layer (5 seconds) -->
        <div class="mud-wasm" style="animation-duration:5s;"></div>

        <!-- Centered logo -->
        <div class="mud-wasm-cont">
            <img src="connect-align-logo.png" alt="Logo" />
        </div>
    </div>
</div>
*/

/* ===================================
   Customization Tips
   =================================== */
/*
   1. Change Colors:
      background-image: linear-gradient(-60deg, #YourColor1 50%, #YourColor2 50%);

   2. Animation Speed:
      animation: slide 5s ease-in-out infinite alternate; (slower)

   3. Opacity Adjustment:
      opacity: .3; (more transparent)

   4. Logo Size:
      .mud-wasm-cont img { width: 200px; }
*/