*,:after,:before{
    box-sizing: border-box;
    margin: 0;
    padding: 0
}
html,
body {
    position: relative;
    height: 100%;
}
a{
    color: inherit;
    text-decoration: none
}
body{
    font-size: 14px;
    color: #fff;
    font-family: 'Constantine';
    background-color: #131214;
}
.wrapper{
    width: 100%;
    height: 100%;
    position: relative;
}
.sections{
    width: 100%;
    height: 100%;
}
section{
    display: flex;
    flex-direction: column;
}
.main{
    background-image: url('../images/main-bg.webp');
}
.second{
    background-image: url('../images/section-1.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;}
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 65px;
    z-index: 10;
}
.header__column{
    display: flex;
    align-items: center;
    position: relative;
}
.logo{
	width: 100px;
    margin-right: 26px;
}
.header-navigation{
    display: flex;
}
.header-navigation__item{
    position: relative;
    display: flex;
    align-items: center;
    font-size: 16px;
    text-transform: uppercase;
    margin-right: 36px;
    letter-spacing: 1px;
}
.header-navigation__item:last-child{
    margin-right: 0;
}
.header-navigation__item span{
    margin-right: 18px;
}
.header-navigation__item::before{
    opacity: 0;
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #b76418;
    bottom: -22px;
    transition: opacity 0.3s ease;
}
.header-navigation__item.-active:before,
.header-navigation__item:hover:before{
    opacity: 1;
}
.icon{
    display: block;
    background-repeat: no-repeat;
}
.icon.-discord{
    background-image: url(../images/discord-white.svg);
    width: 22px;
    height: 22px;
    background-size: cover;
}
.icon.-dropdown{
    background-image: url(../images/dropdown-arrow.png);
    width: 10px;
    height: 7px;
}
.icon.-play{
    background-image: url(../images/video-play.png);
    width: 132px;
    height: 126px;
    margin-top: 3%;
}
.icon.-to-top{
    background-image: url(../images/to-top.png);
    width: 41px;
    height: 41px;
}
.swiper-pagination-bullet{
    background-image: url(../images/main-navigation.png);
    width: 63px;
    height: 63px;
    background-color: unset;
}
.swiper-pagination-bullet-active{
    background-image: url(../images/main-navigation-active.png);
}
.header-languages{
    position: relative;
    margin-right: 34px;
}
.language{
    display: flex;
    align-items: center;
    cursor: pointer;
}
.language__circle{
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../images/language-circle.png);
    width: 48px;
    height: 46px;
    margin-right: 2px;
}
.language-dropdown{
    display: none;
    position: absolute;
    top: 60px;
    right: 0;
    z-index: 10;
}
.language-dropdown__wrapper{
    opacity: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #d4732a;
    border-radius: 10px;
    background: rgba(0, 0, 0, .9);
    transition: opacity 0.3s ease-in-out;
}
.language-dropdown__wrapper.-active{
    opacity: 1;
}
.language-dropdown__item{
    padding: 20px 40px;
    cursor: pointer;
    z-index: 10;
    transition: color 0.3s ease-in-out;
}
.language-dropdown__item:hover{
    color: #d4732a;
}
.header-item{
    display: none;
    position: relative;
    margin-right: 1rem;
}
.header-item:last-child{
    margin-right: 0;
}
.header-item-icon{
    display: flex;
    align-items: center;
    cursor: pointer;
}
.header-item-icon__circle{
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../images/language-circle.png);
    width: 48px;
    height: 46px;
    margin-right: 2px;
}
.header-item-dropdown{
    display: none;
    position: absolute;
    top: 60px;
    right: 0;
    z-index: 10;
}
.header-item-dropdown__wrapper{
    opacity: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #d4732a;
    border-radius: 10px;
    background: rgba(0, 0, 0, .9);
    transition: opacity 0.3s ease-in-out;
}
.header-item-dropdown__wrapper.-active{
    opacity: 1;
}
.header-item-dropdown__item{
    padding: 20px 40px;
    cursor: pointer;
    z-index: 10;
    transition: color 0.3s ease-in-out;
    min-width: 250px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-item-dropdown__item:hover{
    color: #d4732a;
}
.header-personal{
    background-image: url(../images/personal-button.png);
    width: 218px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header-personal__text{
    text-transform: uppercase;
    font-size: 17px;
}
.navigation{
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    z-index: 10;
    right: var(--swiper-pagination-right,8px);
    left: var(--swiper-pagination-left,auto);
    top: 50%;
    transform: translate3d(0px,-50%,0);
    display: flex;
    flex-direction: column;
}
.navigation__item{
    display: flex;
    align-items: center;
    cursor: pointer;
}
.navigation__item:hover .navigation__item-label{
    color: #d4732a;
}
.navigation__item-icon{
    background-image: url(../images/main-navigation.png);
    width: 63px;
    height: 63px;
}
.navigation__item.-active .navigation__item-icon{
    background-image: url(../images/main-navigation-active.png);
}
.navigation__item-label{
    min-width: 120px;
    text-align: left;
}
.navigation__item-label{
    transition: color 0.3s ease-in-out;
}
.navigation__item.-active .navigation__item-label{
    color: #ffba34;
}
.section{
    position: relative;
    display: flex;
    flex-direction: column;
    background-size: cover;
    overflow: hidden;
}
.section::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    filter: brightness(0.8);
    z-index: -1;
}
.section-invite::before{
    background-image: url(../images/section-1.jpg);
}
.invite{
    display: flex;
    align-items: center;
    flex-direction: column;
    max-width: 846px;
    align-self: end;
    margin-right: 16.7%;
    margin-top: 3.2%;
    position: relative;
    z-index: 10;
}
.big-logo{
    width: 57.2vh;
    height: 100%;
}
.invite__description{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 60px;
}
.invite__description-title{
     color: #ffba34;
     font-weight: bold;
     text-transform: uppercase;
     font-size: 58px;
     line-height: 25px;
     margin-bottom: 27px;
}
.invite__description-subtitle{
     font-weight: bold;
     font-size: 50px;
     line-height: 42px;
     letter-spacing: -1px;
     margin-bottom: 30px;
}
.invite__description-text{
     font-family: 'Intro';
     font-size: 21px;
     max-width: 78%;
     text-align: center;
}
.invite__buttons{
     display: flex;
     justify-content: space-between;
     align-self: normal;
}
.section__video{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top center;
    object-position: top center;
    pointer-events: none;
}
.main-button{
     background-image: url(../images/main-button.png);
    width: 41.3vh;
    height: 8.8vh;
    max-width: 410px;
    max-height: 88px;
     background-size: contain;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
}
.btn{
     position: relative;
    transition: transform 0.3s ease-in-out;
}
.btn:hover{
    transform: scale(1.05);
}
.btn:after{
    content: '';
    width: 90%;
    height: 90%;
    box-shadow: 0 0 20px 2px #d4732a;
    position: absolute;
    border-radius: 80px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    filter: blur(10px);
}
.btn:hover:after{
    opacity: 0.4;
}
.main-button:last-child{
    margin-bottom: 0;
}
.main-button.-active{
    background-image: url(../images/main-button-active.png);
}
.main-button__text{
    font-size: 26px;
    font-weight: bold;
}
.section-about{

    display: flex;
    justify-content: center;
    align-items: center;
}
.section-about::before{
    background-image: url(../images/section-2.jpg);
}
.about{
    display: flex;
}
.about__column{
    width: 40.0%;
}
.about-video{
    background-image: url(../images/video-2.png);
    width: 69.1vh;
    height: 45.4vh;
    background-size: cover;
    background-position: center;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.about-card{
    position: relative;
    z-index: 10;
}
.about-card__header{
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}
.about-card__logo{
	width: 150px;
    margin-right: 20px;
}
.main-title{
    font-size: 60px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 50px;
    text-transform: uppercase;
}
.about-buttons{
    display: flex;
    margin-bottom: 52px;
}
.about-buttons__item{
    background-image: url(../images/second-button.png);
    width: 206px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}
.about-buttons__item.-active{
    background-image: url(../images/second-button-active.png);
}
.about-buttons__item:last-child{
    margin-right: 0;
}
.about-buttons__item-text{
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
}
.about-descriptions{
    display: flex;
    flex-direction: column;
}
.about-description{
   display: none;
}
.about-description.-active{
    display: block;
}
.about-description__title{
    font-size: 35px;
    color: #efa043;
    line-height: 26px;
    margin-bottom: 40px;
}
.about-description__text{
    font-family: 'Intro';
    font-size: 19px;
    line-height: 29px;
    width: 75%;
    margin-bottom: 36px;
}
.about-description__button{
    background-image: url(../images/main-button-active.png);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 326px;
    height: 69px;
    font-size: 19px;
    font-weight: bold;
    background-size: contain;
    text-transform: uppercase;
}
.section-details{
    display: flex;
    align-items: center;
    justify-content: center;

}
.section-details::before{
    background-image: url(../images/section-3.jpg);
}
.details{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.details__title{
    font-size: 65px;
    line-height: 52px;
    letter-spacing: 1px;
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    top: -12px;
}
.atitle{
    position: absolute;
    top: 3.5%;
}
.banners{
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: unset;
}
.banner::before{
    content: '';
    width: 100%;
    height: 940px;
    background-size: cover;
    background-image: url(../images/banner-sparks.png);
    position: absolute;
    background-repeat: no-repeat;
    bottom: -20%;
}
.banner{
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.banner__img{
    width: 100%;
}
.thumbs{
    z-index: 10;
    position: absolute;
    bottom: 8.4%;
    display: flex;
}
.thumb{
    cursor: pointer;
    position: relative;
    margin-right: 20px;
}
.thumb::before{
    content: '';
    position: absolute;
    width: 88px;
    height: 87px;
    background-image: url(../images/banner-pg-border.png);
    left: 0;
}
.thumb.-active::before{
    background-image: url(../images/banner-pg-border-active.png);
}
.thumb:last-child{
    margin-right: 0;
}
.thumb::after{
    content: '';
    width: 90%;
    height: 90%;
    box-shadow: 0 0 40px 2px #d4732a;
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    filter: blur(10px);
    left: 0;
    top: 0;
}
.thumb:hover:after{
    opacity: 0.4;
}
.thumb__img{
    width: 88px;
    height: 87px;
}
.banner__description{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    z-index: 10;
    bottom: 29%;
}
.banner__description::before{
    content: '';
    background-image: url(../images/banner-shadow.png);
    width: 1537px;
    height: 593px;
    position: absolute;
    top: -110%;
}
.banner__description-title, .banner__description-text, .banner__description-button {
   z-index: 15;
}
.banner__description-title{
    color: #efa043;
    text-transform: uppercase;
    font-size: 50px;
    letter-spacing: 3px;
    line-height: 41px;
    display: block;
    margin-bottom: 20px;
}
.banner__description-text{
    font-size: 19px;
    font-family: 'Intro';
    text-align: center;
    width: 65%;
    margin-bottom: 38px;
    line-height: 30px;
}
.banner__description-button{
    background-image: url(../images/second-button-active.png);
    width: 206px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
}
.section-contacts::before{
    background-image: url(../images/section-4.jpg);
}
.contacts{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 15%;
}
.contacts__title{
    font-size: 65px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 61px;
    letter-spacing: 3px;
    margin-bottom: 112px;
}
.contacts__items{
    display: flex;
    justify-content: space-between;
    width: 68%;
}
.contacts__item{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.contacts__items-image{
    margin-bottom: 36px;
    position: relative;
}
.contacts__items-image:after{
    content: '';
    width: 80%;
    height: 80%;
    box-shadow: 0 0 50px 2px #fff;
    position: absolute;
    top: 10%;
    left: 10%;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    filter: blur(10px);
}
.contacts__items-image:hover:after{
    opacity: 0.4;
}
.contacts__item-title{
    font-size: 25px;
    text-transform: uppercase;
    margin-bottom: 15px;
}
.contacts__item-text{
    font-size: 18px;
    font-family: 'Intro';
    width: 60%;
    text-align: center;
}
.footer__wrapper{
    display: flex;
    flex-direction: column;
    padding: 20px;
    width: 70%;
    margin: 0 auto;
}
.footer{
    margin-top: auto;
    background: rgba(17, 17, 17, .8);;
}
.footer__row{
    display: flex;
    align-items: center;
    margin-bottom: 32px;
    position: relative;
}
.footer__row:last-child{
    margin-bottom: 0;
    justify-content: space-between;
}
.footer__logo{
    margin-right: 58px;
}
.footer__navigation-item{
    margin-right: 68px;
    text-transform: uppercase;
    position: relative;
}
.footer__navigation-item:last-child{
    margin-right: 0;
}
.footer__navigation-item::before{
    opacity: 0;
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #b76418;
    bottom: -22px;
    transition: opacity 0.3s ease;
}
.footer__navigation-item:hover:before{
    opacity: 1;
}
.footer__line{
    width: 100%;
    height: 2px;
    background-color: #444345;
    margin-bottom: 42px;
}
.footer__copyright{
    display: flex;
    flex-direction: column;
}
.footer__copyright-main{
    display: block;
    margin-bottom: 10px;
    line-height: 12px;
}
.footer__copyright-small{
    display: block;
    font-size: 10px;
}
.to-top{
    position: absolute;
    top: 0;
    right: calc(50% - 41px);
    transition: transform 0.3s ease-in-out;
}
.to-top:hover{
    transform: scale(1.05);
}
.download{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3% 0 1.7%;
}
.section__title{
    font-size: 35px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 54px;
    text-transform: uppercase;
}
.download__list{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 68%;
}
.download__row{
    width: 100%;
    background-color: rgba(11, 9, 12, .8);
    margin-bottom: 20px;
    padding: 10px;
    position: relative;
}
.download__row-wrapper{
    display: flex;
    align-items: center;
    border: 1px solid #3f3d40;
    padding: 23px;
}
.download__row-title{
    font-size: 25px;
    font-weight: bold;
    min-width: 21%;
}
.download__buttons{
    display: flex;
    align-items: center;
}
.download__button{
    background-image: url(../images/main-button.png);
    width: 228px;
    height: 49px;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 8px;
    text-transform: uppercase;
}
.download__button:last-child{
    margin-right: 0;
}
.create{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}
.create__button{
    background-image: url(../images/main-button-active.png);
    width: 388px;
    height: 83px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 24px;
    text-transform: uppercase;
    position: relative;
    transition: transform 0.3s ease-in-out;
}
.create__button::before{
    content: '';
    background-image: url(../images/button-lines.png);
    width: 892px;
    height: 41px;
    position: absolute;
}
.create__button:hover{
    transform: scale(1.04);
}
.news{
    display: flex;
    flex-direction: column;
    width: 70%;
    margin: 60px auto;
    padding: 60px;
    background: rgba(0, 0, 0, .4);
}
.news__banner{
    margin-bottom: 30px;
}
.news__content h2{
    font-size: 28px;
    color: #efa043;
    margin-bottom: 30px;
}
.news__content p{
    margin-bottom: 20px;
    font-size: 16px;
}
.news__content a{
    color: #efa043;
}
.news__content a:hover{
    text-decoration: underline;
}
.news__content img{
    margin-bottom: 30px;
}
.news__content ul,
.news__content ol{
    padding: 0 18px;
}
.news__content li{
    margin-bottom: 10px;
}

/* L2Theos language dropdown fix */
.header {
    position: relative;
    z-index: 1000;
    overflow: visible;
}
.header__column,
.header-languages {
    position: relative;
    overflow: visible;
}
.language-dropdown {
    z-index: 10000;
    pointer-events: auto;
}
.language-dropdown__wrapper,
.language-dropdown__item {
    pointer-events: auto;
}
.language-dropdown__item {
    display: block;
    position: relative;
    z-index: 10001;
}
/* ===== L2THEOS: выделение описания на главной ===== */

.invite__description-text {
    position: relative;

    max-width: 720px;
    padding: 16px 28px;
    margin: 0 auto;

    font-family: 'Intro';
    font-size: 20px;
    line-height: 1.45;
    font-weight: 500;
    text-align: center;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(10, 7, 5, 0.45) 0%,
            rgba(12, 8, 5, 0.82) 20%,
            rgba(12, 8, 5, 0.88) 50%,
            rgba(12, 8, 5, 0.82) 80%,
            rgba(10, 7, 5, 0.45) 100%
        );

    border-top: 1px solid rgba(255, 184, 52, 0.75);
    border-bottom: 1px solid rgba(255, 184, 52, 0.75);

    border-radius: 8px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.55),
        inset 0 0 30px rgba(255, 140, 20, 0.05);

    text-shadow:
        0 2px 3px rgba(0, 0, 0, 1),
        0 0 10px rgba(0, 0, 0, 0.9);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* золотое свечение по краям */
.invite__description-text::before,
.invite__description-text::after {
    content: "";
    position: absolute;

    top: 50%;
    width: 7px;
    height: 7px;

    background: #ffba34;
    transform: translateY(-50%) rotate(45deg);

    box-shadow:
        0 0 7px rgba(255, 186, 52, 0.9),
        0 0 14px rgba(255, 120, 0, 0.5);
}

.invite__description-text::before {
    left: -4px;
}

.invite__description-text::after {
    right: -4px;
}

/* чуть усиливаем заголовки поверх сложного фона */

.invite__description-title {
    text-shadow:
        0 3px 5px rgba(0, 0, 0, 0.95),
        0 0 15px rgba(255, 132, 0, 0.35);
}

.invite__description-subtitle {
    text-shadow:
        0 3px 5px rgba(0, 0, 0, 0.95),
        0 0 12px rgba(0, 0, 0, 0.9);
}
/* =========================================================
   L2THEOS — читаемость страницы загрузки
   ========================================================= */

/* Главные заголовки страницы */
.second .section__title {
    display: table;
    position: relative;
    margin-left: auto;
    margin-right: auto;

    padding: 12px 34px 14px;

    color: #fff4dc;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;

    text-shadow:
        0 2px 2px #000,
        0 3px 6px rgba(0, 0, 0, 1),
        0 0 12px rgba(0, 0, 0, 0.95),
        0 0 22px rgba(202, 105, 10, 0.45);

    background:
        linear-gradient(
            90deg,
            rgba(12, 8, 5, 0) 0%,
            rgba(12, 8, 5, 0.72) 15%,
            rgba(12, 8, 5, 0.88) 50%,
            rgba(12, 8, 5, 0.72) 85%,
            rgba(12, 8, 5, 0) 100%
        );

    border-top: 1px solid rgba(205, 117, 22, 0.65);
    border-bottom: 1px solid rgba(205, 117, 22, 0.65);
}

/* Мягкое золотое свечение */
.second .section__title::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -2px;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 169, 54, 0.85),
        transparent
    );

    box-shadow: 0 0 10px rgba(255, 132, 20, 0.7);
}


/* Названия: Клиент игры / Updater / Патч игры */
.download__row-title {
    color: #fff5df !important;

    text-shadow:
        0 2px 2px #000,
        0 0 6px #000,
        0 0 12px rgba(0, 0, 0, 0.95);
}


/* Усиливаем затемнение самих строк */
.download__row {
    background:
        linear-gradient(
            90deg,
            rgba(7, 5, 5, 0.87) 0%,
            rgba(15, 11, 11, 0.78) 50%,
            rgba(7, 5, 5, 0.87) 100%
        ) !important;

    border: 1px solid rgba(182, 107, 39, 0.30);

    box-shadow:
        0 7px 22px rgba(0, 0, 0, 0.48),
        inset 0 0 35px rgba(0, 0, 0, 0.20);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}


/* Текст кнопок */
.download__button {
    color: #fff8e9 !important;

    text-shadow:
        0 2px 3px rgba(0, 0, 0, 1),
        0 0 6px rgba(0, 0, 0, 0.9);
}


/* Блок создания аккаунта немного отделяем от фона */
.second .create {
    position: relative;
    padding-top: 25px;
    padding-bottom: 45px;
}


/* Текст большой оранжевой кнопки */
.create__button {
    color: #fff5e5 !important;

    text-shadow:
        0 2px 3px rgba(0, 0, 0, 1),
        0 0 8px rgba(0, 0, 0, 0.9);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.55),
        0 0 16px rgba(184, 83, 7, 0.25);
}
/* =====================================================
   L2THEOS CINEMATIC SCREEN TRANSITION
   ===================================================== */

.l2-scene-transition {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw;
    height: 100vh;

    z-index: 2147483647 !important;

    pointer-events: none;

    opacity: 0;
    visibility: hidden;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 137, 22, 0.10) 0%,
            rgba(0, 0, 0, 0.08) 45%,
            rgba(0, 0, 0, 0.32) 100%
        );
}


.l2-scene-transition.-active {
    opacity: 1;
    visibility: visible;
}


/* ЗОЛОТАЯ ВЕРТИКАЛЬНАЯ ЛИНИЯ */

.l2-scene-transition__edge-line {
    position: absolute;

    top: -15%;
    width: 2px;
    height: 130%;

    opacity: 0;

    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 155, 30, 0.10) 15%,
        rgba(255, 215, 125, 0.95) 48%,
        rgba(255, 143, 20, 0.35) 75%,
        transparent 100%
    );

    box-shadow:
        0 0 6px rgba(255, 223, 160, 0.95),
        0 0 14px rgba(255, 157, 38, 0.8),
        0 0 32px rgba(255, 103, 0, 0.55),
        0 0 65px rgba(255, 87, 0, 0.25);
}


/* Левая линия */

.l2-scene-transition__edge-line.-left {
    left: 24px;
}


/* Правая линия */

.l2-scene-transition__edge-line.-right {
    right: 24px;
}


/* Запускаем обе */

.l2-scene-transition.-active
.l2-scene-transition__edge-line.-left {
    animation: l2EdgeLineLeft .9s ease-out forwards;
}

.l2-scene-transition.-active
.l2-scene-transition__edge-line.-right {
    animation: l2EdgeLineRight .9s ease-out forwards;
}


/* Левая линия */

@keyframes l2EdgeLineLeft {

    0% {
        opacity: 0;
        transform: translateX(-20px) scaleY(.25);
        filter: brightness(.5);
    }

    20% {
        opacity: .7;
    }

    45% {
        opacity: 1;
        transform: translateX(0) scaleY(1);
        filter: brightness(1.8);
    }

    75% {
        opacity: .65;
    }

    100% {
        opacity: 0;
        transform: translateX(-8px) scaleY(1);
        filter: brightness(.7);
    }
}


/* Правая линия */

@keyframes l2EdgeLineRight {

    0% {
        opacity: 0;
        transform: translateX(20px) scaleY(.25);
        filter: brightness(.5);
    }

    20% {
        opacity: .7;
    }

    45% {
        opacity: 1;
        transform: translateX(0) scaleY(1);
        filter: brightness(1.8);
    }

    75% {
        opacity: .65;
    }

    100% {
        opacity: 0;
        transform: translateX(8px) scaleY(1);
        filter: brightness(.7);
    }
}

/* РУНА */

.l2-scene-transition__rune {
    position: absolute;

    left: 50%;
    top: -40px;

    width: 20px;
    height: 20px;

    transform:
        translateX(-50%)
        rotate(45deg);

    background:
        linear-gradient(
            135deg,
            #fff3ad,
            #ffb42d 45%,
            #8f3f00
        );

    border: 2px solid #ffe39a;

    box-shadow:
        0 0 8px #fff2b0,
        0 0 16px #ffb12b,
        0 0 32px rgba(255, 112, 0, 0.95),
        0 0 60px rgba(255, 84, 0, 0.55);

    opacity: 0;
}


/* ВНУТРЕННЯЯ РУНА */

.l2-scene-transition__rune::after {
    content: "";

    position: absolute;

    width: 6px;
    height: 6px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    background: #fff8ce;

    box-shadow:
        0 0 8px #ffffff,
        0 0 14px #ffc34d;
}


/* Запуск */

.l2-scene-transition.-active
.l2-scene-transition__line {
    animation: l2TransitionLine 0.9s ease-out forwards;
}


.l2-scene-transition.-active
.l2-scene-transition__rune {
    animation: l2TransitionRune 0.9s cubic-bezier(.25,.65,.3,1) forwards;
}


/* Руна проходит сверху вниз */

@keyframes l2TransitionRune {

    0% {
        top: -40px;
        opacity: 0;
        scale: .7;
    }

    10% {
        opacity: 1;
    }

    42% {
        scale: 1;
    }

    50% {
        scale: 1.65;
        filter: brightness(1.8);
    }

    58% {
        scale: 1;
        filter: brightness(1);
    }

    85% {
        opacity: 1;
    }

    100% {
        top: calc(100vh + 40px);
        opacity: 0;
        scale: .7;
    }
}

/* Световой след */

/* ===========================================
   L2THEOS — дополнительные эффекты перехода
   =========================================== */


/* Короткое затемнение краёв экрана */

.l2-scene-transition__shade {
    position: absolute;
    inset: 0;

    opacity: 0;

    background:
        radial-gradient(
            circle at center,
            transparent 20%,
            rgba(5, 3, 2, .18) 55%,
            rgba(0, 0, 0, .62) 100%
        );
}


.l2-scene-transition.-active
.l2-scene-transition__shade {
    animation: l2SceneShade .9s ease-in-out forwards;
}


@keyframes l2SceneShade {

    0% {
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    70% {
        opacity: .75;
    }

    100% {
        opacity: 0;
    }
}



/* ===========================================
   Энергетическая вспышка в центре
   =========================================== */

.l2-scene-transition__burst {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 10px;
    height: 10px;

    transform: translate(-50%, -50%) scale(.1);

    border: 2px solid rgba(255, 206, 112, 1);
    border-radius: 50%;

    opacity: 0;

    box-shadow:
        0 0 10px #fff4c0,
        0 0 25px #ffb52b,
        0 0 50px rgba(255, 103, 0, .8);
}


.l2-scene-transition.-active
.l2-scene-transition__burst {
    animation: l2EnergyBurst .9s ease-out forwards;
}


@keyframes l2EnergyBurst {

    0%,
    35% {
        transform: translate(-50%, -50%) scale(.1);
        opacity: 0;
    }

    47% {
        opacity: 1;
    }

    70% {
        transform: translate(-50%, -50%) scale(8);
        opacity: .45;
    }

    100% {
        transform: translate(-50%, -50%) scale(14);
        opacity: 0;
    }
}



/* ===========================================
   Искры
   =========================================== */

.l2-scene-transition__sparks {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 1px;
    height: 1px;

    pointer-events: none;
}


.l2-scene-transition__sparks i {
    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #ffe19a;

    opacity: 0;

    box-shadow:
        0 0 6px #fff,
        0 0 12px #ffad27,
        0 0 20px rgba(255, 91, 0, .8);
}


.l2-scene-transition.-active
.l2-scene-transition__sparks i:nth-child(1) {
    animation: l2Spark1 .85s ease-out forwards;
}

.l2-scene-transition.-active
.l2-scene-transition__sparks i:nth-child(2) {
    animation: l2Spark2 .85s ease-out forwards;
}

.l2-scene-transition.-active
.l2-scene-transition__sparks i:nth-child(3) {
    animation: l2Spark3 .85s ease-out forwards;
}

.l2-scene-transition.-active
.l2-scene-transition__sparks i:nth-child(4) {
    animation: l2Spark4 .85s ease-out forwards;
}

.l2-scene-transition.-active
.l2-scene-transition__sparks i:nth-child(5) {
    animation: l2Spark5 .85s ease-out forwards;
}

.l2-scene-transition.-active
.l2-scene-transition__sparks i:nth-child(6) {
    animation: l2Spark6 .85s ease-out forwards;
}


@keyframes l2Spark1 {
    0%, 42% { opacity: 0; transform: translate(0,0); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translate(-90px,-55px); }
}

@keyframes l2Spark2 {
    0%, 42% { opacity: 0; transform: translate(0,0); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translate(85px,-70px); }
}

@keyframes l2Spark3 {
    0%, 42% { opacity: 0; transform: translate(0,0); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translate(-120px,20px); }
}

@keyframes l2Spark4 {
    0%, 42% { opacity: 0; transform: translate(0,0); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translate(110px,30px); }
}

@keyframes l2Spark5 {
    0%, 42% { opacity: 0; transform: translate(0,0); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translate(-55px,90px); }
}

@keyframes l2Spark6 {
    0%, 42% { opacity: 0; transform: translate(0,0); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translate(65px,95px); }
}