/* Base: CSS Reset + Variables + Typography */

/* 1) Modern CSS reset (minimal) */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html:focus-within {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    text-rendering: optimizeLegibility;
    line-height: 1.6;
}

html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

footer.site {
    flex-shrink: 0;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

/* 2) Theme variables */
:root {
    /* Dark theme (default) – refreshing teal + soft violet accent pair */
    --bg: #06141a;
    /* deep cyan-slate */
    --bg-soft: #0c2129;
    /* nav / panels */
    --card: #102a34;
    /* card base slightly lighter */
    --text: #f2f9fb;
    /* near-white with hint of blue */
    --muted: #87a2ad;
    /* cool muted */
    --accent: #34d3b4;
    /* mint/teal glow */
    --accent-2: #8b6ff8;
    /* soft violet */
    --border: #1b3943;
    /* subtle cool border */
    --error: #ef4444;

    --radius: 12px;
    --shadow: 0 10px 28px -6px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

/* Light theme – derived from dark palette (teal + violet) with airy neutrals */
:root.light {
    --bg: #f2f6f7;
    /* cool airy base echoing dark cyan tint */
    --bg-soft: #ffffff;
    /* elevated surfaces */
    --card: #ffffff;
    /* cards */
    --text: #111a1f;
    /* deep ink for strong contrast */
    --muted: #56656c;
    /* desaturated slate (from dark muted) */
    --accent: #23c9b0;
    /* lifted teal (lighter than dark #34d3b4) */
    --accent-2: #755ef3;
    /* softened violet (lighter than dark #8b6ff8) */
    --border: #c7d5d9;
    /* cool subtle border */
    --error: #dc2626;
    --shadow: 0 6px 28px -12px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .05) inset;
}

/* 3) Base elements */
body {
    position: relative;
    background:
        radial-gradient(at 18% 22%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
        radial-gradient(at 82% 78%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 65%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, #000 12%) 0%, var(--bg) 55%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* (Removed earlier duplicate light body background block to consolidate below) */

/* Mobile: avoid potential repaint cost of fixed backgrounds */
@media (max-width: 780px) {
    body {
        background-attachment: scroll;
    }
}

/* Performance mode: simplify background for less GPU cost */
html.perf-fast body {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, #000 8%) 0%, var(--bg) 60%),
        var(--bg);
}

/* Fast, aesthetic theme switch helper (applied briefly via JS) */
html.theme-switching *:not(html):not(body)::before,
html.theme-switching *:not(html):not(body)::after,
html.theme-switching *:not(html):not(body) {
    transition: background-color .22s ease, background .28s ease, color .18s ease, border-color .22s ease, box-shadow .28s ease, fill .22s ease, stroke .22s ease, filter .28s ease;
}

html.theme-switching body {
    transition: background .35s ease;
}

/* Overlay that captures the previous theme and fades out quickly */
#theme-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    animation: themeFadeOut .24s ease forwards;
    background: var(--bg);
    /* actual computed gradient applied inline via JS when possible */
}

@keyframes themeFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #theme-transition-overlay {
        animation-duration: .01ms;
    }
}

/* Subtle noise / texture overlay (replaces harsh diagonal lines) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.12'/></svg>");
    background-size: 260px 260px;
    mix-blend-mode: overlay;
    opacity: .55;
    animation: noiseShift 18s linear infinite alternate;
}

/* Disable moving noise texture when sheet is open to avoid perceived blur */
body.sheet-open::before {
    opacity: .15;
    animation: none;
}

@keyframes noiseShift {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-60px, 40px, 0);
    }
}

:root.light body {
    background:
        radial-gradient(at 20% 24%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 58%),
        radial-gradient(at 78% 76%, color-mix(in srgb, var(--accent-2) 18%, transparent) 0%, transparent 62%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, #ffffff 8%) 0%, var(--bg) 55%),
        var(--bg);
}

:root.light body::before {
    opacity: .35;
    mix-blend-mode: multiply;
}

.container {
    width: min(1100px, 92%);
    margin: 0 auto;
}

.section {
    padding: 3rem 0;
}

.section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

h1 {
    font-size: clamp(1.8rem, 2vw + 1rem, 2.6rem);
    line-height: 1.2;
    margin-bottom: 1rem;
}

h2 {
    font-size: clamp(1.4rem, 1.5vw + 0.8rem, 2rem);
    margin-bottom: 0.75rem;
}

h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

p.lead {
    font-size: 1.1rem;
    color: var(--muted);
    max-width: 60ch;
}

a {
    color: var(--accent);
    text-decoration: none;
    position: relative;
    transition: color .3s;
}

a:hover {
    text-decoration: none;
    color: var(--accent-2);
}

a:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
}

/* Global interactive hover/active transitions */
button,
.btn,
a,
input,
textarea,
.chip,
.badge {
    transition: background .35s, color .35s, border-color .35s, box-shadow .35s, transform .35s;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
}

button:hover:not(:disabled),
.btn:hover,
.btn:focus-visible {
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .45);
}

ul.list {
    margin-left: 1rem;
}

/* === Anti-copy (user request) ============================================ */
/* Adds a class to <html> via JS so this can be toggled/removed easily later. */
html.nocopy,
html.nocopy body,
html.nocopy *:not(input):not(textarea) {
    -webkit-user-select: none !important;
    user-select: none !important;
}

html.nocopy img,
html.nocopy svg,
html.nocopy picture {
    -webkit-user-drag: none;
    pointer-events: none;
    /* prevents drag/save interactions */
}

html.nocopy video,
html.nocopy canvas {
    -webkit-user-drag: none;
    pointer-events: none;
}

html.nocopy *,
html.nocopy *::before,
html.nocopy *::after {
    -webkit-touch-callout: none;
}

/* Preserve form control usability */
html.nocopy input,
html.nocopy textarea,
html.nocopy button,
html.nocopy select {
    pointer-events: auto;
    user-select: text;
}

/* ===================================================================== */
/* Performance Enhancements                                              */
/* --------------------------------------------------------------------- */
/* .perf-fast class placed on <html> (auto for lower-end devices) trims  */
/* heavy animations, long transitions, large blurs & glow shadows for a  */
/* snappier feel without fully stripping visual design.                  */
/* ===================================================================== */
html.perf-fast * {
    transition-duration: .25s !important;
}

html.perf-fast .cta {
    animation: none !important;
}

html.perf-fast .hero__visual:hover::before {
    animation: none !important;
}

html.perf-fast .hh-visual__frame:hover img {
    transform: none !important;
}

html.perf-fast .feature-card:hover,
html.perf-fast .strength:hover,
html.perf-fast .projects-page .card--project:hover,
html.perf-fast .skill-group:hover,
html.perf-fast .timeline li:hover,
html.perf-fast .contact-card:hover {
    transform: none !important;
}

html.perf-fast .feature-card,
html.perf-fast .strength,
html.perf-fast .projects-page .card--project,
html.perf-fast .skill-group,
html.perf-fast .timeline li,
html.perf-fast .contact-card {
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .45) !important;
}

html.perf-fast .nav__links a.active,
html.perf-fast .nav__links a:hover {
    transform: none !important;
}

html.perf-fast .hh-icon,
html.perf-fast .hh-icon:hover {
    transform: none !important;
}

html.perf-fast .hero__visual::before {
    animation: none !important;
}

html.perf-fast .ph-decor {
    animation: none !important;
}

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

    /* Honor user setting by also disabling hover transforms globally */
    html:not(.perf-fast) .feature-card:hover,
    html:not(.perf-fast) .strength:hover,
    html:not(.perf-fast) .projects-page .card--project:hover,
    html:not(.perf-fast) .skill-group:hover,
    html:not(.perf-fast) .timeline li:hover,
    html:not(.perf-fast) .contact-card:hover {
        transform: none;
    }
}

/* ===================================================================== */
/* Ultra Fast Page Switch Cross-Fade (SPA-lite)                          */
/* Provides a 120–160ms opacity blend to prevent perceived jitter when   */
/* replacing <main>. Only opacity (and tiny translate) animates for GPU  */
/* friendliness. Disabled when prefers-reduced-motion is set.            */
/* ===================================================================== */
html.fast-nav-switching body {
    cursor: progress;
}

main.fastnav-outgoing,
main.fastnav-incoming {
    will-change: opacity, transform;
}

main.fastnav-outgoing {
    position: relative;
    z-index: 0;
}

main.fastnav-incoming {
    /* Keep in normal flow so body flex layout retains height, avoiding footer collapse */
    position: relative;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
}

html.fast-nav-switching main.fastnav-outgoing {
    opacity: 0;
    transition: opacity .14s ease;
}

html.fast-nav-switching main.fastnav-incoming {
    transition: opacity .16s ease .04s, transform .18s ease;
    transform: translateY(4px);
}

html.fast-nav-switching main.fastnav-incoming.fastnav-show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

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

    html.fast-nav-switching main.fastnav-incoming,
    html.fast-nav-switching main.fastnav-outgoing {
        transition: none !important;
        transform: none !important;
    }
}