<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Spinner - Bravuscor</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(26, 26, 26, 0.95);
            backdrop-filter: blur(8px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            animation: fadeIn 0.3s ease-in;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Container do Spinner */
        .spinner-container {
            position: relative;
            width: 180px;
            height: 180px;
            margin-bottom: 30px;
        }

        /* Círculo externo girando */
        .spinner-ring {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 160px;
            height: 160px;
            border: 4px solid transparent;
            border-top: 4px solid #ff8c00;
            border-right: 4px solid #ffa500;
            border-radius: 50%;
            animation: spinRing 2s linear infinite;
        }

        @keyframes spinRing {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        /* Círculo interno girando ao contrário */
        .spinner-ring-inner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 140px;
            height: 140px;
            border: 3px solid transparent;
            border-bottom: 3px solid rgba(255, 140, 0, 0.5);
            border-left: 3px solid rgba(255, 165, 0, 0.5);
            border-radius: 50%;
            animation: spinRingInner 1.5s linear infinite reverse;
        }

        @keyframes spinRingInner {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        /* Montanha central */
        .mountain-logo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            animation: mountainPulse 3s ease-in-out infinite;
        }

        @keyframes mountainPulse {
            0%, 100% { transform: translate(-50%, -50%) scale(1); }
            50% { transform: translate(-50%, -50%) scale(1.05); }
        }

        /* Base da montanha */
        .mountain-peak {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 70px solid #4b5563;
        }

        /* Iluminação na montanha */
        .mountain-peak::before {
            content: '';
            position: absolute;
            top: -30px;
            left: -25px;
            width: 50px;
            height: 60px;
            background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 60%);
        }

        /* Neve no topo */
        .snow-cap {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 25px solid rgba(255, 255, 255, 0.95);
            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
            animation: snowGlitter 2s ease-in-out infinite;
        }

        @keyframes snowGlitter {
            0%, 100% { 
                filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
                opacity: 1;
            }
            50% { 
                filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1));
                opacity: 0.9;
            }
        }

        /* Floco de neve decorativo */
        .snowflake {
            position: absolute;
            top: 15px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            font-size: 20px;
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
            animation: snowflakeFloat 3s ease-in-out infinite;
        }

        @keyframes snowflakeFloat {
            0%, 100% { 
                transform: translateX(-50%) translateY(0) rotate(0deg);
            }
            50% { 
                transform: translateX(-50%) translateY(-3px) rotate(180deg);
            }
        }

        /* Mascote Lobo */
        .mascot-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            opacity: 0;
            animation: mascotAppear 6s ease-in-out infinite;
        }

        @keyframes mascotAppear {
            0%, 20%, 100% { 
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.5) rotate(-10deg);
            }
            25%, 40% { 
                opacity: 1;
                transform: translate(-50%, -50%) scale(1) rotate(0deg);
            }
            45% { 
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.5) rotate(10deg);
            }
        }

        /* Lobo SVG estilizado */
        .wolf {
            width: 100%;
            height: 100%;
            filter: drop-shadow(0 4px 8px rgba(255, 140, 0, 0.5));
        }

        /* Braço do lobo acenando */
        .wolf-arm {
            animation: waveArm 0.5s ease-in-out infinite;
            transform-origin: 70% 30%;
        }

        @keyframes waveArm {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(-20deg); }
        }

        /* Pose de força */
        .wolf.power-pose {
            animation: powerPose 0.8s ease-in-out;
        }

        @keyframes powerPose {
            0% { transform: scale(1); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }

        /* Partículas de energia */
        .energy-particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #ff8c00;
            border-radius: 50%;
            animation: energyBurst 2s ease-out infinite;
            opacity: 0;
        }

        .energy-particle:nth-child(1) { top: 20%; left: 20%; animation-delay: 0s; }
        .energy-particle:nth-child(2) { top: 30%; right: 20%; animation-delay: 0.3s; }
        .energy-particle:nth-child(3) { bottom: 30%; left: 25%; animation-delay: 0.6s; }
        .energy-particle:nth-child(4) { bottom: 25%; right: 25%; animation-delay: 0.9s; }

        @keyframes energyBurst {
            0% {
                opacity: 0;
                transform: scale(0) translate(0, 0);
            }
            30% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                transform: scale(1.5) translate(var(--tx, 20px), var(--ty, -20px));
            }
        }

        .energy-particle:nth-child(1) { --tx: -30px; --ty: -30px; }
        .energy-particle:nth-child(2) { --tx: 30px; --ty: -25px; }
        .energy-particle:nth-child(3) { --tx: -25px; --ty: 30px; }
        .energy-particle:nth-child(4) { --tx: 25px; --ty: 25px; }

        /* Texto de loading */
        .loading-text {
            color: #ff8c00;
            font-size: 20px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 3px;
            margin-bottom: 10px;
            animation: textPulse 2s ease-in-out infinite;
        }

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

        .loading-message {
            color: #9ca3af;
            font-size: 14px;
            margin-bottom: 20px;
        }

        /* Barra de progresso */
        .progress-bar {
            width: 250px;
            height: 4px;
            background: #374151;
            border-radius: 2px;
            overflow: hidden;
            margin-bottom: 15px;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #ff8c00, #ffa500, #ff8c00);
            background-size: 200% 100%;
            animation: progressSlide 1.5s linear infinite;
            width: 70%;
        }

        @keyframes progressSlide {
            from { background-position: 0% 50%; }
            to { background-position: 200% 50%; }
        }

        /* Motto */
        .motto {
            color: #6b7280;
            font-size: 12px;
            font-style: italic;
        }

        /* Responsivo */
        @media (max-width: 480px) {
            .spinner-container {
                width: 150px;
                height: 150px;
            }

            .spinner-ring {
                width: 130px;
                height: 130px;
            }

            .spinner-ring-inner {
                width: 110px;
                height: 110px;
            }

            .mountain-logo {
                width: 80px;
                height: 80px;
            }

            .mountain-peak {
                border-left: 40px solid transparent;
                border-right: 40px solid transparent;
                border-bottom: 60px solid #4b5563;
            }
        }
    </style>
</head>
<body>
    <div class="loading-overlay">
        <div class="spinner-container">
            <!-- Anéis girantes -->
            <div class="spinner-ring"></div>
            <div class="spinner-ring-inner"></div>
            
            <!-- Partículas de energia -->
            <div class="energy-particle"></div>
            <div class="energy-particle"></div>
            <div class="energy-particle"></div>
            <div class="energy-particle"></div>
            
            <!-- Logo da Montanha -->
            <div class="mountain-logo">
                <div class="mountain-peak"></div>
                <div class="snow-cap"></div>
                <div class="snowflake">❄</div>
            </div>
            
            <!-- Mascote Lobo -->
            <div class="mascot-container">
                <svg class="wolf" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                    <!-- Corpo do lobo -->
                    <ellipse cx="50" cy="55" rx="25" ry="30" fill="#ff8c00"/>
                    
                    <!-- Cabeça -->
                    <circle cx="50" cy="35" r="18" fill="#ff8c00"/>
                    
                    <!-- Orelhas -->
                    <path d="M 38 22 L 35 12 L 42 20 Z" fill="#d97706"/>
                    <path d="M 62 22 L 65 12 L 58 20 Z" fill="#d97706"/>
                    
                    <!-- Focinho -->
                    <ellipse cx="50" cy="40" rx="8" ry="6" fill="#ffa500"/>
                    
                    <!-- Olhos -->
                    <circle cx="44" cy="32" r="3" fill="#1a1a1a"/>
                    <circle cx="56" cy="32" r="3" fill="#1a1a1a"/>
                    <circle cx="45" cy="31" r="1.5" fill="white"/>
                    <circle cx="57" cy="31" r="1.5" fill="white"/>
                    
                    <!-- Nariz -->
                    <circle cx="50" cy="42" r="2" fill="#1a1a1a"/>
                    
                    <!-- Boca sorrindo -->
                    <path d="M 45 44 Q 50 47 55 44" stroke="#1a1a1a" stroke-width="1.5" fill="none"/>
                    
                    <!-- Braço acenando -->
                    <g class="wolf-arm">
                        <rect x="65" y="45" width="8" height="20" rx="4" fill="#ff8c00"/>
                        <circle cx="69" cy="68" r="5" fill="#ffa500"/>
                    </g>
                    
                    <!-- Braço normal -->
                    <rect x="27" y="50" width="8" height="18" rx="4" fill="#ff8c00"/>
                    
                    <!-- Pernas -->
                    <rect x="40" y="75" width="7" height="15" rx="3" fill="#d97706"/>
                    <rect x="53" y="75" width="7" height="15" rx="3" fill="#d97706"/>
                    
                    <!-- Cauda -->
                    <path d="M 25 60 Q 15 55 18 45" stroke="#d97706" stroke-width="6" fill="none" stroke-linecap="round"/>
                    
                    <!-- Símbolo de força (opcional) -->
                    <text x="75" y="30" font-size="12" fill="#ffa500" opacity="0.8">💪</text>
                </svg>
            </div>
        </div>

        <!-- UI Text -->
        <div class="loading-text">CARREGANDO</div>
        <div class="loading-message">Aguarde um momento...</div>
        <div class="progress-bar">
            <div class="progress-fill"></div>
        </div>
        <div class="motto">"É impossível até que se faça"</div>
    </div>

    <script>
        // Alternar entre acenando e pose de força
        let currentPose = 'wave';
        const wolf = document.querySelector('.wolf');
        const mascotContainer = document.querySelector('.mascot-container');

        mascotContainer.addEventListener('animationiteration', () => {
            if (currentPose === 'wave') {
                wolf.classList.add('power-pose');
                currentPose = 'power';
            } else {
                wolf.classList.remove('power-pose');
                currentPose = 'wave';
            }
        });

        // Funções de controle
        function showLoading(message) {
            const overlay = document.querySelector('.loading-overlay');
            if (message) {
                document.querySelector('.loading-message').textContent = message;
            }
            if (overlay) overlay.style.display = 'flex';
        }

        function hideLoading() {
            const overlay = document.querySelector('.loading-overlay');
            if (overlay) {
                overlay.style.animation = 'fadeOut 0.3s ease-out';
                setTimeout(() => {
                    overlay.style.display = 'none';
                    overlay.style.animation = 'fadeIn 0.3s ease-in';
                }, 300);
            }
        }

        const style = document.createElement('style');
        style.textContent = '@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }';
        document.head.appendChild(style);

        // Demo: esconder após 8 segundos
        setTimeout(hideLoading, 8000);
    </script>
</body>
</html>