/* =====================================================
           RESET
        ===================================================== */

        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }


        html,
        body {

            margin: 0;
            width: 100%;
            height: 100%;

            font-family:
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                Arial,
                sans-serif;

        }


        /* =====================================================
           LOADING
        ===================================================== */

        #initialLoading {

            position: fixed;

            inset: 0;

            z-index: 99999;

            display: flex;

            align-items: center;

            justify-content: center;

            overflow: hidden;

            background:

                radial-gradient(
                    circle at 50% 43%,
                    rgba(37, 99, 235, .12),
                    transparent 30%
                ),

                #071428;

            opacity: 1;

            visibility: visible;

            transition:
                opacity .55s cubic-bezier(.4,0,.2,1),
                visibility .55s ease;

        }


        /* =====================================================
           QUANDO TERMINA
        ===================================================== */

        #initialLoading.hide {

            opacity: 0;

            visibility: hidden;

            pointer-events: none;

        }


        /* =====================================================
           DECORAÇÃO DE FUNDO
        ===================================================== */

        .loading-background {

            position: absolute;

            width: 420px;

            height: 420px;

            border-radius: 50%;

            background:
                radial-gradient(
                    circle,
                    rgba(37,99,235,.08),
                    transparent 68%
                );

            filter: blur(10px);

            animation:
                backgroundPulse 4s ease-in-out infinite;

        }


        /* =====================================================
           CONTEÚDO
        ===================================================== */

        .loading-content {

            position: relative;

            z-index: 2;

            display: flex;

            flex-direction: column;

            align-items: center;

            text-align: center;

            animation:
                contentAppear .8s
                cubic-bezier(.22,1,.36,1)
                both;

        }


        /* =====================================================
           LOGO
        ===================================================== */

        .loading-logo-wrapper {

            position: relative;

            width: 96px;

            height: 96px;

            display: flex;

            align-items: center;

            justify-content: center;

        }


        /* brilho externo */

        .loading-logo-wrapper::before {

            content: "";

            position: absolute;

            inset: -14px;

            border-radius: 50%;

            background:
                radial-gradient(
                    circle,
                    rgba(37,99,235,.16),
                    transparent 65%
                );

            animation:
                logoGlow 2.5s ease-in-out infinite;

        }


        /* círculo */

        .loading-logo {

            position: relative;

            width: 78px;

            height: 78px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 22px;

            background: rgba(255,255,255,.97);

            box-shadow:

                0 18px 45px
                rgba(0,0,0,.22),

                0 0 0 1px
                rgba(255,255,255,.08);

            overflow: hidden;

            animation:
                logoFloat 2.8s ease-in-out infinite;

        }


        .loading-logo img {

            width: 54px;

            height: 54px;

            object-fit: contain;

            display: block;

        }


        /* =====================================================
           NOME
        ===================================================== */

        .loading-title {

            margin-top: 25px;

            color: #ffffff;

            font-size: 17px;

            font-weight: 600;

            letter-spacing: -.35px;

        }


        .loading-subtitle {

            margin-top: 6px;

            color:
                rgba(255,255,255,.42);

            font-size: 9px;

            font-weight: 400;

            letter-spacing: .9px;

            text-transform: uppercase;

        }


        /* =====================================================
           LOADING INDICATOR
        ===================================================== */

        .loading-indicator {

            margin-top: 26px;

            display: flex;

            align-items: center;

            gap: 5px;

        }


        .loading-dot {

            width: 5px;

            height: 5px;

            border-radius: 50%;

            background: #60a5fa;

            opacity: .25;

            animation:
                loadingDot 1.25s
                ease-in-out infinite;

        }


        .loading-dot:nth-child(2) {

            animation-delay: .15s;

        }


        .loading-dot:nth-child(3) {

            animation-delay: .30s;

        }


        /* =====================================================
           LINHA INFERIOR
        ===================================================== */

        .loading-footer {

            position: absolute;

            bottom: 28px;

            left: 0;

            width: 100%;

            text-align: center;

            color:
                rgba(255,255,255,.22);

            font-size: 7px;

            letter-spacing: .5px;

        }


        /* =====================================================
           ANIMAÇÕES
        ===================================================== */

        @keyframes contentAppear {

            from {

                opacity: 0;

                transform:
                    translateY(14px)
                    scale(.97);

            }

            to {

                opacity: 1;

                transform:
                    translateY(0)
                    scale(1);

            }

        }


        @keyframes logoFloat {

            0%,
            100% {

                transform:
                    translateY(0);

            }

            50% {

                transform:
                    translateY(-4px);

            }

        }


        @keyframes logoGlow {

            0%,
            100% {

                opacity: .5;

                transform:
                    scale(.92);

            }

            50% {

                opacity: 1;

                transform:
                    scale(1.08);

            }

        }


        @keyframes backgroundPulse {

            0%,
            100% {

                transform: scale(.9);

                opacity: .6;

            }

            50% {

                transform: scale(1.1);

                opacity: 1;

            }

        }


        @keyframes loadingDot {

            0%,
            80%,
            100% {

                opacity: .25;

                transform:
                    translateY(0);

            }

            40% {

                opacity: 1;

                transform:
                    translateY(-4px);

            }

        }


        /* =====================================================
           REDUZIR ANIMAÇÕES
        ===================================================== */

        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {

                animation: none !important;

                transition: none !important;

            }

        }