/* =========================================================
   DEVANSHI PORTFOLIO
========================================================= */

:root {

    --warm-white: #f7f3eb;
    --beige: #e9e0d2;
    --olive: #3c4733;
    --burgundy: #762d38;
    --gold: #b8955e;
    --charcoal: #2c2c2a;

    --serif:
        Georgia,
        "Times New Roman",
        serif;

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

    --display:
        Georgia,
        "Times New Roman",
        serif;

}


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


html {
    scroll-behavior: smooth;
}


body {

    background: var(--warm-white);

    color: var(--charcoal);

    font-family: var(--sans);

    overflow-x: hidden;

}


/* =========================================================
   CURSOR
========================================================= */

#cursor {

    position: fixed;

    width: 18px;
    height: 18px;

    border: 1px solid var(--charcoal);

    border-radius: 50%;

    pointer-events: none;

    z-index: 9999;

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

    transition:
        width .25s ease,
        height .25s ease,
        background .25s ease;

}


#cursor.active {

    width: 70px;
    height: 70px;

    background: var(--burgundy);

    border-color: var(--burgundy);

}


#cursorText {

    position: absolute;

    left: 50%;
    top: 50%;

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

    color: var(--warm-white);

    font-size: 9px;

    letter-spacing: .12em;

}


/* =========================================================
   GENERAL
========================================================= */

.screen {

    position: relative;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

}


.eyebrow {

    font-size: 10px;

    letter-spacing: .22em;

    text-transform: uppercase;

    color: var(--burgundy);

}


.small-label {

    font-size: 10px;

    letter-spacing: .2em;

    text-transform: uppercase;

}


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

#intro {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    background:
        var(--warm-white);

    z-index: 10;

    transition:
        opacity .8s ease,
        visibility .8s ease;

}


#intro.hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


.intro-background {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 20% 30%,
            rgba(118,45,56,.08),
            transparent 30%
        ),

        radial-gradient(
            circle at 80% 70%,
            rgba(60,71,51,.1),
            transparent 30%
        );

}


.intro-content {

    position: relative;

    z-index: 2;

}


.intro-content h1 {

    margin-top: 18px;

    font-family: var(--display);

    font-size:
        clamp(70px, 13vw, 190px);

    font-weight: 400;

    letter-spacing: -.06em;

}


.intro-subtitle {

    margin-top: 20px;

    font-family: var(--serif);

    font-size: 18px;

}


.primary-button {

    margin-top: 45px;

    padding: 15px 30px;

    border: 1px solid var(--charcoal);

    background: transparent;

    color: var(--charcoal);

    cursor: pointer;

    font-size: 10px;

    letter-spacing: .2em;

    transition:
        background .3s ease,
        color .3s ease;

}


.primary-button:hover {

    background: var(--charcoal);

    color: var(--warm-white);

}


.intro-footer {

    position: absolute;

    bottom: 30px;

    left: 50%;

    transform:
        translateX(-50%);

    font-size: 9px;

    letter-spacing: .15em;

    text-transform: uppercase;

    opacity: .5;

}


/* =========================================================
   WORLD
========================================================= */

#worldPage {

    position: fixed;

    inset: 0;

    background: var(--beige);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .8s ease,
        visibility .8s ease;

}


#worldPage.active {

    opacity: 1;

    visibility: visible;

}


.world-background {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(60,71,51,.12),
            transparent 30%
        ),

        radial-gradient(
            circle at 80% 60%,
            rgba(118,45,56,.09),
            transparent 30%
        );

}


/* =========================================================
   SCENES
========================================================= */

.scene {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    transition:
        opacity .8s ease,
        transform .9s cubic-bezier(.22,.8,.25,1);

}


.scene-exploration {

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            120deg,
            var(--warm-white),
            var(--beige)
        );

    z-index: 2;

}


.scene-exploration.hidden {

    opacity: 0;

    transform:
        translateX(-100%);

    pointer-events: none;

}


.scene-label {

    position: absolute;

    top: 35px;
    left: 40px;

    font-size: 10px;

    letter-spacing: .2em;

}


.scene-label span {

    color: var(--burgundy);

    margin-right: 15px;

}


.exploration-copy {

    width: min(600px, 80vw);

    transform:
        translateY(-20px);

}


.exploration-copy h2 {

    margin-top: 20px;

    font-family: var(--display);

    font-size:
        clamp(55px, 8vw, 120px);

    font-weight: 400;

    line-height: .9;

    letter-spacing: -.06em;

}


.exploration-copy p:last-child {

    max-width: 370px;

    margin-top: 30px;

    line-height: 1.7;

    font-size: 14px;

}


.rough-lines {

    position: absolute;

    width: 350px;
    height: 350px;

    border: 1px solid rgba(44,44,42,.15);

    border-radius: 50%;

    left: 8vw;

    top: 25vh;

    transform:
        rotate(18deg);

}


.rough-lines::before,
.rough-lines::after {

    content: "";

    position: absolute;

    inset: 25px;

    border: 1px solid rgba(44,44,42,.1);

    border-radius: 50%;

}


.scene-next {

    position: absolute;

    bottom: 35px;
    right: 40px;

    border: 0;

    background: transparent;

    font-size: 10px;

    letter-spacing: .15em;

    cursor: pointer;

    color: var(--charcoal);

}


.scene-next:hover {

    color: var(--burgundy);

}


/* =========================================================
   RABBIT
========================================================= */

.rabbit {

    width: 60px;
    height: 80px;

    position: absolute;

    background: var(--warm-white);

    border:
        1px solid var(--charcoal);

    border-radius:
        45% 45% 40% 40%;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 5;

}


.rabbit::before,
.rabbit::after {

    content: "";

    position: absolute;

    top: -38px;

    width: 17px;
    height: 48px;

    border:
        1px solid var(--charcoal);

    border-radius: 50%;

    background: var(--warm-white);

}


.rabbit::before {

    left: 8px;

    transform:
        rotate(-12deg);

}


.rabbit::after {

    right: 8px;

    transform:
        rotate(12deg);

}


.rabbit span {

    font-size: 18px;

    transform:
        translateY(8px);

}


.scene-exploration .rabbit {

    right: 18vw;

    bottom: 20vh;

}


/* =========================================================
   MAIN WORLD
========================================================= */

.scene-world {

    background:

        radial-gradient(
            circle at 30% 35%,
            rgba(60,71,51,.16),
            transparent 25%
        ),

        radial-gradient(
            circle at 70% 65%,
            rgba(118,45,56,.1),
            transparent 25%
        );

    transform:
        translateX(100%);

}


.scene-world.active {

    transform:
        translateX(0);

}


.world-header {

    position: absolute;

    top: 35px;
    left: 40px;
    right: 40px;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

}


.world-header h2 {

    margin-top: 8px;

    font-family: var(--display);

    font-size: 50px;

    font-weight: 400;

}


.world-hint {

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: .18em;

    opacity: .5;

}


.world-rabbit {

    left: 17%;
    top: 57%;

    transition:
        left .9s cubic-bezier(.22,.8,.25,1),
        top .9s cubic-bezier(.22,.8,.25,1);

}


/* =========================================================
   WORLD OBJECTS
========================================================= */

.world-object {

    position: absolute;

    border: 0;

    background: transparent;

    color: var(--charcoal);

    cursor: pointer;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 14px;

    transition:
        transform .35s ease;

}


.world-object:hover {

    transform:
        translateY(-12px)
        rotate(-2deg);

}


.object-icon {

    width: 115px;
    height: 115px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid var(--charcoal);

    background:
        rgba(247,243,235,.7);

    font-family: var(--serif);

    font-size: 38px;

    box-shadow:
        8px 8px 0 rgba(44,44,42,.08);

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;

}


.world-object:hover .object-icon {

    background: var(--burgundy);

    color: var(--warm-white);

    transform:
        rotate(4deg);

}


.object-name {

    font-size: 9px;

    letter-spacing: .18em;

}


.object-sketchbook {

    left: 30%;
    top: 24%;

}


.object-karnama {

    left: 52%;
    top: 21%;

}


.object-bloom {

    left: 72%;
    top: 32%;

}


.object-illustration {

    left: 22%;
    top: 65%;

}


.object-characters {

    left: 48%;
    top: 62%;

}


.object-branding {

    left: 75%;
    top: 68%;

}


.object-about {

    left: 86%;
    top: 17%;

}


.world-bottom {

    position: absolute;

    left: 40px;
    right: 40px;

    bottom: 25px;

    display: flex;

    justify-content: space-between;

    font-size: 8px;

    letter-spacing: .15em;

    opacity: .5;

}


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

.project-overlay {

    position: fixed;

    inset: 0;

    background: var(--warm-white);

    z-index: 100;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(40px);

    transition:
        opacity .55s ease,
        transform .55s ease,
        visibility .55s ease;

    overflow-y: auto;

}


.project-overlay.open {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

}


.close-project {

    position: fixed;

    right: 35px;
    top: 30px;

    z-index: 110;

    border: 0;

    background: transparent;

    cursor: pointer;

    font-size: 10px;

    letter-spacing: .15em;

}


.project-inner {

    width:
        min(1200px, 90vw);

    margin:
        0 auto;

    padding:
        110px 0 100px;

}


.project-eyebrow {

    font-size: 10px;

    letter-spacing: .2em;

    color: var(--burgundy);

}


.project-title {

    margin-top: 15px;

    font-family: var(--display);

    font-weight: 400;

    font-size:
        clamp(65px, 10vw, 150px);

    line-height: .85;

    letter-spacing: -.06em;

}


.project-description {

    max-width: 600px;

    margin-top: 35px;

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   PROJECT GRID
========================================================= */

.project-grid {

    margin-top: 80px;

    display: grid;

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

    gap: 20px;

}


.project-card {

    position: relative;

    min-height: 430px;

    background: var(--beige);

    overflow: hidden;

}


.project-card.large {

    grid-column:
        1 / -1;

    min-height: 650px;

}


.project-card img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

}


.project-placeholder {

    height: 430px;

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;

    background: var(--beige);

    font-family: var(--serif);

    font-size: 22px;

}


.project-card.large
.project-placeholder {

    height: 650px;

}


/* =========================================================
   ABOUT
========================================================= */

.about-grid {

    margin-top: 80px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

}


.about-grid h3 {

    font-family: var(--display);

    font-size: 40px;

    font-weight: 400;

}


.about-grid p {

    margin-top: 20px;

    line-height: 1.8;

}


.skills {

    display: grid;

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

    gap: 10px;

    margin-top: 20px;

}


.skills span {

    padding: 12px;

    border-bottom:
        1px solid rgba(44,44,42,.2);

    font-size: 11px;

}


/* =========================================================
   CONTACT
========================================================= */

.contact-screen {

    min-height: 100vh;

    padding:
        15vh 10vw;

    background: var(--olive);

    color: var(--warm-white);

}


.contact-screen h2 {

    margin-top: 30px;

    font-family: var(--display);

    font-weight: 400;

    font-size:
        clamp(70px, 12vw, 180px);

    line-height: .85;

    letter-spacing: -.06em;

}


.contact-screen a {

    display: inline-block;

    margin-top: 70px;

    color: var(--warm-white);

    font-size: 16px;

}


.contact-screen > p:last-child {

    margin-top: 15px;

    opacity: .6;

}


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

@media (max-width: 700px) {

    #cursor {
        display: none;
    }


    .world-header {

        left: 20px;
        right: 20px;

    }


    .world-header h2 {

        font-size: 38px;

    }


    .world-hint {

        display: none;

    }


    .object-icon {

        width: 80px;
        height: 80px;

        font-size: 26px;

    }


    .object-name {

        font-size: 7px;

    }


    .object-sketchbook {
        left: 15%;
        top: 23%;
    }


    .object-karnama {
        left: 55%;
        top: 23%;
    }


    .object-bloom {
        left: 30%;
        top: 43%;
    }


    .object-illustration {
        left: 10%;
        top: 65%;
    }


    .object-characters {
        left: 55%;
        top: 62%;
    }


    .object-branding {
        left: 34%;
        top: 78%;
    }


    .object-about {
        left: 78%;
        top: 12%;
    }


    .project-grid {

        grid-template-columns: 1fr;

    }


    .project-card.large {

        grid-column: auto;

        min-height: 430px;

    }


    .project-card.large
    .project-placeholder {

        height: 430px;

    }


    .about-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }

}