/* Retro-comic and 2.5D styling per the ORBLINGS ART DOC guidelines */
.comic-border {
    border: 4px solid #222222;
}

.comic-shadow-sm {
    box-shadow: 4px 4px 0px 0px #222222;
}

.comic-shadow {
    box-shadow: 6px 6px 0px 0px #222222;
}

.comic-shadow-lg {
    box-shadow: 8px 8px 0px 0px #222222;
}

.comic-shadow-active {
    box-shadow: 2px 2px 0px 0px #222222;
    transform: translate(4px, 4px);
}

/* Smooth transitions */
.transition-all {
    transition: all 0.15s ease-in-out;
}

/* Rounded shapes from the guidelines */
.rounded-casual {
    border-radius: 1.25rem;
    /* 20px */
}

.rounded-casual-lg {
    border-radius: 1.75rem;
    /* 28px */
}

/* Animated background in the Hero section */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

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

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

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

@keyframes cloud-drift {
    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(12px);
    }

    100% {
        transform: translateX(0px);
    }
}

.cloud-drift-anim {
    animation: cloud-drift 8s ease-in-out infinite;
}

@keyframes character-bounce {

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

    50% {
        transform: translateY(-6px) scale(1.02);
    }
}

.char-bounce-anim {
    animation: character-bounce 3.5s ease-in-out infinite;
}