/* =========================================================
   LORE PAGE
   ========================================================= */

.lore-page{
    min-height:100vh;

    background-image:
        linear-gradient(
            rgba(2,8,15,.10),
            rgba(2,8,15,.10)
        ),
        url("images/backgrounds/magic-hero.png");

    background-size:100% auto;
    background-repeat:repeat-y;
    background-position:top center;

    padding:65px 0 160px;

    overflow:hidden;
}


/* =========================================================
   INTRO
   ========================================================= */

.lore-intro{
    position:relative;

    text-align:center;

    margin-bottom:80px;

    z-index:5;
}


.lore-heading{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:24px;
}


.lore-heading span{
    display:block;

    width:120px;
    height:1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(216,178,110,.65),
            transparent
        );
}


.lore-heading h2{
    margin:0;

    color:#d8b26e;

    font-size:52px;
    font-weight:400;

    letter-spacing:9px;
}


.lore-intro p{
    margin:15px 0 0;

    color:#bcae8c;

    font-size:16px;

    letter-spacing:1.2px;
}


/* =========================================================
   STORY
   ========================================================= */

.lore-story{
    position:relative;

    width:min(1500px, 92%);

    margin:0 auto;

    padding:30px 0 120px;
}


/* =========================================================
   GROUP
   ========================================================= */

.lore-group{
    position:relative;
}

/* =========================================================
   ROW
   ========================================================= */

.lore-row{
    position:relative;

    display:grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    align-items:center;

    gap:110px;

    min-height:430px;

    margin-bottom:90px;

    z-index:2;
}


.lore-row:last-child{
    margin-bottom:0;
}


/* =========================================================
   IMAGE
   ========================================================= */

.lore-visual{
    position:relative;

    width:100%;

    display:flex;

    align-items:center;

    z-index:2;
}


.lore-visual img{
    display:block;

    width:760px;
    height:auto;

    max-width:none;

    transform:
        scaleX(1.08)
        scaleY(.90)
        scale(1);

    transform-origin:center;

    transition:
        transform .7s ease;

    backface-visibility:hidden;

    will-change:transform;
}


.lore-visual img:hover{
    transform:
        scaleX(1.08)
        scaleY(.90)
        scale(1.04);
}


/* если картинка находится в левой колонке */

.lore-row .lore-visual:first-child{
    justify-content:flex-start;
}


/* если картинка находится в правой колонке */

.lore-row .lore-visual:last-child{
    justify-content:flex-end;
}


/* =========================================================
   TEXT
   ========================================================= */

.lore-copy{
    position:relative;

    width:100%;
    max-width:760px;

    z-index:2;
}

.lore-copy-right{
    padding-left:95px;
    box-sizing:border-box;
}

.lore-copy-left{
    padding-right:95px;
    box-sizing:border-box;
}

.lore-copy p{
    margin:0 0 22px;

    color:#cfb982;

    font-size:17px;
    line-height:1.8;

    letter-spacing:.25px;

    text-shadow:
        0 1px 2px
        rgba(0,0,0,.55);
}


.lore-copy p:last-child{
    margin-bottom:0;
}


/* текст справа */

.lore-row .lore-copy:last-child{
    justify-self:start;
}


/* текст слева */

.lore-row .lore-copy:first-child{
    justify-self:end;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

    .lore-story{
        width:94%;
    }


    .lore-row{
        grid-template-columns:1fr;

        gap:40px;

        min-height:0;

        margin-bottom:120px;
    }


    .lore-visual{
        justify-content:center !important;
    }


    .lore-visual img{
        width:min(760px, 92vw);

        max-width:100%;
    }


    .lore-copy{
        max-width:720px;

        justify-self:center !important;

        text-align:center;
    }


    /*
        На планшетах и телефонах убираем линию,
        потому что двухколоночная композиция исчезает.
    */

    .lore-story::before{
        display:none;
    }
}


@media(max-width:700px){

    .lore-page{
        padding-top:45px;
    }


    .lore-heading{
        gap:14px;
    }


    .lore-heading span{
        width:55px;
    }


    .lore-heading h2{
        font-size:37px;

        letter-spacing:6px;
    }


    .lore-intro p{
        padding:0 25px;

        font-size:14px;
    }


    .lore-row{
        margin-bottom:90px;
    }


    .lore-visual img{
        width:100%;

        transform:none;

        transition:transform .5s ease;
    }


    .lore-visual img:hover{
        transform:scale(1.02);
    }


    .lore-copy p{
        font-size:15px;

        line-height:1.75;
    }
}

.lore-group{
    position:relative;
}

.lore-s-line{
    position:absolute;

    top:120px;
    left:50%;

    width:520px;
    height:780px;

    transform:translateX(-50%);

    pointer-events:none;

    z-index:1;
}

.lore-s-line::before{
    content:"";

    position:absolute;

    top:0;
    left:50%;

    width:260px;
    height:340px;

border-top:1px solid rgba(220,174,88,.82);
border-right:1px solid rgba(220,174,88,.82);
border-bottom:1px solid rgba(220,174,88,.82);

    border-top-right-radius:160px;
    border-bottom-right-radius:160px;

filter:
    drop-shadow(0 0 5px rgba(238, 198, 22, 0.904))
    drop-shadow(0 0 14px rgba(245, 186, 78, 0.925));
}

/* =========================================================
   LORE WAVE LINE
   ========================================================= */

.lore-wave{
    position:absolute;

    top:270px;
    left:50%;

    width:520px;

    transform:translateX(-50%);

    pointer-events:none;

    z-index:1;
}


/* =========================================================
   ONE FULL WAVE PIECE
   ========================================================= */

.lore-wave-piece{
    position:absolute;

    top:0;
    left:0;

    width:520px;
    height:1348px;
}


/* Вторая такая же змейка начинается сразу после первой */

.lore-wave-piece:nth-child(2){
    top:1348px;
}

.lore-wave-piece:nth-child(3){
    top:2696px;
}

.lore-wave-piece:nth-child(4){
    top:4044px;
}

.lore-wave-piece:nth-child(5){
    top:5392px;
}

.lore-wave-piece:nth-child(6){
    top:6740px;
}

.lore-wave-piece:nth-child(7){
    top:8088px;
}

.lore-wave-piece:nth-child(8){
    top:9436px;
}


/* =========================================================
   COMMON ARC SHAPE
   ========================================================= */

.lore-wave-arc{
    position:absolute;

    width:260px;
    height:338px;

    box-sizing:border-box;

    border-top:1px solid rgba(220,174,88,.82);
    border-bottom:1px solid rgba(220,174,88,.82);

    filter:
        drop-shadow(0 0 5px rgba(238,198,22,.904))
        drop-shadow(0 0 14px rgba(245,186,78,.925));
}


/* =========================================================
   RIGHT ARC
   ========================================================= */

.arc-right{
    left:260px;

    border-right:1px solid rgba(220,174,88,.82);

    border-top-right-radius:160px;
    border-bottom-right-radius:160px;
}


/* =========================================================
   LEFT ARC
   ========================================================= */

.arc-left{
    left:0;

    border-left:1px solid rgba(220,174,88,.82);

    border-top-left-radius:160px;
    border-bottom-left-radius:160px;
}


/* =========================================================
   ARC POSITIONS INSIDE EACH PIECE
   ========================================================= */

.lore-wave-piece .lore-wave-arc:nth-child(1){
    top:0;
}

.lore-wave-piece .lore-wave-arc:nth-child(2){
    top:337px;
}

.lore-wave-piece .lore-wave-arc:nth-child(3){
    top:674px;
}

.lore-wave-piece .lore-wave-arc:nth-child(4){
    top:1011px;
}

/* =========================================================
   LORE CONTINUES
   ========================================================= */

.lore-continue{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:22px;

    margin:80px auto 0;

    width:100%;

    z-index:2;
}


.lore-continue span{
    width:90px;
    height:1px;

    background:linear-gradient(
        to right,
        transparent,
        rgba(220,174,88,.75),
        transparent
    );

    filter:
        drop-shadow(0 0 5px rgba(238,198,22,.45));
}


.lore-continue p{
    margin:0;

    color:#cfb982;

    font-size:18px;
    font-style:italic;

    letter-spacing:1.5px;

    text-shadow:
        0 0 8px rgba(218,170,82,.35);
}

/* =========================
   ACTIVE NAVIGATION
========================= */

.nav-link{
    position:relative;
}

.nav-link.active{
    color:#d9b45b;
}

.nav-link.active::after{
    content:"";
    position:absolute;

    left:50%;
    bottom:-18px;

    width:72px;
    height:1px;

    background:#d9b45b;
    transform:translateX(-50%);
}

.nav-link.active::before{
    content:"◇";
    position:absolute;

    left:50%;
    bottom:-25px;

    transform:translateX(-50%);

    color:#d9b45b;
    background:#07111f;

    padding:0 6px;

    font-size:13px;
    line-height:14px;

    z-index:2;
}

.lore-continue {
    transform: translate(0px, 60px);
}