/* ==========================================================
   ALEJANDRO RAMÍREZ — STUDIO
   STYLE.CSS

   Version: 0.2

   Structure

   1. Base
   1.1  Cinema Entrance
   2. Shared Identity
   3. Foyer
   4. Image Room
   5. Colour Palette
   6. Animations
   7. Responsive
========================================================== */



/* ==========================================================
   1. BASE
========================================================== */

html,
body {

    margin: 0;
    height: 100%;

}


body {

    background: #d6d6c9;
    color: #242421;

    font-family: Helvetica, Arial, sans-serif;

}


main {

    position: relative;

    width: 100%;
    height: 100vh;

    box-sizing: border-box;

}



/* ==========================================================
   1.1 CINEMA ENTRANCE
========================================================== */

.entry {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: block;

}


.cinema-intro {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

}



/* ==========================================================
   2. SHARED IDENTITY
========================================================== */

.identity {

    position: fixed;

    left: 60px;
    top: 65px;

    width: 180px;

    z-index: 1000;

}


.identity h1 {

    margin: 0;

    white-space: nowrap;

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

    line-height: 1.1;

}


.identity-meta {

    display: flex;

    align-items: baseline;

    gap: 18px;

    margin-top: 10px;

}


.identity p {

    margin: 0;

    font-size: 17px;

    letter-spacing: .22em;

    opacity: .35;

}


.back {

    margin: 0;

    font-size: 16px;

    color: inherit;

    text-decoration: none;

    opacity: .45;

    transition: opacity .25s;

}


.back:hover {

    opacity: 1;

}



/* ==========================================================
   3. FOYER
========================================================== */

nav {

    position: absolute;

    left: 85px;
    top: 220px;

}


nav a {

    display: block;

    margin: 14px 0;

    font-size: 23px;

    color: inherit;

    text-decoration: none;

    opacity: .60;

    transition: opacity .25s;

}


nav a:hover {

    opacity: 1;

}



#hello {

    position: absolute;

    top: 75px;
    right: 85px;

    font-size: 18px;

    color: inherit;

    text-decoration: none;

    opacity: .60;

    transition: opacity .25s;

}


#hello:hover {

    opacity: 1;

}



#cinema {

    position: absolute;

    left: 85px;
    top: 560px;

    font-size: 23px;

    color: inherit;

    text-decoration: none;

    opacity: .55;

    transition: opacity .25s;

    display: flex;

    gap: .55em;

}


#cinema:hover {

    opacity: 1;

}



/* ==========================================================
   4. IMAGE ROOM
========================================================== */

.score {

    margin-left: 340px;

    padding-top: 135px;
    padding-bottom: 220px;

}


.project {

    position: relative;

    display: grid;

    gap: 8px;

    margin-bottom: 140px;

}


.project-title {

    position: absolute;

    left: 0;
    bottom: -20px;

    margin: 0;

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

    letter-spacing: .08em;

    opacity: .45;

}



/* ----------------------------------------------------------
   PROJECT A — REEL
---------------------------------------------------------- */

.project.A {

    grid-template-columns: repeat(43, 80px);

    grid-template-rows: repeat(10, 40px);

}


.A1 {

    grid-column: 1 / 5;
    grid-row: 1 / 11;

}


.A2 {

    grid-column: 5 / 10;
    grid-row: 1 / 7;

}


.A3 {

    grid-column: 10 / 15;
    grid-row: 1 / 11;

}


.A4 {

    grid-column: 15 / 26;
    grid-row: 1 / 11;

}


.A5 {

    grid-column: 26 / 32;
    grid-row: 1 / 11;

}


.A6 {

    grid-column: 32 / 34;
    grid-row: 1 / 5;

}


.A7 {

    grid-column: 34 / 43;
    grid-row: 1 / 11;

}



/* ----------------------------------------------------------
   PROJECT B — WHITE CHLOROPHYLL
---------------------------------------------------------- */

.project.B {

    grid-template-columns: repeat(50, 80px);

    grid-template-rows: repeat(10, 40px);

}


.B1 {

    grid-column: 1 / 8;
    grid-row: 1 / 11;

}


.B2 {

    grid-column: 8 / 11;
    grid-row: 1 / 5;

}


.B3 {

    grid-column: 11 / 17;
    grid-row: 1 / 11;

}


.B4 {

    grid-column: 17 / 28;
    grid-row: 1 / 11;

}


.B5 {

    grid-column: 28 / 32;
    grid-row: 1 / 11;

}


.B6 {

    grid-column: 32 / 37;
    grid-row: 1 / 5;

}


.B7 {

    grid-column: 37 / 38;
    grid-row: 6 / 7;

}


.B8 {

    grid-column: 38 / 47;
    grid-row: 6 / 7;

}



/* ----------------------------------------------------------
   PROJECT C
---------------------------------------------------------- */

.project.C {

    grid-template-columns: repeat(36, 80px);

    grid-template-rows: repeat(10, 40px);

}


.C1 {

    grid-column: 1 / 8;
    grid-row: 1 / 11;

}


.C2 {

    grid-column: 8 / 11;
    grid-row: 1 / 5;

}


.C3 {

    grid-column: 11 / 17;
    grid-row: 1 / 11;

}


.C4 {

    grid-column: 17 / 28;
    grid-row: 1 / 11;

}


.C5 {

    grid-column: 28 / 32;
    grid-row: 1 / 11;

}


.C6 {

    grid-column: 32 / 37;
    grid-row: 1 / 5;

}



/* ----------------------------------------------------------
   PROJECT D
---------------------------------------------------------- */

.project.D {

    grid-template-columns: repeat(36, 80px);

    grid-template-rows: repeat(10, 40px);

}


.D1 {

    grid-column: 1 / 8;
    grid-row: 1 / 11;

}


.D2 {

    grid-column: 8 / 11;
    grid-row: 1 / 5;

}


.D3 {

    grid-column: 11 / 17;
    grid-row: 1 / 11;

}


.D4 {

    grid-column: 17 / 28;
    grid-row: 1 / 11;

}


.D5 {

    grid-column: 28 / 32;
    grid-row: 1 / 11;

}


.D6 {

    grid-column: 32 / 37;
    grid-row: 1 / 5;

}



/* ----------------------------------------------------------
   IMAGE ROOM TILES
---------------------------------------------------------- */

.tile {

    background: #ccc;

}


.tile img,
.tile video {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}
/* ----------------------------------------------------------
   Project E — placeholder
---------------------------------------------------------- */

.project.E {

    width: 400px;
    height: 300px;

}


.E-placeholder {

    width: 100%;
    height: 100%;

    background: #d0d8df;

}



/* ----------------------------------------------------------
   Project F — placeholder
---------------------------------------------------------- */

.project.F {

    width: 400px;
    height: 300px;

}


.F-placeholder {

    width: 100%;
    height: 100%;

    background: #f0d21a;

}


/* ==========================================================
   5. COLOUR PALETTE
========================================================== */

.paper {

    background-color: #ece8df;

}


.charcoal {

    background-color: #3b3b3b;

}


.moss {

    background-color: #70755e;

}


.clay {

    background-color: #b78d73;

}


.terracotta {

    background-color: #8f5749;

}


.sky {

    background: #d0d8df;

}


.slate {

    background: #8a9096;

}


.soil {

    background: #6a5547;

}


.olive {

    background: #6e7353;

}


.ochre {

    background: #c4b289;

}



/* ==========================================================
   6. ANIMATIONS
========================================================== */

#cinema span {

    animation: rgbLoop 8s linear infinite;

}


#cinema span:nth-child(1) {

    animation-delay: 0s;

}


#cinema span:nth-child(2) {

    animation-delay: 2.5s;

}


#cinema span:nth-child(3) {

    animation-delay: 5s;

}


#cinema span:nth-child(4) {

    animation-delay: 7.5s;

}


#cinema span:nth-child(5) {

    animation-delay: 10s;

}


#cinema span:nth-child(6) {

    animation-delay: 12.5s;

}


@keyframes rgbLoop {

    0% {
        color: #242421;
    }

    8% {
        color: #d86a6a;
    }

    16% {
        color: #78b878;
    }

    24% {
        color: #6d8fdc;
    }

    32% {
        color: #242421;
    }

    100% {
        color: #242421;
    }

}



/* ==========================================================
   7. RESPONSIVE
========================================================== */

@media (max-width: 768px) {


    .identity {

        left: 40px;
        top: 60px;

    }


    .identity h1 {

        font-size: 21px;

    }


    .identity p {

        font-size: 16px;

        margin-top: 6px;

        letter-spacing: .20em;

    }


    nav {

        left: 40px;
        top: 190px;

    }


    nav a {

        font-size: 24px;

    }


    #cinema {

        left: 40px;
        top: 540px;

        font-size: 18px;

    }


    #hello {

        left: 40px;

        right: auto;

        top: 610px;

        font-size: 18px;

    }

}