/* ============================================
   Animated Background Shapes — PlayStation style
   Only for .categories-hero__inner (desktop)
   ============================================ */

.categories-hero__inner {
    position: relative;
    overflow: hidden;
}

/* ===== Animated background shapes container ===== */
.categories-hero__bg-shapes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Individual shape element */
.categories-hero__shape {
    position: absolute;
    will-change: transform, opacity;
    opacity: 0;
    animation: shapeFloat var(--float-duration, 20s) ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
}

/* Shape variants */
.categories-hero__shape--circle {
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.20);
}

.categories-hero__shape--square {
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
}

.categories-hero__shape--triangle {
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border: none !important;
    border-left: var(--triangle-size, 20px) solid transparent !important;
    border-right: var(--triangle-size, 20px) solid transparent !important;
    border-bottom: calc(var(--triangle-size, 20px) * 1.732) solid rgba(255, 255, 255, 0.12) !important;
}

.categories-hero__shape--cross {
    background: transparent !important;
    border: none !important;
}

.categories-hero__shape--cross::before,
.categories-hero__shape--cross::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
}

.categories-hero__shape--cross::before {
    width: 60%;
    height: 3px;
}

.categories-hero__shape--cross::after {
    width: 3px;
    height: 60%;
}

/* ===== Float animation ===== */
@keyframes shapeFloat {
    0% {
        opacity: 0;
        transform: translateY(0) rotate(0deg) scale(0.6);
    }
    5% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    95% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
        transform: translateY(calc(-1 * var(--float-distance, -200px))) rotate(var(--float-rotation, 360deg)) scale(1);
    }
}

/* ===== Slow spin for squares ===== */
@keyframes slowSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.categories-hero__shape--square {
    animation: shapeFloat var(--float-duration, 20s) ease-in-out infinite,
               slowSpin 60s linear infinite;
    animation-delay: var(--float-delay, 0s), var(--float-delay, 0s);
}

/* ===== Content above shapes ===== */
.categories-hero__inner > *:not(.categories-hero__bg-shapes) {
    position: relative;
    z-index: 1;
}