@import "../variables";

.container {
    width: 100vw;
    max-height: 100vh;
    overflow: hidden;

    .orbitContainer {
        position: relative;
        width: 100vw;
        height: 100vh;
        background: url("../../assets/green-dots.svg") repeat-x center center fixed;

        .orbit {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: none;
            border-radius: 50%;
            border: 0.5px solid rgba(#fff, 0.6);
            box-shadow:
                0px 0px 5.580693244934082px 2px rgba(255, 255, 255, 0.2),
                0px 0px 5.580693244934082px 2px rgba(255, 255, 255, 0.2) inset;
        }

        .orbit1 {
            width: 95em;
            height: 95em;
            transform: translate(-50%, -50%) rotate(0deg);

            @include responsive(tablet3) {
                width: 85em;
                height: 85em;
            }

            @include responsive(tablet1) {
                width: 60em;
                height: 60em;
            }
        }

        .orbit2 {
            width: 81.25em;
            height: 81.25em;
            transform: translate(-50%, -50%) rotate(10deg);
            animation: orbit2Rotation infinite linear 120s;

            @include responsive(tablet3) {
                width: 71.25em;
                height: 71.25em;
            }

            @include responsive(tablet1) {
                width: 50em;
                height: 50em;
            }

            @keyframes orbit2Rotation {
                0% {
                    transform: translate(-50%, -50%) rotate(10deg);
                }
                100% {
                    transform: translate(-50%, -50%) rotate(370deg);
                }
            }
        }

        .orbit3 {
            width: 67.5em;
            height: 67.5em;
            transform: translate(-50%, -50%) rotate(-30deg);
            animation: orbit3Rotation infinite linear 100s;

            @include responsive(tablet3) {
                width: 57.5em;
                height: 57.5em;
            }

            @include responsive(tablet1) {
                width: 40em;
                height: 40em;
            }

            @keyframes orbit3Rotation {
                0% {
                    transform: translate(-50%, -50%) rotate(-30deg);
                }
                100% {
                    transform: translate(-50%, -50%) rotate(330deg);
                }
            }
        }

        .orbit4 {
            width: 53.75em;
            height: 53.75em;
            transform: translate(-50%, -50%) rotate(-145deg);
            animation: orbit4Rotation infinite linear 80s;

            @include responsive(tablet3) {
                width: 43.75em;
                height: 43.75em;
            }

            @include responsive(tablet1) {
                width: 30em;
                height: 30em;
            }

            @keyframes orbit4Rotation {
                0% {
                    transform: translate(-50%, -50%) rotate(-145deg);
                }
                100% {
                    transform: translate(-50%, -50%) rotate(215deg);
                }
            }
        }

        .orbit5 {
            width: 40em;
            height: 40em;
            transform: translate(-50%, -50%) rotate(-15deg);
            animation: orbit5Rotation infinite linear 60s;

            @include responsive(tablet3) {
                width: 30em;
                height: 30em;
            }

            @include responsive(tablet1) {
                width: 20em;
                height: 20em;
            }

            @keyframes orbit5Rotation {
                0% {
                    transform: translate(-50%, -50%) rotate(-15deg);
                }
                100% {
                    transform: translate(-50%, -50%) rotate(345deg);
                }
            }
        }
    }

    .planet {
        position: absolute;
        transform: translate(-50%, -50%);
        width: 4rem;
        height: 4rem;
        border-radius: 50%;

        @include responsive(tablet1) {
            width: 3em;
            height: 3em;
        }

        .planetRing {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            border: 0.8px solid #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            @include responsive(tablet1) {
                width: 2.2em;
                height: 2.2em;
            }

            .planetIcon {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: #fff;
                font-size: 1.5rem;

                @include responsive(tablet1) {
                    font-size: 1.2rem;
                }
            }
        }
    }

    .planet1 {
        background: #d74d00;
        top: 50%;
        left: 0;
        box-shadow: 0px 0px 20px 4px #d74d00aa;
    }

    .planet2 {
        background: #b9d700;
        top: 50%;
        right: 0;
        transform: translate(50%, -50%);
        box-shadow: 0px 0px 20px 4px #b9d700aa;
    }
    .planet3 {
        background: #da08ec;
        top: 50%;
        left: 0;
        box-shadow: 0px 0px 20px 4px #da08ecaa;
    }
    .planet4 {
        background: #089aec;
        top: 50%;
        right: 0;
        transform: translate(50%, -50%);
        box-shadow: 0px 0px 20px 4px #089aecaa;
    }
    .planet6 {
        background: #d7c100;
        top: 50%;
        left: 0;
        box-shadow: 0px 0px 20px 4px #d7c100aa;
    }

    .planet5 {
        background: #00d7a3;
        top: 50%;
        left: 0;
        box-shadow: 0px 0px 20px 4px #00d7a3aa;
    }

    .fadeforeground {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: linear-gradient(180deg, #0b0b12 0%, rgba(11, 11, 18, 0.05) 50%, #0b0b12 100%);
        z-index: 1;
    }

    .bottomglow {
        width: 200vw;
        height: 138vw;
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 80%);
        width: 270rem;
        height: 155rem;
        border-radius: 50%;
        background: radial-gradient(20% 19% at 50% 28%, #8e35ff 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%);
        border: none;
        z-index: 1;
        animation: breathingEffect infinite 6s ease-in-out;

        @keyframes breathingEffect {
            0% {
                transform: translate(-50%, 80%) scale(1);
            }
            50% {
                transform: translate(-50%, 80%) scale(1.1);
            }

            100% {
                transform: translate(-50%, 80%) scale(1);
            }
        }
    }
    .mainContainer {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .couponCard {
            border-radius: 6px;
            width: 25rem;
            max-width: 98vw;
            color: var(--primary-text);
            background: #6a3093; /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #a044ff, #6a3093); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to right,
                #a044ff,
                #6a3093
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

            :global {
                .ant-card-body {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    border-radius: 6px;
                    width: 100%;
                    padding: 1rem 1.5rem;
                }
            }

            .cardHeader {
                width: 100%;
                border-radius: 4px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                margin: 1.5rem 0;
                margin-bottom: 2rem;

                .giftIcon {
                    font-size: nth($fontSize, 8);
                    color: var(--primary-text);
                }

                .cardHead {
                    color: var(--primary-text);
                    font-size: nth($fontSize, 3);
                    font-weight: 600;
                    letter-spacing: 1px;
                    margin: 0.5rem 0;
                }

                .userEmail {
                    color: var(--primary-text-100);
                    font-size: nth($fontSize, 1);
                    font-weight: 500;
                }
            }

            .couponDescription {
                width: 100%;
                margin-bottom:1rem;
            }

            .couponCodeContainer {
                padding: 0.5rem 1rem;
                border: 1px dashed var(--border-color);
                min-width: 100%;
                padding: 1rem 0;
                border-radius: 2px;


                .couponCode {
                    text-align: center;
                    font-size: nth($fontSize, 5);
                    font-weight: 700;
                    letter-spacing: 1.5px;
                }

                .couponText {
                    text-align: center;
                    font-size: nth($fontSize, 1);
                    font-weight: 500;
                    color: var(--secondary-text-500);
                }
            }

            .redeemButton {
                width: 100%;
                margin-top: 2rem;
                background: var(--primary-text);
                color: var(--primary-purple);
                border: none;
                border-radius: 2px;
                font-size: nth($fontSize, 2);
                font-weight: 700;
            }
        }

        .couponCardFooter {
            color: var(--text-light);
            margin-top: 1rem;
            font-size: nth($fontSize, 1);
            letter-spacing: 0.3px;

            span {
                color: var(--primary-text)
            }
        }
    }

    .tagline2 {
        color: #fff;
        text-align: center;
        font-size: 1rem;
        font-weight: 500;
        border-width: 2px;
        border-style: solid;
        padding: 0.5rem 1rem;
        margin-bottom: 1rem;
        position: relative;

        background:
            linear-gradient(#0b0b12, #0b0b12) padding-box,
            linear-gradient(90deg, #ca00aa -2.59%, #05c3ff 105.63%) border-box;
        border-radius: 50em;
        border: 2px solid transparent;

        @include responsive(tablet2) {
            font-size: 0.9rem;
            padding: 0.5rem 0.8rem;
        }

        @include responsive(mobile2) {
            font-size: 0.6rem;
            padding: 0.5rem 0.5rem;
        }
    }

    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 108px;
        padding: 0 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 13;

        @include responsive(tablet2) {
            padding: 0 1rem;
        }

        .bbLogoText {
            background-color: #ca4246;

            background-image: linear-gradient(
                45deg,
                #ca4246 16.666%,
                #e16541 16.666%,
                #e16541 33.333%,
                #f18f43 33.333%,
                #f18f43 50%,
                #8b9862 50%,
                #8b9862 66.666%,
                #476098 66.666%,
                #476098 83.333%,
                #a7489b 83.333%
            );

            background-size: 100%;
            background-repeat: repeat;

            // -webkit-background-clip: border-box;
            // -webkit-text-fill-color: transparent;
            animation: rainbow-text-simple-animation-rev 0.75s ease forwards;

            &:hover {
                animation: rainbow-text-simple-animation 0.5s ease-in forwards;
            }

            @keyframes rainbow-text-simple-animation-rev {
                0% {
                    background-size: 650%;
                }
                40% {
                    background-size: 650%;
                }
                100% {
                    background-size: 100%;
                }
            }

            @keyframes rainbow-text-simple-animation {
                0% {
                    background-size: 100%;
                }
                80% {
                    background-size: 650%;
                }
                100% {
                    background-size: 650%;
                }
            }
        }
    }
}
