/* =========================================================
   MONICAHAWT.COM
   Static Portfolio Site
   ========================================================= */


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

:root {
    --bg: #091018;
    --bg2: #0d1620;
    --panel: #111c27;
    --panel2: #0c151e;

    --text: #f7f8fb;
    --muted: #aab4c1;
    --line: #263442;

    --pink: #ff3f6c;
    --pink2: #e92357;
    --purple: #ad57ff;
    --green: #88f65d;

    --max: 1180px;
}


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "DM Sans", sans-serif;
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    height: 76px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 max(24px, calc((100% - var(--max)) / 2));

    background: #f8fafc;
    color: #20242a;

    position: sticky;
    top: 0;
    z-index: 50;

    box-shadow: 0 1px 20px #0002;
}


/* Logo
   --------------------------------------------------------- */

.brand {
    height: 68px;
    width: 380px;

    display: flex;
    align-items: center;

    flex-shrink: 0;
}

.brand img {
    display: block;

    width: 360px;
    height: auto;
    max-height: 64px;

    object-fit: contain;
}


/* Navigation
   --------------------------------------------------------- */

.nav {
    display: flex;
    gap: 30px;
    align-items: center;

    font-size: 14px;
}

.nav a:not(.nav-cta):hover {
    color: var(--pink);
}

.nav-cta,
.button.primary {
    background: linear-gradient(
        135deg,
        var(--pink),
        var(--pink2)
    );

    color: white;

    border-radius: 10px;
    padding: 12px 20px;

    font-weight: 700;
}

.nav-cta {
    border-radius: 999px;
}


/* Mobile Menu Button
   --------------------------------------------------------- */

.menu-toggle {
    display: none;

    border: 0;
    background: none;

    font-size: 25px;
}


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

.hero {
    min-height: 650px;

    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 60px;
    align-items: center;

    padding: 85px max(24px, calc((100% - var(--max)) / 2));

    background:
        radial-gradient(
            circle at 80% 30%,
            #3c1c29 0,
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #071019,
            #101923 60%,
            #15101a
        );
}

.hero::after {
    content: "";

    position: absolute;
    inset: auto 0 0;

    height: 1px;

    background: var(--line);
}

.hero-copy,
.hero-art {
    position: relative;
    z-index: 2;
}


/* Hero Typography
   --------------------------------------------------------- */

.eyebrow {
    margin: 0 0 10px;

    color: #ff6a8c;

    font-size: 13px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.hero h1 {
    margin: 0 0 26px;

    font-size: clamp(56px, 7vw, 92px);
    line-height: 0.94;
    letter-spacing: -0.055em;
}

.hero h1 span {
    color: var(--pink);

    font-family: "Patrick Hand", cursive;
    font-weight: 400;

    letter-spacing: 0;
}

.lede {
    max-width: 640px;

    color: #d2d8df;

    font-size: 18px;
}


/* Hero Buttons
   --------------------------------------------------------- */

.hero-actions {
    display: flex;
    gap: 14px;

    margin: 30px 0;
}

.button {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 13px 21px;

    border: 1px solid #465665;
    border-radius: 10px;

    font-weight: 700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.button.ghost:hover {
    border-color: var(--pink);
    color: #ff91aa;
}

.button.primary:hover {
    transform: translateY(-2px);

    box-shadow: 0 10px 30px #ff3f6c35;
}


/* Hero Mini Skills
   --------------------------------------------------------- */

.mini-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;

    margin-top: 45px;

    color: #9eabb8;

    font-size: 14px;
}


/* =========================================================
   HERO CODE WINDOW
   ========================================================= */

.hero-art {
    min-height: 420px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.code-window {
    width: min(500px, 100%);

    padding: 35px;

    background: #0a1118cc;

    border: 1px solid #314252;
    border-radius: 18px;

    box-shadow: 0 35px 80px #0008;

    transform: rotate(2deg);

    font-family: monospace;
    font-size: 18px;
}

.code-window p {
    margin: 13px 0;

    color: #c9d4df;
}

.code-window span {
    color: #8ef269;
}

.code-window b {
    color: #ff6487;
}

.indent {
    padding-left: 28px;
}


/* Window Dots
   --------------------------------------------------------- */

.window-dots {
    display: flex;
    gap: 8px;

    margin-bottom: 30px;
}

.window-dots i {
    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #526271;
}

.window-dots i:first-child {
    background: var(--pink);
}


/* Handwritten Notes
   --------------------------------------------------------- */

.scribble,
.contact-scribble {
    position: absolute;

    right: 0;
    bottom: 5px;

    color: #fff;

    font-family: "Patrick Hand", cursive;
    font-size: 25px;

    transform: rotate(-7deg);
}


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

.section {
    padding: 90px max(24px, calc((100% - var(--max)) / 2));
}

.section-heading {
    max-width: 780px;

    margin: 0 auto 45px;

    text-align: center;
}

.section-heading h2,
.about h2,
.contact h2 {
    margin: 6px 0 12px;

    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.08;
}

.section-heading > p:last-child {
    margin-top: 0;

    color: var(--muted);
}


/* =========================================================
   SERVICES
   ========================================================= */

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.service-card {
    padding: 34px;

    background: linear-gradient(
        145deg,
        #101b25,
        #0a121a
    );

    border: 1px solid var(--line);
    border-radius: 15px;

    text-align: center;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease;
}

.service-card:hover {
    transform: translateY(-7px);

    border-color: #475d70;
}

.service-icon {
    height: 50px;

    color: var(--pink);

    font-size: 33px;
}

.service-card:nth-child(2) .service-icon {
    color: var(--purple);
}

.service-card:nth-child(3) .service-icon {
    color: var(--green);
}

.service-card h3 {
    margin: 10px;

    font-size: 21px;
}

.service-card p,
.project-body p,
.about-card p {
    color: var(--muted);
}


/* Tags
   --------------------------------------------------------- */

.tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;

    margin-top: 20px;
}

.tags span {
    padding: 5px 10px;

    background: #1b2835;

    border-radius: 999px;

    color: #cbd4dd;

    font-size: 11px;
}


/* =========================================================
   FEATURED WORK
   ========================================================= */

.work-section {
    background: #070d13;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.project-card {
    overflow: hidden;

    background: #101923;

    border: 1px solid var(--line);
    border-radius: 14px;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease;
}

.project-card:hover {
    transform: translateY(-6px);

    border-color: #465c70;
}


/* Project Images / Visuals
   --------------------------------------------------------- */

.project-visual {
    height: 190px;

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

    text-align: center;

    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.visual-tlg {
    background:
        radial-gradient(
            circle,
            #775a24,
            #172519 65%,
            #0b100d
        );

    color: #e6c66f;
}

.visual-map {
    background:
        linear-gradient(
            145deg,
            #c0a86b,
            #526a4c
        );

    color: #342b1d;
}

.visual-gamewick {
    background:
        linear-gradient(
            135deg,
            #652285,
            #281139
        );

    color: #f0bd49;
}

.visual-elf {
    background:
        linear-gradient(
            145deg,
            #324b35,
            #bd3e4e
        );

    color: #fff3d7;
}

.visual-santa {
    background:
        linear-gradient(
            135deg,
            #eee1bf,
            #b73131
        );

    color: #4b2019;
}

.visual-more {
    background:
        radial-gradient(
            circle,
            #243a4e,
            #111a23
        );

    color: #ff5f84;
}


/* Project Content
   --------------------------------------------------------- */

.project-body {
    padding: 20px;
}

.project-body h3 {
    margin: 0 0 6px;
}

.project-body .tags {
    justify-content: flex-start;
}


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

.about {
    background:
        linear-gradient(
            180deg,
            #0b131b,
            #101925
        );
}

.about-card {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 70px;

    padding: 55px;

    background: #0a1119;

    border: 1px solid var(--line);
    border-radius: 22px;
}


/* Stats
   --------------------------------------------------------- */

.stats {
    display: flex;
    gap: 30px;

    margin-top: 28px;
    padding-top: 25px;

    border-top: 1px solid var(--line);
}

.stats span {
    color: var(--muted);

    font-size: 12px;
}

.stats strong {
    display: block;

    color: #fff;

    font-size: 24px;
}


/* =========================================================
   CLIENT / BRAND LOGO MARQUEE
   ========================================================= */

.logo-section {
    overflow: hidden;

    padding: 80px 0;

    background: #0b131d;
}

.logo-section .section-heading {
    padding: 0 24px;
}

.logo-marquee {
    overflow: hidden;

    margin-top: 40px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            #000 8%,
            #000 92%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent,
            #000 8%,
            #000 92%,
            transparent
        );
}

.logo-track {
    display: flex;

    width: max-content;

    animation: marquee 32s linear infinite;
}

.logo-marquee:hover .logo-track {
    animation-play-state: paused;
}

.client-logo {
    width: 210px;
    height: 100px;

    margin: 0 10px;
    padding: 20px;

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

    background: #101923;

    border: 1px solid #263542;
    border-radius: 12px;

    color: #d3c47d;

    font-weight: 800;
    text-align: center;
}

.client-logo.script {
    color: #d56b68;

    font-family: "Patrick Hand", cursive;
    font-size: 24px;
}

.client-logo.purple {
    color: #bd75ff;
}

.client-logo.pink {
    color: #ff507a;
}

.client-logo.serif {
    color: #d7d7d7;

    font-family: Georgia, serif;
}

@keyframes marquee {
    to {
        transform: translateX(-50%);
    }
}

.logo-note {
    margin-top: 20px;

    color: #6f7d89;

    font-size: 12px;
    text-align: center;
}


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

.contact {
    min-height: 350px;

    position: relative;
    overflow: hidden;

    padding: 80px max(24px, calc((100% - var(--max)) / 2));

    background:
        linear-gradient(
            90deg,
            #0b131d 20%,
            #191427bb
        ),
        radial-gradient(
            circle at 80% 60%,
            #9e2b4c,
            #17172a 48%,
            #0a121a 70%
        );
}



.contact-inner {
    position: relative;
    z-index: 2;

    max-width: 650px;
}

.contact-inner > p:not(.eyebrow) {
    color: #c2cad3;
}

.contact-scribble {
    z-index: 3;

    right: 12%;
    bottom: 85px;
}


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

footer {
    min-height: 90px;

    display: flex;
    align-items: center;
    gap: 35px;

    padding: 12px max(24px, calc((100% - var(--max)) / 2));

    border-top: 1px solid var(--line);

    color: #71808e;

    font-size: 12px;
}

footer img {
    width: 170px;


}

footer p:last-child {
    margin-left: auto;
}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.reveal {
    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.reveal.visible {
    opacity: 1;

    transform: none;
}


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

@media (max-width: 850px) {

    /* Header
       ----------------------------------------------------- */

    .site-header {
        height: 68px;

        padding: 0 18px;
    }

    .brand {
        width: 245px;
        height: 60px;
    }

    .brand img {
        width: 235px;
        height: auto;
        max-height: 58px;
    }

    .menu-toggle {
        display: block;
    }

    .nav {
        display: none;

        position: absolute;
        top: 68px;
        left: 0;
        right: 0;

        padding: 25px;

        background: #f8fafc;

        border-top: 1px solid #ddd;

        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .nav.open {
        display: flex;
    }

    .nav-cta {
        text-align: center;
    }


    /* Hero
       ----------------------------------------------------- */

    .hero {
        grid-template-columns: 1fr;

        min-height: auto;

        padding-top: 65px;
    }

    .hero h1 {
        font-size: 58px;
    }

    .hero-art {
        min-height: 330px;
    }

    .scribble {
        right: 10px;
    }

    .mini-skills {
        gap: 14px;
    }


    /* Services / Projects
       ----------------------------------------------------- */

    .service-grid,
    .project-grid {
        grid-template-columns: 1fr;
    }


    /* About
       ----------------------------------------------------- */

    .about-card {
        grid-template-columns: 1fr;

        gap: 20px;

        padding: 32px;
    }

    .stats {
        flex-wrap: wrap;
    }


    /* Contact
       ----------------------------------------------------- */

    .contact-scribble {
        display: none;
    }


    /* Footer
       ----------------------------------------------------- */

    footer {
        flex-direction: column;

        gap: 5px;

        padding: 25px;

        text-align: center;
    }

    footer p {
        margin: 0 !important;
    }
}


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

@media (max-width: 520px) {

    .brand {
        width: 205px;
    }

    .brand img {
        width: 200px;
        max-height: 54px;
    }

    .hero {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero h1 {
        font-size: clamp(48px, 15vw, 58px);
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .button {
        justify-content: center;
    }

    .code-window {
        padding: 25px 20px;

        font-size: 15px;
    }

    .section {
        padding-left: 20px;
        padding-right: 20px;
    }
}


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

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

    html {
        scroll-behavior: auto;
    }

    .logo-track {
        animation: none;
    }

    .reveal {
        opacity: 1;

        transform: none;

        transition: none;
    }
}