/* ===================================
   GRUPO SEAL - ANIMACIONES
   ================================= */

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translateY(0);
    }
    40%, 43% {
        transform: translateY(-10px);
    }
    70% {
        transform: translateY(-5px);
    }
    90% {
        transform: translateY(-2px);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes swing {
    20% {
        transform: rotate3d(0, 0, 1, 15deg);
    }
    40% {
        transform: rotate3d(0, 0, 1, -10deg);
    }
    60% {
        transform: rotate3d(0, 0, 1, 5deg);
    }
    80% {
        transform: rotate3d(0, 0, 1, -5deg);
    }
    100% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

@keyframes glow {
    0% {
        box-shadow: 0 0 5px var(--primary);
    }
    50% {
        box-shadow: 0 0 20px var(--primary), 0 0 30px var(--primary);
    }
    100% {
        box-shadow: 0 0 5px var(--primary);
    }
}

@keyframes floating {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-200deg);
    }
    to {
        opacity: 1;
        transform: rotate(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
    }
    to {
        transform: scale(1);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

@keyframes shine {
    0% {
        opacity: 0;
        transform: scale(0) rotate(30deg) translate(-10%, -10%);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(3) rotate(30deg) translate(20%, 20%);
    }
}

/* CLASES DE ANIMACIÓN */
.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}

.fade-in-up {
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
}

.fade-in-left {
    opacity: 0;
    animation: fadeInLeft 1s ease forwards;
}

.fade-in-right {
    opacity: 0;
    animation: fadeInRight 1s ease forwards;
}

.fade-in-down {
    opacity: 0;
    animation: fadeInDown 1s ease forwards;
}

.scale-in {
    opacity: 0;
    animation: scaleIn 0.8s ease forwards;
}

.slide-in-left {
    opacity: 0;
    animation: slideInLeft 1s ease forwards;
}

.slide-in-right {
    opacity: 0;
    animation: slideInRight 1s ease forwards;
}

.bounce {
    animation: bounce 1s ease infinite;
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

.swing {
    animation: swing 1s ease-in-out;
}

.shake {
    animation: shake 0.5s ease-in-out;
}

.glow {
    animation: glow 2s ease-in-out infinite;
}

.floating {
    animation: floating 3s ease-in-out infinite;
}

.rotate-in {
    opacity: 0;
    animation: rotateIn 1s ease forwards;
}

.zoom-in {
    opacity: 0;
    animation: zoomIn 0.8s ease forwards;
}

.slide-down {
    opacity: 0;
    animation: slideDown 1s ease forwards;
}

.slide-up {
    opacity: 0;
    animation: slideUp 1s ease forwards;
}

/* DELAYS */
.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}

.delay-4 {
    animation-delay: 0.8s;
}

.delay-5 {
    animation-delay: 1s;
}

.delay-6 {
    animation-delay: 1.2s;
}

.delay-7 {
    animation-delay: 1.4s;
}

.delay-8 {
    animation-delay: 1.6s;
}

.delay-9 {
    animation-delay: 1.8s;
}

.delay-10 {
    animation-delay: 2s;
}

/* ANIMACIONES DE SCROLL */
.scroll-animation {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-animation.show {
    opacity: 1;
    transform: translateY(0);
}

.scroll-animation-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-animation-left.show {
    opacity: 1;
    transform: translateX(0);
}

.scroll-animation-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-animation-right.show {
    opacity: 1;
    transform: translateX(0);
}

.scroll-animation-up {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-animation-up.show {
    opacity: 1;
    transform: translateY(0);
}

.scale-up {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scale-up.show {
    opacity: 1;
    transform: scale(1);
}

.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal.show {
    opacity: 1;
    transform: translateY(0);
}

/* ANIMACIONES HOVER */
.hover-grow {
    transition: transform 0.3s ease;
}

.hover-grow:hover {
    transform: scale(1.05);
}

.hover-float {
    transition: transform 0.3s ease;
}

.hover-float:hover {
    transform: translateY(-5px);
}

.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(10, 37, 60, 0.3);
}

.hover-rotate {
    transition: transform 0.3s ease;
}

.hover-rotate:hover {
    transform: rotate(5deg);
}

.hover-bounce {
    transition: transform 0.3s ease;
}

.hover-bounce:hover {
    animation: bounce 0.5s ease;
}

/* ANIMACIONES ESPECÍFICAS PARA COMPONENTES */

/* Header animación */
.header {
    animation: slideDown 0.8s ease;
}

/* Logo animación */
.logo img {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.logo img:hover {
    transform: scale(1.1) rotate(2deg);
    filter: brightness(1.1);
}

/* Botones animación */
.btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(10, 37, 60, 0.2);
}

.btn:active {
    transform: translateY(0);
}

/* Service cards animación */
.service-card {
    transition: all 0.4s ease;
}

.service-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(10, 37, 60, 0.15);
}

.service-card .service-image {
    overflow: hidden;
}

.service-card:hover .service-image img {
    transform: scale(1.1) rotate(1deg);
}

/* Pillar boxes animación */
.pillar-box {
    transition: all 0.4s ease;
}

.pillar-box:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.pillar-box:hover .pillar-icon {
    animation: bounce 0.6s ease;
}

/* Client logos animación */
.client-logo {
    transition: all 0.3s ease;
}

.client-logo:hover {
    transform: translateY(-10px) scale(1.05);
    filter: grayscale(0);
    box-shadow: 0 15px 30px rgba(10, 37, 60, 0.2);
}

.client-logo img {
    transition: transform 0.3s ease;
}

.client-logo:hover img {
    transform: scale(1.1);
}

/* Achievement cards animación */
.achievement-card {
    transition: all 0.3s ease;
}

.achievement-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(10, 37, 60, 0.15);
}

.achievement-card:hover .achievement-icon {
    animation: pulse 1s ease;
}

/* Timeline animación */
.timeline-item {
    transition: all 0.3s ease;
}

.timeline-item:hover .timeline-content {
    transform: scale(1.02);
    box-shadow: 0 15px 30px rgba(10, 37, 60, 0.15);
}

.timeline-dot {
    transition: all 0.3s ease;
}

.timeline-item:hover .timeline-dot {
    transform: scale(1.3);
    box-shadow: 0 0 20px var(--primary);
}

/* Sector boxes animación */
.sector-box:hover .sector-icon {
    animation: swing 0.6s ease;
}

/* Back to top animación */
.back-to-top {
    transition: all 0.3s ease;
}

.back-to-top:hover {
    transform: translateY(-5px) scale(1.1);
    animation: glow 1s ease;
}

/* Footer animación */
.footer-links a {
    transition: all 0.3s ease;
}

.footer-links a:hover {
    transform: translateX(5px);
}

.footer-contact-icon {
    transition: all 0.3s ease;
}

.footer-contact-icon:hover {
    animation: bounce 0.6s ease;
}

/* Carrusel animación */
.hero-slide {
    transition: opacity 1.5s ease, transform 0.3s ease;
}

.hero-slide.active {
    animation: fadeIn 1.5s ease;
}

/* Texto typing effect */
.typing-effect {
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid var(--primary);
    animation: typewriter 3s steps(40, end), blink 0.75s step-end infinite;
}

/* Shine effect para certificaciones */
.cert-box::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    transition: all 1.5s ease;
    opacity: 0;
}

.cert-box:hover::after {
    animation: shine 1.5s ease-in-out;
}

/* Loading animación */
.loading {
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Entrada suave para formularios */
.form-group {
    transition: all 0.3s ease;
}

.form-group:focus-within {
    transform: scale(1.02);
}

/* Animación para iconos */
.icon-hover {
    transition: all 0.3s ease;
}

.icon-hover:hover {
    transform: scale(1.2) rotate(10deg);
    color: var(--secondary);
}

/* Efectos para modo oscuro */
@media (prefers-color-scheme: dark) {
    .glow {
        animation: glow-dark 2s ease-in-out infinite;
    }
    
    @keyframes glow-dark {
        0% {
            box-shadow: 0 0 5px rgba(200, 201, 202, 0.5);
        }
        50% {
            box-shadow: 0 0 20px rgba(200, 201, 202, 0.8), 0 0 30px rgba(200, 201, 202, 0.6);
        }
        100% {
            box-shadow: 0 0 5px rgba(200, 201, 202, 0.5);
        }
    }
}

/* Animaciones para accesibilidad */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .scroll-animation,
    .scroll-animation-left,
    .scroll-animation-right,
    .scroll-animation-up,
    .scale-up,
    .scroll-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    
    .fade-in,
    .fade-in-up,
    .fade-in-left,
    .fade-in-right,
    .fade-in-down {
        opacity: 1;
        animation: none;
    }
}