@keyframes pulseAndDrift {
    0%, 100% {
        transform: scale(1) translate(0, 0);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.05) translate(5px, -5px);
        opacity: 0.7;
    }
}

@keyframes slowRotateAndPulseBorder {
    0% {
        transform: rotate(0deg) scale(1);
        border-color: var(--color-brand-medium); /* Użycie zmiennej CSS */
        opacity: 0.6;
    }
    50% {
        transform: rotate(180deg) scale(1.03);
        border-color: var(--color-brand-light); /* Zmiana koloru obramowania */
        opacity: 0.8;
    }
    100% {
        transform: rotate(360deg) scale(1);
        border-color: var(--color-brand-medium);
        opacity: 0.6;
    }
}

.hero-circle-small {
    animation: pulseAndDrift 10s infinite ease-in-out;
    /* Można dodać opóźnienie, aby nie startowały równo */
    animation-delay: 1s; 
}

.hero-circle-large {
    animation: slowRotateAndPulseBorder 20s infinite linear;
}

/* Subtelna animacja dla skośnego tła (opcjonalnie) */
@keyframes subtleBackgroundShift {
    0%, 100% {
        transform: translateX(0) skewX(-12deg);
        opacity: 0.1;
    }
    50% {
        transform: translateX(-10px) skewX(-12deg); /* Lekkie przesunięcie */
        opacity: 0.15;
    }
}

.hero-background-skew {
    animation: subtleBackgroundShift 15s infinite ease-in-out; 
    /* Odkomentuj powyższe, jeśli chcesz animację tła. Może być zbyt rozpraszające. */
}

/* Dodatkowe style dla płynności (Tailwind już dużo załatwia) */
.transition-all {
    transition-property: all;
}
.duration-500 {
    transition-duration: 500ms;
}
.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.shadow-3xl { /* Definicja większego cienia dla hover obrazka */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
}

/* Animacja dla tekstu i przycisku przy ładowaniu (jeśli nie używasz globalnego AOS dla nich) */
/* Możesz użyć klas AOS zamiast tego, jeśli wolisz. data-aos="fade-right" już jest. */
/* .hero-text-animate {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInFade 0.8s 0.3s forwards ease-out;
}
.hero-button-animate {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInFadeUp 0.8s 0.6s forwards ease-out;
}

@keyframes slideInFade {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes slideInFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
} */