/* ----- LIGHTBOX ----- */

#lightbox {
    animation: lightbox 0.75s cubic-bezier(0.75, 0, 0.25, 1) 0.25s forwards;
    align-items: center;
    background-color: rgba(0,0,0,0.9);
    display: flex;
    justify-content: center;
    opacity: 0;
    padding: 4vw;
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: 100dvw;
    z-index: 100;
}

@keyframes lightbox {
    0% {opacity: 0; transform: scale(0.8);}
    100% {opacity: 1; transform: scale(1);}
}

    #lightbox .content {
        align-items: flex-end;
        background-color: var(--accent);
        border: 1px solid var(--gold);
        color: var(--gold-light);
        display: flex;
        flex-direction: column;
        position: relative;
        padding: 4vw;
        height: auto;
        max-height: 100%;
        width: 100%;
        max-width: 1024px;
    }

        #lightbox .content button {
            aspect-ratio: 1 / 1;
            background: transparent;
            border: 0;
            display: block;
        }

            #lightbox .content button svg {
                transition: all 0.25s cubic-bezier(0.75, 0, 0.25, 1);
                height: 1.5rem;
                width: 1.5rem;
            }

                #lightbox .content button line {
                    fill: none;
                    stroke: var(--gold);
                    stroke-linecap: round;
                    stroke-miterlimit: 10;
                    stroke-width: 6px;
                    transition: all 0.5s cubic-bezier(0.75, 0, 0.25, 1);
                }

        #lightbox .content p,
        #lightbox .content h3 {width: 100%;}

        #lightbox .content .flex {
            background-color: rgba(180,140,80,0.25);
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1px;
            margin-top: 2rem;
            width: 100%;
        }

            #lightbox .content .flex a {
                background: linear-gradient(180deg, rgba(16,16,32,0.9) 50%, transparent 50%) no-repeat center top / 100% 200%;
                color: inherit;
                padding: 4rem 2rem 2rem 2rem;
                text-decoration: none;
                transition: all 0.5s cubic-bezier(0.75, 0, 0.25, 1);
            }

            

                #lightbox .content .flex a p:not(.label) {
                    font-family: 'Playfair', serif;
                    font-size: 2rem;
                }

@media (hover: hover) {
    #lightbox .content button:hover line {stroke: var(--gold-light);}

    #lightbox .content .flex a:hover {background-position: center bottom;}
}

/* GLOBAL SECTION STYLES */

section {
    position: relative;
    width: 100%;
}

section.full {height: 100dvh;}

p.label {
    align-items: center;
    color: var(--gold) !important;
    display: flex;
    font-size: 12px;
    font-weight: 400;
    gap: 1rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

    p.label span {
        background-color: var(--gold);
        display: block;
        height: 1px;
        width: 1.5rem;    
    }

/* HERO */

section.hero {
    background: linear-gradient(55deg, rgba(0,0,0,0.9), transparent 66%), url("/resources/media/R3_portrait.jpg") no-repeat fixed center center / cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4vw;
}

    section.hero .text > p:not(#role) {
        color: var(--gold);
        font-weight: 300;
        font-size: 0.9rem;
        letter-spacing: 0.25em;
        text-transform: uppercase;
    }

    section.hero .text h1 {
        background: linear-gradient(180deg, var(--gold-light), var(--gold));
        color: transparent;
        margin-top: 1rem;
        background-clip: text;
    }

        section.hero .text h1 i {
            color: var(--gold);
            font-family: inherit;
        }

    section.hero .text #role {
        color: var(--gold-light);
        display: flex;
        flex-direction: column;
        height: 1.25em;
        overflow: hidden;
    }

        section.hero .text #role span {
            animation: slideAni 14.5s cubic-bezier(0.75, 0, 0.25, 1) 0.5s infinite;
            font-weight: 200;
            font-size: 1.25em;
            letter-spacing: 0.25em;
            line-height: 1.25em;
            text-transform: uppercase;
        }

        @keyframes slideAni {
            0%, 9.52% { transform: translateY(0%); }
            14.29%, 23.81% { transform: translateY(-100%); }
            28.57%, 38.09% { transform: translateY(-200%); }
            42.86%, 52.38% { transform: translateY(-300%); }
            57.14%, 66.66% { transform: translateY(-400%); }
            71.43%, 80.95% { transform: translateY(-500%); }
            85.71%, 95.23% { transform: translateY(-600%); }
            100% { transform: translateY(0%); } /* reset */
        }

/* INTRODUCTORY */

#intro {
    align-items: center;
    background-color: var(--pale);
    display: flex;
    flex-direction: column;
    padding: 4vw 25%;
    text-align: center;
}

    #intro h2,
    #intro p {color: var(--accent);}

/* PORTFOLIO LINKS */

#portfolio {
    display: flex;
    height: 100dvh;
    width: 100%;
}

    #portfolio a {
        color: var(--accent);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 4vw;
        text-decoration: none;
        height: 100%;
        width: 50%;
    }

    #portfolio a.white {color: var(--pale);}

        #portfolio a p {
            opacity: 0;
            transition: all 0.25s cubic-bezier(0.75, 0, 0.25, 1);
        }

        #portfolio a h2 {
            position: relative;
            z-index: 1;
        }


            #portfolio a h2 span {
                color: var(--accent);
                font-size: 2rem;
                vertical-align: baseline;
                opacity: 0;
                transform: translateX(-50%);
                transition: all 0.5s cubic-bezier(0.75, 0, 0.25, 1);
            }

            #portfolio a.white h2 span {color: var(--gold-light);}

    @media (hover: hover) {
        #portfolio a:hover p {opacity: 1;}

            #portfolio a:hover h2 span {
                opacity: 1;
                transform: translateX(0);
            }
    }

/* EXPERIENCE & SPECIALTIES */

#experience {
    background-color: var(--accent);
    color: var(--gold-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100dvh;
    padding: 4vw;
}

    #experience .grid {
        background-color: rgba(180,140,80,0.1);
        border: 1px solid rgba(180,140,80,0.25);
        display: grid;
        gap: 1px;
        grid-template-columns: repeat(2, 1fr);
        margin-top: 2rem;
    }

        #experience .card {
            background: linear-gradient(90deg, transparent 50%, var(--accent) 50%) no-repeat center right / 201% 100%;
            padding: 4vw;
            position: relative;
            transition: all 0.5s cubic-bezier(0.75, 0, 0.25, 1);
        }

        @media (hover: hover) {
            #experience .card:hover {background-position: center left;}
        }

            #experience .card h3 {
                transition: all 0.25s cubic-bezier(0.75, 0, 0.25, 1);
            }

            #experience .card::before {
                color: var(--gold);
                font-family: 'Playfair', serif;
                font-weight: 100;
                font-size: 6rem;
                line-height: 1;
                opacity: 0.25;
                position: absolute;
                top: 4vw;
                right: 4vw;
            }

            #experience .card:nth-of-type(1)::before {content: '01';}
            #experience .card:nth-of-type(2)::before {content: '02';}
            #experience .card:nth-of-type(3)::before {content: '03';}
            #experience .card:nth-of-type(4)::before {content: '04';}

/* CONTACT */

#contact {
    align-items: center;
    background-color: var(--pale);
    color: var(--accent);
    display: flex;
    gap: 2rem;
    justify-content: center;
    padding: 4vw;
    height: 100dvh;
}

    #contact .text {width: 50%;}

        #contact .text h2 {color: var(--gold-light);}

        #contact .text p {max-width: 50ch;}

    #contact form {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        width: 50%;
        max-width: 100%;
    }

        #contact form input,
        #contact form textarea {
            background-color: transparent;
            border: 0;
            border-bottom: 1px solid var(--gold-light);
            border-radius: 0;
            color: var(--gold);
            font-size: 1rem;
            padding-bottom: 1rem;
            resize: vertical;
            transition: all 0.25s cubic-bezier(0.75, 0, 0.25, 1);
        }

        #contact form input::placeholder,
        #contact form textarea::placeholder {
            color: rgba(180,140,80,0.25);
            transition: all 0.25s cubic-bezier(0.75, 0, 0.25, 1);
        }

        @media (hover: hover) {
            #contact form input:hover,
            #contact form textarea:hover {border-color: var(--gold);}

            #contact form input:focus,
            #contact form textarea:focus {
                border-color: var(--gold);
                outline: none;
            }
        }

        #contact form button {
            background: linear-gradient(180deg, transparent 50%, var(--gold) 50%) no-repeat center top / 100% 200%;
            border: 1px solid var(--gold);
            color: var(--gold);
            font-size: 12px;
            letter-spacing: 0.25em;
            line-height: 1rem;
            overflow: hidden;
            position: relative;
            padding: 1rem 2rem;
            text-transform: uppercase;
            transition: all 0.5s cubic-bezier(0.75, 0, 0.25, 1);
            width: 50%;
            z-index: 1;
        }

        @media (hover: hover) {
            #contact form button:hover {
                background-position: center bottom;
                color: var(--gold-light);
            }
        }

/* ----- MEDIA QUERIES ----- */

@media screen and (min-width: 1920px) {
    section.hero {background: linear-gradient(55deg, rgba(0,0,0,0.9), transparent 66%), url("/resources/media/R3_portrait.jpg") no-repeat center 15% / cover;}
}

@media screen and (max-width: 840px) {
    #contact .text,
    #contact form {width: 100%;}
}

@media screen and (max-width: 1080px) and (orientation: portrait) {
    #portfolio {flex-direction: column;}

        #portfolio a {
            height: 50dvh;
            width: 100%;
        }
}

@media screen and (max-width: 768px) {
    section.hero {background: linear-gradient(55deg, rgba(0,0,0,0.9), transparent 66%), url("/resources/media/R3_portrait_vertical.jpg") no-repeat center center / cover;}

    #intro {padding: 4vw;}

    #experience .grid {grid-template-columns: repeat(1, 1fr);}

    #contact {flex-direction: column;}
}

@media screen and (max-width: 660px) {
    #lightbox .content .flex {grid-template-columns: 1fr;}

    section.hero .text  {text-align: center;}

    #photography button {
        font-size: 1rem;
        line-height: 1.25rem;
    }

    #contact {gap: 1rem;}
}

@media screen and (max-width: 480px) {
    section.hero,
    #intro,
    #experience,
    #contact {padding: 2rem;}

        section.hero .text #role span {font-size: 1em;}

        #portfolio a {padding: 2rem;}

        #experience .card {padding: 2rem;}

    #contact form button {width: 100%;}   
}