/*
 * Staffel 9 – component-specific styles
 * Scoped under .season9 to avoid bleed into other pages.
 */

.season9 {
    position: relative;

    &::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("../img/liveforlife_logo-DqVY1Kd.svg") center calc(50% + var(--parallax-y, 0px)) / 60% no-repeat;
        opacity: 0.07;
        z-index: 0;
        pointer-events: none;
    }

    > * {
        position: relative;
        z-index: 1;
    }

    .stats-background {
        background: green !important;
    }

    .youtube {
        width: 32rem;
        height: 18rem;
    }

    .floating-media {
        width: 100%;
        height: 100%;
    }

    .spent-button {
        display: block;
        width: fit-content;
        background: rgb(19, 20, 20);
        color: #fff;
        padding: 1rem 2rem;
        border: none;
        border-bottom: 2px solid rgb(141, 43, 99);
        border-radius: 0.5rem;
        cursor: pointer;
        box-shadow:
            0 6px 12px -2px rgb(141 43 99 / 0.5),
            0 12px 30px -4px rgb(141 43 99 / 0.25),
            0 20px 50px -6px rgb(141 43 99 / 0.1);
        transition: border-color 0.3s, box-shadow 0.3s;

        &:hover {
            border-bottom-color: rgb(234, 20, 183);
            box-shadow:
                0 6px 14px -2px rgb(234 20 183 / 0.6),
                0 14px 36px -4px rgb(234 20 183 / 0.3),
                0 24px 60px -6px rgb(234 20 183 / 0.12);
        }


            color: #fff !important;
            text-decoration: none;

    }
    /* ── Stats section ── */
    .stats-home {
        .stats-orbit {
            position: relative;
            width: 48rem;
            height: 38rem;
            margin: 0 auto;
        }

        .stats-orbit__center {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
        }

        .stats-orbit__item {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .stats-orbit__item--left-top {
            top: 4rem;
            left: -1rem;
        }
        .stats-orbit__item--left-bot {
            top: 23rem;
            right: 72%;
        }

        .stats-orbit__item--right {
            right: 9%;
            top: 30%;
            transform: translateY(-50%);
        }
        .stats-orbit__item--right-bot {
            top: 21rem;
            left: 70%;
        }

        /* ── Shared box styles ── */
        .stat-box {
            background: rgb(19, 20, 20);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: rotate(45deg);
        }

        /* single wrapper rotated back – text stays upright and perfectly centered */
        .stat-box__inner {
            transform: rotate(-45deg);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.2rem;
            width: 100%;
            text-align: center;
        }

        .stat-box dd {
            font-size: 2.25rem;
            line-height: 2.75rem;
            color: #fff;
            font-weight: 700;
            margin: 0;
            padding: 0;
        }

        .stat-box dt {
            font-size: 1.2rem;
            line-height: 1.75rem;
            color: rgb(200 200 200 / 1);
            font-weight: 500;
            margin: 0;
            padding: 0;
        }

        .stat-box--xl {
            width: 16rem;
            height: 16rem;
            outline: 2px solid rgb(141, 43, 99);
            outline-offset: 0.65rem;
            box-shadow:
                0 0 12px 4px rgb(141 43 99 / 0.4),
                0 0 50px 15px rgb(141 43 99 / 0.2),
                0 0 100px 35px rgb(141 43 99 / 0.1),
                0 0 160px 60px rgb(141 43 99 / 0.05);

            dd { font-size: 2.25rem; line-height: 2.75rem; }
            dt { font-size: 1.1rem; }
        }

        .stat-box--md {
            width: 12rem;
            height: 12rem;

            dd { font-size: 2rem; line-height: 2.5rem; }
            dt { font-size: 1rem; }
        }

        .stat-box--sm {
            width: 9.5rem;
            height: 9.5rem;

            dd { font-size: 1.5rem; line-height: 2rem; }
            dt { font-size: 0.9rem; }
        }

        .stats-orbit__item--right-bot .stat-box,
        .stats-orbit__item--right .stat-box,
        .stats-orbit__item--left-top .stat-box,
        .stats-orbit__item--left-bot .stat-box {
            animation: cyberpunk-pulse 8s ease-in-out infinite;
        }

        .stats-orbit__item--left-top .stat-box,
        .stats-orbit__item--left-bot .stat-box {
            animation-delay: -1.5s;
        }

        .stat-box--xl {
            animation: cyberpunk-pulse-center 8s ease-in-out infinite !important;
        }

        /* ── CTA diamond – same shape as stat-box but static, no animation ── */
        .cta-orbit {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 14rem;
            height: 14rem;
            background: rgb(19, 20, 20);
            transform: rotate(45deg);
            outline: 2px solid rgb(141, 43, 99);
            outline-offset: 0.65rem;
            box-shadow:
                0 0 12px 4px rgb(141 43 99 / 0.4),
                0 0 50px 15px rgb(141 43 99 / 0.2),
                0 0 100px 35px rgb(141 43 99 / 0.1);
            text-decoration: none !important;
            transition: box-shadow 0.4s ease, outline-color 0.4s ease;

            &:hover {
                outline-color: rgb(234, 20, 183);
                box-shadow:
                    0 0 18px 6px rgb(234 20 183 / 0.6),
                    0 0 60px 20px rgb(234 20 183 / 0.3),
                    0 0 120px 45px rgb(234 20 183 / 0.12);
            }

            .cta-orbit__inner {
                transform: rotate(-45deg);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                padding: 1rem;
                gap: 0.4rem;
                color: #fff;
                font-weight: 700;
                font-size: 1rem;
                line-height: 1.4rem;
                text-transform: uppercase;
                letter-spacing: 0.04em;
            }
        }
    }
}

@keyframes cyberpunk-pulse {
    0%, 100% {
        box-shadow:
            0 0 4px 1px rgb(141 43 99 / 0.6),
            0 0 12px 3px rgb(141 43 99 / 0.35),
            0 0 30px 8px rgb(141 43 99 / 0.15),
            0 0 2px 1px rgb(0 255 255 / 0.15);
    }
    40% {
        box-shadow:
            0 0 8px 2px rgb(141 43 99 / 0.9),
            0 0 22px 6px rgb(141 43 99 / 0.55),
            0 0 55px 16px rgb(141 43 99 / 0.28),
            0 0 80px 30px rgb(141 43 99 / 0.1),
            0 0 4px 2px rgb(0 255 255 / 0.3),
            0 0 16px 4px rgb(0 255 255 / 0.1);
    }
    70% {
        box-shadow:
            0 0 5px 1px rgb(141 43 99 / 0.7),
            0 0 14px 4px rgb(141 43 99 / 0.4),
            0 0 35px 10px rgb(141 43 99 / 0.18),
            0 0 3px 1px rgb(0 255 255 / 0.2);
    }
}

@keyframes cyberpunk-pulse-center {
    0%, 100% {
        outline: 2px solid rgb(141, 43, 99);
        outline-offset: 0.5rem;
        box-shadow:
            0 0 12px 4px rgb(141 43 99 / 0.4),
            0 0 50px 15px rgb(141 43 99 / 0.2),
            0 0 100px 35px rgb(141 43 99 / 0.1),
            0 0 160px 60px rgb(141 43 99 / 0.05);
    }
    40% {
        outline: 2px solid rgb(200, 60, 130);
        outline-offset: 0.65rem;
        box-shadow:
            0 0 18px 6px rgb(141 43 99 / 0.7),
            0 0 70px 22px rgb(141 43 99 / 0.38),
            0 0 130px 50px rgb(141 43 99 / 0.18),
            0 0 200px 80px rgb(141 43 99 / 0.08),
            0 0 6px 2px rgb(0 255 255 / 0.25),
            0 0 24px 6px rgb(0 255 255 / 0.08);
    }
    70% {
        outline: 2px solid rgb(141, 43, 99);
        outline-offset: 0.5rem;
        box-shadow:
            0 0 14px 5px rgb(141 43 99 / 0.5),
            0 0 55px 18px rgb(141 43 99 / 0.25),
            0 0 110px 40px rgb(141 43 99 / 0.12),
            0 0 170px 65px rgb(141 43 99 / 0.06);
    }
}