/* Custom animations */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fade-in 1s ease-out forwards;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

img {
  @apply transition-all duration-300;
}

img:hover {
  @apply transform scale-[1.02];
}

/* Add these new animations */
@keyframes card-enter {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.group:hover .group-hover\:animate-card-enter {
    animation: card-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Gradient overlay transition */
.bg-gradient-overlay {
    background: linear-gradient(
        135deg,
        rgba(6, 182, 212, 0.1) 0%,
        rgba(6, 182, 212, 0.05) 50%,
        rgba(6, 182, 212, 0.01) 100%
    );
    transition: opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Add to your CSS */
.connector {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 3s linear forwards;
    stroke-linecap: round;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

.node {
    transition: transform 0.3s ease;
}

.node:hover {
    transform: scale(1.2);
}

#formMessage {
    @apply transition-all duration-300 ease-out;
}

#formMessage.hidden {
    @apply opacity-0 -translate-y-2 pointer-events-none;
}

#formMessage:not(.hidden) {
    @apply opacity-100 translate-y-0;
}