.font-comic {
    font-family: 'Bangers', cursive;
    letter-spacing: 2px;
}

.font-hero {
    font-family: 'Komika Axis', sans-serif;
}

.font-body {
    font-family: 'Quicksand', sans-serif;
}

.comic-bg {
    background-color: #fca5a5;
    background-image:
        radial-gradient(#fee2e2 15%, transparent 16%),
        radial-gradient(#fee2e2 15%, transparent 16%);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}

.panel-border {
    border: 4px solid #1f2937;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.8);
}

/* Comic Action Bubbles */
.pow-bubble {
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: center;
}

@keyframes popIn {
    0% {
        transform: scale(0) rotate(-45deg);
        opacity: 0;
    }

    80% {
        transform: scale(1.2) rotate(10deg);
        opacity: 1;
    }

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

.villain-shake {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-2px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(4px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-6px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(6px, 0, 0);
    }
}

/* High-quality claymation background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('clay_background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: -1;
}