/* ========================================
   ANIMATIONS & KEYFRAMES
   Premium Magician Website
   ======================================== */

/* ===== FADE ANIMATIONS ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

/* ===== SCALE ANIMATIONS ===== */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleUp {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.05);
    }
}

@keyframes pulse {

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

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* ===== GLOW ANIMATIONS ===== */
@keyframes glowGold {

    0%,
    100% {
        text-shadow: 0 0 10px rgba(212, 175, 55, 0.5),
            0 0 20px rgba(212, 175, 55, 0.3),
            0 0 30px rgba(212, 175, 55, 0.2);
    }

    50% {
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.8),
            0 0 40px rgba(212, 175, 55, 0.6),
            0 0 60px rgba(212, 175, 55, 0.4);
    }
}

@keyframes glowPurple {

    0%,
    100% {
        text-shadow: 0 0 10px rgba(157, 78, 221, 0.5),
            0 0 20px rgba(157, 78, 221, 0.3),
            0 0 30px rgba(157, 78, 221, 0.2);
    }

    50% {
        text-shadow: 0 0 20px rgba(157, 78, 221, 0.8),
            0 0 40px rgba(157, 78, 221, 0.6),
            0 0 60px rgba(157, 78, 221, 0.4);
    }
}

@keyframes glowBlue {

    0%,
    100% {
        text-shadow: 0 0 10px rgba(0, 180, 216, 0.5),
            0 0 20px rgba(0, 180, 216, 0.3),
            0 0 30px rgba(0, 180, 216, 0.2);
    }

    50% {
        text-shadow: 0 0 20px rgba(0, 180, 216, 0.8),
            0 0 40px rgba(0, 180, 216, 0.6),
            0 0 60px rgba(0, 180, 216, 0.4);
    }
}

/* ===== PARTICLE ANIMATIONS ===== */
@keyframes float {

    0%,
    100% {
        transform: translateY(0) translateX(0);
    }

    25% {
        transform: translateY(-20px) translateX(10px);
    }

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

    75% {
        transform: translateY(-30px) translateX(5px);
    }
}

@keyframes sparkle {

    0%,
    100% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

/* ===== ROTATION ANIMATIONS ===== */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

/* ===== MAGIC EFFECTS ===== */
@keyframes magicAppear {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
        filter: blur(10px);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2) rotate(0deg);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0);
    }
}

@keyframes magicDisappear {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2) rotate(180deg);
        filter: blur(5px);
    }

    100% {
        opacity: 0;
        transform: scale(0) rotate(360deg);
        filter: blur(10px);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

/* ===== WAVE ANIMATIONS ===== */
@keyframes wave {

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

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

/* ===== BOUNCE ANIMATIONS ===== */
@keyframes bounce {

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

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

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

/* ===== SLIDE ANIMATIONS ===== */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* ===== REVEAL ANIMATIONS ===== */
@keyframes revealText {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes typewriter {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* ===== UTILITY ANIMATION CLASSES ===== */
.animate-fadeIn {
    animation: fadeIn var(--duration-normal) var(--ease-out-quad);
}

.animate-fadeInUp {
    animation: fadeInUp var(--duration-normal) var(--ease-out-quad);
}

.animate-fadeInDown {
    animation: fadeInDown var(--duration-normal) var(--ease-out-quad);
}

.animate-fadeInLeft {
    animation: fadeInLeft var(--duration-normal) var(--ease-out-quad);
}

.animate-fadeInRight {
    animation: fadeInRight var(--duration-normal) var(--ease-out-quad);
}

.animate-scaleIn {
    animation: scaleIn var(--duration-normal) var(--ease-out-quad);
}

.animate-bounceIn {
    animation: bounceIn var(--duration-slow) var(--ease-bounce);
}

.animate-magicAppear {
    animation: magicAppear var(--duration-slower) var(--ease-out-quad);
}

.animate-glowGold {
    animation: glowGold var(--duration-slower) ease-in-out infinite;
}

.animate-glowPurple {
    animation: glowPurple var(--duration-slower) ease-in-out infinite;
}

.animate-glowBlue {
    animation: glowBlue var(--duration-slower) ease-in-out infinite;
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-rotate {
    animation: rotate 20s linear infinite;
}

/* ===== SCROLL REVEAL ===== */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity var(--duration-slow) var(--ease-out-quad),
        transform var(--duration-slow) var(--ease-out-quad);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for multiple elements */
.scroll-reveal:nth-child(1) {
    transition-delay: 0ms;
}

.scroll-reveal:nth-child(2) {
    transition-delay: 100ms;
}

.scroll-reveal:nth-child(3) {
    transition-delay: 200ms;
}

.scroll-reveal:nth-child(4) {
    transition-delay: 300ms;
}

.scroll-reveal:nth-child(5) {
    transition-delay: 400ms;
}

.scroll-reveal:nth-child(6) {
    transition-delay: 500ms;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .scroll-reveal {
        opacity: 1;
        transform: none;
    }
}