/*
 * AnimationCircle component styles
 *
 * Used on (as of 2026-05-23, CType abcfinancecustomcontent_factoringanimationcircle):
 *   - /factoring
 *   - /glossar/factoring/factoringgebuehr
 *   - /glossar/factoring/full-service-factoring
 *
 * Source: extracted from frontend/scss/includes/elements/_animation-circle.scss
 *
 * Local SCSS constants resolved inline:
 *   $circle-size: 480px
 *   $icon-size: 30px
 *   $circle-padding: 32px
 *   $circle-border: 20px
 *   $animationBreakpoint: 820px  →  down: max-width:820px / up: min-width:821px
 *   $green (local): #08A826      (NOT the global #18B838 / --abc-green)
 *   $effort-bg-color: #f8f8f8
 *   $fadeInDuration: 500ms
 *   $rotationDuration: 500ms
 *   @include box-shadow-gray() → box-shadow: 0 0 10px 0 #ced4da
 *   darken(#08A826, 15%) ≈ #045f15
 *   darken(#b7172e, 10%) ≈ #8c1123
 */

.revenue-animation-container {
    @media (min-width: 992px) {
        padding-bottom: 10rem;
    }
}

.revenue-animation {
    box-shadow: 0 0 10px 0 #ced4da;

    @media (min-width: 992px) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    & h4 {
        color: var(--abc-red);
        font-weight: bold;
        opacity: 0;
    }

    & ul {
        list-style: none;
        padding: 0;
        margin: 0 0 2rem 0;
    }

    & li {
        padding: 12px 0;
        border-bottom: 2px solid transparent;
        line-height: 30px;
        opacity: 0;
        padding-left: 42px;
        position: relative;
        font-weight: normal;

        &:last-child {
            border-bottom: 0;
        }

        & .icon {
            display: block;
            height: 30px;
            width: 30px;
            background-color: #fff;
            border-radius: 50%;
            border: 1px solid var(--abc-light-gray);
            position: absolute;
            top: 10px;
            left: 0;
        }

        & .plus,
        & .minus {
            &::before {
                content: "";
                display: block;
                position: absolute;
                width: 14px;
                height: 2px;
                background-color: var(--abc-red);
                border-radius: 1px;
                top: 13px;
                left: 7px;
            }
        }

        & .plus {
            &::before {
                background-color: #08A826;
            }

            &::after {
                content: "";
                display: block;
                position: absolute;
                width: 2px;
                height: 14px;
                background-color: #08A826;
                border-radius: 1px;
                top: 7px;
                left: 13px;
            }
        }
    }

    & .effort-column,
    & .benefit-column {
        padding: 20px;

        @media (min-width: 992px) {
            padding: 20px 40px;
        }

        @media (min-width: 1330px) {
            padding: 30px 50px;
        }
    }

    & .effort-column {
        background-color: #f8f8f8;
        position: relative;

        @media (max-width: 991px) {
            padding-top: 410px;
        }

        @media (min-width: 992px) {
            padding-bottom: 288px;
            width: 50%;
        }

        @media (min-width: 1330px) {
            padding-bottom: 288px;
        }
    }

    & .benefit-column {
        background-color: #fff;
        position: relative;

        @media (max-width: 820px) {
            margin-top: 50px;
        }

        @media (min-width: 992px) {
            width: 50%;
        }
    }

    & .benefit-list {
        & li {
            border-bottom-color: rgba(8, 168, 38, 0.3);
        }
    }

    & .effort-list {
        & li {
            border-bottom-color: rgba(183, 23, 46, 0.3);
        }
    }

    & .circle {
        background-color: #f8f8f8;
        width: 480px;
        height: 480px;
        border-radius: 50%;
        overflow: hidden;
        padding: 32px;
        transform-origin: 0 0;
        margin: 0 auto;
        position: absolute;
        top: 0;
        left: auto;
        right: auto;
        z-index: 2;

        @media (min-width: 540px) {
            left: 50%;
            transform: translateX(-50%);
        }

        @media (min-width: 992px) {
            position: absolute;
            top: 100%;
            margin: 0;
            left: auto;
            right: auto;
            transform: none;
            margin-top: -326.4px;
        }

        & .circle-outline {
            border: 10px solid var(--abc-dark-gray);
            border-radius: 50%;
            position: absolute;
            z-index: 10;
            top: 27px;
            left: 27px;
            right: 27px;
            bottom: 27px;
            opacity: 0.3;
        }

        & .circle-inner {
            position: absolute;
            top: 52px;
            left: 52px;
            bottom: 52px;
            right: 52px;
            padding: 56px 50px;
            text-align: center;
            border-radius: 50%;
            background-color: #f8f8f8;
            z-index: 10;

            & h3 {
                font-size: 2.625rem;
                line-height: 3rem;
                border-top: 1px solid rgba(8, 168, 38, 0.5);
                border-bottom: 1px solid rgba(8, 168, 38, 0.5);
                color: #08A826;
                margin: 0 30px 30px 30px;
                padding: 20px 0;
                opacity: 0;
            }

            & p {
                opacity: 0;
            }
        }

        & .benefit-circle {
            top: 12px;
            left: 12px;
            right: 12px;
            bottom: 12px;
            overflow: hidden;
            border-radius: 50%;
            position: absolute;
            mask-image: radial-gradient(circle, white 100%, black 100%);

            & .background {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-image: linear-gradient(to bottom, #08A826, #045f15);
            }

            & .cover-animated {
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                position: absolute;
                background: #f8f8f8;
            }

            & .right {
                position: absolute;
                top: 0;
                left: 50%;
                right: 0;
                bottom: 0;
                overflow: hidden;

                & .cover-animated {
                    transform-origin: 0 50%;
                    transform: rotate(0deg);
                }
            }

            & .left {
                position: absolute;
                top: 0;
                left: 0;
                right: 50%;
                bottom: 0;
                overflow: hidden;

                & .cover-animated {
                    transform-origin: 100% 50%;
                    transform: rotate(0deg);
                }
            }
        }

        & .benefit-cover {
            background-color: #f8f8f8;
            top: 25px;
            right: 25px;
            bottom: 25px;
            left: 25px;
            border-radius: 50%;
            position: absolute;
            z-index: 4;
        }

        & .effort-circle {
            top: 36px;
            left: 36px;
            right: 36px;
            bottom: 36px;
            overflow: hidden;
            position: absolute;
            z-index: 5;
            border-radius: 50%;

            & .background {
                position: absolute;
                top: 0;
                left: 0;
                width: 50%;
                height: 100%;
                background-image: linear-gradient(to bottom, #8c1123, var(--abc-red));
            }

            & .cover-animated {
                position: absolute;
                top: 0;
                left: 0;
                width: 50%;
                height: 100%;
                transform-origin: 100% 50%;
                background-color: #f8f8f8;
                transform: rotate(0deg);
            }
        }
    }

    & .mobile-button {
        display: none;
        margin-bottom: 2rem;
        text-align: center;
    }

    & .desktop-button {
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
        opacity: 0;

        & a {
            white-space: nowrap;
        }
    }
}

@media (max-width: 820px) {
    .revenue-animation {
        & .mobile-button {
            display: block;
            opacity: 0;
        }

        & .desktop-button {
            display: none;
        }
    }
}

/*
 * Transition properties and duration
 */
.revenue-animation {
    & h3,
    & h4,
    & li,
    & p,
    & .button {
        transition: opacity 500ms;
    }

    & .circle-inner .benefit-list {
        transition: top 500ms;
    }

    & .circle-inner .effort-list {
        transition: top 500ms;
    }

    & .circle .benefit-circle {
        & .right {
            & .cover-animated {
                transition: transform 500ms linear;
            }
        }

        & .left {
            & .cover-animated {
                transition: transform 500ms linear;
            }
        }
    }

    & .circle .effort-circle {
        & .cover-animated {
            transition: transform 500ms linear;
        }

        & .background {
            transition: opacity 100ms;
        }
    }
}

/* Circle Animation Desktop and Mobile */
.revenue-animation {
    &.step-2 {
        & .circle .benefit-circle {
            & .right {
                & .cover-animated {
                    transform: rotate(72deg);
                }
            }
        }
    }

    &.step-3 {
        & .circle .benefit-circle {
            & .right {
                & .cover-animated {
                    transform: rotate(144deg);
                }
            }
        }
    }

    /* Übergang zwischen Halbkreis rechts und links */
    &.step-4 {
        & .circle .benefit-circle {
            & .right {
                & .cover-animated {
                    transition-duration: 250ms;
                    transform: rotate(180deg);
                }
            }

            & .left {
                & .cover-animated {
                    transition: transform 250ms linear;
                    transition-delay: 250ms;
                    transition-property: transform;
                    transform: rotate(36deg);
                }
            }
        }
    }

    &.step-5 {
        & .circle .benefit-circle {
            & .left {
                & .cover-animated {
                    transition-duration: 500ms;
                    transform: rotate(108deg);
                }
            }
        }
    }

    &.step-6 {
        & .circle .benefit-circle {
            & .left {
                & .cover-animated {
                    transform: rotate(180deg);
                }
            }
        }
    }

    &.step-8 {
        & .circle .effort-circle {
            & .cover-animated {
                transform: rotate(-72deg);
            }
        }
    }

    &.step-9 {
        & .circle .effort-circle {
            & .cover-animated {
                transform: rotate(-144deg);
            }
        }
    }

    &.step-10 {
        /* wait */
    }

    &.step-11 {
        & .circle .effort-circle {
            & .background {
                opacity: 0;
            }
        }

        & .circle .benefit-circle {
            & .left {
                & .cover-animated {
                    transition: none;
                    transform: rotate(36deg);
                }
            }
        }
    }
}

@media (max-width: 820px) {
    .revenue-animation {
        /* initial settings */
        & .circle-inner {
            & .result {
                display: none;
            }

            & .effort-list,
            & .benefit-list {
                position: absolute;
                text-align: center;
                top: 160px;
                left: 0;

                & h4 {
                    font-size: 2.625rem;
                    opacity: 0;
                }

                & li {
                    font-size: 2rem;
                    line-height: 2.5rem;
                    border-bottom-width: 0;
                    padding: 0;

                    & .icon {
                        position: relative;
                        display: block;
                        margin: 0 auto 1rem auto;
                        top: 0;
                        width: 50px;
                        height: 50px;

                        &::before {
                            width: 34px;
                            top: 23px;
                        }

                        &::after {
                            height: 34px;
                            left: 23px;
                        }
                    }
                }
            }

            & .effort-list {
                display: none;
            }

            & .benefit-list {
                display: block;
            }
        }

        &.step-1 {
            & .circle-inner .benefit-list h4 {
                opacity: 1;
            }
        }

        &.step-2 {
            & .circle-inner .benefit-list {
                top: 60px;
            }

            & .circle-inner .benefit-list h4 {
                opacity: 0;
            }

            & .circle-inner .benefit-list .item-1 {
                opacity: 1;
            }
        }

        &.step-3 {
            & .circle-inner .benefit-list {
                top: -50px;
            }

            & .circle-inner .benefit-list .item-1 {
                opacity: 0;
            }

            & .circle-inner .benefit-list .item-2 {
                opacity: 1;
            }
        }

        &.step-4 {
            & .circle-inner .benefit-list {
                top: -170px;
            }

            & .circle-inner .benefit-list .item-2 {
                opacity: 0;
            }

            & .circle-inner .benefit-list .item-3 {
                opacity: 1;
            }
        }

        &.step-5 {
            & .circle-inner .benefit-list {
                top: -330px;
            }

            & .circle-inner .benefit-list .item-3 {
                opacity: 0;
            }

            & .circle-inner .benefit-list .item-4 {
                opacity: 1;
            }
        }

        &.step-6 {
            & .circle-inner .benefit-list {
                top: -460px;
            }

            & .circle-inner .benefit-list .item-4 {
                opacity: 0;
            }

            & .circle-inner .benefit-list .item-5 {
                opacity: 1;
            }

            & .circle-inner .effort-list {
                display: block;
            }
        }

        &.step-7 {
            & .circle-inner .benefit-list {
                top: -510px;
            }

            & .circle-inner .benefit-list .item-5 {
                opacity: 0;
            }

            & .circle-inner .effort-list h4 {
                opacity: 1;
            }
        }

        &.step-8 {
            & .circle-inner .benefit-list {
                display: none;
            }

            & .circle-inner .effort-list {
                top: 30px;
            }

            & .circle-inner .effort-list h4 {
                opacity: 0;
            }

            & .circle-inner .effort-list .item-1 {
                opacity: 1;
            }
        }

        &.step-9 {
            & .circle-inner .effort-list {
                top: -90px;
            }

            & .circle-inner .effort-list .item-1 {
                opacity: 0;
            }

            & .circle-inner .effort-list .item-2 {
                opacity: 1;
            }
        }

        &.step-10 {
            & .circle-inner .effort-list {
                top: -160px;
            }

            & .circle-inner .effort-list .item-2 {
                opacity: 0;
            }
        }

        &.step-11 {
            & .circle-inner .effort-list {
                display: none;
            }

            & .circle-inner .result {
                display: block;
            }
        }

        &.step-12 {
            & .circle-inner .result {
                & h3 {
                    opacity: 1;
                }
            }
        }

        &.step-13 {
            & .circle-inner .result {
                & p {
                    opacity: 1;
                }
            }
        }

        &.step-14 {
            & .mobile-button {
                opacity: 1;
            }

            & .benefit-column {
                & h4,
                & li {
                    opacity: 1;
                }
            }
        }
    }
}

/*
 1. fade in header right
 2. fade in first step right
 ...
 7. fade in header left
 8. fade in first step left
 ...
 11. calculate benefit
 12. show center header
 13. show center text
 14. show button
 */
@media (min-width: 821px) {
    .revenue-animation {
        & .circle-inner {
            & .benefit-list {
                display: none;
            }

            & .effort-list {
                display: none;
            }
        }

        &.step-1 {
            & .benefit-column {
                & h4 {
                    opacity: 1;
                }
            }
        }

        &.step-2 {
            & .benefit-column {
                & li.item-1 {
                    opacity: 1;
                }
            }
        }

        &.step-3 {
            & .benefit-column {
                & li.item-2 {
                    opacity: 1;
                }
            }
        }

        /* Übergang zwischen Halbkreis rechts und links */
        &.step-4 {
            & .benefit-column {
                & li.item-3 {
                    opacity: 1;
                }
            }
        }

        &.step-5 {
            & .benefit-column {
                & li.item-4 {
                    opacity: 1;
                }
            }
        }

        &.step-6 {
            & .benefit-column {
                & li.item-5 {
                    opacity: 1;
                }
            }
        }

        &.step-7 {
            & .effort-column {
                & h4 {
                    opacity: 1;
                }
            }
        }

        &.step-8 {
            & .effort-column {
                & li.item-1 {
                    opacity: 1;
                }
            }
        }

        &.step-9 {
            & .effort-column {
                & li.item-2 {
                    opacity: 1;
                }
            }
        }

        &.step-10 {
            /* wait */
        }

        &.step-11 {
        }

        &.step-12 {
            & .circle-inner .result {
                & h3 {
                    opacity: 1;
                }
            }
        }

        &.step-13 {
            & .circle-inner .result {
                & p {
                    opacity: 1;
                }
            }
        }

        &.step-14 {
            & .desktop-button {
                opacity: 1;
            }
        }
    }
}