body {
    background-color: #fafafa;
    background-image: linear-gradient(#e5e7eb 1px, transparent 1px);
    background-size: 100% 40px;
}

/* Tape Effects */
.tape-white {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    border-radius: 1px;
    z-index: 40;
}

/* Drawn Borders */
.drawn-border {
    border: 3px solid #1c1917;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

/* Polaroid Effect */
.polaroid {
    background: white;
    padding: 12px 12px 40px 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.polaroid:hover {
    transform: scale(1.05) rotate(0deg) !important;
    z-index: 50;
}

/* Pixel Game Canvas */
#dino-canvas {
    image-rendering: pixelated;
    border-bottom: 3px solid #1c1917;
}

/* Equalizer Beat Animation */
@keyframes beat {

    0%,
    100% {
        height: 6px;
    }

    50% {
        height: 24px;
    }
}

.eq-bar {
    width: 5px;
    background-color: #3b82f6;
    /* brand-blue */
    border-radius: 9999px;
    animation: beat 1s infinite ease-in-out;
    animation-play-state: paused;
    /* Stays still until played */
}

.eq-bar:nth-child(1) {
    animation-delay: 0.1s;
    animation-duration: 0.8s;
}

.eq-bar:nth-child(2) {
    animation-delay: 0.3s;
    animation-duration: 1.2s;
}

.eq-bar:nth-child(3) {
    animation-delay: 0.0s;
    animation-duration: 0.9s;
}

.eq-bar:nth-child(4) {
    animation-delay: 0.4s;
    animation-duration: 1.1s;
}

.eq-bar:nth-child(5) {
    animation-delay: 0.2s;
    animation-duration: 0.7s;
}


/* Human Eye Blinking & Floating Animations */
@keyframes human-blink {

    0%,
    92%,
    98%,
    100% {
        transform: scaleY(1);
    }

    95% {
        transform: scaleY(0.1);
    }

    /* Squints the eye */
}

.eye-blink {
    animation: human-blink 4s infinite;
    transform-origin: center;
}

@keyframes float-gentle {

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

    50% {
        transform: translateY(-8px) rotate(3deg);
    }
}

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