/* Animations CSS - Keyframes y clases de animación */

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

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

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

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-250px * 7));
    }
}

/* Animation delay utility */
.animation-delay-2s {
    animation-delay: 2s;
}

/* iOS-style glass effects */
.ios-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.ios-glass-dark {
    background: rgba(3, 20, 41, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #07fefa 0%, #005b7b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Logo carousel animation */
@keyframes float-up {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

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

.logo-carousel {
    display: flex;
    animation: scroll 30s linear infinite;
}

.logo-carousel:hover {
    animation-play-state: paused;
}

.logo-track {
    display: flex;
    gap: 3rem;
}

/* Logo filters */
.logo-navy {
    filter: brightness(0) saturate(100%) invert(7%) sepia(29%) saturate(4119%) hue-rotate(193deg) brightness(93%) contrast(99%);
}

.logo-ocean {
    filter: brightness(0) saturate(100%) invert(21%) sepia(66%) saturate(1194%) hue-rotate(171deg) brightness(92%) contrast(101%);
}

.logo-cyan {
    filter: brightness(0) saturate(100%) invert(73%) sepia(97%) saturate(2372%) hue-rotate(129deg) brightness(106%) contrast(99%);
}

/* Animation classes */
.animate-fade-in {
    animation: fadeIn 0.6s ease-out;
}

.animate-slide-up {
    animation: slideUp 0.6s ease-out;
}

.animate-scale-in {
    animation: scaleIn 0.4s ease-out;
}

/* Hover effects */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
}