/* ============================================
   I AM DICTATOR - ANIMATIONS
   Ridiculously dramatic animations
   ============================================ */

/* ========== PULSE ANIMATIONS ========== */
.pulse {
    animation: pulse-scale 2s ease-in-out infinite;
}

@keyframes pulse-scale {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* ========== ROTATION ========== */
.rotating {
    animation: rotate 20s linear infinite;
}

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

/* ========== SHAKE ANIMATION ========== */
.shake {
    animation: shake 5s ease-in-out infinite;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* ========== GLOW ANIMATION ========== */
.glow {
    animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(220, 20, 60, 0.5);
    }
    50% {
        box-shadow: 0 0 30px rgba(220, 20, 60, 0.8);
    }
}

/* ========== BOUNCE ANIMATION ========== */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) rotate(-45deg);
    }
    40% {
        transform: translateY(-10px) rotate(-45deg);
    }
    60% {
        transform: translateY(-5px) rotate(-45deg);
    }
}

/* ========== SLIDE RIGHT ========== */
@keyframes slide-right {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(20px);
    }
}

/* ========== GLITCH EFFECT ========== */
.glitch {
    position: relative;
    animation: glitch-skew 5s infinite;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 #00fff9;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -2px 0 #fe0000, 2px 2px #00fff9;
    animation: glitch-anim2 1s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        clip: rect(10px, 9999px, 71px, 0);
        transform: skew(0.5deg);
    }
    5% {
        clip: rect(70px, 9999px, 43px, 0);
        transform: skew(0.2deg);
    }
    10% {
        clip: rect(36px, 9999px, 100px, 0);
        transform: skew(0.1deg);
    }
    15% {
        clip: rect(90px, 9999px, 40px, 0);
        transform: skew(0.3deg);
    }
    20% {
        clip: rect(100px, 9999px, 23px, 0);
        transform: skew(0deg);
    }
    25% {
        clip: rect(33px, 9999px, 86px, 0);
        transform: skew(0.4deg);
    }
    30% {
        clip: rect(67px, 9999px, 13px, 0);
        transform: skew(0deg);
    }
    35% {
        clip: rect(44px, 9999px, 98px, 0);
        transform: skew(0.2deg);
    }
    40% {
        clip: rect(77px, 9999px, 56px, 0);
        transform: skew(0.1deg);
    }
    45% {
        clip: rect(20px, 9999px, 72px, 0);
        transform: skew(0.3deg);
    }
    50% {
        clip: rect(88px, 9999px, 29px, 0);
        transform: skew(0deg);
    }
    55% {
        clip: rect(51px, 9999px, 64px, 0);
        transform: skew(0.4deg);
    }
    60% {
        clip: rect(14px, 9999px, 89px, 0);
        transform: skew(0deg);
    }
    65% {
        clip: rect(95px, 9999px, 37px, 0);
        transform: skew(0.2deg);
    }
    70% {
        clip: rect(28px, 9999px, 75px, 0);
        transform: skew(0.1deg);
    }
    75% {
        clip: rect(62px, 9999px, 16px, 0);
        transform: skew(0.3deg);
    }
    80% {
        clip: rect(81px, 9999px, 48px, 0);
        transform: skew(0deg);
    }
    85% {
        clip: rect(39px, 9999px, 92px, 0);
        transform: skew(0.4deg);
    }
    90% {
        clip: rect(73px, 9999px, 25px, 0);
        transform: skew(0deg);
    }
    95% {
        clip: rect(57px, 9999px, 68px, 0);
        transform: skew(0.2deg);
    }
    100% {
        clip: rect(85px, 9999px, 32px, 0);
        transform: skew(0.1deg);
    }
}

@keyframes glitch-anim2 {
    0% {
        clip: rect(65px, 9999px, 119px, 0);
        transform: skew(0.3deg);
    }
    5% {
        clip: rect(86px, 9999px, 26px, 0);
        transform: skew(0.5deg);
    }
    10% {
        clip: rect(38px, 9999px, 107px, 0);
        transform: skew(0.1deg);
    }
    15% {
        clip: rect(50px, 9999px, 71px, 0);
        transform: skew(0.4deg);
    }
    20% {
        clip: rect(92px, 9999px, 17px, 0);
        transform: skew(0deg);
    }
    25% {
        clip: rect(29px, 9999px, 83px, 0);
        transform: skew(0.2deg);
    }
    30% {
        clip: rect(74px, 9999px, 44px, 0);
        transform: skew(0.5deg);
    }
    35% {
        clip: rect(12px, 9999px, 96px, 0);
        transform: skew(0deg);
    }
    40% {
        clip: rect(61px, 9999px, 35px, 0);
        transform: skew(0.3deg);
    }
    45% {
        clip: rect(48px, 9999px, 78px, 0);
        transform: skew(0.1deg);
    }
    50% {
        clip: rect(90px, 9999px, 22px, 0);
        transform: skew(0.4deg);
    }
    55% {
        clip: rect(27px, 9999px, 103px, 0);
        transform: skew(0deg);
    }
    60% {
        clip: rect(69px, 9999px, 56px, 0);
        transform: skew(0.2deg);
    }
    65% {
        clip: rect(15px, 9999px, 88px, 0);
        transform: skew(0.5deg);
    }
    70% {
        clip: rect(54px, 9999px, 41px, 0);
        transform: skew(0deg);
    }
    75% {
        clip: rect(97px, 9999px, 19px, 0);
        transform: skew(0.3deg);
    }
    80% {
        clip: rect(33px, 9999px, 75px, 0);
        transform: skew(0.1deg);
    }
    85% {
        clip: rect(76px, 9999px, 52px, 0);
        transform: skew(0.4deg);
    }
    90% {
        clip: rect(21px, 9999px, 94px, 0);
        transform: skew(0deg);
    }
    95% {
        clip: rect(63px, 9999px, 28px, 0);
        transform: skew(0.2deg);
    }
    100% {
        clip: rect(45px, 9999px, 67px, 0);
        transform: skew(0.5deg);
    }
}

@keyframes glitch-skew {
    0% {
        transform: skew(0deg);
    }
    10% {
        transform: skew(1deg);
    }
    20% {
        transform: skew(-1deg);
    }
    30% {
        transform: skew(2deg);
    }
    40% {
        transform: skew(0deg);
    }
    50% {
        transform: skew(-2deg);
    }
    60% {
        transform: skew(0deg);
    }
    70% {
        transform: skew(1deg);
    }
    80% {
        transform: skew(-1deg);
    }
    90% {
        transform: skew(0deg);
    }
    100% {
        transform: skew(0deg);
    }
}

/* ========== FADE IN ========== */
.fade-in {
    animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== SCROLL REVEAL (Applied via JS) ========== */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ========== TYPING EFFECT ========== */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: var(--color-dictator-red);
    }
}

/* ========== FLOAT ANIMATION ========== */
.float {
    animation: float 6s ease-in-out infinite;
}

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

/* ========== GRADIENT ANIMATION ========== */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.animated-gradient {
    background: linear-gradient(-45deg, #DC143C, #8b0000, #FF1744, #DC143C);
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite;
}