@import "~scss/_mixins";

.bodyMain.bodyMainOnboarding {
	#vault,
	#sidebarToggle,
	#sidebarSync,
	.sidebar,
    .sidebarDummy { display: none; }

	body { background: #000; }	
}

$stepTransition: 1s $easeInQuint;

.pageMainOnboarding { width: 100% !important; }
.pageMainOnboarding {
    .wrapper { color: var(--color-bg-primary); overflow: hidden; width: 100%; padding-top: 22px; }
    .wrapper.stageUsecase {
        .steps { margin-bottom: 60px; }
        .itemsWrapper {
            .inner { align-items: unset; }
        }
    }
    .wrapper {
        .icon.arrow.back { position: fixed; top: 50%; left: 10px; width: 32px; height: 56px; margin-top: -28px; background-image: url('~img/arrow/auth0.svg'); z-index: 2; }

        > .title { @include text-paragraph; font-weight: 400; color: #505050; text-transform: uppercase; text-align: center; margin-bottom: 18px; }

        .steps { width: 100%; display: flex; justify-content: center; gap: 0px 6px; margin-bottom: 120px; transition: margin-bottom $stepTransition; }
        .steps {
            .step { width: 4px; height: 4px; border-radius: 50%; background: #464646; }
            .step.active { background: #9b9b9b; }
        }

        .itemsWrapper { display: flex; flex-direction: column; align-items: center; gap: 48px 0px; }
        .itemsWrapper {
            .stepTitle { width: 100%; height: 66px; position: relative; }
            .stepTitle {
                .title {
                    position: absolute; width: 100%; left: 0; top: 0; opacity: 0; transition: opacity $stepTransition;
                    font-family: 'RiccioneExtraLight'; letter-spacing: -1.2px; font-size: 66px; line-height: 66px; font-weight: 400; text-align: center;
                    background: linear-gradient(180deg, #ffffff 0%, #c8c8c8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
                }
                .title.active { opacity: 0.65; }
            }

            .inner { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 48px 0px; transition: all $easeInQuint 0.5s; padding-bottom: 10px;  }
            .inner.noAnim { transition: none; }
            .inner.animateOut { transform: translate3d(-200px, 0, 0); opacity: 0; transition: all ease-out 0.5s; }
            .inner.animateIn { transform: translate3d(200px, 0, 0); opacity: 0; }
        }

        .cards { display: flex; gap: 0px 32px; flex-wrap: nowrap; justify-content: center; width: calc(100% - 132px); }
        .cards {
            .card { width: 320px; height: 504px; flex-shrink: 0; border-radius: 16px; overflow: hidden; background-color: var(--color-text-primary); text-align: center; transition: 0.3s $easeInQuint; }
            .card:hover { transform: scale3d(1.05, 1.05, 1.05); }
            .card {
                .icon { width: 100%; aspect-ratio: 1/1; background-size: 100% !important; margin-bottom: 30px; }
                .icon.private { background: url('~img/icon/onboarding/private.svg'); }
                .icon.shared { background: url('~img/icon/onboarding/shared.svg'); }
                .icon.personal { background: url('~img/icon/onboarding/personal.svg'); }
                .icon.education { background: url('~img/icon/onboarding/education.svg'); }
                .icon.work { background: url('~img/icon/onboarding/work.svg'); }
                .icon.community { background: url('~img/icon/onboarding/community.svg'); }

                .title { margin-bottom: 8px; }

                .label { @include text-paragraph; font-weight: 400; margin: 0px 38px; color: #d4d4d4; }
            }
        }

        @media (max-width: 1400px) {
            .cards { gap: 0px 16px; }
            .cards {
                .card { width: 280px; height: 441px; }
                .card {
                    .icon { margin-bottom: 8px; }
                    .label { margin: 0px 30px; }
                }
            }
        }

        @media (max-width: 1280px) {
            .cards {
                .card { width: 256px; height: 404px; }
                .card {
                    .icon { margin-bottom: 12px; }
                    .title { @include text-header2; }
                    .label { @include text-common; }
                }
            }
        }

        .usecases { position: relative; }
        .usecases {
            .item {
                position: relative; flex-direction: column; justify-content: flex-end; gap: 4px 0px; flex-shrink: 0;
                width: 100%; aspect-ratio: 840/544; border-radius: 4px; overflow: hidden; opacity: 0; transform: scale3d(0,0,0); transition: 0.5s $easeInQuint;
            }
            .item {
                .picture { width: 100%; height: 100%; background-size: 100% !important; position: absolute; z-index: 0; left: 0px; top: 0px; }

                /* REMOVE NEXT LINE WHEN USECASES ARE READY */
                .picture { background-image: url('~img/icon/onboarding/screen-select-usecase.png') !important; }

                .text {
                    position: relative; z-index: 1; text-align: center; display: flex; align-items: center; flex-direction: column; gap: 10px 0px; padding-top: 120px;
                    opacity: 0; transition: opacity 0.4s $easeInQuint; background: linear-gradient(0deg, #040404 35.5%, rgba(4, 4, 4, 0.00) 100%);
                }

                .title { @include text-header3; }
                .label { @include text-common; width: 424px; display: inline-block; }
            }
            .item.item-empty {
                .picture { background-image: url('~img/icon/onboarding/empty.png') !important; }
            }

            .swiper-wrapper { align-items: center; }
            .swiper-wrapper {
                .swiper-slide-visible {
                    .item { display: flex; opacity: 1; transform: scale3d(1,1,1); }
                }
                .swiper-slide-prev,
                .swiper-slide-next {
                    .item { opacity: 0.5; }
                    .item.bounce { transition: 1s ease-in-out; }
                    .item:hover,
                    .item.hover { transform: scale3d(1.1,1.1,1.1); opacity: 0.75; }
                }
                .swiper-slide-fully-visible {
                    .item {
                        .text { opacity: 1; }
                    }
                }
            }
        }

        .buttonWrapper { text-align: center; }
        .buttonWrapper {
            .button { background: #d4d4d4; color: var(--color-text-primary); }
            .button:hover { background: #9a9a9a; }
        }
    }
}
