/* LOGO */
.logo {
    display: flex;
    align-items: center;
    position: relative;
}

.logo a {
    display: flex;
    align-items: center;
    position: relative;
    height: 32px;
    overflow: visible; 
    transition: all 0.5s;
    outline: none;
    border: none;
}

.logo img {
    display: block;
    position: relative;
    z-index: 10;
    /* Animação da Logo Principal: Brilho intenso e escala */
    animation: logo-impact-main 0.8s cubic-bezier(0.15, 0.85, 0.35, 1) forwards;
}

.logo-header-7solux img {
    height: 32px;
    width: 140px;
}

.logo-header-7solux:hover img,
.logo-header-7solux:focus-visible img {
    content: url("/assets/images/main-logo/logo-7solux-00ffff.webp");
}

.logo-footer-7s img {
    height: 32px;
    width: 50.6px;
}

.logo-footer-7s:hover img,
.logo-footer-7s:focus-visible img {
    content: url("/assets/images/secondary-logo/7s-seven-solux-dark-simple-00ffff.webp");
}

.logo a:hover, .logo a:focus-visible {
    transform: scale(1.1);
}

/* --- CLONES VIBRANTES (GHOST LAYERS) --- */
.logo a::before,
.logo a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/assets/images/main-logo/logo-7solux-white.webp") no-repeat center;
    background-size: contain;
    opacity: 0;
    z-index: 5;
    pointer-events: none;
}

/* Camada Superior - Cor: #00ffff (--text-h3-dark) */
.logo a::before {
    /* Filtro mais forte para nitidez */
    filter: drop-shadow(0 0 8px var(--text-h3-dark)) brightness(1.5);
    animation: slice-top 0.7s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

/* Camada Inferior - Cor: #40e7e7 (--blue-main) */
.logo a::after {
    filter: drop-shadow(0 0 8px var(--blue-main)) brightness(1.3);
    animation: slice-bottom 0.7s cubic-bezier(0.1, 0.9, 0.2, 1) 0.05s forwards;
}

/* --- KEYFRAMES DE IMPACTO --- */
@keyframes logo-impact-main {
    0% {
        opacity: 0;
        transform: scale(1.8); /* Começa bem maior para impacto */
        filter: brightness(5) blur(8px);
    }
    30% {
        opacity: 1;
        filter: brightness(2) blur(2px);
        transform: scale(0.9); /* "Encolhe" para dar sensação de choque */
    }
    100% {
        opacity: 1;
        filter: brightness(1) blur(0);
        transform: scale(1);
    }
}

/* Fatia de Cima: Salta para a esquerda e expande */
@keyframes slice-top {
    0% {
        opacity: 0;
        transform: translateX(-30px) scale(1.2) skewX(20deg);
        clip-path: inset(0 0 50% 0);
    }
    20% {
        opacity: 1;
        filter: brightness(2);
    }
    50% {
        opacity: 0.6;
        transform: translateX(10px) scale(1.1) skewX(-10deg);
    }
    100% {
        opacity: 0;
        transform: translateX(0) scale(1);
        clip-path: inset(0 0 50% 0);
    }
}

/* Fatia de Baixo: Salta para a direita e expande */
@keyframes slice-bottom {
    0% {
        opacity: 0;
        transform: translateX(30px) scale(1.2) skewX(-20deg);
        clip-path: inset(50% 0 0 0);
    }
    20% {
        opacity: 1;
        filter: brightness(2);
    }
    50% {
        opacity: 0.6;
        transform: translateX(-10px) scale(1.1) skewX(10deg);
    }
    100% {
        opacity: 0;
        transform: translateX(0) scale(1);
        clip-path: inset(50% 0 0 0);
    }
}
/* END LOGO */