/* ========================================
   FONTS & RESET
======================================== */

@font-face {
    font-family: "Onest";
    src: url("fonts/Onest[wght].ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    min-height: 100%;
    overflow: hidden;
}

::selection {
    background: rgb(155 133 105 / 40%);
}


/* ========================================
   THEME & GLOBAL STYLES
======================================== */

/* --- Theme Variables --- */
:root {
    --background: #343029;
    --foreground: #f0ebe2;
    --muted-foreground: #b0a797;
    --icon: #f0ebe2;
    --pfp-border: color-mix(in srgb, var(--background) 92%, var(--foreground));
    --badge-background: rgba(240, 235, 226, 0.08);
    --badge-border: rgba(240, 235, 226, 0.04);

    --nav-delay: 0.12s;
    --nav-duration: 0.675s;

    --intro-easing: cubic-bezier(0.17, 0.84, 0.44, 1);
    --tooltip-delay: 0.15s;
}

body.light {
    --background: #eee8de;
    --foreground: #453c30;
    --muted-foreground: #857b6d;
    --icon: #514638;
    --pfp-border: color-mix(in srgb, var(--foreground) 25%, var(--background));
    --badge-background: rgba(69, 60, 48, 0.12);
    --badge-border: rgba(69, 60, 48, 0.14);
}

/* --- Global Body --- */
body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: "Onest", sans-serif;
    font-weight: 300;
    transition: background-color 0.3s, color 0.3s;
}


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

.overlay,
.overlaylayer {
    position: fixed;
    inset: 0;
}

.overlay {
    z-index: 9999;
    background: rgb(0 0 0 / 0.776);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.75s ease;
}

.overlay.hidden,
.overlaylayer.hidden {
    opacity: 0;
    pointer-events: none;
}

.overlaylayer {
    z-index: 9998;
    background: var(--background);
    opacity: 1;
    transition: opacity 0.75s ease;
}

.welcome {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -1.5px;
    margin-top: 0px;
    margin-bottom: 4px;
    color: #fafafa;
}

.welcometext {
    color: #b8b8b8;
    font-size: 15px;
    font-weight: 450;
    letter-spacing: -1px;
    margin: 0;
}


/* ========================================
   MAIN LAYOUT & PAGE TRANSITIONS
======================================== */

.main {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.sections {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.page,
.sections .page {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
    transition:
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.45s ease,
        visibility 0s linear 0.75s;
}

.page.active,
.sections .page.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    z-index: 2;
    transition:
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.45s ease,
        visibility 0s;
}

.page.leaving,
.sections .page.leaving {
    visibility: visible;
    opacity: 1;
    pointer-events: none;
    transform: translateY(-100%);
    z-index: 1;
    transition:
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.45s ease,
        visibility 0s;
}


/* ========================================
   HOME PAGE
======================================== */

/* --- Hero --- */
.herowrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.hero {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 30px 24px;
    pointer-events: auto;
}

.heropfp {
    width: 172px;
    aspect-ratio: 1;
    flex-shrink: 0;
}

.heropfp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    box-shadow: 0 0 0 3px var(--pfp-border);
    transition: box-shadow 0.3s ease;
}

.herocontent {
    gap: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 170px;
}

.namerow {
    display: flex;
    align-items: center;
    gap: 10px;
}

.name {
    color: var(--foreground);
    font-size: 36px;
    letter-spacing: -2px;
    font-weight: 700;
    margin: 0;
    padding-top: 2px;
    padding-bottom: 2px;
}

.bio {
    color: var(--muted-foreground);
    font-size: 17px;
    letter-spacing: -0.75px;
    font-weight: 570;
    margin: 0;
}

.cursor {
    display: inline-block;
    opacity: 1;
    margin-left: 2px;
    color: var(--muted-foreground);
    animation: cursor-blink 0.8s ease-in-out infinite;
}

/* --- Badges & Tooltips --- */
.badges {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: fit-content;
    height: 36px;
    padding: 0 6px;
    border-radius: 25px;
    background: var(--badge-background);
    border: 2px solid var(--badge-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 25px;
    height: 32px;
    color: var(--foreground);
}

.badge svg {
    width: 25px;
    height: 25px;
    padding: 0;
    flex-shrink: 0;
}

.badge::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translate(-50%, 5px);
    width: max-content;
    max-width: 240px;
    padding: 4.8px 11.2px;
    background: #25221e;
    background-image: linear-gradient(
        rgba(20, 20, 20, 0.39),
        rgba(20, 20, 20, 0.39)
    );
    color: rgb(250, 250, 250);
    border: 2px solid rgba(26, 26, 26, 0.2);
    border-radius: 15px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
    font-size: 14.4px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    white-space: pre-line;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 100;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}

.badge:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: var(--tooltip-delay);
}

/* --- Social Links --- */
.herolinks {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1px;
    margin-top: 20px;
    left: -4px;
}

.herolinks a {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--icon);
    text-decoration: none;
    transition: color 0.3s ease;
}

.herolinks a svg {
    width: 100%;
    height: 100%;
    display: block;
    transition: color 0.3s ease, transform 0.3s ease;
}

.herolinks a:hover svg {
    transform: scale(1.1);
}


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

/* --- Navigation Links --- */
.nav {
    position: absolute;
    z-index: 5;
    top: 24px;
    left: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 32px;
    font-size: 15px;
    font-weight: 450;
}

.nav a,
.nav .toggle {
    color: var(--muted-foreground);
    padding: 4px 6px;
    transition: color 0.2s ease;
}

.nav a {
    position: relative;
    text-decoration: none;
    line-height: 1;
}

.nav a.active {
    color: var(--foreground);
}

.nav a:hover,
.nav .toggle:hover {
    color: var(--foreground);
}

.nav .toggle {
    padding: 0;
    margin-left: 12px;
}

/* --- Theme Toggle --- */
.theme-icon svg {
    width: 16px;
    height: 16px;
    display: block;
    color: inherit;
}

.toggle {
    position: relative;
    display: grid;
    place-items: center;
    background: none;
    border: none;
    box-sizing: content-box;
    width: 16px;
    height: 16px;
    padding: 4px 6px;
    cursor: pointer;
}

.theme-icon {
    position: absolute;
    display: grid;
    place-items: center;
    transition: opacity 0.3s, transform 0.3s;
}

.sun-icon {
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
}

.moon-icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

body.light .sun-icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

body.light .moon-icon {
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
}

/* --- Scroll-Down Indicator --- */
.scrolldownwrap {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 6px;
    display: flex;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.scrolldownwrap.gone {
    opacity: 0;
}

.scrolldownwrap.gone .scrolldown {
    pointer-events: none;
}

.scrolldown {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    color: var(--foreground);
    text-decoration: none;
    pointer-events: auto;
    transition: color 0.2s ease;
    opacity: 0;
}

.scrolldown p {
    margin: 0;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.scrolldown svg {
    color: var(--muted-foreground);
    width: 18px;
    height: 18px;
}

.scrolldown p,
.scrolldown svg {
    transition: transform 0.25s var(--intro-easing);
}

.scrolldown:hover p,
.scrolldown:hover svg {
    transform: translateY(-2px);
}

body.entered .scrolldown {
    animation: slide-up-fade 0.6s var(--intro-easing) 0.6s both;
}


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

/* --- Layout --- */
.aboutwrap {
    position: relative;
    justify-content: center;
    display: flex;
    flex-direction: row;
    max-width: 860px;
    height: fit-content;
    padding-left: 20px;
    padding-right: 20px;
    gap: 64px;
}

.aboutme {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 572px;
    height: fit-content;
    gap: 24px;
}

.aboutsidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 224px;
    height: fit-content;
    gap: 24px;
}

/* --- About Text --- */
.aboutme p {
    font-weight: 400;
    margin: 0;
    font-size: 17px;
    color: var(--muted-foreground);
}

.aboutme a {
    display: inline-block;
    width: fit-content;
    font-weight: 450;
    font-size: 17px;
    margin: 0px;
    line-height: 1;
    color: var(--foreground);
    transition: opacity 0.1s ease, border-color 0.2s ease, border-bottom-width 0.2s ease;
    border-bottom: 1.5px solid color-mix(in srgb, var(--muted-foreground) 35%, transparent);
    text-decoration: none;
}

.aboutme a:hover,
#weatherdata:hover,
#timezonedata:hover,
#sincedata:hover {
    border-bottom-color: var(--foreground);
    border-bottom-width: 1.75px;
}

/* --- Sidebar --- */
.aboutsidebar div {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aboutsidebar div span {
    color: var(--muted-foreground);
    font-size: 16px;
}

.aboutsidebar div a {
    color: var(--foreground);
    font-size: 17px;
    text-decoration: none;
    line-height: 1;
    width: fit-content;
}

#weatherdata,
#timezonedata,
#sincedata {
    display: inline-block;
    width: fit-content;
    border-bottom: 1.5px solid color-mix(in srgb, var(--muted-foreground) 35%, transparent);
    text-decoration: none;
    transition: border-color 0.2s ease, border-bottom-width 0.2s ease;
}


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

/* --- Layout & Form --- */
.contact-page {
    flex-direction: column;
}

.contactform {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(500px, calc(100% - 72px));
    gap: 14px;
    --field-border: color-mix(in srgb, var(--muted-foreground) 35%, transparent);
}

.contacttitle {
    margin: 0;
    color: var(--foreground);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -1px;
}

.contactsubtitle {
    margin: 4px 0 6px;
    color: var(--muted-foreground);
    font-size: 17px;
    font-weight: 400;
    font-style: italic;
}

/* --- Form Fields & Editor --- */
.contactfield {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contactlabel {
    color: var(--muted-foreground);
    font-size: 12px;
    font-weight: 450;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.contactinput,
.contacteditor {
    width: 100%;
    background: transparent;
    border: 1.5px solid var(--field-border);
    border-radius: 12px;
    color: var(--foreground);
    font-family: inherit;
    transition: border-color 0.2s ease;
}

.contactinput {
    height: 42px;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 400;
    outline: none;
}

.contactinput::placeholder,
.contacttextarea::placeholder {
    color: var(--muted-foreground);
    opacity: 0.7;
}

.contactinput:focus,
.contacteditor:focus-within {
    border-color: var(--muted-foreground);
}

.contacteditor {
    overflow: hidden;
}

.contacttoolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    height: 38px;
    border-bottom: 1.5px solid var(--field-border);
}

.contacttools {
    display: flex;
    align-items: center;
    gap: 2px;
}

.contacttool {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1.5px solid transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.contacttool svg {
    width: 15px;
    height: 15px;
}

.contacttool:hover {
    color: var(--foreground);
    border-bottom-color: var(--foreground);
}

.contactcount {
    color: var(--muted-foreground);
    font-size: 12px;
    font-weight: 450;
}

.contacttextarea {
    display: block;
    width: 100%;
    height: 110px;
    padding: 12px 14px;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    color: var(--foreground);
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.contacttextarea::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.contacthp {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* --- Attachments --- */
.contactfiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contactfiles:empty,
.contactnote:empty {
    display: none;
}

.contactfile {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 6px 0 12px;
    border: 1.5px solid var(--field-border);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
    color: var(--foreground);
}

.contactfilename {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contactfilesize {
    flex-shrink: 0;
    color: var(--muted-foreground);
    font-size: 12px;
}

.contactfileremove {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.contactfileremove:hover {
    color: var(--foreground);
    background: var(--badge-background);
}

.contactfileremove svg {
    width: 14px;
    height: 14px;
}

.contactnote {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 13px;
}

/* --- Submit & Alternative Contact --- */
.contactsend {
    height: 42px;
    margin-top: 2px;
    background: var(--foreground);
    border: 1.5px solid var(--foreground);
    border-radius: 12px;
    color: var(--background);
    font-family: inherit;
    font-size: 15px;
    font-weight: 550;
    cursor: pointer;
    transition: scale 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.contactsend:hover:not(:disabled) {
    scale: 1.02;
}

.contactsend:active:not(:disabled) {
    scale: 1;
}

.contactsend:disabled {
    scale: 1;
    cursor: default;
}

.contactalternative {
    margin: 10px 0 0;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: var(--muted-foreground);
}

.contactalternative a {
    display: inline-block;
    width: fit-content;
    color: var(--foreground);
    font-weight: 450;
    border-bottom: 1.5px solid color-mix(in srgb, var(--muted-foreground) 35%, transparent);
    line-height: 1;
    text-decoration: none;
    transition: border-color 0.2s ease, border-bottom-width 0.2s ease;
}

.contactalternative a:hover {
    border-bottom-color: var(--foreground);
    border-bottom-width: 1.75px;
}


/* ========================================
   PROJECTS PAGE
======================================== */

/* --- Layout & List --- */
.projects-page {
    flex-direction: column;
}

.projectswrap {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(500px, calc(100% - 72px));
    max-height: 100%;
    padding: 24px 0;
}

.projectsheading {
    flex-shrink: 0;
}

.projectstitle {
    margin: 0;
    color: var(--foreground);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -1px;
}

.projectssubtitle {
    margin: 4px 0 0;
    color: var(--muted-foreground);
    font-size: 17px;
    font-weight: 400;
    font-style: italic;
}

.projectslist {
    --fade: 18px;

    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
    margin: 16px 0 -12px -10px;
    padding: var(--fade) 0 var(--fade) 10px;
    overflow-y: auto;
    scrollbar-width: none;
    overscroll-behavior: contain;
    -ms-overflow-style: none;

    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0,
        rgb(0 0 0 / 0.1) calc(var(--fade) * 0.25),
        rgb(0 0 0 / 0.4) calc(var(--fade) * 0.5),
        rgb(0 0 0 / 0.8) calc(var(--fade) * 0.75),
        #000 var(--fade),
        #000 calc(100% - var(--fade)),
        rgb(0 0 0 / 0.8) calc(100% - var(--fade) * 0.75),
        rgb(0 0 0 / 0.4) calc(100% - var(--fade) * 0.5),
        rgb(0 0 0 / 0.1) calc(100% - var(--fade) * 0.25),
        transparent 100%);

    mask-image: linear-gradient(to bottom,
        transparent 0,
        rgb(0 0 0 / 0.1) calc(var(--fade) * 0.25),
        rgb(0 0 0 / 0.4) calc(var(--fade) * 0.5),
        rgb(0 0 0 / 0.8) calc(var(--fade) * 0.75),
        #000 var(--fade),
        #000 calc(100% - var(--fade)),
        rgb(0 0 0 / 0.8) calc(100% - var(--fade) * 0.75),
        rgb(0 0 0 / 0.4) calc(100% - var(--fade) * 0.5),
        rgb(0 0 0 / 0.1) calc(100% - var(--fade) * 0.25),
        transparent 100%);
}

.projectslist::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.projectsempty {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 16px;
    font-weight: 400;
}

/* --- Timeline --- */
.project {
    --dot-size: 12px;
    --line-width: 2px;

    position: relative;
    display: grid;
    grid-template-columns: 104px 1fr;
    column-gap: 24px;
    padding-left: 22px;
    color: inherit;
    text-decoration: none;
}

.project::after {
    content: "";
    position: absolute;
    top: calc(var(--dot-size) / 2);
    bottom: 0;
    left: 0;
    width: var(--line-width);
    border-radius: 1px;
    background: color-mix(in srgb, var(--muted-foreground) 55%, transparent);
    transition: background-color 0.3s ease;
}

.project::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: calc(var(--line-width) / 2);
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    border: 2px solid var(--muted-foreground);
    background: var(--background);
    transform: translateX(-50%);
    transition:
        transform 0.2s ease,
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.project.important::before {
    border-color: var(--muted-foreground);
    background: var(--muted-foreground);
}

/* --- Project Content --- */
.projectlink {
    display: inline-block;
    width: fit-content;
    color: inherit;
    line-height: 1;
    padding-bottom: 5px;
    text-decoration: none;
    border-bottom: 2px solid color-mix(in srgb, var(--muted-foreground) 0%, transparent);
    transition: border-color 0.2s ease;
}

.projectlink:hover {
    border-bottom-color: var(--foreground);
}

.projectmeta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 3px;
}

.projectpin {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--muted-foreground);
    font-size: 11px;
    font-weight: 550;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.projectpin svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.projectdate {
    color: var(--muted-foreground);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    opacity: 0.85;
}

.projectname {
    margin: 0;
    color: var(--foreground);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1.2;
}

.projectdescription {
    margin: 8px 0 0;
    color: var(--muted-foreground);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

/* --- Scroll Hint --- */
.projectshint {
    position: absolute;
    left: calc(100% + 8px);
    bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--muted-foreground);
    font-size: 11px;
    font-weight: 450;
    letter-spacing: 0.5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.projectshint.visible {
    opacity: 0.45;
}

.projectshint svg {
    width: 14px;
    height: 14px;
}

.page.animate .projectshint > * {
    animation: hintin 0.6s var(--intro-easing) 0.5s both;
}


/* ===================================================
   DASHBOARD
=================================================== */

/* --- Theme Variables --- */
:root {
    --contrib-0: #433e35;
    --contrib-1: #4a5a3a;
    --contrib-2: #5f7a45;
    --contrib-3: #769a52;
    --contrib-4: #94bd68;
}

body.light {
    --contrib-0: #ddd5c6;
    --contrib-1: #c9d6a8;
    --contrib-2: #a4bf7c;
    --contrib-3: #78a04e;
    --contrib-4: #4f7a2e;
}

/* --- Dashboard Layout --- */
.dashboardwrap {
    --dash-surface: color-mix(in srgb, var(--background) 95%, black);
    --dash-border: color-mix(in srgb, var(--muted-foreground) 12%, var(--dash-surface));

    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(780px, calc(100% - 72px));
}

.dashrow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* --- Shared Cards --- */
.dashcard {
    display: block;
    background: var(--dash-surface);
    border: 1.5px solid var(--dash-border);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.dashlinkcard:hover,
.dashcommunity:hover {
    border-color: color-mix(in srgb, var(--muted-foreground) 55%, var(--dash-surface));
}


/* ========================================
   DASHBOARD: PROFILE CARDS
======================================== */

/* --- Profile Layout --- */
.dashprofile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
}

.dashprofiletext {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* --- Avatars & Images --- */
.dashavatar,
.dashservericon,
.dashcover {
    position: relative;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--badge-background);
    color: var(--muted-foreground);
    overflow: visible;
    box-shadow: 0 0 0 2px var(--pfp-border);
    transition: box-shadow 0.3s ease;
}

.dashavatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 22px;
    font-weight: 500;
}

/* Images are added by dashboard.js on top of the letter / icon */
.dashavatar img,
.dashservericon img,
.dashcover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* --- Discord Status --- */
.dashstatus {
    --status-size: 20px;
    --status-icon: 68%;

    position: absolute;
    z-index: 1;
    right: -2px;
    bottom: -2px;
    width: var(--status-size);
    height: var(--status-size);
    border-radius: 50%;
    background-color: var(--pfp-border);
    background-image: url("pictures/icons/offline.png");
    background-size: var(--status-icon);
    background-position: center;
    background-repeat: no-repeat;
    transition: background-color 0.3s ease;
}

.dashstatus[data-status="online"] { background-image: url("pictures/icons/online.png"); }
.dashstatus[data-status="idle"] { background-image: url("pictures/icons/idle.png"); }
.dashstatus[data-status="dnd"] { background-image: url("pictures/icons/dnd.png"); }

/* --- Status Tooltip --- */
.dashstatus::after {
    content: "Offline";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translate(-50%, 5px);
    width: max-content;
    padding: 4.8px 11.2px;
    background: #25221e;
    background-image: linear-gradient(
        rgba(20, 20, 20, 0.39),
        rgba(20, 20, 20, 0.39)
    );
    color: rgb(250, 250, 250);
    border: 2px solid rgba(26, 26, 26, 0.2);
    border-radius: 15px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
    font-size: 14.4px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 100;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}

.dashstatus[data-status="online"]::after { content: "Online"; }
.dashstatus[data-status="idle"]::after { content: "Idle"; }
.dashstatus[data-status="dnd"]::after { content: "Do not disturb"; }

.dashstatus:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: var(--tooltip-delay);
}

/* --- Profile Names & Platforms --- */
.dashnamerow {
    display: flex;
    align-items: center;
    padding-right: 72px;
}

.dashname {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--foreground);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.dashplatform {
    position: absolute;
    top: 14px;
    right: 18px;
    display: block;
    color: var(--muted-foreground);
    opacity: 0.8;
}

.dashplatform svg {
    display: block;
    width: 20px;
    height: 20px;
}

.dashhandle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted-foreground);
    font-size: 14px;
    font-weight: 400;
}


/* ========================================
   DASHBOARD: OVERVIEW & STATISTICS
======================================== */

/* --- Overview Card --- */
.dashoverview {
    padding: 18px 22px;
}

/* --- Card Headers --- */
.dashcardheader {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
}

.dashcardtitle {
    position: relative;
    margin: 0;
    color: var(--foreground);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.dashcardmeta {
    color: var(--muted-foreground);
    font-size: 13px;
    font-weight: 400;
}

.dashicon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--muted-foreground);
}

#dashcardtitleplatform {
    text-decoration: none;
    transition: opacity 0.2s ease;
}

#dashcardtitleplatform:hover {
    opacity: 0.8;
}

/* --- Statistics --- */
.dashstats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.dashstatrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.dashstaticon {
    position: static;
    width: 18px;
    height: 18px;
    margin: 0;
    transform: none;
    color: var(--foreground);
    opacity: 0.8;
}

.dashstat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.dashstatvalue {
    color: var(--foreground);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1.1;
}

.dashstatlabel {
    color: var(--muted-foreground);
    font-size: 12px;
    font-weight: 400;
}

/* --- Dividers --- */
.dashdivider {
    height: 2px;
    margin: 16px 0;
    background: var(--dash-border);
    transition: background-color 0.3s ease;
}

/* ========================================
   DASHBOARD: CONTRIBUTION GRAPH
======================================== */

/* --- Graph Header --- */
#graphRange {
    font-weight: 400;
    font-size: 11px;
    color: var(--muted-foreground);
}

#contributionsTitle {
    margin-bottom: 15px;
}

/* --- Month Labels --- */
.dashmonths {
    display: grid;
    grid-template-columns: repeat(26, 1fr);
    align-items: center;
    justify-items: center;
    margin-bottom: 7px;
    color: var(--muted-foreground);
    font-size: 10px;
    font-weight: 500;
}

.dashmonth {
    white-space: nowrap;
    text-align: center;
}

/* --- Graph Grid & Cells --- */
.graph-range {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

.graph-range-option {
    min-width: 54px;
    text-align: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted-foreground);
    font: inherit;
    cursor: pointer;
    transition: color .15s ease;
}

.graph-range-option.active {
    color: var(--foreground);
    font-weight: 600;
}

.graph-range-option:hover {
    color: var(--foreground);
}

.graph-range span {
    color: var(--muted-foreground);
    opacity: .5;
}

.dashgraph {
    display: grid;
    grid-template-rows: repeat(7, 10px);
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 3px;
    margin-top: 6px;
}

.dashcell {
    border-radius: 2px;
    background: var(--contrib-0);
    transition: background-color 0.3s ease;
    position: relative;
    display: block;
}

.dashcell[data-level="1"] { background: var(--contrib-1); }
.dashcell[data-level="2"] { background: var(--contrib-2); }
.dashcell[data-level="3"] { background: var(--contrib-3); }
.dashcell[data-level="4"] { background: var(--contrib-4); }

.dashcell:hover {
    z-index: 10;
}

.dashcell.empty {
    visibility: hidden;
}

/* --- Cell Tooltips --- */
.dashcell::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 9px);
    transform: translate(-50%, 5px);
    width: max-content;
    max-width: 240px;
    padding: 4.8px 11.2px;
    background: #25221e;
    background-image: linear-gradient(
        rgba(20, 20, 20, 0.39),
        rgba(20, 20, 20, 0.39)
    );
    color: rgb(250, 250, 250);
    border: 2px solid rgba(26, 26, 26, 0.2);
    border-radius: 15px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
    font-size: 14.4px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    white-space: pre-line;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 100;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}

.dashcell:not(.empty):hover::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: var(--tooltip-delay);
}

/* --- Graph Legend --- */
.dashlegend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 10px;
    color: var(--muted-foreground);
    font-size: 11px;
    font-weight: 400;
}

.dashlegend .dashcell {
    width: 10px;
    height: 10px;
}

.dashlegend .dashcell::after {
    display: none;
}

.dashlegend span:first-child { margin-right: 2px; }
.dashlegend span:last-child { margin-left: 2px; }

/* --- Graph Footer --- */
.dashgraphfooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.dashgraphfooter .dashlegend {
    margin-top: 0;
}


/* ========================================
   DASHBOARD: SPOTIFY
======================================== */

/* --- Visibility --- */
#spotifySection[hidden] {
    display: none;
}

/* --- Now Playing Layout --- */
.dashnowplaying {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    color: inherit;
    text-decoration: none;
}

/* --- Album Cover --- */
.dashcover {
    width: 60px;
    height: 60px;
    border-radius: 10px;
}

.dashcover svg {
    width: 24px;
    height: 24px;
}

/* --- Track Information --- */
.dashtrack {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dashtracktitle {
    display: block;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--foreground);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.dashtracktitle[href]:hover {
    opacity: 0.75;
}

.dashtrackartist {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted-foreground);
    font-size: 14px;
    font-weight: 400;
}

/* --- Playback Progress --- */
.dashprogress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.dashtime {
    flex-shrink: 0;
    min-width: 28px;
    color: var(--muted-foreground);
    font-size: 11px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.dashtime:last-child {
    text-align: right;
}

.dashbar {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted-foreground) 25%, transparent);
    overflow: hidden;
}

.dashbarfill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: var(--foreground);
    transition: width 1s linear;
}


/* ========================================
   DASHBOARD: DISCORD COMMUNITY
======================================== */

/* --- Server Card --- */
.dashcommunity {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
}

/* --- Server Icon --- */
.dashservericon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 500;
}

/* --- Server Information --- */
.dashservertext {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 12px;
    row-gap: 3px;
}

.dashservername {
    grid-column: 1;
    grid-row: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--foreground);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.dashservermembers {
    grid-column: 1;
    grid-row: 2;
    color: var(--muted-foreground);
    font-size: 14px;
    font-weight: 400;
}

/* --- Online Members --- */
.dashserveronline {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: end;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 11px;
    color: var(--muted-foreground);
    transform: translateY(6px);
}

.dashonlinedot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--contrib-4);
}


/* ========================================
   DASHBOARD: RESPONSIVE STYLES
======================================== */

/* --- Short Screens --- */
@media (max-height: 780px) {
    .dashboardwrap {
        zoom: 0.9;
    }
}

@media (max-height: 700px) {
    .dashboardwrap {
        zoom: 0.8;
    }
}

@media (max-height: 620px) {
    .dashboardwrap {
        zoom: 0.7;
    }
}

/* --- Mobile --- */
@media (max-width: 700px) {
    .dashboardwrap {
        width: calc(100% - 56px);
    }

    .dashrow {
        grid-template-columns: 1fr;
    }

    .dashstats {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ========================================
   PAGE INDICATORS & ANIMATIONS
======================================== */

/* --- Page Indicators --- */
.page-dots {
    position: fixed;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    z-index: 100;
    pointer-events: none;
}

.page-dots .dot {
    position: relative;
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--muted-foreground);
    opacity: 0.65;
    transition:
        width 0.25s ease,
        height 0.25s ease,
        background-color 0.25s ease,
        opacity 0.25s ease;
}

.page-dots .dot.active {
    width: 10px;
    height: 10px;
    background: var(--foreground);
    opacity: 1;
}

/* --- Element Animations --- */
.page [data-anim] {
    opacity: 0;
}

.page.animate [data-anim] {
    animation-duration: var(--duration, 0.6s);
    animation-delay: var(--delay, 0s);
    animation-timing-function: var(--intro-easing);
    animation-fill-mode: both;
}

.page.animate [data-anim="up"] {
    animation-name: slide-up-fade;
}

.page.animate [data-anim="down"] {
    animation-name: slide-down-fade;
}

.page.animate [data-anim="left"] {
    animation-name: slide-left-fade;
}

.page.animate [data-anim="right"] {
    animation-name: slide-right-fade;
}

.page.animate [data-anim="fade"] {
    animation-name: fade-in;
}

/* --- Keyframes --- */
@keyframes cursor-blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes hintin {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-up-fade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-down-fade {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-left-fade {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-right-fade {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes nav-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ========================================
   RESPONSIVE STYLES
======================================== */

/* --- Mobile --- */
@media (max-width: 600px) {
    .page-dots {
        right: 12px;
    }

    .hero {
        gap: 20px;
        margin: 20px 32px 20px 16px;
    }

    .heropfp {
        width: 120px;
    }

    .herocontent {
        width: 160px;
    }

    .name {
        font-size: 30px;
    }

    .bio {
        font-size: 15px;
    }

    .herolinks a {
        width: 38px;
        height: 38px;
    }

    .projectswrap {
        width: calc(100% - 72px);
    }

    .project {
        grid-template-columns: 1fr;
        row-gap: 6px;
    }

    .projectmeta {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding-top: 0;
        order: -1;
    }
}

/* --- Short Screens --- */
@media (max-height: 760px) {
    .contactform {
        gap: 10px;
    }

    .contacttitle {
        font-size: 30px;
    }

    .contactsubtitle {
        font-size: 15px;
        margin-bottom: 2px;
    }

    .contactinput,
    .contactsend {
        height: 38px;
    }

    .contacttextarea {
        height: 80px;
    }

    .contactfile {
        height: 30px;
    }
}

@media (max-height: 620px) {
    .contactsubtitle {
        display: none;
    }

    .contacttextarea {
        height: 56px;
    }
}


/* ========================================
   ACCESSIBILITY & INTRO ANIMATIONS
======================================== */

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    body.entered .scrolldown,
    body.entered .nav,
    .page.animate [data-anim],
    .page.animate .projectshint > * {
        animation-duration: 0.01ms;
        animation-delay: 0ms;
    }
}

/* --- Navigation Intro --- */
body.entered .nav {
    animation: nav-fade-in var(--nav-duration) ease var(--nav-delay) both;
}