/*
==================================================
SAINT SEIYA DOMINION
STYLE SANCTUAIRE 80s COMPACT
==================================================
*/

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=Marcellus&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
}

body{

    background:#000;

    color:#d6b36a;

    font-family:'Marcellus',serif;

    overflow:hidden;

    min-height:100vh;

    position:relative;

    letter-spacing:.5px;

}

body::before{

    content:'';

    position:absolute;

    inset:0;

    background:
        url('../assets/bg.jpg')
        center center
        no-repeat;

    background-size:cover;

    opacity:.5;


    transform:scale(1.02);

}

body::after{

    content:'';

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at center,
            rgba(255,215,120,.03),
            transparent 65%
        );

    pointer-events:none;

    z-index:1;

}

.bg-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,.96) 0%,
            rgba(0,0,0,.82) 28%,
            rgba(0,0,0,.48) 56%,
            rgba(0,0,0,.18) 100%
        );

    z-index:2;

}

.main-container{

    position:relative;

    z-index:5;

    min-height:100vh;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:45px 55px;

}

.left-panel{

    width:38%;

    max-width:620px;

}

.main-logo{

    width:420px;

    max-width:100%;

    filter:

        brightness(1.08)

        drop-shadow(0 0 8px rgba(255,215,120,.10))
        drop-shadow(0 0 18px rgba(255,215,120,.06));

}

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

.intro-text{

    margin-top:32px;

    font-family:'Cinzel',serif;

    font-size:36px;

    line-height:1.35;

    letter-spacing:3px;

    font-weight:700;

    text-transform:uppercase;

    color:#f2d289;

    position:relative;

    /*
    GROS FILTRE RETRO ANIME
    */

    text-shadow:

        0 1px 0 #fff4cf,
        0 0 4px rgba(255,230,160,.35),
        0 0 10px rgba(255,210,120,.20),
        0 0 24px rgba(255,190,90,.12),
        2px 2px 0 rgba(0,0,0,.65),
        4px 4px 12px rgba(0,0,0,.55);

    filter:
        contrast(1.08)
        saturate(1.1);

}

.intro-text::before{

    content:'';

    position:absolute;

    left:-12px;
    top:-8px;

    width:110%;

    height:120%;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            transparent
        );

    mix-blend-mode:screen;

    pointer-events:none;

}

.separator{

    width:220px;

    height:2px;

    margin:38px 0 34px 0;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,220,120,.95),
            transparent
        );

    box-shadow:
        0 0 10px rgba(255,215,120,.18);

    opacity:.9;

}

/*
==================================================
FEATURES
==================================================
*/

.feature-list{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:18px;

    position:relative;

}

.feature-item::after{

    content:'';

    position:absolute;

    left:82px;
    right:0;
    bottom:-10px;

    height:1px;

    background:

        linear-gradient(
            90deg,
            rgba(255,215,120,.08),
            transparent
        );

}

.feature-item img{

    width:68px;

    height:68px;

    object-fit:contain;

    filter:

        brightness(1.06)

        drop-shadow(0 0 8px rgba(255,210,120,.16))
        drop-shadow(0 0 16px rgba(255,210,120,.08));

}

.feature-item span{

    font-family:'Cinzel',serif;

    font-size:18px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#e6c278;

    /*
    FILTRE RETRO GOLD
    */

    text-shadow:

        0 1px 0 #fff2bf,
        0 0 5px rgba(255,220,120,.18),
        1px 1px 0 rgba(0,0,0,.7),
        2px 2px 8px rgba(0,0,0,.5);

}

/*
==================================================
RIGHT PANEL
==================================================
*/

.right-panel{

    width:390px;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.chapter-btn{

    height:92px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 26px;

    text-decoration:none;

    color:#e8ca86;

    border-radius:14px;

    border:1px solid rgba(255,215,120,.24);

    background:

        linear-gradient(
            180deg,
            rgba(24,28,42,.95),
            rgba(8,10,18,.98)
        );

    transition:.25s;

    box-shadow:

        0 0 18px rgba(0,0,0,.72),
        inset 0 0 18px rgba(255,215,120,.04),
        inset 0 1px 0 rgba(255,255,255,.05);

    position:relative;

    overflow:hidden;

    backdrop-filter:blur(2px);

}

.chapter-btn::before{

    content:'';

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255,220,120,.04) 50%,
            transparent 100%
        );

    pointer-events:none;

}

.chapter-btn::after{

    content:'';

    position:absolute;

    inset:1px;

    border:1px solid rgba(255,215,120,.06);

    border-radius:12px;

    pointer-events:none;

}

.chapter-btn:hover{

    transform:
        translateX(5px)
        scale(1.01);

    border-color:#f5d089;

    box-shadow:

        0 0 24px rgba(255,220,120,.10),
        inset 0 0 18px rgba(255,220,120,.08);

}

.chapter-btn img{

    width:44px;

    border-radius:3px;

    position:relative;

    z-index:2;

    box-shadow:
        0 0 6px rgba(255,220,120,.16);

}

.chapter-btn span{

    flex:1;

    margin-left:20px;

    font-family:'Cinzel',serif;

    font-size:22px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    /*
    FILTRE RETRO
    */

    text-shadow:

        0 1px 0 #fff2bf,
        0 0 4px rgba(255,220,120,.14),
        1px 1px 0 rgba(0,0,0,.7),
        2px 2px 8px rgba(0,0,0,.55);

    position:relative;

    z-index:2;

}

.chapter-btn b{

    font-size:24px;

    font-weight:400;

    color:#f2d28a;

    text-shadow:
        0 0 8px rgba(255,220,120,.20);

    position:relative;

    z-index:2;

}

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

@media(max-width:1200px){

    body{
        overflow:auto;
    }

    .main-container{

        flex-direction:column;

        align-items:flex-start;

        gap:45px;

        padding:28px 20px;

    }

    .left-panel,
    .right-panel{

        width:100%;

        max-width:100%;

    }

    .main-logo{

        width:320px;

    }

    .intro-text{

        font-size:26px;

        letter-spacing:2px;

    }

    .feature-item span{

        font-size:15px;

    }

    .feature-item img{

        width:56px;
        height:56px;

    }

    .chapter-btn{

        height:78px;

    }

    .chapter-btn span{

        font-size:18px;

    }

}