/* ==========================================================
   SALVA v3
   STYLE.CSS
========================================================== */


/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:#ffffff;
    color:#111111;

    font-family:"Roboto Condensed",sans-serif;

    text-transform:uppercase;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

}


/* ==========================================================
   ELEMENTOS
========================================================== */

img{

    display:block;
    max-width:100%;
    height:auto;

}

video{

    display:block;
    width:100%;
    height:auto;

}

a{

    color:inherit;
    text-decoration:none;

}


/* ==========================================================
   UI FIXA
========================================================== */

.ui{

    position:fixed;

    inset:0;

    z-index:9999;

    pointer-events:none;

}


/* ==========================================================
   LOGO
========================================================== */

.logo{

    position:fixed;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    pointer-events:auto;

    z-index:100;

}

.logo img{

    width:170px;

    display:block;

}


/* ==========================================================
   MANIFESTO
========================================================== */

.intro{

    position:fixed;

    left:44px;

    top:42px;

    width:255px;

    pointer-events:auto;

    z-index:100;

}

.intro p{

    font-size:10px;

    line-height:1.55;

    letter-spacing:.08em;

    font-weight:300;

    margin-bottom:4px;

}

.intro a{

    transition:opacity .25s ease;

}

.intro a:hover{

    opacity:.45;

}


/* ==========================================================
   LINKS
========================================================== */

.links{

    position:fixed;

    top:42px;

    right:44px;

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:6px;

    pointer-events:auto;

    z-index:100;

}

.links a{

    font-size:10px;

    letter-spacing:.08em;

    transition:opacity .25s ease;

}

.links a:hover{

    opacity:.45;

}


/* ==========================================================
   GALERIA
========================================================== */

.gallery{

    width:min(1800px,100%);

    margin:0 auto;

    padding:

        220px
        4vw
        220px;

    display:grid;

    grid-template-columns:repeat(12,1fr);

    column-gap:2vw;

    row-gap:10vw;

}
/* ==========================================================
   GALERIA EDITORIAL
========================================================== */

.item{

    position:relative;

    align-self:start;

    opacity:.92;

    transition:

        opacity .35s ease,

        transform .45s ease;

}

.item video{

    display:block;

    width:100%;

    height:auto;

    background:#f4f4f4;

}

.item:hover{

    transform:translateY(-4px);

}

.item.playing{

    opacity:1;

}

.item:not(.playing){

    opacity:.78;

}


/* ==========================================================
   COMPOSIÇÃO
========================================================== */


/* 1 */

.item:nth-child(8n+1){

    grid-column:2 / span 3;

    margin-top:0;

}


/* 2 */

.item:nth-child(8n+2){

    grid-column:8 / span 3;

    margin-top:180px;

}


/* 3 */

.item:nth-child(8n+3){

    grid-column:5 / span 2;

    margin-top:60px;

}


/* 4 */

.item:nth-child(8n+4){

    grid-column:10 / span 2;

    margin-top:220px;

}


/* 5 */

.item:nth-child(8n+5){

    grid-column:1 / span 4;

    margin-top:120px;

}


/* 6 */

.item:nth-child(8n+6){

    grid-column:7 / span 2;

    margin-top:20px;

}


/* 7 */

.item:nth-child(8n+7){

    grid-column:4 / span 4;

    margin-top:170px;

}


/* 8 */

.item:nth-child(8n+8){

    grid-column:9 / span 3;

    margin-top:90px;

}


/* ==========================================================
   TAMANHOS
========================================================== */

.item:nth-child(3n+1){

    width:92%;

}

.item:nth-child(3n+2){

    width:74%;

}

.item:nth-child(3n+3){

    width:100%;

}


/* ==========================================================
   ALINHAMENTOS
========================================================== */

.item:nth-child(odd){

    justify-self:start;

}

.item:nth-child(even){

    justify-self:end;

}
/* ==========================================================
   RITMO EDITORIAL
========================================================== */

/* SMALL */

.item:nth-child(8n+3),
.item:nth-child(8n+6){

    max-width:220px;

}

/* MEDIUM */

.item:nth-child(8n+1),
.item:nth-child(8n+2),
.item:nth-child(8n+4),
.item:nth-child(8n+8){

    max-width:340px;

}

/* LARGE */

.item:nth-child(8n+5),
.item:nth-child(8n+7){

    max-width:500px;

}


/* ==========================================================
   RESPIRO
========================================================== */

.item{

    margin-bottom:40px;

}

.item:nth-child(8n+1){

    padding-top:0;

}

.item:nth-child(8n+2){

    padding-top:40px;

}

.item:nth-child(8n+3){

    padding-top:120px;

}

.item:nth-child(8n+4){

    padding-top:60px;

}

.item:nth-child(8n+5){

    padding-top:180px;

}

.item:nth-child(8n+6){

    padding-top:20px;

}

.item:nth-child(8n+7){

    padding-top:140px;

}

.item:nth-child(8n+8){

    padding-top:80px;

}


/* ==========================================================
   APARECIMENTO
========================================================== */

.item{

    opacity:0;

    transform:translateY(30px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.item.visible{

    opacity:1;

    transform:translateY(0);

}


/* ==========================================================
   HOVER
========================================================== */

.item video{

    transition:

        transform .45s ease,

        opacity .35s ease;

}

.item:hover video{

    transform:scale(1.015);

}

.item.playing video{

    opacity:1;

}

.item:not(.playing) video{

    opacity:.82;

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


/* ---------- DESKTOP ---------- */

@media (max-width:1400px){

    .gallery{

        width:96%;

        column-gap:30px;

    }

    .logo img{

        width:155px;

    }

}


/* ---------- PORTÁTIL ---------- */

@media (max-width:1200px){

    .gallery{

        grid-template-columns:repeat(8,1fr);

        row-gap:80px;

    }

    .item{

        max-width:none;

        width:100%;

        margin-top:0 !important;

        padding-top:0 !important;

    }

    .item:nth-child(odd){

        grid-column:1 / span 3;

    }

    .item:nth-child(even){

        grid-column:5 / span 3;

    }

}


/* ---------- TABLET ---------- */

@media (max-width:900px){

    .logo img{

        width:120px;

    }

    .intro{

        top:30px;

        left:30px;

        width:240px;

    }

    .intro p{

        font-size:10px;

    }

    .links{

        top:30px;

        right:30px;

    }

    .links a{

        font-size:10px;

    }

    .gallery{

        display:block;

        width:92%;

        padding-top:180px;

    }

    .item{

        margin-bottom:60px;

    }

}


/* ---------- MOBILE ---------- */

@media (max-width:600px){

    .logo img{

        width:88px;

    }

    .intro{

        position:relative;

        left:28px;

        top:36px;

        width:220px;

    }

    .intro p{

        font-size:9px;

        line-height:1.55;

    }

    .links{

        position:relative;

        left:28px;

        right:auto;

        top:52px;

        align-items:flex-start;

        gap:8px;

    }

    .links a{

        font-size:9px;

    }

    .gallery{

        display:block;

        width:90%;

        padding-top:190px;

    }

    .item{

        margin-bottom:44px;

    }

}


/* ---------- SMALL MOBILE ---------- */

@media (max-width:420px){

    .logo img{

        width:72px;

    }

    .intro{

        left:20px;

        width:210px;

    }

    .links{

        left:20px;

    }

}
/* ==========================================================
   TRANSIÇÕES
========================================================== */

body{

    transition:background .25s ease;

}

a,
img,
video{

    user-select:none;

}


/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#ffffff;

}

::-webkit-scrollbar-thumb{

    background:#d9d9d9;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#a5a5a5;

}

html{

    scrollbar-width:thin;

    scrollbar-color:#d9d9d9 #ffffff;

}


/* ==========================================================
   SELEÇÃO
========================================================== */

::selection{

    background:#111111;

    color:#ffffff;

}

::-moz-selection{

    background:#111111;

    color:#ffffff;

}


/* ==========================================================
   FOCUS
========================================================== */

a:focus-visible{

    outline:1px solid #111111;

    outline-offset:5px;

}


/* ==========================================================
   PERFORMANCE
========================================================== */

.item{

    will-change:transform,opacity;

}

video{

    backface-visibility:hidden;

    transform:translateZ(0);

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/* ==========================================================
   PRINT
========================================================== */

@media print{

    body{

        background:#ffffff;

    }

    .ui{

        display:none;

    }

    .gallery{

        display:block;

        width:100%;

        padding:0;

    }

    .item{

        opacity:1;

        transform:none;

        margin-bottom:30px;

    }

}


/* ==========================================================
   FIM
========================================================== */