/* ==========================================================================
   Animations & Keyframes
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

@keyframes glitch {
    0% { transform: translate(0) }
    20% { transform: translate(-2px, 2px) }
    40% { transform: translate(-2px, -2px) }
    60% { transform: translate(2px, 2px) }
    80% { transform: translate(2px, -2px) }
    100% { transform: translate(0) }
}

@keyframes glitchTop {
    0% { clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); transform: translate(0); }
    20% { clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%); transform: translate(-4px, 2px) skewX(2deg); }
    40% { clip-path: polygon(0 0, 100% 0, 100% 55%, 0 55%); transform: translate(4px, -2px); }
    60% { clip-path: polygon(0 0, 100% 0, 100% 15%, 0 15%); transform: translate(-2px, 2px) skewX(-2deg); }
    80% { clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%); transform: translate(2px, -2px); }
    100% { clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); transform: translate(0); }
}

@keyframes glitchBottom {
    0% { clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); transform: translate(0); }
    20% { clip-path: polygon(0 25%, 100% 25%, 100% 100%, 0 100%); transform: translate(4px, -2px) skewX(-2deg); }
    40% { clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); transform: translate(-4px, 2px); }
    60% { clip-path: polygon(0 15%, 100% 15%, 100% 100%, 0 100%); transform: translate(2px, -2px) skewX(2deg); }
    80% { clip-path: polygon(0 35%, 100% 35%, 100% 100%, 0 100%); transform: translate(-2px, 2px); }
    100% { clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); transform: translate(0); }
}

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

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-60px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-20px) rotate(2deg); }
    66% { transform: translateY(10px) rotate(-1deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 20px var(--accent-primary-glow); }
    50% { box-shadow: 0 0 60px var(--accent-primary-glow); }
    100% { box-shadow: 0 0 20px var(--accent-primary-glow); }
}

@keyframes borderGlow {
    0% { border-color: rgba(139, 92, 246, 0.3); }
    50% { border-color: rgba(139, 92, 246, 0.8); }
    100% { border-color: rgba(139, 92, 246, 0.3); }
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes drawLine {
    0% { height: 0; opacity: 0; }
    100% { height: 100%; opacity: 1; }
}

@keyframes scrollBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
        opacity: 1;
    }
    40% {
        transform: translateY(12px);
        opacity: 0.5;
    }
    60% {
        transform: translateY(6px);
        opacity: 0.8;
    }
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes morphBlob {
    0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

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

@keyframes editStageFloat {
    0%, 100% { transform: rotateY(-7deg) rotateX(3deg) rotateZ(1deg) translateY(0); }
    50% { transform: rotateY(-3deg) rotateX(1deg) rotateZ(-0.5deg) translateY(-10px); }
}

@keyframes editShotCycle {
    0% { opacity: 0; transform: translateX(18px); }
    5%, 30% { opacity: 1; transform: translateX(0); }
    34%, 100% { opacity: 0; transform: translateX(-18px); }
}

@keyframes editShotPush {
    0% { transform: scale(1.08); }
    34%, 100% { transform: scale(1.18); }
}

@keyframes editPlayhead {
    0% { transform: translateX(0); }
    100% { transform: translateX(345px); }
}

@keyframes editPlayPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .85; }
    50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

@keyframes cardSurfaceShift {
    0% { background-position: 0% 50%; box-shadow: 0 18px 45px -32px rgba(0,0,0,.9); }
    100% { background-position: 100% 50%; box-shadow: 0 26px 55px -30px rgba(6,182,212,.2); }
}

/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }
.stagger-7 { transition-delay: 0.7s; }
.stagger-8 { transition-delay: 0.8s; }

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

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

.animate-glow {
    animation: borderGlow 3s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Specific Components Effects
   -------------------------------------------------------------------------- */

/* Glitch Effect */
.glitch {
    position: relative;
    display: inline-block;
}
.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    pointer-events: none;
}
.glitch::before {
    color: #06b6d4;
    animation: glitchTop 3s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    z-index: -1;
}
.glitch::after {
    color: #8b5cf6;
    animation: glitchBottom 3s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    z-index: -2;
}

/* Floating Shapes Background */
.floating-shapes {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.03;
    background: var(--accent-gradient);
    filter: blur(60px);
}
.shape-1 {
    width: 400px;
    height: 400px;
    top: -100px;
    left: -100px;
    animation: float 15s ease-in-out infinite, morphBlob 20s ease-in-out infinite;
}
.shape-2 {
    width: 600px;
    height: 600px;
    top: 40%;
    right: -200px;
    animation: float 20s ease-in-out infinite reverse, morphBlob 25s ease-in-out infinite;
    background: linear-gradient(135deg, #06b6d4, #1a1a2e);
}
.shape-3 {
    width: 300px;
    height: 300px;
    bottom: -50px;
    left: 20%;
    animation: float 12s ease-in-out infinite 2s;
}
.shape-4 {
    width: 350px;
    height: 350px;
    top: 60%;
    left: -100px;
    animation: float 18s ease-in-out infinite 4s, morphBlob 22s ease-in-out infinite;
    background: linear-gradient(135deg, #8b5cf6, #0a0a0f);
}

/* Stagger items reveal */
.stagger-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.stagger-item.active {
    opacity: 1;
    transform: translateY(0);
}

/* Page Load Sequence */
body.loaded .hero-content > * {
    animation: fadeUp 0.8s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    opacity: 0;
}
body.loaded .hero-content > *:nth-child(1) { animation-delay: 0.2s; }
body.loaded .hero-content > *:nth-child(2) { animation-delay: 0.4s; }
body.loaded .hero-content > *:nth-child(3) { animation-delay: 0.6s; }
body.loaded .hero-content > *:nth-child(4) { animation-delay: 0.8s; }
body.loaded .hero-content > *:nth-child(5) { animation-delay: 1.0s; }