.sc-outer {
    position: relative;
    overflow: hidden;
    // Clip horizontal overflow always — prevents horizontal scroll on both desktop
    // and mobile without breaking the allowOverlap (vertical) behaviour.
    // overflow-x: clip does NOT create a scroll container so overflow-y: visible
    // can still work when allowOverlap is enabled (set via inline style).
    overflow-x: clip;
    box-sizing: border-box;
    width: 100%;
}

.sc-inner {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: var(--sc-pt, 60px) var(--sc-pr, 20px) var(--sc-pb, 60px) var(--sc-pl, 20px);
}

@media (max-width: 767px) {
    .sc-inner {
        padding: var(--sc-pt-m, var(--sc-pt, 60px))
            var(--sc-pr-m, var(--sc-pr, 20px))
            var(--sc-pb-m, var(--sc-pb, 60px))
            var(--sc-pl-m, var(--sc-pl, 20px));
    }
}

// ─── Shape float animation ────────────────────────────────────────────────────
// Uses the standalone `translate` CSS property so it stacks ON TOP of any
// inline `transform: rotate()` set per shape — they don't interfere.
@keyframes sc-float {
    0%, 100% { translate: 0 0px; }
    50%       { translate: 0 -22px; }
}

.sc-shape {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    animation: sc-float 6s ease-in-out infinite;

    svg {
        display: block;
        width: 100%;
        height: 100%;
    }

    // Stagger delays so multiple shapes don't all move in unison
    &:nth-child(1) { animation-delay:    0s; }
    &:nth-child(2) { animation-delay: -1.8s; }
    &:nth-child(3) { animation-delay: -3.6s; }
    &:nth-child(4) { animation-delay: -0.9s; }
    &:nth-child(5) { animation-delay: -2.7s; }
    &:nth-child(n+6) { animation-delay: -1.4s; }

    // ── Breakpoint visibility toggles ────────────────────────────────────────
    @media (max-width: 767px) {
        &.sc-shape--hidden-mobile  { display: none; }
    }
    @media (min-width: 768px) and (max-width: 1024px) {
        &.sc-shape--hidden-tablet  { display: none; }
    }
    @media (min-width: 1025px) and (max-width: 1440px) {
        &.sc-shape--hidden-desktop { display: none; }
    }
}