/* =========================================================
   DOAH
   DIARY OF A HUMAN
   LANDING PAGE
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

:root {

    --color-deep: #171411;

    --color-base: #E8D8BE;

    --color-light: #F7F2E9;

    --color-gold: #C9A45C;

    --color-gold-highlight: #E4C77E;

    --color-rose: #B9787C;

    --color-apricot: #E6A071;

    --color-sage: #87967A;

    --color-burgundy: #742A34;

    --color-cocoa: #33271F;

    --color-taupe: #9B8D7D;


    --font-display:
        "Cormorant Garamond",
        Georgia,
        serif;

    --font-body:
        "DM Sans",
        Arial,
        sans-serif;

    --font-accent:
        "Bodoni Moda",
        "Times New Roman",
        serif;


    --ease-doah:
        cubic-bezier(0.22, 1, 0.36, 1);
}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;
}


html {

    width: 100%;

    min-height: 100%;

    background:
        var(--color-deep);

    scroll-behavior: smooth;
}


body {

    width: 100%;

    min-width: 320px;

    min-height: 100vh;

    margin: 0;

    background:
        var(--color-deep);

    color:
        var(--color-light);

    font-family:
        var(--font-body);

    overflow-x: hidden;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;
}


a {

    color: inherit;

    text-decoration: none;
}


button {

    font: inherit;
}


/* =========================================================
   LANDING PAGE
   ========================================================= */

.landing-page {

    position: relative;

    width: 100%;

    min-height: 100vh;

    background:
        var(--color-deep);
}


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

.hero {

    position: relative;

    width: 100vw;

    height: 100vh;

    min-height: 600px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    isolation: isolate;

    background:
        var(--color-deep);
}


/* =========================================================
   VIDEO
   ========================================================= */

.hero-video {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center center;

    z-index: -10;

    display: block;

    opacity: 1;

    transform:
        scale(1.025);

    background:
        var(--color-deep);

    transition:
        opacity 2.4s var(--ease-doah),
        transform 5s var(--ease-doah);
}


body.loaded .hero-video {

    opacity: 1;

    transform:
        scale(1);
}


/* =========================================================
   VIDEO OVERLAY
   ========================================================= */

.video-overlay {

    position: absolute;

    inset: 0;

    z-index: -9;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            rgba(23, 20, 17, 0.24) 0%,
            rgba(23, 20, 17, 0.02) 48%,
            rgba(23, 20, 17, 0.25) 100%
        ),

        linear-gradient(
            180deg,
            rgba(23, 20, 17, 0.15) 0%,
            rgba(23, 20, 17, 0.00) 42%,
            rgba(23, 20, 17, 0.38) 100%
        );
}


/* =========================================================
   ATMOSPHERE
   ========================================================= */

.hero-atmosphere {

    position: absolute;

    inset: 0;

    z-index: -8;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 70% 40%,
            rgba(201, 164, 92, 0.055),
            transparent 34%
        ),

        radial-gradient(
            circle at 20% 75%,
            rgba(116, 42, 52, 0.045),
            transparent 30%
        );
}


.hero-atmosphere::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.025;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.5'/%3E%3C/svg%3E");

    mix-blend-mode:
        soft-light;
}


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

.hero-header {

    position: absolute;

    top: 58px;

    left: 58px;

    z-index: 80;

    opacity: 1;

    transform:
        translateY(0);

    animation:
        doahFadeUp
        1.3s
        var(--ease-doah)
        0.1s
        both;
}


.logo-link {

    display: inline-block;

    cursor: pointer;
}


.logo {

    display: block;

    width: 128px;

    height: auto;

    animation:
        doahLogoFloat
        7s
        ease-in-out
        1.5s
        infinite;
}


@keyframes doahLogoFloat {

    0%,
    100% {

        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    50% {

        transform:
            translate3d(
                0,
                -5px,
                0
            );
    }
}


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

.world-menu {

    position: absolute;

    top: 31%;

    right: 0;

    width: 42vw;

    max-width: 700px;

    min-width: 340px;

    height: 220px;

    z-index: 35;

    overflow: visible;

    opacity: 1;

    transform:
        translateY(0);

    animation:
        doahFadeUp
        1.25s
        var(--ease-doah)
        0.45s
        both;
}


/* =========================================================
   NAV CARDS
   ========================================================= */

.world-card {

    position: absolute;

    right: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 340px;

    height: 58px;

    padding:
        0 25px;

    background:
        rgba(32, 28, 23, 0.38);

    border:
        1px solid
        rgba(247, 242, 233, 0.09);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    color:
        rgba(247, 242, 233, 0.70);

    font-family:
        var(--font-body);

    font-size:
        12px;

    font-weight:
        500;

    letter-spacing:
        0.08em;

    text-align:
        center;

    text-transform:
        uppercase;

    transition:

        width
        0.75s
        var(--ease-doah),

        background
        0.45s
        ease,

        border-color
        0.45s
        ease,

        color
        0.45s
        ease;
}


.world-card:nth-child(1) {

    top: 0;
}


.world-card:nth-child(2) {

    top: 78px;
}


.world-card:nth-child(3) {

    top: 156px;
}


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

.world-card:hover {

    width: 408px;

    right: 0;

    background:
        rgba(201, 164, 92, 0.18);

    border-color:
        rgba(201, 164, 92, 0.38);

    color:
        var(--color-gold-highlight);
}


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

.hero-text {

    position: absolute;

    left: 58px;

    bottom: 16vh;

    z-index: 20;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 2px;

    opacity: 1;

    transform:
        translateY(0);

    animation:
        doahFadeUp
        1.35s
        var(--ease-doah)
        0.28s
        both;
}


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

.hero-line {

    display: grid;

    grid-template-columns:
        150px
        auto;

    align-items: baseline;

    column-gap: 34px;

    white-space: nowrap;

    animation:
        doahHeroFloat
        8s
        ease-in-out
        infinite;
}


.hero-line:nth-child(1) {

    animation-delay:
        0s;
}


.hero-line:nth-child(2) {

    animation-delay:
        -2s;
}


.hero-line:nth-child(3) {

    animation-delay:
        -4s;
}


@keyframes doahHeroFloat {

    0%,
    100% {

        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    50% {

        transform:
            translate3d(
                0,
                -3px,
                0
            );
    }
}


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

.hero-prefix {

    display: block;

    width: 150px;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            40px,
            3.7vw,
            57px
        );

    font-weight:
        500;

    line-height:
        0.98;

    letter-spacing:
        -0.025em;

    color:
        var(--color-light);

    opacity:
        0.96;
}


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

.hero-word {

    display: block;

    font-family:
        var(--font-accent);

    font-size:
        clamp(
            51px,
            5vw,
            76px
        );

    font-weight:
        400;

    line-height:
        0.90;

    letter-spacing:
        -0.04em;

    color:
        rgba(
            23,
            20,
            17,
            0.92
        );
}


/* =========================================================
   SCROLL INDICATOR
   ========================================================= */

.scroll-indicator {

    position: absolute;

    right: 32px;

    bottom: 34px;

    z-index: 30;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    opacity: 1;

    transform:
        translateY(0);

    animation:
        doahFadeUp
        1.2s
        var(--ease-doah)
        0.9s
        both;

    font-family:
        var(--font-body);

    font-size:
        8px;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

    color:
        var(--color-taupe);
}


.scroll-arrow {

    color:
        var(--color-gold);

    font-size:
        15px;
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.mobile-menu-trigger {

    display: none;

    position: fixed;

    top: 27px;

    right: 25px;

    width: 48px;

    height: 48px;

    padding: 0;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    z-index: 100;

    border:
        1px solid
        rgba(247, 242, 233, 0.18);

    background:
        rgba(23, 20, 17, 0.32);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    cursor: pointer;

    opacity: 1;

    transform:
        translateY(0);

    animation:
        doahFadeUp
        1.2s
        var(--ease-doah)
        0.55s
        both;

    transition:

        background
        0.4s
        ease,

        border-color
        0.4s
        ease;
}


.mobile-menu-trigger:hover {

    background:
        rgba(
            201,
            164,
            92,
            0.12
        );

    border-color:
        rgba(
            201,
            164,
            92,
            0.38
        );
}


.menu-line {

    display: block;

    width: 20px;

    height: 1px;

    background:
        var(--color-base);

    transform-origin:
        center;

    transition:

        transform
        0.55s
        var(--ease-doah),

        opacity
        0.3s
        ease,

        width
        0.4s
        ease;
}


/* =========================================================
   HAMBURGER → X
   ========================================================= */

.mobile-menu-trigger.is-open
.menu-line-top {

    transform:
        translateY(6px)
        rotate(45deg);
}


.mobile-menu-trigger.is-open
.menu-line-middle {

    opacity: 0;

    width: 0;
}


.mobile-menu-trigger.is-open
.menu-line-bottom {

    transform:
        translateY(-6px)
        rotate(-45deg);
}


/* =========================================================
   MOBILE FULLSCREEN MENU
   ========================================================= */

.mobile-menu {

    position: fixed;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    z-index: 90;

    padding: 0;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    background:
        rgba(
            23,
            20,
            17,
            0.96
        );

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);

    transition:

        opacity
        0.65s
        var(--ease-doah),

        visibility
        0.65s
        var(--ease-doah);
}


.mobile-menu.is-open {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


/* =========================================================
   MOBILE MENU ATMOSPHERE
   ========================================================= */

.mobile-menu-atmosphere {

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 25% 60%,
            rgba(201, 164, 92, 0.11),
            transparent 35%
        ),

        radial-gradient(
            circle at 80% 20%,
            rgba(116, 42, 52, 0.09),
            transparent 35%
        );
}


.mobile-menu-atmosphere::after {

    content: "";

    position: absolute;

    inset: 0;

    opacity:
        0.035;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

    mix-blend-mode:
        soft-light;
}


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

.mobile-menu-navigation {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 470px;

    margin-left: 10vw;

    margin-top: 12vh;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 28px;
}


.mobile-menu-link {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 5px;

    opacity: 0;

    transform:
        translateY(25px);

    transition:

        color
        0.4s
        ease,

        transform
        0.65s
        var(--ease-doah);
}


.mobile-menu.is-open
.mobile-menu-link {

    opacity: 1;

    transform:
        translateY(0);
}


.mobile-menu.is-open
.mobile-menu-link:nth-child(1) {

    transition-delay:
        0.10s;
}


.mobile-menu.is-open
.mobile-menu-link:nth-child(2) {

    transition-delay:
        0.18s;
}


.mobile-menu.is-open
.mobile-menu-link:nth-child(3) {

    transition-delay:
        0.26s;
}


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

.mobile-menu-number {

    font-family:
        var(--font-body);

    font-size:
        9px;

    letter-spacing:
        0.18em;

    color:
        rgba(
            201,
            164,
            92,
            0.70
        );
}


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

.mobile-menu-title {

    font-family:
        var(--font-accent);

    font-size:
        clamp(
            30px,
            7vw,
            52px
        );

    font-weight:
        400;

    line-height:
        0.95;

    letter-spacing:
        -0.025em;

    color:
        var(--color-light);

    transition:

        color
        0.4s
        ease,

        transform
        0.5s
        var(--ease-doah);
}


.mobile-menu-link:hover
.mobile-menu-title {

    color:
        var(--color-gold-highlight);

    transform:
        translateX(8px);
}


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

.mobile-menu-footer {

    position: absolute;

    left: 10vw;

    bottom: 34px;

    z-index: 2;

    font-family:
        var(--font-body);

    font-size:
        8px;

    letter-spacing:
        0.18em;

    color:
        rgba(
            232,
            216,
            190,
            0.35
        );
}


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

@keyframes doahFadeUp {

    from {

        opacity: 0;

        transform:
            translateY(18px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1440px) {

    .hero-header {

        top: 65px;

        left: 65px;
    }


    .logo {

        width: 140px;
    }


    .world-menu {

        width: 42vw;

        max-width: 760px;

        min-width: 380px;
    }


    .world-card {

        width: 380px;

        height: 62px;
    }


    .world-card:hover {

        width: 456px;
    }


    .world-card:nth-child(1) {

        top: 0;
    }


    .world-card:nth-child(2) {

        top: 84px;
    }


    .world-card:nth-child(3) {

        top: 168px;
    }


    .hero-text {

        left: 65px;

        bottom: 17vh;
    }


    .hero-line {

        grid-template-columns:
            160px
            auto;

        column-gap:
            38px;
    }


    .hero-prefix {

        width: 160px;

        font-size:
            60px;
    }


    .hero-word {

        font-size:
            80px;
    }
}


/* =========================================================
   TABLET / SMALL DESKTOP
   ========================================================= */

@media (
    min-width: 901px
) and (
    max-width: 1100px
) {

    .hero-header {

        top: 42px;

        left: 42px;
    }


    .logo {

        width: 108px;
    }


    .world-menu {

        width: 38vw;

        min-width: 270px;

        top: 30%;

        height: 190px;
    }


    .world-card {

        width: 270px;

        height: 52px;
    }


    .world-card:hover {

        width: 324px;
    }


    .world-card:nth-child(1) {

        top: 0;
    }


    .world-card:nth-child(2) {

        top: 67px;
    }


    .world-card:nth-child(3) {

        top: 134px;
    }


    .hero-text {

        left: 42px;

        bottom: 14vh;
    }


    .hero-line {

        grid-template-columns:
            120px
            auto;

        column-gap:
            27px;
    }


    .hero-prefix {

        width: 120px;

        font-size:
            42px;
    }


    .hero-word {

        font-size:
            56px;
    }
}


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

@media (max-width: 900px) {

    .hero {

        height: 100svh;

        min-height: 580px;
    }


    /* Hide desktop navigation */

    .world-menu {

        display: none;
    }


    /* Show hamburger */

    .mobile-menu-trigger {

        display: flex;
    }


    /* Hide desktop scroll indicator */

    .scroll-indicator {

        display: none;
    }
}


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

@media (max-width: 767px) {

    .hero-header {

        top: 20px;

        left: 18px;
    }


    .logo {

        width: 88px;
    }


    .mobile-menu-trigger {

        top: 18px;

        right: 18px;

        width: 46px;

        height: 46px;
    }


    .hero-text {

        left: 18px;

        bottom: 145px;
    }


    .hero-line {

        grid-template-columns:
            82px
            auto;

        column-gap:
            16px;
    }


    .hero-prefix {

        width: 82px;

        font-size:
            clamp(
                27px,
                8vw,
                38px
            );
    }


    .hero-word {

        font-size:
            clamp(
                34px,
                10vw,
                48px
            );
    }


    .mobile-menu-navigation {

        margin-left: 9vw;

        margin-top: 15vh;

        gap: 30px;
    }


    .mobile-menu-title {

        font-size:
            clamp(
                29px,
                8.5vw,
                44px
            );
    }


    .mobile-menu-footer {

        left: 9vw;

        bottom: 25px;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

    .hero {

        min-height: 540px;
    }


    .hero-header {

        top: 17px;

        left: 15px;
    }


    .logo {

        width: 78px;
    }


    .mobile-menu-trigger {

        top: 15px;

        right: 15px;

        width: 43px;

        height: 43px;
    }


    .hero-text {

        left: 15px;

        bottom: 132px;
    }


    .hero-line {

        grid-template-columns:
            70px
            auto;

        column-gap:
            13px;
    }


    .hero-prefix {

        width: 70px;

        font-size:
            25px;
    }


    .hero-word {

        font-size:
            32px;
    }


    .mobile-menu-navigation {

        margin-left: 8vw;

        margin-top: 14vh;

        gap: 26px;
    }


    .mobile-menu-title {

        font-size:
            28px;
    }
}


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

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

    html {

        scroll-behavior:
            auto;
    }


    .hero-video {

        transition:
            none;

        transform:
            none;
    }


    .hero-header,
    .world-menu,
    .hero-text,
    .scroll-indicator,
    .mobile-menu-trigger {

        animation:
            none !important;

        opacity:
            1;

        transform:
            none;
    }


    .logo,
    .hero-line {

        animation:
            none !important;
    }


    .mobile-menu,
    .mobile-menu-link,
    .menu-line {

        transition:
            none !important;
    }
}

/* =========================================
   DOAH GLOBAL LOGO — SPACE FLOAT
   ========================================= */

.doah-logo {
    animation: doahLogoFloat 6s ease-in-out infinite;
    transform-origin: center center;
    will-change: transform;
}

@keyframes doahLogoFloat {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    25% {
        transform: translate3d(2px, -4px, 0) rotate(0.15deg);
    }

    50% {
        transform: translate3d(-1px, -8px, 0) rotate(-0.15deg);
    }

    75% {
        transform: translate3d(-2px, -4px, 0) rotate(0.1deg);
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}