@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@500;600&display=swap');


:root {

    --background: #171310;
    --surface: #211b17;
    --surface-light: #29211c;

    --text: #f4ede4;
    --muted: #b9aaa0;

    --orange: #df7659;
    --orange-light: #ef9a72;

    --border: rgba(244, 237, 228, 0.12);

    --sans: "DM Sans", sans-serif;
    --serif: "Playfair Display", Georgia, serif;
}


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


html {
    scroll-behavior: smooth;
}


body {

    background: var(--background);
    color: var(--text);

    font-family: var(--sans);

    overflow-x: hidden;
}


body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 70% 10%,
        rgba(223, 118, 89, 0.13),
        transparent 30%
),

    radial-gradient(
        circle at 10% 60%,
        rgba(239, 154, 114, 0.06),
        transparent 30%
);
}


/* NAVBAR */

.navbar {

    max-width: 1180px;

    margin: auto;

    padding: 28px 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    position: relative;

    z-index: 5;
}


.logo {

    font-size: 1.15rem;

    font-weight: 700;

    letter-spacing: -0.04em;

    text-decoration: none;

    color: var(--text);
}


.logo span {
    color: var(--orange);
}


nav {

    display: flex;

    gap: 28px;
}


nav a {

    color: var(--muted);

    text-decoration: none;

    font-size: 0.9rem;

    transition: color 0.25s;
}


nav a:hover {
    color: var(--text);
}


/* HERO */

.hero {

    min-height: 78vh;

    max-width: 1180px;

    margin: auto;

    padding: 100px 30px 130px;

    display: flex;

    align-items: center;

    position: relative;
}


.hero-content {
    position: relative;
    z-index: 2;
}


.eyebrow {

    color: var(--orange-light);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.18em;
}


h1 {

    font-size: clamp(4rem, 9vw, 8.5rem);

    line-height: 0.9;

    letter-spacing: -0.075em;

    margin: 20px 0 30px;
}


h1 em {

    font-family: var(--serif);

    font-weight: 500;

    color: #e7d9ce;
}


.hero-text {

    color: var(--muted);

    font-size: 1.1rem;

    line-height: 1.7;

    max-width: 500px;
}


.hero-buttons {

    display: flex;

    gap: 12px;

    margin-top: 28px;
}


.button {

    padding: 13px 19px;

    border-radius: 999px;

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

    text-decoration: none;

    font-size: 0.9rem;

    transition:
        transform 0.3s,
        background 0.3s,
        border 0.3s;
}


.button:hover {

    transform: translateY(-3px);

    border-color: rgba(244,237,228,.3);
}


.button.primary {

    background: var(--orange);

    color: #201511;

    border-color: var(--orange);

    font-weight: 700;
}


/* GLOW */

.glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(2px);
}


.glow-one {

    width: 300px;
    height: 300px;

    right: 8%;
    top: 20%;

    background:
        radial-gradient(
            circle,
            rgba(223,118,89,.18),
            transparent 68%
);

    animation: float 7s ease-in-out infinite;
}


.glow-two {

    width: 500px;
    height: 500px;

    right: -15%;
    bottom: -20%;

    background:
        radial-gradient(
            circle,
            rgba(239,154,114,.08),
            transparent 65%
);

    animation: float 10s ease-in-out infinite reverse;
}


@keyframes float {

    50% {
        transform:
            translate(12px,-18px)
    scale(1.04);
}
}


/* SECTIONS */

.section {

    max-width: 1180px;

    margin: auto;

    padding: 110px 30px;
}


.section-heading {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 40px;

    margin-bottom: 38px;
}


.section-number {

    color: var(--orange-light);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.18em;
}


.section-heading h2 {

    font-size: clamp(2.3rem, 5vw, 4.5rem);

    letter-spacing: -0.065em;

    margin-top: 8px;
}


.section-heading p {

    color: var(--muted);

    max-width: 360px;

    line-height: 1.6;
}


/* PROJECTS */

.project-grid {

    display: grid;

    grid-template-columns: 1.35fr 1fr;

    gap: 18px;
}


.project-card {

    min-height: 470px;

    padding: 28px;

    border-radius: 28px;

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

    background:
        linear-gradient(
            145deg,
        rgba(255,255,255,.045),
        rgba(255,255,255,.012)
);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        border .3s,
    box-shadow .45s;
}


.project-card:hover {

    transform: translateY(-8px);

    border-color: rgba(223,118,89,.38);

    box-shadow:
    0 25px 80px rgba(0,0,0,.25);
}


.card-top {

    display: flex;

    justify-content: space-between;

    color: #8f8178;

    font-size: .7rem;

    letter-spacing: .14em;
}


.project-icon {

    font-size: 2rem;

    margin-bottom: 16px;
}


.project-card h3 {

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

    line-height: .96;

    letter-spacing: -.06em;

    margin-bottom: 18px;
}


.project-card p {

    color: var(--muted);

    line-height: 1.6;

    max-width: 520px;
}


.tags {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    margin-top: 24px;
}


.tags span {

    padding: 7px 11px;

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

    border-radius: 999px;

    color: #cbbdb3;

    font-size: .75rem;
}


.project-link {

    margin-top: 25px;

    color: var(--orange-light);

    font-weight: 600;

    display: flex;

    justify-content: space-between;

    text-decoration: none;
}


/* ARCHIVE */

.archive {

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


.archive-list {

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


.archive-item {

    display: flex;

    justify-content: space-between;

    padding: 24px 8px;

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

    transition:
        padding .3s,
        background .3s;
}


.archive-item:hover {

    padding-left: 18px;

    padding-right: 18px;

    background: rgba(255,255,255,.025);
}


.archive-item span {
    font-size: 1.15rem;
}


.archive-item small {
    color: var(--muted);
}


/* GITHUB */

.github-section {

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


.github-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;
}


.github-card {

    min-height: 330px;

    padding: 26px;

    border-radius: 28px;

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

    background: var(--surface);

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    text-decoration: none;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        border .3s,
    box-shadow .45s;
}


.github-card:hover {

    transform: translateY(-8px);

    border-color: rgba(223,118,89,.38);

    box-shadow:
    0 25px 80px rgba(0,0,0,.25);
}


.github-status {

    color: var(--orange-light);

    font-size: .68rem;

    font-weight: 700;

    letter-spacing: .15em;
}


.github-status.old {
    color: #9c8d84;
}


.github-card h3 {

    font-size: 2.2rem;

    letter-spacing: -.06em;

    margin: 12px 0 8px;
}


.github-card p {

    color: var(--muted);

    line-height: 1.5;

    max-width: 260px;

    margin-bottom: 20px;
}


.github-card strong {

    color: var(--orange-light);

    font-size: .85rem;
}


/* QR */

.qr {

    width: 145px;

    height: 145px;

    padding: 9px;

    border-radius: 18px;

    background: #f4ede4;

    flex-shrink: 0;

    transition:
        transform .4s,
    box-shadow .4s;
}


.github-card:hover .qr {

    transform: rotate(2deg) scale(1.04);

    box-shadow:
    0 10px 40px rgba(223,118,89,.2);
}


.qr img {

    width: 100%;

    height: 100%;

    display: block;
}


/* FOOTER */

footer {

    max-width: 1180px;

    margin: auto;

    padding: 35px 30px 45px;

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

    display: flex;

    justify-content: space-between;

    color: #81746c;

    font-size: .78rem;
}


/* MOBILE */

@media (max-width: 760px) {

.navbar {
        padding: 22px 20px;
    }


    nav {
        display: none;
    }


.hero {

        min-height: 75vh;

        padding:
            80px 20px
        90px;
    }


    h1 {

        font-size:
        clamp(
            3.6rem,
            17vw,
            6rem
    );
    }


.hero-buttons {
        flex-wrap: wrap;
    }


.section {

        padding:
            80px 20px;
    }


.section-heading {

        display: block;
    }


.section-heading p {

        margin-top: 15px;
    }


.project-grid,
.github-grid {

        grid-template-columns: 1fr;
    }


.project-card {

        min-height: 420px;
    }


.github-card {

        min-height: 280px;
    }


.qr {

        width: 112px;
        height: 112px;
    }


    footer {

        margin: 0 20px;

        padding-left: 0;
        padding-right: 0;
    }

}
/*
========================================
MOTION SYSTEM
========================================
*/


/* Mouse light */

.mouse-light {

    position: fixed;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

    left: -210px;
    top: -210px;

    background:
            radial-gradient(
                    circle,
                    rgba(223,118,89,.11),
                    transparent 68%
            );

    filter: blur(10px);

    mix-blend-mode: screen;

    will-change: transform;
}


/* Reveal */

.reveal {

    opacity: 0;

    transform:
            translateY(45px)
            scale(.97);

    filter: blur(6px);
}


.reveal.visible {

    opacity: 1;

    transform:
            translateY(0)
            scale(1);

    filter: blur(0);

    transition:

            opacity .9s ease,

            transform
            1s cubic-bezier(.16,1,.3,1),

            filter
            .9s ease;

    transition-delay:
            var(--delay, 0ms);
}


/*
========================================
PROJECT CARDS
========================================
*/


.project-card,
.github-card {

    position: relative;

    overflow: hidden;

    will-change:
            transform;

    transform-style:
            preserve-3d;
}


/* Shine */

.card-shine {

    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    pointer-events: none;

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

    background:
            radial-gradient(
                    circle,
                    rgba(255,190,160,.13),
                    transparent 65%
            );

    filter: blur(5px);

    opacity: 0;

    transition:
            opacity .25s;

    z-index: 0;
}


.project-card > *,
.github-card > * {

    position: relative;

    z-index: 1;
}


/*
========================================
CARD BORDER ANIMATION
========================================
*/


.project-card::before,
.github-card::before {

    content: "";

    position: absolute;

    inset: -2px;

    border-radius: inherit;

    background:
            conic-gradient(
                    from 180deg,
                    transparent,
                    rgba(223,118,89,.35),
                    transparent 30%
            );

    opacity: 0;

    animation:
            borderSpin 7s linear infinite;

    transition:
            opacity .4s;

    pointer-events: none;
}


.project-card:hover::before,
.github-card:hover::before {

    opacity: 1;
}


@keyframes borderSpin {

    to {

        transform:
                rotate(360deg);

    }

}


/*
========================================
PROJECT ICON
========================================
*/


.project-icon {

    transition:
            transform .5s cubic-bezier(.2,.8,.2,1);

}


.project-card:hover .project-icon {

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

}


/*
========================================
ARROWS
========================================
*/


.project-link span,
.button span {

    display: inline-block;

    transition:
            transform .35s
            cubic-bezier(.2,.8,.2,1);

}


.project-link:hover span,
.button:hover span {

    transform:
            translate(5px,-5px)
            rotate(5deg);

}


/*
========================================
QR CODE
========================================
*/


.qr {

    transition:
            transform .6s
            cubic-bezier(.2,.8,.2,1),
            box-shadow .5s;

}


.github-card:hover .qr {

    transform:
            perspective(600px)
            rotateY(8deg)
            rotateX(-4deg)
            scale(1.06);

    box-shadow:
            0 20px 55px
            rgba(223,118,89,.25);

}


/*
========================================
ARCHIVE
========================================
*/


.archive-item {

    position: relative;

    overflow: hidden;

}


.archive-item::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 100%;

    background:
            var(--orange);

    transform:
            scaleY(0);

    transform-origin:
            bottom;

    transition:
            transform .35s
            cubic-bezier(.2,.8,.2,1);

}


.archive-item:hover::before {

    transform:
            scaleY(1);

    transform-origin:
            top;

}


.archive-item span {

    transition:
            transform .35s;

}


.archive-item:hover span {

    transform:
            translateX(8px);

}


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


.hero-content {

    transition:
            transform .3s ease-out;

}


h1 {

    animation:
            heroTitle 1.2s
            cubic-bezier(.16,1,.3,1)
            both;

}


@keyframes heroTitle {

    from {

        opacity: 0;

        transform:
                translateY(60px)
                scale(.94);

        filter:
                blur(12px);

    }

    to {

        opacity: 1;

        transform:
                translateY(0)
                scale(1);

        filter:
                blur(0);

    }

}


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


.eyebrow {

    animation:
            eyebrowIn .8s
            .1s
            cubic-bezier(.16,1,.3,1)
            both;

}


@keyframes eyebrowIn {

    from {

        opacity: 0;

        letter-spacing:
                .5em;

        transform:
                translateX(-20px);

    }

    to {

        opacity: 1;

        letter-spacing:
                .18em;

        transform:
                translateX(0);

    }

}


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


.hero-buttons {

    animation:
            buttonsIn 1s
            .65s
            cubic-bezier(.16,1,.3,1)
            both;

}


@keyframes buttonsIn {

    from {

        opacity: 0;

        transform:
                translateY(20px);

    }

    to {

        opacity: 1;

        transform:
                translateY(0);

    }

}


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


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

    *,
    *::before,
    *::after {

        animation-duration:
                .01ms !important;

        animation-iteration-count:
                1 !important;

        transition-duration:
                .01ms !important;

        scroll-behavior:
                auto !important;

    }

}
/* ========================================
   CURSOR TEXT REVEAL
   ======================================== */

.reveal-card {
    position: relative;
    overflow: hidden;
}

.reveal-text {
    position: absolute;
    inset: 0;

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

    padding: 40px;

    pointer-events: none;

    color: var(--text);

    font-size: clamp(2rem, 5vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.06em;

    text-align: center;

    opacity: 0;

    clip-path: circle(
            0px at var(--mouse-x) var(--mouse-y)
    );

    transition:
            clip-path .15s ease,
            opacity .25s ease;
}

.reveal-card:hover .reveal-text {
    opacity: 1;

    clip-path: circle(
            150px at var(--mouse-x) var(--mouse-y)
    );
}


/* schöner Übergang außerhalb des Reveal-Bereichs */

.reveal-card::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
            radial-gradient(
                    circle 150px at var(--mouse-x) var(--mouse-y),
                    transparent 0%,
                    rgba(223,118,89,.06) 55%,
                    transparent 100%
            );

    opacity: 0;

    transition: opacity .25s ease;
}

.reveal-card:hover::after {
    opacity: 1;
}