/* ========================= */
/* ANIMACIONES GLOBALES */
/* ========================= */

/* Animación de desvanecimiento (fade in) */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Animación de deslizamiento desde la izquierda */
@keyframes slide-in-left {
    0% {
        transform: translateX(-200%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Animación de deslizamiento desde la derecha */
@keyframes slide-in-right {
    0% {
        transform: translateX(200%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Animación de máquina de escribir */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}

/* Animación de movimiento de gradiente */
@keyframes moveGradient {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

/* Animación de aparición con desenfoque */
@keyframes animate {
    from {
        opacity: 0;
        transform: translate(0, 50px);
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: translate(0);
        filter: blur(0);
    }
}

/* Animación de rotación para elementos decorativos */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
    50% {
        border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
    }
    100% {
        transform: rotate(360deg);
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
}

/* ========================= */
/* ANIMACIONES DEL MENÚ */
/* ========================= */

/* Animación de brillo para el menú */
@keyframes menuGlow {
    0% {
        box-shadow: inset -6px 5px 53px 5px rgba(255, 255, 255, 0.259), inset 0 0 0px rgba(255, 255, 255, 0);
    }
    50% {
        box-shadow: inset -6px 5px 53px 5px rgba(255, 255, 255, 0.259), inset 0 0 30px rgba(255, 255, 255, 0.6);
    }
    100% {
        box-shadow: inset -6px 5px 53px 5px rgba(255, 255, 255, 0.259), inset 0 0 0px rgba(255, 255, 255, 0);
    }
}

.menu {
    animation: menuGlow 2s ease-out forwards;
}

/* Desactivar animación del menú en móviles */
@media (max-width: 800px) {
    .menu {
        animation: none;
    }
}

/* ========================= */
/* ANIMACIONES DEL HEADER */
/* ========================= */

/* Animación div intro */
.headerinformation { 
    animation: fadeIn 0.7s ease-in-out forwards;
}

/* ========================= */
/* ANIMACIONES DEL TÍTULO */
/* ========================= */

.split-text-container {
    display: flex;
    font-size: 90px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    overflow: hidden;
    margin: 0;
    line-height: 1.2;
}

.text-part {
    display: inline-block;
    position: relative;
    transform: translateX(0);
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.text-part.left {
    transform: translateX(-200%);
    animation-name: slide-in-left;
}

.text-part.right {
    transform: translateX(200%);
    animation-name: slide-in-right;
}

/* ========================= */
/* ANIMACIONES DEL HERO */
/* ========================= */

.hero h2 {
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid white;
    max-width: fit-content;
    animation: 
        typing 4s steps(50, end) forwards,
        blink 1s step-end infinite;
    display: inline-block;
}

/* ========================= */
/* ANIMACIONES DE BOTONES */
/* ========================= */

/* Animación botones inicio */
.btn-primary.powerbi:hover, 
.btn-primary.powerbi:focus,
.btn-primary.requestademo:hover, 
.btn-primary.requestademo:focus { 
    box-shadow: 0 0.5em 0.5em -0.4em #000000,
                inset -6px 5px 53px 5px rgba(255, 255, 255, 0.259); 
    transform: translateY(-0.25em);
}

/* Animación botones cards */
.btn-secondary:hover, 
.btn-tertiary:hover, 
.content button:hover, 
.thirdsection .content button:hover { box-shadow: 0 0 25px 1px #b5ff08; transform: scale(1.03);}


/* ========================= */
/* ANIMACIONES DE LINKS */
/* ========================= */

/* Animación links del menú y footer */
.menulink:hover, 
.linksfooter:hover { 
    color: #94d106; 
    transition: all 0.3s ease; 
    transform: scale(1.05);
}
.dropdown-link:hover { color: #94d106; border-radius: 10px; margin: 0 5px; background: rgba(255, 255, 255, 0.1); }

.caption:hover{text-shadow: 0 0 1px #94d106, 0 0 2px #94d106; transition: 0.3s ease;}

/* ========================= */
/* ANIMACIONES DEL BOTÓN HAMBURGUESA */
/* ========================= */

/* Transformación del botón hamburguesa a "X" cuando está activo */
.hamburger.active span:nth-child(1) { 
    transform: rotate(45deg) translate(8px, 6px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) { 
    transform: rotate(-45deg) translate(7px, -5px);
}

/* ========================= */
/* ANIMACIONES DE CARDS Y SUBTÍTULOS */
/* ========================= */

/* Animación sutil de brillo para subtítulos de cards */
@keyframes subtleGlow {
    0%, 100% {
        text-shadow: 0 0 0px #94d106;
        opacity: 1;
    }
    50% {
        text-shadow: 0 0 2px #94d106, 0 0 4px #94d106;
        opacity: 0.95;
    }
}

/* ========================= */
/*       BOTON SLIDER        */
/* ========================= */

.button button:hover { background-color: #fff; transform: scale(1.1);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); }
.thirdsection .button button:active { transform: scale(0.95); }

/* ========================= */
/*    ELEMENTO DECORATIVO    */
/*     .secondsection        */
/* ========================= */

/* Configuración necesaria para el pseudoelemento decorativo */
.secondsection {
    position: relative;  /* Necesario para que el ::before se posicione correctamente */
    overflow: hidden;    /* Opcional: evita que el blur se desborde */
}

/* Elemento decorativo con animación de rotación */
.secondsection::before {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    filter: blur(70px);
    background-image: linear-gradient(#0a1966, #91d106);
    opacity: 1;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: rotate 8s linear infinite;  /* Animación de rotación continua */
    z-index: 0;
    
    /* Centrado del elemento decorativo */
    top: 20%;
    left: 40%;
    transform: translate(-50%, -50%);
}

/* Asegura que el contenido de .secondsection esté por encima del decorativo */
.secondsection > * {
    position: relative;
    z-index: 1;
}