@import '@legends/styles/base.scss';

.wrapper {
    @include container;
    position: relative;
    
    background: linear-gradient(147.96deg, #191B1F 43.03%, #201A47 87.21%);
    
    border-radius: $secondaryBorderRadius;
    padding: 2.4375rem 0 2.25rem 2.25rem;
    margin: 0 auto;

    margin-top: 3.375rem;
    margin-bottom: 7.5rem;
    height: 18.125rem;

    @include breakpoint-down-from(large-tablet) {
        margin-bottom: 4.5rem;
    }
    

    .heroSection {
        position: relative;
        z-index: 2;

        .kicker {
            font-weight: 400;
            font-size: 1rem;
            line-height: 1;
            letter-spacing: 0;
            text-transform: capitalize;
            color: $cardBg;
        }

        .title {
            font-weight: 500;
            font-size: 2.5rem;
            line-height: 2.75rem;
            letter-spacing: 0;
            vertical-align: middle;
            color: $primaryText;
            text-shadow: -0.125rem .125rem 0 rgba($accent, 0.6);

            margin-bottom: 2.5rem;
            max-width: 31.75rem;
        }

        .button {
            @include button;
            width: 18.75rem;
            height: 4rem;
            gap: 0.625rem;
            border-radius: $primaryBorderRadius;
            padding: 1rem;
            color: $secondaryBackground;

            background-color: $primaryText;

            font-size: 1.25rem;
            line-height: 1;
            letter-spacing: 0;
            text-transform: capitalize;

            text-shadow: 0 0.0625rem 0 rgba($purple-200, 0.6);

            .logoSmall {
                width: 1.25rem;
                height: 1.944444rem;
            }
        }

        .logoGlass {
            position: absolute;
            top: -5.875rem;
            height: 25.3125rem;
            right: 3.125rem;
            width: 19.6875rem;
            height: 25.3125rem;
            transition: all 0.3s ease-in-out;

        }
    }

    .logoBlurEffect {
        position: absolute;
        width: 31.3125rem;
        height: 100%;
        top: 0;
        background-size: 100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        right: 5.3125rem;
    }


  @include breakpoint-down-from(medium-desktop) {
    margin-left: 3rem;
    margin-right: 3rem;
    width: calc(100% - 6rem);
  }
}

.v2, .nonV2 {
    .logoGlass {
        &:hover {
            animation-timing-function: ease-in-out;
            animation-duration: 0.3s;
            transform: rotate(5.98deg);
        }
    }
}

.nonV2 {
    background: linear-gradient(147.96deg, $green-500 34.06%, $teal 58.89%, $dark-purple 87.21%);


    .heroSection {   
        .kicker {
            color: $green-900;
        }
    }

    .logoBlurEffect {
        right: 5.3125rem;

    }
}

@keyframes moveToTopRight {
    0% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
    100% {
        transform: translate3d(100%, -100%, 0) scale(0.4) rotate(-6.48deg);
    }
}

@keyframes fadeOutSmooth {
    0% { opacity: 1; }
    100% { opacity: 0; }
}


.wrapper {
    @include on-mobile {
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;

        .title {
            font-size: 1rem;
        }
        .logoBlurEffect {
            display: none;
        }

        .heroSection {
            .button {
                display: none;
            }


            .logoGlass {
                animation: none;
                position: absolute;
                bottom: 0;
                right: 0;
                width: 5rem;
                height: 6rem;
            }
        }
    }
}