/* Custom geometric backgrounds for hero */
.hero-accent {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.hero-accent::before,
.hero-accent::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
}

.hero-accent::before {
    background-color: #ff8323;
    transform: rotate(35deg) translateY(-20%);
}

.hero-accent::after {
    background-color: #0a192f;
    transform: rotate(35deg) translateY(40%);
}

.ribbon {
    position: absolute;
    top: 10px;
    right: -30px;
    background-color: #0a192f;
    color: white;
    padding: 4px 40px;
    transform: rotate(45deg);
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

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

@keyframes float-medium {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-15px) scale(1.05);
    }
}

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

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

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