@font-face {
    font-family: "Oxanium";
    src: url("../fonts/Oxanium.ttf") format("truetype");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

.centered-div h1,
.centered-div h2,
.centered-div h3,
.centered-div h4,
.centered-div summary,
.centered-div button {
    font-family: "Oxanium", sans-serif;
}

.centered-div summary {
    font-size: 1.125rem;
}

.centered-div button {
    font-size: 1rem;
}

.primary-text {
    /* color: #ed64f5; */
    color: #00fbac;
}

.secondary-text {
    /* color: #ed64f5; */
    color: #00c98a;
}

.backside {
    background-color: #222323;
    /* background-color: #43266e; */
    color: #ffffff;
}

html {
    min-height: 100%;
    background: #222323 url("../images/page-bg-cyberpunk.png") no-repeat fixed left top / cover;
}

body {
    --page-gap: clamp(12px, 2vh, 32px);
    box-sizing: border-box;
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--page-gap) max(12px, env(safe-area-inset-right))
             var(--page-gap) max(12px, env(safe-area-inset-left));
}

.centered-div {
            box-sizing: border-box;
            min-height: 0;
            max-height: calc(100vh - 2 * var(--page-gap));
            max-height: calc(100dvh - 2 * var(--page-gap));
            flex-shrink: 0;
            overflow-x: hidden;
            overflow-y: auto;
            overflow-wrap: anywhere;
            width: min(76rem, 100%);
            height: calc(100vh - 2 * var(--page-gap));
            height: calc(100dvh - 2 * var(--page-gap));
            padding: clamp(16px, 3vw, 32px);
            overscroll-behavior-y: contain;
            scroll-padding-block: 24px;
            background-color: #222323;
            /* The border style */
            border: 2px solid #00fbac;
            /* Optional: make it look nicer */
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            text-align: center;
            font-family: "Oxanium", sans-serif;
            font-size: clamp(16px, 1.1vw, 18px);
            line-height: 1.5;
            color: #ffffff
        }

.centered-div > header,
.panel-scroll > section {
            width: 100%;
            max-width: 45rem;
            margin-left: auto;
            margin-right: auto;
            box-sizing: border-box;
        }

.centered-div details ul {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            margin: 1em auto;
            padding-left: 1.5em;
            text-align: justify;
        }

.centered-div details li {
            padding-left: 0.25em;
            margin-bottom: 0.5em;
        }

.centered-div details article {
            width: 100%;
            max-width: 100%;
            margin: 1.5em auto;
            text-align: left;
            box-sizing: border-box;
            padding-left: 0;
        }

.centered-div details article ul {
            width: 100%;
            padding-left: 1.5em;
        }

/* Keep native details behavior and keyboard access while animating supported browsers. */
.centered-div details summary {
    cursor: pointer;
    list-style: none;
}

.centered-div details summary::-webkit-details-marker {
    display: none;
}

.centered-div details summary::before {
    content: "▶";
    display: inline-block;
    margin-right: 0.5em;
    font-size: 0.75em;
    transition: transform 220ms ease;
}

.centered-div details[open] summary::before {
    transform: rotate(90deg);
}

.centered-div details summary:focus-visible {
    outline: 2px solid #00fbac;
    outline-offset: 4px;
}

@supports (interpolate-size: allow-keywords) {
    .centered-div details {
        interpolate-size: allow-keywords;
    }

    .centered-div details::details-content {
        height: 0;
        opacity: 0;
        overflow: clip;
        transition: height 280ms ease, opacity 200ms ease,
                    content-visibility 280ms allow-discrete;
    }

    .centered-div details[open]::details-content {
        height: auto;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .centered-div details summary::before,
    .centered-div details::details-content {
        transition: none;
    }
}
/* Reveal the panel outward from its center without squeezing the contents. */
.centered-div {
    animation: panel-reveal 1500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.centered-div > header,
.panel-scroll > section {
    animation: panel-content-reveal 700ms ease 650ms both;
}

@keyframes panel-reveal {
    from {
        clip-path: inset(49.5% 49.5% 49.5% 49.5% round 8px);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    to {
        clip-path: inset(0 0 0 0 round 8px);
        opacity: 1;
    }
}

@keyframes panel-content-reveal {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .centered-div,
    .centered-div > header,
    .panel-scroll > section {
        animation: none;
    }
}
/* Pixel-art ambience stays behind the portfolio and never captures clicks. */
body { isolation: isolate; }

.cyberpunk-ambience {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    image-rendering: pixelated;
}

@media (prefers-reduced-motion: reduce) {
    .cyberpunk-ambience { display: none; }
}

/* Fluid typography and touch targets across device sizes and aspect ratios. */
.centered-div h1 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.2;
}

.centered-div h2 {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    line-height: 1.3;
}

.centered-div h3 {
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.4;
}

.centered-div summary,
.centered-div button {
    box-sizing: border-box;
    min-height: 44px;
    padding: 8px 12px;
    max-width: 100%;
}

.contact-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.contact-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

@media (max-width: 600px) {
    .centered-div details ul {
        text-align: left;
        padding-left: 1.25em;
    }

    .centered-div details article ul {
        padding-left: 1.25em;
    }

    .centered-div details li { padding-left: 0; }
    .contact-links { flex-direction: column; gap: 0; }
    .contact-separator { display: none; }
}

@media (max-height: 500px) {
    body { --page-gap: 8px; }
    .centered-div { padding-block: 12px; }
    .centered-div h1 { margin-block: 0.4em; }
    .centered-div h2 { margin-block: 0.6em; }
}
/* Cyberpunk controls: use the panel's existing charcoal and mint palette. */
.centered-div .download-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid #00fbac;
    border-radius: 4px;
    background: #222323;
    color: #00fbac;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 251, 172, 0.08);
    transition: transform 160ms ease, box-shadow 220ms ease,
                background-color 220ms ease, color 220ms ease;
}

/* Preserve the JavaScript-enhanced download link's hidden fallback state. */
.centered-div .download-button[hidden] { display: none; }

.centered-div .download-button::before {
    content: "↓";
    transition: transform 180ms ease;
}

.contact-links a {
    padding: 4px 8px;
    border-radius: 3px;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: transform 160ms ease, color 180ms ease,
                text-shadow 180ms ease, background-color 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .centered-div .download-button:hover {
        transform: translateY(-2px);
        background-color: #15372d;
        box-shadow: 0 0 14px rgba(0, 251, 172, 0.2),
                    inset 0 0 12px rgba(0, 251, 172, 0.06);
    }

    .centered-div .download-button:hover::before {
        transform: translateY(2px);
    }

    .contact-links a:hover {
        transform: translateY(-1px);
        color: #a5ffdf;
        background-color: rgba(0, 251, 172, 0.06);
        text-shadow: 0 0 9px rgba(0, 251, 172, 0.45);
    }
}

.centered-div .download-button:active,
.contact-links a:active {
    transform: translateY(1px) scale(0.97);
    background-color: #174b3a;
    color: #ffffff;
}

.centered-div .download-button:focus-visible,
.contact-links a:focus-visible {
    outline: 2px solid #00fbac;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .centered-div .download-button,
    .centered-div .download-button::before,
    .contact-links a {
        transition: none;
    }

    .centered-div .download-button:hover,
    .centered-div .download-button:hover::before,
    .centered-div .download-button:active,
    .contact-links a:hover,
    .contact-links a:active {
        transform: none;
    }
}

.centered-div .control-glitch {
    animation: control-glitch 320ms steps(1, end);
}

@keyframes control-glitch {
    0%, 100% { transform: translate(0); text-shadow: none; }
    15% { transform: translate(-2px, 1px); text-shadow: 2px 0 #00fbac, -2px 0 #a786ff; }
    30% { transform: translate(2px, -1px); text-shadow: -2px 0 #63e8e0, 2px 0 #a786ff; }
    45% { transform: translate(-1px, 0); text-shadow: 1px 0 #00fbac; }
    60% { transform: translate(2px, 1px); text-shadow: -2px 0 #a786ff; }
    80% { transform: translate(-1px, -1px); text-shadow: 2px 0 #63e8e0; }
}

@media (prefers-reduced-motion: reduce) {
    .centered-div .control-glitch { animation: none; }
}

/* A quiet mint pulse on the name; no blinking or changes to text color. */
.centered-div h1.primary-text {
    animation: name-glow 10s ease-in-out 2s infinite;
}

@keyframes name-glow {
    0%, 72%, 88%, 100% { text-shadow: 0 0 0 transparent; }
    80% {
        text-shadow: 0 0 8px rgba(0, 251, 172, 0.4),
                     0 0 18px rgba(0, 251, 172, 0.16);
    }
}

@media (prefers-reduced-motion: reduce) {
    .centered-div h1.primary-text { animation: none; }
}

/* Keep the identity header fixed; only the content beneath it scrolls. */
.centered-div {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.identity-header {
    flex: 0 0 auto;
    padding-bottom: 12px;
}

.identity-header h1 { margin: 0.25em 0 0.6em; }
.identity-header h2 { margin: 0; }

.panel-scroll {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable both-edges;
    scroll-padding-block: 12px;
}

.panel-scroll:focus-visible {
    outline: 1px solid #00c98a;
    outline-offset: -1px;
}

@media (max-height: 500px) {
    .identity-header { padding-bottom: 8px; }
    .identity-header h1 { margin: 0 0 0.2em; font-size: 1.5rem; }
    .identity-header h2 { font-size: 1rem; }
}

/* Readable text rhythm without changing the neon/retro visual identity. */
.centered-div {
    font-weight: 400;
    line-height: 1.6;
}

.identity-header,
.panel-scroll > section {
    max-width: min(45rem, 68ch);
}

.panel-scroll p,
.centered-div details ul {
    text-align: left;
}

/* Short introductory lines and contact actions stay centered. */
.panel-scroll > section[aria-label="Introduction"] p,
.panel-scroll .contact-links,
.panel-scroll #about > p:last-child,
.panel-scroll #work > p,
.panel-scroll #contact > p {
    text-align: center;
}

.centered-div h1,
.centered-div h2,
.centered-div h3,
.centered-div h4 {
    font-weight: 600;
    text-align: center;
}

.centered-div strong { font-weight: 600; }

.panel-scroll > section {
    margin-bottom: 1.75rem;
}

.panel-scroll p {
    margin-block: 0.85em;
}

.centered-div details article {
    margin-block: 2rem;
}

.centered-div details article h3 {
    margin-bottom: 0.4em;
}

.centered-div details article h4 {
    margin-block: 1em 0.5em;
}

.centered-div details article > p {
    margin-top: 0;
    text-align: center;
    color: #d2e1dc;
}

.centered-div details li {
    margin-bottom: 0.75em;
}

@media (max-width: 600px) {
    .panel-scroll > section { margin-bottom: 1.5rem; }
    .centered-div details article { margin-block: 1.5rem; }
}

/* Quiet circuit corners occupy desktop gutters without competing with text. */
.centered-div {
    position: relative;
}

@media (min-width: 1100px) {
    .centered-div::before,
    .centered-div::after {
        content: "";
        position: absolute;
        top: 28px;
        bottom: 28px;
        width: 36px;
        pointer-events: none;
        opacity: 0.2;
        background:
            linear-gradient(#00fbac, #00fbac) left top / 28px 1px no-repeat,
            linear-gradient(#00fbac, #00fbac) left top / 1px 42px no-repeat,
            linear-gradient(#00fbac, #00fbac) left bottom / 28px 1px no-repeat,
            linear-gradient(#00fbac, #00fbac) left bottom / 1px 42px no-repeat,
            linear-gradient(#00fbac, #00fbac) left 48% / 1px 24px no-repeat,
            linear-gradient(#00fbac, #00fbac) left 48% / 9px 1px no-repeat;
    }

    .centered-div::before { left: 14px; }
    .centered-div::after { right: 14px; transform: scaleX(-1); }
}

.contact-links a[href^="mailto:"] {
    position: relative;
    min-width: 10ch;
    justify-content: center;
}

@media (hover: hover) and (pointer: fine) {
    .contact-links a[href^="mailto:"]:hover .email-label { opacity: 0; }
    .contact-links a[href^="mailto:"]:hover::after {
        content: ">Email_Me";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.contact-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-inline: 12px;
    font-size: 0.9rem;
    text-underline-offset: 4px;
}

.contact-shortcut:hover { color: #a5ffdf; }
.contact-shortcut:focus-visible { outline: 2px solid #00fbac; outline-offset: 2px; }

@media (max-height: 500px) {
    .identity-header {
        position: relative;
        padding-inline: 5rem;
        box-sizing: border-box;
    }
    .identity-header nav {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* Portfolio polish: restrained controls, separators and project metadata. */
.contact-links .contact-button {
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid #00fbac;
    border-radius: 4px;
    background-color: #222323;
    font-weight: 600;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px rgba(0, 251, 172, 0.08);
    transition: transform 160ms ease, box-shadow 220ms ease,
                background-color 220ms ease, color 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .contact-links .contact-button:hover {
        background-color: #15372d;
        box-shadow: 0 0 14px rgba(0, 251, 172, 0.2);
    }
}

.contact-links .contact-button:active { background-color: #174b3a; }

.centered-div details article + article {
    border-top: 1px solid rgba(0, 251, 172, 0.16);
    padding-top: 1.75rem;
}

.centered-div details > ul,
.centered-div details > article:first-of-type {
    margin-top: 1.25rem;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block: 8px 14px;
}

.project-tags > span {
    padding: 2px 8px;
    border: 1px solid rgba(0, 251, 172, 0.2);
    border-radius: 3px;
    background-color: rgba(0, 251, 172, 0.035);
    color: #b9dfd1;
    font-size: 0.8rem;
    line-height: 1.5;
}

.panel-scroll {
    scrollbar-width: thin;
    scrollbar-color: #00c98a #222323;
}

.panel-scroll::-webkit-scrollbar { width: 8px; }
.panel-scroll::-webkit-scrollbar-track { background-color: #222323; }
.panel-scroll::-webkit-scrollbar-thumb {
    background-color: #00c98a;
    border: 2px solid #222323;
    border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .contact-links .contact-button { transition: none; }
}

/* Scan-friendly skills and role hierarchy; shared content column stays intact. */
.skills-groups { margin-block: 1.5rem 2rem; text-align: left; }
.skill-group + .skill-group { margin-top: 1.5rem; }
.centered-div .skill-group h3 {
    text-align: left;
    font-size: 1rem;
    margin: 0 0 0.65rem;
}
.centered-div details .skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.centered-div details .skill-tags li {
    margin: 0;
    padding: 0.3rem 0.65rem;
    border: 1px solid rgba(0, 251, 172, 0.2);
    border-radius: 3px;
    background: rgba(0, 251, 172, 0.035);
    color: #d2e1dc;
    font-size: 0.9rem;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}
.centered-div details .skill-strengths { margin-block: 0.5rem 0; }
.centered-div .experience-role h3 {
    text-align: left;
    font-size: clamp(1.05rem, 2.5vw, 1.2rem);
    line-height: 1.45;
    margin-top: 0;
}
.centered-div details .experience-role .role-meta {
    text-align: left;
    font-size: 0.9rem;
    color: #c0cdc8;
    margin-bottom: 1.25rem;
}
.centered-div .experience-role h4 {
    text-align: left;
    font-size: 0.95rem;
    margin-top: 1.5rem;
}
.centered-div details .experience-role ul { margin-block: 0.75rem 1.5rem; }
.centered-div details .experience-role li { margin-bottom: 0.85rem; }
@media (max-width: 600px) {
    .skill-group + .skill-group { margin-top: 1.25rem; }
    .centered-div details .skill-tags { gap: 0.4rem; }
}

/* Brighter labels and softer descriptions retain high contrast on charcoal. */
.panel-scroll p,
.centered-div details li {
    color: #d2e1dc;
}
.centered-div .content-label {
    color: #f2fff9;
    font-weight: 600;
}

.motion-toggle {
    font: inherit;
    font-size: 0.8rem;
    color: #b9dfd1;
    border: 1px solid rgba(0, 251, 172, 0.3);
    border-radius: 3px;
    background: #222323;
    padding: 5px 9px;
    min-height: 44px;
    cursor: pointer;
}
.motion-toggle:hover { border-color: #00fbac; color: #f2fff9; }
.motion-toggle:focus-visible { outline: 2px solid #00fbac; outline-offset: 3px; }
.motion-toggle:disabled { cursor: default; }
.motion-paused .centered-div,
.motion-paused .centered-div *,
.motion-paused .centered-div *::before,
.motion-paused .centered-div *::after { animation: none !important; transition: none !important; }
.motion-paused .centered-div { clip-path: none; }
.motion-paused .panel-scroll { scroll-behavior: auto; }
@media (max-height: 500px) {
    .identity-header nav { display: flex; flex-direction: column; }
    .motion-toggle { min-height: 32px; }
}

/* Quiet, always-reachable animation preference at the panel's bottom edge. */
.panel-controls {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}
.panel-controls .motion-toggle {
    border-color: transparent;
    background: transparent;
    color: #b2c3bb;
    font-size: 0.75rem;
    font-weight: 400;
    padding: 4px 10px;
    min-height: 44px;
}
.panel-controls .motion-toggle:hover {
    color: #d2e1dc;
    border-color: rgba(0, 251, 172, 0.15);
}
.panel-controls .motion-toggle:disabled { color: #b2c3bb; }
@media (max-height: 500px) {
    .panel-controls { padding-top: 0; }
}

/* Animation preferences only restart ongoing effects, not the entrance reveal. */
.entrance-complete .centered-div,
.entrance-complete .centered-div > header,
.entrance-complete .panel-scroll > section {
    animation: none;
    clip-path: none;
    opacity: 1;
}

/* Compact email control with a 44px accessible touch target. */
.contact-links .contact-button {
    box-sizing: border-box;
    min-height: 44px;
    padding: 6px 12px;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Balanced About copy within the centered content column. */
.panel-scroll #about > p:first-of-type {
    text-align: justify;
    text-align-last: center;
}
@media (max-width: 600px) {
    .panel-scroll #about > p:first-of-type {
        text-align: center;
        text-align-last: auto;
        text-wrap: pretty;
    }
}