@keyframes floatIcon {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes pulseDot {
    0%,
    100% {
        box-shadow: 0 0 0 5px rgba(45, 212, 191, 0.1);
    }

    50% {
        box-shadow: 0 0 0 9px rgba(45, 212, 191, 0.02);
    }
}

@keyframes scrollBounce {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

@keyframes roleFade {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.floating-icon {
    animation: floatIcon 4s ease-in-out infinite;
}

.icon-bottom-left,
.icon-bottom-right {
    animation-delay: 1.2s;
}

.availability-dot {
    animation: pulseDot 2s ease-in-out infinite;
}

.scroll-indicator i {
    animation: scrollBounce 1.6s ease-in-out infinite;
}

.role-change-animation {
    animation: roleFade 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.quality-card:nth-child(2) {
    transition-delay: 0.08s;
}

.quality-card:nth-child(3) {
    transition-delay: 0.16s;
}

.quality-card:nth-child(4) {
    transition-delay: 0.08s;
}

.quality-card:nth-child(5) {
    transition-delay: 0.16s;
}

.quality-card:nth-child(6) {
    transition-delay: 0.24s;
}

@keyframes skillPanelFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}