/* =====================================================
   RIYA SINGH — PORTFOLIO
===================================================== */


/* =====================================================
   VARIABLES
===================================================== */

:root {

    --cream: #ffffc9;
    --red: #a30002;
    --dark-red: #760002;
    --paper: #f5f2d8;

    --shadow:
        rgba(50, 20, 0, .16);

    --ease:
        cubic-bezier(.22, .61, .36, 1);

}


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

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {

    background:
        var(--cream);

    color:
        var(--red);

    font-family:
        "Cormorant Unicase",
        serif;

    overflow-x:
        hidden;

}


body.lightbox-open {
    overflow: hidden;
}

.about-description {
    max-width: 500px;
    margin: 15px auto 0;

    font-size: 0.85rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
    text-align: center;
    font-weight: 400;
}

a {

    color:
        inherit;

    text-decoration:
        none;

}


img {

    display:
        block;

    width:
        100%;

}


/* =====================================================
   INTRO
===================================================== */

.intro {

    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--cream);

    transition:
        opacity 1s var(--ease),
        visibility 1s var(--ease);

}


.intro.hide {

    opacity:
        0;

    visibility:
        hidden;

}


.intro-content {

    text-align:
        center;

    animation:
        introAppear 1s var(--ease)
        forwards;

}


.intro-small {

    display:
        block;

    margin-bottom:
        25px;

    font-size:
        .75rem;

    letter-spacing:
        .2em;

    text-transform:
        uppercase;

}


.intro h1 {

    font-size:
        clamp(4rem, 12vw, 10rem);

    line-height:
        .72;

    font-weight:
        500;

    letter-spacing:
        -.06em;

}


.intro-line {

    width:
        100px;

    height:
        1px;

    margin:
        35px auto 20px;

    background:
        var(--red);

    transform-origin:
        left;

    animation:
        lineAppear 1s .5s var(--ease)
        both;

}


.intro-content p {

    font-size:
        .85rem;

    letter-spacing:
        .15em;

}


@keyframes introAppear {

    from {

        opacity:
            0;

        transform:
            translateY(30px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


@keyframes lineAppear {

    from {

        transform:
            scaleX(0);

    }

    to {

        transform:
            scaleX(1);

    }

}


/* =====================================================
   WEBSITE REVEAL
===================================================== */

.site {

    opacity:
        0;

    transform:
        translateY(15px);

    transition:
        opacity 1.1s .2s var(--ease),
        transform 1.1s .2s var(--ease);

}


body.loaded .site {

    opacity:
        1;

    transform:
        none;

}


/* =====================================================
   NAVIGATION
===================================================== */

.topbar {

    position:
        absolute;

    z-index:
        100;

    top:
        0;

    left:
        0;

    width:
        100%;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    padding:
        25px 30px;

}


.contact-link,
.nav a {

    position:
        relative;

    font-size:
        .78rem;

    letter-spacing:
        .08em;

}


.contact-link::after,
.nav a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -5px;

    width:
        100%;

    height:
        1px;

    background:
        currentColor;

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform .4s var(--ease);

}


.contact-link:hover::after,
.nav a:hover::after {

    transform:
        scaleX(1);

    transform-origin:
        left;

}


.nav {

    display:
        flex;

    gap:
        25px;

}


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

.hero {

    position:
        relative;

    min-height:
        760px;

    height:
        760px;

    padding:
        105px 6vw 35px;

    overflow:
        hidden;

}


/* =====================================================
   HERO HEADING
===================================================== */

.hero-heading {

    position:
        relative;

    z-index:
        30;

    text-align:
        center;

}


.main-title {

    font-size:
        clamp(.85rem, 1.5vw, 1.1rem);

    letter-spacing:
        .13em;

}


.identity {

    position:
        relative;

    display:
        inline-block;

    margin-top:
        30px;

    font-size:
        clamp(1.1rem, 2vw, 1.55rem);

    font-weight:
        500;

}


/* =====================================================
   PHOTO COLLAGE
===================================================== */

.photo-collage {

    position:
        relative;

    width:
        min(760px, 88vw);

    height:
        430px;

    margin:
        15px auto 0;

}


/* =====================================================
   PHOTO BASE
===================================================== */

.photo {

    position:
        absolute;

    margin:
        0;

    padding:
        8px 8px 15px;

    background:
        var(--paper);

    box-shadow:
        0 12px 25px var(--shadow);

    cursor:
        pointer;

    transition:
        transform .45s var(--ease),
        box-shadow .45s var(--ease),
        filter .45s var(--ease);

}


.photo img {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    filter:
        grayscale(100%)
        contrast(.92);

}

.photo-main img {
    filter: none;
}


/* Placeholder text behind an empty image */

.photo-placeholder {

    position:
        absolute;

    inset:
        8px 8px 15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #dcdcdc;

    color:
        #777;

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    letter-spacing:
        .1em;

}


/* =====================================================
   MAIN PHOTO
===================================================== */

.photo-main {

    z-index:
        8;

    left:
        50%;

    top:
        5px;

    width:
        190px;

    height:
        245px;

    transform:
        translateX(-50%)
        rotate(-3deg);

}


/* =====================================================
   OTHER PHOTOS
===================================================== */

.photo-2 {

    z-index:
        5;

    left:
        18%;

    top:
        65px;

    width:
        160px;

    height:
        220px;

    transform:
        rotate(7deg);

}


.photo-3 {

    z-index:
        4;

    left:
        61%;

    top:
        55px;

    width:
        150px;

    height:
        210px;

    transform:
        rotate(8deg);

}


.photo-4 {

    z-index:
        3;

    left:
        5%;

    top:
        175px;

    width:
        145px;

    height:
        195px;

    transform:
        rotate(-10deg);

}


.photo-5 {

    z-index:
        2;

    left:
        76%;

    top:
        185px;

    width:
        140px;

    height:
        190px;

    transform:
        rotate(-8deg);

}


.photo-6 {

    z-index:
        6;

    left:
        26%;

    top:
        255px;

    width:
        145px;

    height:
        175px;

    transform:
        rotate(-7deg);

}


.photo-7 {

    z-index:
        5;

    left:
        47%;

    top:
        270px;

    width:
        135px;

    height:
        170px;

    transform:
        rotate(7deg);

}


.photo-8 {

    z-index:
        4;

    left:
        65%;

    top:
        270px;

    width:
        145px;

    height:
        175px;

    transform:
        rotate(-3deg);

}


/* =====================================================
   NORMAL HOVERS
===================================================== */

.photo-main:hover {

    transform:
        translateX(-50%)
        rotate(0deg)
        translateY(-8px);

}


.photo-2:hover {

    transform:
        rotate(4deg)
        translateY(-8px);

}


.photo-3:hover {

    transform:
        rotate(5deg)
        translateY(-8px);

}


.photo-4:hover {

    transform:
        rotate(-6deg)
        translateY(-8px);

}


.photo-5:hover {

    transform:
        rotate(-4deg)
        translateY(-8px);

}


.photo-6:hover {

    transform:
        rotate(-3deg)
        translateY(-8px);

}


.photo-7:hover {

    transform:
        rotate(4deg)
        translateY(-8px);

}


.photo-8:hover {

    transform:
        rotate(1deg)
        translateY(-8px);

}


/* =====================================================
   CLICKED PHOTO — BRING TO FRONT
===================================================== */

/*
   This is the important part.

   The photo stays inside the collage.
   It does NOT open a popup.

   It simply lifts out of the pile.
*/


.photo.selected {

    z-index:
        100 !important;

    box-shadow:
        0 28px 45px
        rgba(50, 20, 0, .28);

}


/* Main photo */

.photo-main.selected {

    transform:
        translateX(-50%)
        rotate(-3deg)
        translateY(-18px)
        scale(1.08);

}


/* Photo 2 */

.photo-2.selected {

    transform:
        rotate(7deg)
        translateY(-18px)
        scale(1.08);

}


/* Photo 3 */

.photo-3.selected {

    transform:
        rotate(8deg)
        translateY(-18px)
        scale(1.08);

}


/* Photo 4 */

.photo-4.selected {

    transform:
        rotate(-10deg)
        translateY(-18px)
        scale(1.08);

}


/* Photo 5 */

.photo-5.selected {

    transform:
        rotate(-8deg)
        translateY(-18px)
        scale(1.08);

}


/* Photo 6 */

.photo-6.selected {

    transform:
        rotate(-7deg)
        translateY(-18px)
        scale(1.08);

}


/* Photo 7 */

.photo-7.selected {

    transform:
        rotate(7deg)
        translateY(-18px)
        scale(1.08);

}


/* Photo 8 */

.photo-8.selected {

    transform:
        rotate(-3deg)
        translateY(-18px)
        scale(1.08);

}


/*
   Slightly quieten the rest of
   the pile when one is selected.
*/

.photo-collage.has-selected
.photo:not(.selected) {

    filter:
        brightness(.88);

}


.photo-collage.has-selected
.photo.selected {

    filter:
        brightness(1);

}


/* =====================================================
   ARROW
===================================================== */

.photo-arrow {

    position:
        absolute;

    z-index:
        40;

    left:
        29%;

    top:
        42px;

    width:
        80px;

    height:
        70px;

    pointer-events:
        none;

}


.photo-arrow span {

    display:
        block;

    font-family:
        Arial,
        sans-serif;

    font-size:
        48px;

    font-weight:
        300;

    transform:
        rotate(-8deg);

}


/* =====================================================
   LOCATION
===================================================== */

.location {

    position:
        absolute;

    left:
        8vw;

    bottom:
        25px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    font-size:
        .50rem;

    letter-spacing:
        .08em;

}


.location span {

    text-decoration:
        underline;

    text-underline-offset:
        5px;

}


.location strong {

    font-weight:
        500;

}


/* =====================================================
   DECORATIONS
===================================================== */

.scribble {

    position:
        absolute;

    font-family:
        cursive;

    font-size:
        2.5rem;

    pointer-events:
        none;

}


.scribble-one {

    right:
        8%;

    top:
        35%;

    transform:
        rotate(15deg);

}


.scribble-two {

    right:
        12%;

    bottom:
        14%;

    transform:
        rotate(-20deg);

}


.scribble-three {

    left:
        10%;

    bottom:
        18%;

    font-size:
        1.7rem;

}


/* =====================================================
   PROJECT SECTION
===================================================== */

.projects-section {

    padding:
        35px 0 40px;

    overflow:
        hidden;

    border-top:
        1px solid
        rgba(163, 0, 2, .18);

}


/* =====================================================
   PROJECT HEADING
===================================================== */

.section-heading {

    padding:
        0 6vw 35px;

}


.section-eyebrow {

    font-size:
        .78rem;

    letter-spacing:
        .12em;

}


.section-heading h2 {

    margin-top:
        10px;

    font-size:
        clamp(
            3.5rem,
            7vw,
            7rem
        );

    line-height:
        .78;

    font-weight:
        400;

    letter-spacing:
        -.06em;

}


/* =====================================================
   HORIZONTAL PROJECT SCROLLER
===================================================== */

.work-grid {

    display:
        flex;

    gap:
        25px;

    width:
        100%;

    padding:
        0 6vw 20px;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    cursor:
        grab;

    user-select:
        none;

    -webkit-user-select:
        none;

    touch-action:
        pan-x;

    scrollbar-width:
        none;

    overscroll-behavior-x:
        contain;

}


.work-grid::-webkit-scrollbar {

    display:
        none;

}


.work-grid.dragging {

    cursor:
        grabbing;

}


.work-grid.dragging a {

    pointer-events:
        none;

}


/* =====================================================
   PROJECT CARD
===================================================== */

.work-card {

    flex:
        0 0 340px;

}


.work-card a {

    display:
        block;

}


/* =====================================================
   PROJECT IMAGE
===================================================== */

.image-wrap {

    position:
        relative;

    overflow:
        hidden;

    background:
        #e3e1d0;

}


.image-wrap img {

    width:
        100%;

    height:
        425px;

    object-fit:
        cover;

    filter:
        none;

    transition:
        transform .7s var(--ease),
        filter .7s var(--ease);

}


.work-card:hover
.image-wrap img {

    transform:
        scale(1.04);

    filter:
        grayscale(0%);

}


/* =====================================================
   PROJECT OVERLAY
===================================================== */

.work-overlay {

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    padding:
        60px 20px 20px;

    color:
        var(--cream);

    background:
        linear-gradient(
            transparent,
            rgba(30, 0, 0, .8)
        );

    opacity:
        0;

    transition:
        opacity .4s var(--ease);

}


.work-card:hover
.work-overlay {

    opacity:
        1;

}


.work-overlay p {

    font-size:
        1rem;

}


.project-number {

    display:
        block;

    margin-top:
        8px;

    font-size:
        .7rem;

    letter-spacing:
        .1em;

}


/* =====================================================
   FOOTER
===================================================== */

footer {

    min-height:
        0;

    height:
        auto;

    padding:
        50px 6vw 40px;

    border-top:
        1px solid
        rgba(163, 0, 2, .3);

}


/* Hide old contact content if it
   is still present in HTML */

.footer-main {

    display:
        none;

}


/* =====================================================
   FOOTER BOTTOM
===================================================== */

.footer-bottom {

    display:
        grid;

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

    align-items:
        end;

    gap:
        20px;

    font-size:
        .7rem;

    letter-spacing:
        .04em;

}


.footer-bottom
> p:last-child {

    text-align:
        right;

}


.socials {

    display:
        flex;

    gap:
        20px;

}


.socials a {

    text-decoration:
        underline;

    text-underline-offset:
        4px;

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 850px) {

    .hero {

        min-height:
            700px;

        height:
            700px;

    }


    .photo-collage {

        width:
            90vw;

    }


    .work-card {

        flex-basis:
            300px;

    }


    .image-wrap img {

        height:
            375px;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    /* -----------------------------
       NAV
    ----------------------------- */

    .topbar {

        padding:
            18px;

    }


    .nav {

        gap:
            18px;

    }


    /* -----------------------------
       HERO
    ----------------------------- */

    .hero {

        min-height:
            0;

        height:
            auto;

        padding:
            80px 18px 20px;

        overflow:
            visible;

    }


    .main-title {

        display:
            none;

    }


    .identity {

        margin-top:
            0;

        font-size:
            1rem;

    }


    /* -----------------------------
       COLLAGE
    ----------------------------- */

    .photo-collage {

        width:
            100%;

        height:
            370px;

        margin:
            10px auto 0;

    }


    .photo {

        padding:
            5px 5px 10px;

    }


    /* Main photo */

    .photo-main {

        left:
            50%;

        top:
            0;

        width:
            135px;

        height:
            180px;

        transform:
            translateX(-50%)
            rotate(-3deg);

    }


    /* Photo 2 */

    .photo-2 {

        left:
            7%;

        top:
            55px;

        width:
            115px;

        height:
            160px;

        transform:
            rotate(7deg);

    }


    /* Photo 3 */

    .photo-3 {

        left:
            auto;

        right:
            7%;

        top:
            65px;

        width:
            105px;

        height:
            150px;

        transform:
            rotate(8deg);

    }


    /* Photo 4 */

    .photo-4 {

        left:
            2%;

        top:
            165px;

        width:
            105px;

        height:
            140px;

        transform:
            rotate(-10deg);

    }


    /* Photo 5 */

    .photo-5 {

        left:
            auto;

        right:
            2%;

        top:
            185px;

        width:
            100px;

        height:
            140px;

        transform:
            rotate(-8deg);

    }


    /* Photo 6 */

    .photo-6 {

        left:
            22%;

        top:
            205px;

        width:
            105px;

        height:
            135px;

        transform:
            rotate(-7deg);

    }


    /* Photo 7 */

    .photo-7 {

        left:
            50%;

        top:
            215px;

        width:
            95px;

        height:
            125px;

        transform:
            translateX(-50%)
            rotate(7deg);

    }


    /* Photo 8 */

    .photo-8 {

        left:
            auto;

        right:
            8%;

        top:
            270px;

        width:
            90px;

        height:
            115px;

        transform:
            rotate(-3deg);

    }


    /* -----------------------------
       SELECTED MOBILE PHOTOS
    ----------------------------- */

    .photo-main.selected {

        transform:
            translateX(-50%)
            rotate(-3deg)
            translateY(-15px)
            scale(1.08);

    }


    .photo-2.selected {

        transform:
            rotate(7deg)
            translateY(-15px)
            scale(1.08);

    }


    .photo-3.selected {

        transform:
            rotate(8deg)
            translateY(-15px)
            scale(1.08);

    }


    .photo-4.selected {

        transform:
            rotate(-10deg)
            translateY(-15px)
            scale(1.08);

    }


    .photo-5.selected {

        transform:
            rotate(-8deg)
            translateY(-15px)
            scale(1.08);

    }


    .photo-6.selected {

        transform:
            rotate(-7deg)
            translateY(-15px)
            scale(1.08);

    }


    .photo-7.selected {

        transform:
            translateX(-50%)
            rotate(7deg)
            translateY(-15px)
            scale(1.08);

    }


    .photo-8.selected {

        transform:
            rotate(-3deg)
            translateY(-15px)
            scale(1.08);

    }


    /* -----------------------------
       ARROW
    ----------------------------- */

    .photo-arrow {

        left:
            22%;

        top:
            25px;

    }


    .photo-arrow span {

        font-size:
            38px;

    }


    /* -----------------------------
       LOCATION
    ----------------------------- */

    .location {

        position:
            relative;

        left:
            auto;

        bottom:
            auto;

        margin:
            10px 0 0;

    }


    /* -----------------------------
       DECORATIONS
    ----------------------------- */

    .scribble {

        display:
            none;

    }


    /* -----------------------------
       PROJECTS
    ----------------------------- */

    .projects-section {

        padding:
            35px 0 35px;

    }


    .section-heading {

        padding:
            0 18px 30px;

    }


    .section-eyebrow {

        font-size:
            .65rem;

    }


    .section-heading h2 {

        font-size:
            3.8rem;

    }


    .work-grid {

        gap:
            18px;

        padding:
            0 18px 15px;

    }


    .work-card {

        flex:
            0 0 72vw;

    }


    .image-wrap img {

        height:
            90vw;

        max-height:
            400px;

    }


    .work-overlay {

        opacity:
            1;

    }


    /* -----------------------------
       FOOTER
    ----------------------------- */

    footer {

        min-height:
            0;

        padding:
            45px 18px 35px;

    }


    .footer-bottom {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .footer-bottom
    > p:last-child {

        text-align:
            left;

    }


    .socials {

        flex-wrap:
            wrap;

    }

}