@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

@font-face {
    font-family: 'Migra-Title';
    src: url('Migra-Extrabold.ttf');
}

/* Lenis Config */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

/* -------------------------------------------------------
    ROOT & RESET
------------------------------------------------------- */
:root {
    --primary: hsl(34, 99%, 51%);
    --bg-dark: hsl(0, 0%, 0%);
    --bg: hsl(0, 0%, 5%);
    --bg-light: hsl(0, 0%, 10%);
    --bg-foot: hsl(0, 0%, 6%);
    --text: hsl(0, 0%, 95%);
    --text-muted: hsl(0, 0%, 70%);
    --border: hsl(0, 0%, 30%);
    --border-light: hsl(0, 0%, 100%, 20%);
    --highlight: hsl(0, 0%, 60%);
    --highlight-color: hsl(50, 100%, 60%);
    --highlight-text-color: hsl(0, 0%, 10%);
    --text-selection: hsl(0, 0%, 12%);

    --nav-background: hsla(0, 0%, 4%, 50%);
    --nav-background-idle: hsla(0, 0%, 4%, 75%);
    --nav-blur: 20px;
    --nav-border: hsla(0, 0%, 30%, 50%);
    

    /* Gradients */
    --gradient: linear-gradient(0deg, var(--bg), var(--bg-light));
    --gradient-hover: linear-gradient(0deg, var(--bg) 95%, var(--bg-light));

    /* Typography */
    --font-body: "Noto Sans JP", sans-serif;
    --font-heading: "Fira Sans", sans-serif;
    /* --font-navbar: "Roboto Mono", sans-serif; */
    --font-navbar: 'JetBrains Mono', monospace;
    --font-title: "Syne", sans-serif;

    /* Font Styles */
    --text-p: 400 1rem/1.5 var(--font-body);
    --text-h1: 600 3rem/1.2 var(--font-heading);
    --text-h2: 600 2rem/1.3 var(--font-heading);

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 40px;
    --space-6: 80px;

    --body-margin: 1rem;
    --max-body-width: 1200px;

    /* Transitions */
    --transition: all 0.25s ease-in-out;
    --transition-btn: all 0.15s ease-in-out;
    --transition-bg: background-color 0.2s cubic-bezier(0.77, 0, 0.175, 1);
    --hover-bg: rgba(255, 255, 255, 0.05);
    --hover-bg2: rgba(255, 255, 255, 0.15);


    /* Shadows */
    --shadow-s: inset 0 1px 2px #ffffff30,
            /* top highlight */
            0 1px 2px #00000030,
            /* dark shadow */
            0 2px 4px #00000015;
            /* soft shadow */
    --shadow-s-idle: 0 1px 2px #00000030,
            /* dark shadow */
            0 2px 4px #00000015;
            /* soft shadow */
    --shadow-m: inset 0 1px 2px #ffffff50,
            /* top highlight */
            0 2px 4px #00000030,
            /* dark shadow */
            0 4px 8px #00000015;
            /* soft shadow */
    --shadow-m-idle: 0 1px 2px #00000030,
            /* dark shadow */
            0 2px 4px #00000015;
            /* soft shadow */

    --glass-border: 
            inset 0 1px 2px #ffffff50, 
            var(--glass-outline), 
            0 1px 2px #00000030,
            0 2px 4px #00000015;

    --glass-outline: 0px 0px 0px 2px rgba(32, 0, 36, 0.11);
    --glass-outline-light: 0px 0px 0px 1px rgba(32, 0, 36, 0.11);

    --nav-radius: 8px;
    --icon-size: 24px;
    --nav-max-height: 60px;
    --nav-font-size: 16px;
    --nav-logo-size: 40px;
    --nav-icon-size: 1.5em;

    /* Hero Section */
    --gradient-color: hsla(14.588235294117649, 100%, 50%, 1);

    --gradient-dark:
        radial-gradient(circle at 93% 95%, hsla(283, 100%, 23%, 1) 0%, transparent 66%),
        radial-gradient(circle at 0% 99%, hsla(271, 99%, 53%, 1) 0%, transparent 67%),
        radial-gradient(circle at 46% 94%, hsla(14, 0%, 0%, 1) 0%, transparent 81%),
        radial-gradient(circle at 89% 8%, hsla(252, 89%, 23%, 1) 0%, transparent 150%);
    
    --gradient-light:
        radial-gradient(circle at 91% 11%, hsla(242, 100%, 88%, 0.66) 4%, transparent 37%),
        radial-gradient(circle at 66% 37%, hsla(192, 100%, 88%, 1) 0%, transparent 63%),
        radial-gradient(circle at 36% 87%, hsla(136, 100%, 88%, 1) 12%, transparent 63%);
}

/* -------------------------------------------------------
    LIGHT THEME
------------------------------------------------------- */
body.light {
    --bg-dark: hsl(0, 0%, 90%);
    --bg: hsl(0, 0%, 95%);
    --bg-light: hsl(0, 0%, 100%);
    --bg-foot: hsl(0, 0%, 98%);
    --text: hsl(0, 0%, 5%);
    --text-muted: hsl(0, 0%, 20%);
    --border: hsl(0, 0%, 60%);
    --border-light: hsl(0, 0%, 0%, 20%);
    --highlight: hsl(0, 0%, 0%);
    --highlight-color: hsl(50, 100%, 60%);
    --highlight-text-color: hsl(0, 0%, 10%);

    --nav-background: hsla(0, 0%, 96%, 50%);
    --nav-background-idle: hsla(0, 0%, 96%, 75%);
    --nav-blur: 20px;

    --transition-bg: background-color 0.2s cubic-bezier(0.77, 0, 0.175, 1);
    --hover-bg: rgba(0, 0, 0, 0.05);
    --hover-bg2: rgba(0, 0, 0, 0.10);

    --glass-outline: 0px 0px 0px 2px rgba(233, 0, 219, 0.11);
    --glass-outline-light: 0px 0px 0px 1px rgba(233, 0, 219, 0.11);
}

/* ~~~ Scroll Bar ~~~ */
body ::selection,
body ::-moz-selection {
    background: var(--highlight-color);
    color: var(--highlight-text-color);
}

body.light ::selection,
body.light ::-moz-selection {
    background: var(--highlight-color);
    color: var(--highlight-text-color);
}

/* ~~~ Text selection ~~~ */
::selection {
    background-color: var(--text-selection);
}

::-moz-selection {
    background-color: var(--text-selection);   
}

p::selection {
    color: #fff;
}

p::-moz-selection {
    color: #fff;
}

/* -------------------------------------------------------
    BASE STYLES
------------------------------------------------------- */

::-webkit-scrollbar {
    display: none;
}

html,
body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

body {
    font: var(--text-p);
    background: var(--bg);
    color: var(--text);
    transition: var(--transition);
    text-wrap: balance;
    /* background-image: radial-gradient(var(--border) 1px, transparent 0);
    background-size: 40px 40px;
    background-position: -10px -10px; */
}

.content {
    margin: var(--body-margin) auto;
    max-width: 650px;
}

.content-header {
    padding: 20px 16px;
    /* padding-top: 40px; */
    padding-bottom: 0;
    margin-bottom: 40px;
}

/* -------------------------------------------------------
    TYPOGRAPHY
------------------------------------------------------- */
h1 {
    font-family: var(--text-h1);
    color: var(--text);
    margin-bottom: var(--space-3);
}

h2 {
    font-family: var(--text-h2);
    color: var(--text);
    margin-bottom: var(--space-2);
}

p {
    font-family: var(--text-p);
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}

/* -------------------------------------------------------
    LAYOUT ELEMENTS
------------------------------------------------------- */
section {
    min-height: 100vh;
    padding: var(--space-5) 0;
}

hr {
    margin: 30px auto;
    border: 0;
    height: 1px;
    width: 50px;
    background-color: var(--border);
}

.content-section {
    margin-bottom: 20px;
}

#experience, #projects, #education, #contact {
    scroll-margin-top: 100px;
}

.anchor-offset {
    position: relative;
    top: -100px;
    height: 0;
    width: 0;
    visibility: hidden;
}

/* -------------------------------------------------------
    HEADER
------------------------------------------------------- */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* padding: var(--space-3); */
}

.title-header {
    font-family: "Syne", sans-serif;
    font-weight: bold;
}

.section-header {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    opacity: 0.75;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 8px;
}

/* -------------------------------------------------------
    BUTTONS
------------------------------------------------------- */
button {
    cursor: pointer;
    font-weight: 600;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--nav-border);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    transition: var(--transition);
}

button:hover {
    background: var(--bg-light);
}

button:focus {
    outline: 2px solid var(--highlight);
    outline-offset: 2px;
}

/* -------------------------------------------------------
    BLUR
------------------------------------------------------- */
.blur-gradient-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    pointer-events: none;
    overflow: hidden;
    z-index: 999;
}

.blur-gradient-container-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 75px;
    pointer-events: none;
    overflow: hidden;
    z-index: 999;
}

.blur-layer {
    opacity: 1;
    position: absolute;
    inset: 0px;
    opacity: 1;
    pointer-events: none;
}

/* -------------------------------------------------------
    CLOCK
------------------------------------------------------- */
.clock-container {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    width: 100%;
    justify-content: flex-end;
}

.clock-container > .clock-text {
    /* color: var(--font-navbar); */
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: var(--space-2);
}

/* -------------------------------------------------------
    PILLS
------------------------------------------------------- */
.skill-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

/* outline chip — element-agnostic (works on li/a/span/button) */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35em 0.9em;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;

    color: var(--text-muted);
    background: hsla(0, 0%, 0%, 0);
    border: 1px solid hsla(0, 0%, 100%, 0.06);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.02);

    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
    user-select: none;
    cursor: default;
}

/* make links and buttons visibly interactive */
a.chip,
button.chip {
    cursor: pointer;
}

/* hover / active */
.chip:hover,
.chip:active, 
.chip:focus {
    background-color: hsla(0, 0%, 100%, 0.04);
    /* subtle fill on hover */
    color: var(--text);
    border-color: hsla(0, 0%, 100%, 0.12);
}

/* small icon support inside chip */
.chip svg {
    width: 0.95em;
    height: 0.95em;
    flex: 0 0 auto;
    opacity: 0.8;
}

/* size variants */
.chip--sm {
    font-size: 0.85rem;
    padding: 0.25em 0.6em;
}

.chip--lg {
    font-size: 1.05rem;
    padding: 0.45em 1.1em;
}

/* stacking behaviour for very narrow screens */
@media (max-width: 420px) {
    .skill-chips {
        gap: 0.45rem;
    }

    .chip {
        padding: 0.28em 0.7em;
        font-size: 0.9rem;
    }
}


/* -------------------------------------------------------
    EDUCATION
------------------------------------------------------- */
.education-list {
    margin: var(--space-3) 0;
    display: block;
}

.edu-entry {
    display: grid;
    grid-template-columns: minmax(80px, 140px) 1fr;
    gap: var(--space-3);
    align-items: start;
    padding: calc(var(--space-3) + 2px);
    border: 1px solid hsla(0, 0%, 100%, 0.06);
    border-radius: 12px;
    background: hsla(0, 0%, 100%, 0.02);
    box-shadow: var(--shadow-s-idle);
    margin-bottom: var(--space-3);
    transition:
            background-color 0.15s ease,
            box-shadow 0.15s ease;
}

.edu-date {
    font-family: var(--font-navbar);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.85;
    align-self: start;
    padding-top: 2px;
}

.edu-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.edu-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
}

.edu-logo {
    width: 1.4em;
    height: 1.4em;
    object-fit: contain;
    border-radius: 8px;
    flex: 0 0 1.4em;
}

.edu-institution {
    font-family: var(--font-heading);
    font-weight: 300;
    line-height: 1;
    color: var(--text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap:0.35em;
    padding: 2px 6px;
    border-radius: 6px;
    transition:
            background-color 0.15s ease,
            box-shadow 0.15s ease;
}

.edu-external {
    width: 0.9em;
    height: 0.9em;
    flex: 0 0 auto;
    opacity: 0.6;
}

.edu-institution:hover,
.edu-institution:focus {
    background: var(--hover-bg);
    outline: none;
}

.edu-degree {
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--text);
    opacity: 0.95;
}

.edu-body {
    font-family: var(--font-body);
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.45;
    padding-top: var(--space-1);
    margin-bottom: var(--space-2);
}

/* visual separator between entries (acts like "date line between body and whatnot") */
.edu-entry+.edu-entry {
    border-top: 1px solid var(--border);
}

/* small-screen stacking — "sackable" behaviour: date goes on top */
@media (max-width: 620px) {
    .edu-entry {
        grid-template-columns: 1fr;
    }

    .edu-date {
        order: -1;
        margin-bottom: var(--space-2);
    }

    .edu-header {
        gap: var(--space-2);
    }
}

/* optional: make the whole entry interactive if you want */
.edu-entry:hover {
    background: hsla(0, 0%, 100%, 0.06);
    box-shadow: var(--shadow-m-idle);
}







.contact-card {
    --card-bg: hsla(0, 0%, 100%, 0.02);
    --card-border: hsla(0, 0%, 100%, 0.06);
    --divider: hsla(0, 0%, 100%, 0.04);

    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-s-idle);
}

.contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-list li {
    display: flex;
    flex-direction: column;
}

.contact-list li+li {
    border-top: 1px solid var(--divider);
}

.contact-list li .contact-item+.contact-item {
    border-top: 1px solid var(--divider);
}

.contact-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);

    padding: 14px 16px;

    text-decoration: none;
    color: inherit;

    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}

.contact-item:hover {
    background: hsla(0, 0%, 100%, 0.06);
}

.contact-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.contact-logo {
    width: 2.2em;
    height: 2.2em;
    flex: 0 0 2.2em;
    border-radius: 8px;
    object-fit: contain;
}

.contact-meta {
    min-width: 0;
}

.contact-type {
    font-size: 0.8rem;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    font-weight: 450;
}

.contact-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.contact-username {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.contact-action {
    width: 1.1em;
    height: 1.1em;
    color: var(--text-muted);
    flex: 0 0 auto;
}

.contact-item:hover .contact-action {
    color: var(--text);
}

@media (max-width: 520px) {
    .contact-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .contact-right {
        align-self: flex-end;
    }

    .contact-list li .contact-item+.contact-item {
        border-top: 1px solid var(--divider);
    }
}





/* === EXPERIENCE CARD (like contact-card) === */
.experience-card {
    --card-bg: hsla(0, 0%, 100%, 0.02);
    --card-border: hsla(0, 0%, 100%, 0.06);
    --divider: hsla(0, 0%, 100%, 0.04);

    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-s-idle);
    padding: 0px;
    min-height: unset !important;
}

.experience-list {
    display: flex;
    flex-direction: column;
}

/* === ENTRY STACKING === */
.exp-entry {
    display: grid;
    grid-template-columns: minmax(80px, 140px) 1fr;
    gap: var(--space-3);
    padding: 16px;
    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease,
        max-height 0.28s ease,
        opacity 0.22s ease,
        padding 0.22s ease;
    overflow: hidden;
}

.exp-entry.is-hidden {
	max-height: 0;
	opacity: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-top: none;
	pointer-events: none;
}

/* ensure visible entries have room */
.exp-entry:not(.is-hidden) {
	max-height: 800px; /* safely larger than any entry */
}

.exp-entry+.exp-entry {
    border-top: 1px solid var(--divider);
}

/* === DATE (edu-style) === */
.exp-date {
    font-family: var(--font-navbar);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.85;
    padding-top: 2px;
}

/* === CONTENT === */
.exp-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* === HEADER (logo + institution) === */
.exp-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
}

.exp-logo {
    width: 1.4em;
    height: 1.4em;
    flex: 0 0 1.4em;
    object-fit: contain;
    border-radius: 8px;
}

.exp-institution {
    font-family: var(--font-heading);
    font-weight: 300;
    line-height: 1;
    color: var(--text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 2px 6px;
    border-radius: 6px;
    transition: var(--transition-btn);
}

/* === ROLE === */
.exp-role {
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--text);
    opacity: 0.95;
}

/* === BODY === */
.exp-body {
    font-family: var(--font-body);
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.45;
    padding-top: var(--space-1);
    margin-bottom: var(--space-2);
}

/* === HOVER (subtle, not loud) === */
.exp-entry:hover {
    background: hsla(0, 0%, 100%, 0.06);
}

/* === MOBILE (same as edu) === */
@media (max-width: 620px) {
    .exp-entry {
        grid-template-columns: 1fr;
    }

    .exp-date {
        order: -1;
        margin-bottom: var(--space-2);
    }
}

.experience-selector {
    display: flex;
    gap: 6px;
    padding: 10px;
    border-bottom: 1px solid var(--divider);
}

.exp-filter {
    font-family: var(--font-navbar);
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-btn);
}

.exp-filter:hover {
    color: var(--text);
}

.exp-filter.active {
    color: var(--text);
    border-color: var(--card-border);
    background: hsla(0, 0%, 100%, 0.04);
}