/* ==================================================
   MOVEMENT COVER
================================================== */

.movement-card{
    position:relative;
    aspect-ratio:9/16;
    overflow:hidden;
}

.movement-art{
    position:absolute;
    inset:0;
    overflow:hidden;

    transition:
        transform 1.2s ease,
        filter .8s ease;
}

.movement-background{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:contain;
    object-position:center;

    background:#111;
    z-index:1;
}

.movement-title{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.movement-move,
.movement-ment{
    position:absolute;

    font-family:'Anton',sans-serif;
    font-size:clamp(54px,5.2vw,82px);
    font-weight:400;
    line-height:.85;
    letter-spacing:-2px;
    text-transform:uppercase;
}

.movement-move{
    top:13%;
    left:3%;
}

.movement-ment{
    top:39%;
    right:2%;
}

.movement-title-solid{
    color:rgba(255,255,255,.94);
    z-index:2;
}

.movement-card .movement-cutout{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transform:translate(12px,0) scale(1.03);
    transform-origin:center;

    pointer-events:none;
    z-index:3;
}

.movement-title-outline{
    color:transparent;
    -webkit-text-stroke:1px rgba(255,255,255,.80);
    z-index:4;
}

.movement-overlay{
    position:absolute;
    inset:0;

    padding:20px 18px;
    pointer-events:none;
    z-index:5;
}

.movement-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.movement-chapter{
    font-size:8px;
    font-weight:500;
    letter-spacing:4px;
    text-transform:uppercase;
    opacity:.68;
}

.movement-info{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:2px;

    font-size:8px;
    font-weight:500;
    letter-spacing:2px;
    text-transform:uppercase;
    opacity:.68;
}

.movement-card:hover .movement-art{
    transform:scale(1.035);
    filter:brightness(.88);
}

/* ==================================================
   SOBRE
================================================== */

.about{
    max-width:1300px;
    margin:auto;
    padding:160px 40px;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.about-image img{
    width:100%;
    height:650px;
    object-fit:cover;
    display:block;
}

.about-text h2{
    margin-bottom:40px;
    font-size:36px;
    font-weight:500;
}

.about-highlight{
    margin-bottom:35px;
    font-size:30px;
    font-weight:300;
    line-height:1.4;
}

.about-text p:last-child{
    font-size:17px;
    line-height:1.8;
    color:#666;
}


/* ==========================================
   MOVEMENT VIDEO
========================================== */

.movement-video-section{

    width:100%;

    padding:0 24px 180px;

}


.movement-video{

    width:100%;

    max-width:1500px;

    height:82vh;

    display:block;

    margin:auto;

    object-fit:cover;

    border-radius:0;

}


/* ==========================================
   MOVEMENT — PHOTO SEQUENCE
========================================== */

.movement-photo{

    width:100%;

    padding:0 40px 200px;

    display:flex;
    justify-content:center;

}


.movement-photo img{

    width:100%;
    height:auto;

    max-height:90vh;

    object-fit:contain;

    display:block;

}


/* Foto média */

.movement-photo-medium img{

    max-width:820px;

}


/* Foto com maior presença */

.movement-photo-wide img{

    max-width:1500px;

}


/* Foto mais contida */

.movement-photo-narrow img{

    max-width:760px;

}


/* ==========================================
   MOVEMENT — QUOTE
========================================== */

.movement-quote{

    max-width:900px;

    margin:0 auto;

    padding:40px 40px 180px;

    text-align:center;

}


.movement-quote p{

    color:#222;

    font-size:clamp(28px,3vw,48px);

    font-weight:300;

    line-height:1.4;

    letter-spacing:-1px;

}


/* ==================================================
   MOVEMENT — RESPONSIVE
================================================== */

@media (max-width:768px){

    /* VIDEO */

    .movement-video-section{
        padding:0 24px 120px;
    }

    .movement-video{
        width:100%;
        height:auto;

        max-height:none;

        object-fit:contain;
    }


    /* FOTOS */

    .movement-photo{
        padding:0 28px 130px;
    }

    .movement-photo img{
        width:100%;
        height:auto;

        max-height:none;
    }

    .movement-photo-medium img{
        max-width:680px;
    }

    .movement-photo-wide img{
        max-width:100%;
    }

    .movement-photo-narrow img{
        max-width:620px;
    }


    /* QUOTE */

    .movement-quote{
        max-width:720px;

        padding:30px 32px 130px;
    }

    .movement-quote p{
        font-size:clamp(25px,5vw,38px);

        line-height:1.45;
        letter-spacing:-.5px;
    }


    /* ABOUT */

    .about{
        padding:120px 32px;

        grid-template-columns:1fr;

        gap:60px;
    }

    .about-image img{
        width:100%;
        height:520px;

        object-fit:cover;
        object-position:center top;
    }

}


/* ==================================================
   MOVEMENT — CELULAR
================================================== */

@media (max-width:600px){

    /* VIDEO */

    .movement-video-section{
        padding:0 16px 85px;
    }

    .movement-video{
        width:100%;
        height:auto;

        display:block;

        object-fit:contain;
    }


    /* SEQUÊNCIA DE FOTOS */

    .movement-photo{
        padding:
            0
            18px
            90px;
    }

    .movement-photo img,
    .movement-photo-medium img,
    .movement-photo-wide img,
    .movement-photo-narrow img{
        width:100%;
        height:auto;

        max-width:100%;
        max-height:none;

        object-fit:contain;
    }


    /* QUOTE */

    .movement-quote{
        padding:
            20px
            24px
            95px;
    }

    .movement-quote p{
        font-size:clamp(24px,7.5vw,32px);

        line-height:1.45;

        letter-spacing:-.5px;
    }


    /* ABOUT */

    .about{
        padding:
            90px
            22px;

        gap:45px;
    }

    .about-image img{
        width:100%;
        height:auto;

        max-height:500px;

        object-fit:cover;
        object-position:center top;
    }

    .about-text h2{
        margin-bottom:26px;

        font-size:30px;
    }

    .about-highlight{
        margin-bottom:26px;

        font-size:24px;
        line-height:1.45;
    }

    .about-text p:last-child{
        font-size:15px;
        line-height:1.8;
    }

}


/* ==================================================
   IPHONE SE / TELAS PEQUENAS
================================================== */

@media (max-width:390px){

    .movement-video-section{
        padding-left:14px;
        padding-right:14px;
    }

    .movement-photo{
        padding-left:14px;
        padding-right:14px;

        padding-bottom:80px;
    }

    .movement-quote{
        padding:
            15px
            20px
            85px;
    }

    .movement-quote p{
        font-size:23px;
    }

}


@media (max-width:600px){

    .story-hero h1{
        font-size:clamp(32px,9.5vw,42px);
        letter-spacing:.5px;

        max-width:100%;
        padding:0 12px;

        white-space:nowrap;
    }

}


@media (max-width:390px){

    .story-hero h1{
        font-size:32px;
        letter-spacing:0;
    }

}