/**
 * CSS para Animação de Abertura (Intro) - Supernorte
 * Animação premium com logo e transição suave
 */

.intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: fadeOut 1s ease-in-out 5.5s forwards;
}

/* Container principal */
.build-container {
    position: relative;
    width: 800px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

/* Peças geométricas que constroem a logo */
.build-piece {
    position: absolute;
    opacity: 0;
}

/* Círculos que voam para formar o fundo */
.square {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primaria, #2d9b94), #3cb5aa);
    box-shadow: 0 10px 30px rgba(45, 155, 148, 0.3);
}

.square-1 {
    top: 50%;
    left: -200px;
    transform: translateY(-50%) rotate(0deg) scale(0.5);
    animation: squareFly1 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
}

.square-2 {
    top: 50%;
    right: -200px;
    transform: translateY(-50%) rotate(0deg) scale(0.5);
    background: linear-gradient(135deg, var(--color-secundaria, #ff9534), #ffad5c);
    box-shadow: 0 10px 30px rgba(255, 149, 52, 0.3);
    animation: squareFly2 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards;
}

.square-3 {
    top: -200px;
    left: 50%;
    transform: translateX(-50%) rotate(0deg) scale(0.5);
    background: linear-gradient(135deg, #3cb5aa, var(--color-primaria, #2d9b94));
    animation: squareFly3 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s forwards;
}

.square-4 {
    bottom: -200px;
    left: 50%;
    transform: translateX(-50%) rotate(0deg) scale(0.5);
    background: linear-gradient(135deg, #ffad5c, var(--color-secundaria, #ff9534));
    box-shadow: 0 10px 30px rgba(255, 149, 52, 0.3);
    animation: squareFly4 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s forwards;
}

/* Círculos que criam profundidade */
.depth-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0;
}

.circle-1 {
    width: 400px;
    height: 400px;
    border: 2px solid rgba(45, 155, 148, 0.2);
    animation: circleExpand 2s ease-out 1.5s forwards;
}

.circle-2 {
    width: 400px;
    height: 400px;
    border: 2px solid rgba(255, 149, 52, 0.2);
    animation: circleExpand 2s ease-out 1.7s forwards;
}

/* Logo container */
.logo-wrapper {
    position: relative;
    z-index: 10;
    opacity: 0;
    transform: scale(0.3) rotateY(180deg);
    animation: logoAssemble 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) 2.2s forwards;
}

.logo-wrapper img {
    width: 480px;
    height: auto;
    filter: drop-shadow(0 20px 50px rgba(45, 155, 148, 0.25));
    max-width: 100%;
}

/* Barras laterais com efeito wipe */
.side-bar {
    position: absolute;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(45, 155, 148, 0.1), transparent);
    opacity: 0;
}

.bar-left {
    left: 0;
    top: 0;
    animation: barWipeRight 1.2s ease-out 0.2s forwards;
}

.bar-right {
    right: 0;
    top: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 149, 52, 0.1), transparent);
    animation: barWipeLeft 1.2s ease-out 0.4s forwards;
}

/* Linhas de scan futurísticas */
.scan-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--color-primaria, #2d9b94) 50%, 
        transparent 100%);
    top: 50%;
    opacity: 0;
    animation: scanLine 2s ease-in-out 1.8s forwards;
}

/* Partículas que orbitam */
.orbit-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color-primaria, #2d9b94);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 15px currentColor;
}

.orbit-particle.orange {
    background: var(--color-secundaria, #ff9534);
}

.particle-1 {
    animation: orbit 3s linear 2.5s infinite;
}

.particle-2 {
    animation: orbit 3s linear 2.7s infinite;
    animation-direction: reverse;
}

.particle-3 {
    animation: orbit 3s linear 2.9s infinite;
}


/* Animações */
@keyframes squareFly1 {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateX(0) rotate(0deg) scale(0.5);
    }
    100% {
        opacity: 0.15;
        transform: translateY(-50%) translateX(250px) rotate(90deg) scale(1);
    }
}

@keyframes squareFly2 {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateX(0) rotate(0deg) scale(0.5);
    }
    100% {
        opacity: 0.15;
        transform: translateY(-50%) translateX(-250px) rotate(-90deg) scale(1);
    }
}

@keyframes squareFly3 {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0) rotate(0deg) scale(0.5);
    }
    100% {
        opacity: 0.15;
        transform: translateX(-50%) translateY(250px) rotate(180deg) scale(1);
    }
}

@keyframes squareFly4 {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0) rotate(0deg) scale(0.5);
    }
    100% {
        opacity: 0.15;
        transform: translateX(-50%) translateY(-250px) rotate(-180deg) scale(1);
    }
}

@keyframes circleExpand {
    0% {
        width: 400px;
        height: 400px;
        opacity: 0;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        width: 700px;
        height: 700px;
        opacity: 0;
    }
}

@keyframes logoAssemble {
    0% {
        opacity: 0;
        transform: scale(0.3) rotateY(180deg);
    }
    70% {
        opacity: 1;
        transform: scale(1.08) rotateY(0deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
    }
}

@keyframes barWipeRight {
    0% {
        width: 0;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 0;
    }
}

@keyframes barWipeLeft {
    0% {
        width: 0;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 0;
    }
}

@keyframes scanLine {
    0%, 100% {
        opacity: 0;
        top: 50%;
    }
    50% {
        opacity: 0.8;
        top: 50%;
    }
}

@keyframes orbit {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg) translateX(250px) scale(0);
    }
    10% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(36deg) translateX(250px) scale(1);
    }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(324deg) translateX(250px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(360deg) translateX(250px) scale(0);
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* Transição suave para o conteúdo */
body.intro-active {
    overflow: hidden;
}

/* Esconder todo o conteúdo durante a animação */
body.intro-active .main-content,
body.intro-active .site-header-wrapper,
body.intro-active footer,
body.intro-active .whatsapp-float {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.intro-complete .main-content,
body.intro-complete .site-header-wrapper,
body.intro-complete footer,
body.intro-complete .whatsapp-float {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

@media (max-width: 768px) {
    .build-container {
        width: 500px;
        height: 400px;
    }

    .logo-wrapper img {
        width: 350px;
    }

    .square {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 480px) {
    .build-container {
        width: 350px;
        height: 350px;
    }

    .logo-wrapper img {
        width: 280px;
    }

    .square {
        width: 50px;
        height: 50px;
    }
}