:root {
    --ease-out-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
    .section-title em,
    .hero-title em {
        animation: gradientShimmer 6s ease-in-out infinite alternate;
    }

    @keyframes gradientShimmer {
        0% { background-position: 0% 50%; }
        100% { background-position: 100% 50%; }
    }

    .hero-title {
        animation: heroFadeUp 900ms var(--ease-out-premium) both;
    }

    .hero-text {
        animation: heroFadeUp 800ms var(--ease-out-premium) 180ms both;
    }

    .hero-actions {
        animation: heroFadeUp 800ms var(--ease-out-premium) 340ms both;
    }

    .hero-media {
        animation:
            heroScaleIn 1100ms var(--ease-out-premium) 200ms both,
            heroMediaFloat 8s ease-in-out 1.4s infinite;
    }

    .hero-ambient span {
        animation: ambientFloat 18s ease-in-out infinite;
    }

    .hero-ambient span:nth-child(2) {
        animation-delay: -6s;
        animation-duration: 22s;
    }

    .hero-ambient span:nth-child(3) {
        animation-delay: -12s;
        animation-duration: 26s;
    }

    @keyframes heroFadeUp {
        0% {
            opacity: 0;
            transform: translateY(24px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes heroScaleIn {
        0% {
            opacity: 0;
            transform: scale(0.96) translateY(12px);
        }
        100% {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    @keyframes ambientFloat {
        0%, 100% {
            transform: translate(0, 0) scale(1);
        }
        33% {
            transform: translate(18px, -14px) scale(1.04);
        }
        66% {
            transform: translate(-12px, 10px) scale(0.98);
        }
    }

    @keyframes heroMediaFloat {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-8px);
        }
    }

    .hero-actions .btn-primary {
        animation:
            heroFadeUp 800ms var(--ease-out-premium) 340ms both,
            btnGlow 4s ease-in-out 3s infinite;
    }

    @keyframes btnGlow {
        0%, 100% {
            box-shadow: 0 12px 40px rgba(0, 159, 157, 0.3);
        }
        50% {
            box-shadow: 0 12px 40px rgba(0, 159, 157, 0.3), 0 0 30px rgba(0, 159, 157, 0.18);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}