/* ==========================================
   CHAPTER HERO
========================================== */

.story-hero{

    min-height:100vh;

    padding:40px;

    display:flex;
    flex-direction:column;

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

    text-align:center;

}


.story-number{

    margin-bottom:30px;

    color:#888;

    font-size:13px;
    font-weight:500;

    letter-spacing:5px;

    text-transform:uppercase;

}


.story-hero h1{

    font-size:72px;
    font-weight:500;

    letter-spacing:4px;

}


.story-hero p{

    margin-top:30px;

    color:#666;

    font-size:22px;
    font-weight:300;

    line-height:1.8;

}


/* Entrada dos textos do capítulo */

.story-hero .hero-item{

    opacity:0;

    transform:translateY(30px);

    animation:chapterHeroIntro 1s ease forwards;

}


.story-number.hero-item{

    animation-delay:.3s;

}


.story-hero h1.hero-item{

    animation-delay:.7s;

}


.story-hero p.hero-item{

    animation-delay:1.1s;

}


@keyframes chapterHeroIntro{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==========================================
   CHAPTER NAVBAR
========================================== */

.chapter-navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    min-height:72px;

    padding:0 40px;

    display:grid;
    grid-template-columns:1fr auto 1fr;

    align-items:center;

    background:rgba(255,255,255,.86);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    border-bottom:1px solid rgba(0,0,0,.05);

    z-index:1000;

}


.chapter-navbar a{

    color:#111;

    text-decoration:none;

    font-size:11px;
    font-weight:500;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:
        opacity .3s ease,
        transform .3s ease;

}


.chapter-navbar a:hover{

    opacity:.6;

}


.chapter-back{

    justify-self:start;

}


.chapter-logo{

    justify-self:center;

    letter-spacing:4px !important;

}


.chapter-contact{

    justify-self:end;

    display:flex;

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

    width:30px;
    height:30px;

    border:1px solid rgba(0,0,0,.10);
    border-radius:50%;

    font-size:13px !important;
    letter-spacing:0 !important;

}


/* Evita que a navbar cubra o início do capítulo */

.story-page main{

    padding-top:72px;

}


/* ==========================================
   NEXT CHAPTER
========================================== */

.chapter-next{

    padding:140px 40px 160px;

    display:flex;
    flex-direction:column;

    align-items:center;

    text-align:center;

}


.next-label{

    margin-bottom:12px;

    font-size:10px;
    font-weight:500;

    letter-spacing:6px;

    text-transform:uppercase;

    color:#999;

}


.next-title{

    display:inline-flex;

    align-items:center;

    gap:14px;

    color:#111;

    font-size:24px;
    font-weight:500;

    letter-spacing:5px;

    text-transform:uppercase;
    text-decoration:none;

    transition:
        opacity .3s ease,
        transform .3s ease;

}


.next-arrow{

    display:inline-block;

    font-size:30px;

    transition:transform .35s ease;

}


.next-title:hover{

    opacity:.7;

    transform:translateY(-2px);

}


.next-title:hover .next-arrow{

    transform:translateX(7px);

}


@media (max-width:600px){

    .chapter-back{
        font-size:7px;
        letter-spacing:1.6px !important;
        opacity:.62;
        font-weight:400;

        transform:translateX(-22px);
    }

}

@media (max-width:390px){

    .chapter-back{
        transform:translateX(-14px);
    }

}