/*
 * app.css — single bundled stylesheet (ITCSS order preserved as sections).
 *
 * Merged from the former assets/styles/{abstracts,base,layout,components,pages}/*.css
 * into ONE file: on throttled mobile, 15 separate <link>s cost ~0.8s of FCP
 * (measured Perf 90 -> 97, FCP 2.8s -> 2.0s). AssetMapper does not concatenate
 * and CSS @import creates a request waterfall, so the files live here as sections.
 * Keep the section order below — it *is* the cascade/specificity layering.
 */


/* ===================================================================
   LAYER: abstracts/variables
   =================================================================== */
:root {
    /* Colors */
    --color-bg: #07090d;
    --color-surface: #0d1017;
    --color-accent: #22d3ee;
    --color-accent-light: #67e8f9;
    --color-accent-solid: #0891b2;
    --color-accent-2: #6366f1;
    --color-accent-soft: rgba(34, 211, 238, 0.13);
    --color-accent-glow: rgba(34, 211, 238, 0.22);
    --gradient-accent: linear-gradient(115deg, #22d3ee 0%, #6366f1 100%);
    --color-text: #e6edf5;
    --color-text-muted: rgba(230, 237, 245, 0.62);
    --color-text-faint: rgba(230, 237, 245, 0.5);
    --color-text-dim: rgba(230, 237, 245, 0.55);
    --color-border: rgba(120, 160, 200, 0.12);
    --color-border-hover: rgba(34, 211, 238, 0.45);
    --color-surface-alt: rgba(120, 160, 200, 0.06);
    --color-navbar-bg: rgba(7, 9, 13, 0.85);
    --color-navbar-mobile-bg: rgba(7, 9, 13, 0.97);

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;

    /* Radius */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-pill: 999px;

    /* Layout spacing (mobile-first) */
    --nav-side: 20px;
    --section-pad: 64px 20px;
    --hero-pad: 64px 20px 56px;
    --nav-pad: 16px 20px;
    --cta-pad: 9px 14px;
    --two-col-grid: 1fr;

    /* Motion (Phase 0 tokens — every animation consumes these for a coherent feel) */
    --dur-fast: 0.18s;
    --dur-base: 0.4s;
    --dur-slow: 0.8s;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
    --reveal-shift: 28px;
}

:root[data-theme='light'] {
    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-accent: #0e7490;
    --color-accent-light: #0891b2;
    --color-accent-solid: #0e7490;
    --color-accent-2: #4f46e5;
    --color-accent-soft: rgba(14, 116, 144, 0.12);
    --color-accent-glow: rgba(14, 116, 144, 0.2);
    --gradient-accent: linear-gradient(115deg, #0e7490 0%, #4f46e5 100%);
    --color-text: #0f172a;
    --color-text-muted: rgba(15, 23, 42, 0.75);
    --color-text-faint: rgba(15, 23, 42, 0.6);
    --color-text-dim: rgba(15, 23, 42, 0.68);
    --color-border: rgba(15, 23, 42, 0.16);
    --color-border-hover: rgba(37, 99, 235, 0.45);
    --color-surface-alt: rgba(15, 23, 42, 0.04);
    --color-navbar-bg: rgba(248, 250, 252, 0.86);
    --color-navbar-mobile-bg: rgba(248, 250, 252, 0.96);
}

@media (min-width: 860px) {
    :root {
        --nav-side: 80px;
        --section-pad: 100px 80px;
        --hero-pad: 160px 80px 120px;
        --nav-pad: 20px 80px;
        --cta-pad: 9px 18px;
        --two-col-grid: 1fr 1fr;
    }
}


/* ===================================================================
   LAYER: base/reset
   =================================================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

img {
    max-width: 100%;
    display: block;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

ul {
    list-style: none;
}

:focus-visible {
    outline: 2px solid var(--color-accent-light);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}


/* ===================================================================
   LAYER: base/fonts
   =================================================================== */
/*
 * Fonts are Latin-subset variable woff2 (see docs/plan-awwwards.md journal).
 * font-display: optional — the font is used only if it is ready within the
 * ~100ms block window (the preload in base.html.twig lets fast connections win
 * that race). It never swaps in *after* first paint, so a late-arriving webfont
 * can never reflow the text → zero font-driven CLS (the Lighthouse gate failure).
 */
@font-face {
    font-family: 'Inter';
    src: url("../fonts/inter/Inter-Variable-2MRFtRX.woff2") format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: optional;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url("../fonts/jetbrains-mono/JetBrainsMono-VariableFont_wght-3o0rHCS.woff2") format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: optional;
}

/* Display face for titles (deep-tech direction) — drives the LCP hero title. */
@font-face {
    font-family: 'Space Grotesk';
    src: url("../fonts/space-grotesk/SpaceGrotesk-Variable-hNoM6xX.woff2") format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: optional;
}


/* ===================================================================
   LAYER: base/typography
   =================================================================== */
body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    overflow-x: hidden;
    min-height: 100vh;
}

::selection {
    background: rgba(59, 130, 246, 0.35);
}

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

a:hover {
    color: var(--color-accent-light);
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--color-accent);
    text-transform: uppercase;
}

.section__title {
    font-family: var(--font-display);
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.section__lead {
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.75;
}


/* ===================================================================
   LAYER: layout/section
   =================================================================== */
.section {
    padding: var(--section-pad);
}

.section--bordered {
    border-bottom: 1px solid var(--color-border);
}

.section__header {
    margin-bottom: 32px;
}

.section__eyebrow {
    display: block;
    margin-bottom: 16px;
}

.section__header .section__title {
    margin: 0 0 14px;
}

.section__grid {
    display: grid;
    gap: 20px;
}

.section__grid--two {
    grid-template-columns: var(--two-col-grid);
    gap: 48px;
}

.section__grid--auto-220 {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.section__grid--auto-240 {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.section__grid--auto-300 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}


/* ===================================================================
   LAYER: layout/navbar
   =================================================================== */
.navbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: var(--nav-pad);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-navbar-bg);
    backdrop-filter: blur(10px);
}

.navbar__brand {
    font-family: var(--font-mono);
    color: var(--color-text);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar .button--nav {
    display: none;
}

.navbar__links {
    display: flex;
    gap: 28px;
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
}

.navbar__link {
    color: var(--color-text-muted);
    font-size: 14px;
    white-space: nowrap;
}

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

.navbar__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
}

.navbar__theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    background: transparent;
    font-size: 18px;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
    flex-shrink: 0;
}

.navbar__theme-toggle:hover {
    color: var(--color-accent-light);
    border-color: var(--color-border-hover);
}

.navbar__theme-toggle[aria-pressed='true'] {
    background: var(--color-accent-soft);
    border-color: var(--color-border-hover);
}

.navbar__theme-icon {
    line-height: 1;
}

.navbar__toggle-bars {
    position: relative;
    width: 18px;
    height: 2px;
    background: currentColor;
    display: block;
}

.navbar__toggle-bars::before,
.navbar__toggle-bars::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
}

.navbar__toggle-bars::before {
    top: -6px;
}

.navbar__toggle-bars::after {
    top: 6px;
}

/* Desktop nav visible from tablet up; mobile menu below */
.navbar__links--desktop {
    display: none;
}

.navbar__toggle {
    display: inline-flex;
    flex-shrink: 0;
}

.navbar__mobile {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 8px var(--nav-side) 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-navbar-mobile-bg);
    position: sticky;
    top: 0;
    z-index: 19;
}

.navbar__mobile[data-open='true'] {
    display: flex;
}

.navbar__mobile-link {
    color: var(--color-text-muted);
    font-size: 15px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}

.navbar__mobile-link:hover {
    color: var(--color-text);
}

@media (min-width: 860px) {
    .navbar .button--nav {
        display: inline-flex;
    }

    .navbar__links--desktop {
        display: flex;
    }

    .navbar__toggle {
        display: none;
    }

    .navbar__mobile,
    .navbar__mobile[data-open='true'] {
        display: none;
    }
}


/* ===================================================================
   LAYER: layout/footer
   =================================================================== */
.footer {
    padding: 24px var(--nav-side);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--color-text-faint);
    font-size: 12.5px;
}


/* ===================================================================
   LAYER: components/button
   =================================================================== */
.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 26px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 15px;
    border: 1px solid transparent;
    /* --mgx/--mgy: magnetic offset (JS); --btn-lift: hover lift. They compose. */
    transform: translate(var(--mgx, 0px), calc(var(--mgy, 0px) + var(--btn-lift, 0px)));
    transition: transform var(--dur-base) var(--ease-out-expo),
        box-shadow var(--dur-base) var(--ease-out-expo),
        border-color var(--dur-base) var(--ease-out-expo);
    white-space: nowrap;
}

.button:hover {
    --btn-lift: -2px;
}

.button--primary {
    background: var(--color-accent-solid);
    color: #fff;
}

.button--primary:hover {
    color: #fff;
    box-shadow: 0 8px 24px -6px var(--color-accent-glow),
        0 0 0 1px var(--color-accent-light) inset;
}

.button--secondary,
.button--nav {
    border-color: var(--color-border);
    color: var(--color-text);
}

.button--secondary:hover {
    color: var(--color-text);
    border-color: var(--color-border-hover);
    box-shadow: 0 0 24px -8px var(--color-accent-glow);
}

.button--nav {
    padding: var(--cta-pad);
    border-color: var(--color-border);
    color: var(--color-text);
    font-size: 13.5px;
    font-weight: 500;
    flex-shrink: 0;
}

.button--nav:hover {
    color: var(--color-text);
    border-color: var(--color-border-hover);
    box-shadow: 0 0 20px -10px var(--color-accent-glow);
}

/* ===================================================================
   Custom cursor (Phase 3) — desktop enhancement, native cursor stays if
   JS is off (the .has-custom-cursor class is only added by cursor_controller).
   =================================================================== */
.cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 1.5px solid var(--color-accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0) scale(var(--cscale, 1));
    transition: opacity var(--dur-base) ease,
        transform var(--dur-fast) var(--ease-out-expo),
        background-color var(--dur-fast) ease,
        border-color var(--dur-fast) ease;
    mix-blend-mode: difference;
}

.cursor__dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    background: var(--color-accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transform: translate3d(var(--dx, -100px), var(--dy, -100px), 0);
    transition: opacity var(--dur-base) ease;
}

.has-custom-cursor .cursor,
.has-custom-cursor .cursor__dot {
    opacity: 1;
}

/* Enlarged ring + hidden dot when hovering an interactive element. */
.has-custom-cursor .cursor.is-hover {
    --cscale: 1.7;
    background-color: var(--color-accent-soft);
}

.has-custom-cursor .cursor__dot.is-hover {
    opacity: 0;
}

/* Hide the native cursor only while the custom one is active. */
.has-custom-cursor,
.has-custom-cursor a,
.has-custom-cursor button,
.has-custom-cursor [role='button'],
.has-custom-cursor label {
    cursor: none;
}


/* ===================================================================
   LAYER: components/badge
   =================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 11.5px;
    color: var(--color-text-muted);
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    font-size: 12.5px;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.chip--active {
    border-color: var(--color-accent);
    color: var(--color-accent);
}


/* ===================================================================
   LAYER: components/card
   =================================================================== */
.card {
    padding: 22px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.35s ease, background 0.35s ease;
}

.card--hover:hover,
.card--hover:focus-within {
    transform: translateY(-4px);
    border-color: var(--color-border-hover);
}

.card--flat {
    background: transparent;
    padding: 24px;
}

.card--media {
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-xl);
}

.card__title {
    color: var(--color-text);
    font-weight: 600;
    font-size: 15.5px;
    margin-bottom: 6px;
}

.card__desc {
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* About card */
.about__intro .section__title {
    margin: 0 0 14px;
}

.about__intro p {
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.75;
    margin: 0 0 18px;
}

.about__intro p:last-child {
    margin-bottom: 0;
}

.about__cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Skills */
.skill-card__label {
    font-family: var(--font-mono);
    color: var(--color-accent);
    font-size: 12px;
    margin-bottom: 14px;
    letter-spacing: 0.04em;
}

.skill-card__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skill-card__row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
}

.skill-card__name {
    color: var(--color-text);
}

.skill-card__level {
    font-family: var(--font-mono);
    color: var(--color-text-faint);
    font-size: 11px;
    white-space: nowrap;
}

/* Project card */
.project-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.35s ease;
}

.project-card:hover,
.project-card:focus-within {
    transform: translateY(-4px);
    border-color: var(--color-border-hover);
}

.project-card__thumb {
    height: 150px;
    background: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.09),
        rgba(255, 255, 255, 0.09) 2px,
        transparent 2px,
        transparent 14px
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-card__thumb-label {
    font-family: var(--font-mono);
    color: var(--color-text-faint);
    font-size: 11px;
}

.project-card__body {
    padding: 22px;
}

.project-card__tag {
    font-family: var(--font-mono);
    color: var(--color-accent);
    font-size: 11px;
    margin-bottom: 10px;
}

.project-card__name {
    color: var(--color-text);
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 8px;
}

.project-card__desc {
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 14px;
}

.project-card__stack {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.project-card__result {
    font-size: 13px;
    color: var(--color-text);
    font-weight: 600;
    margin-bottom: 16px;
}

.project-card__links {
    display: flex;
    gap: 18px;
    font-size: 13px;
}

.project-card__link--muted {
    color: var(--color-text-muted);
}

.project-card__link--muted:hover {
    color: var(--color-text);
}

/* Playground card */
.playground-card__icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 14px;
    font-size: 14px;
}

.playground-card__name {
    color: var(--color-text);
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 6px;
}

.playground-card__desc {
    color: var(--color-text-muted);
    font-size: 13.5px;
    line-height: 1.55;
    margin-bottom: 16px;
}

.playground-card__status {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-text-faint);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    padding: 7px 0;
    text-align: center;
}

/* Blog card */
.blog-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.35s ease;
}

.blog-card:hover,
.blog-card:focus-within {
    transform: translateY(-4px);
    border-color: var(--color-border-hover);
}

.blog-card__thumb {
    height: 90px;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.09),
        rgba(255, 255, 255, 0.09) 2px,
        transparent 2px,
        transparent 12px
    );
}

.blog-card__body {
    padding: 16px;
}

.blog-card__meta {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--color-accent);
    margin-bottom: 8px;
}

.blog-card__title {
    color: var(--color-text);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
}

.blog-card__link {
    color: inherit;
}

.blog-card__link:hover {
    color: var(--color-text);
}

/* Service card */
.service-card__num {
    font-family: var(--font-mono);
    color: var(--color-text-faint);
    font-size: 11px;
    margin-bottom: 12px;
}

.service-card__name {
    color: var(--color-text);
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 8px;
}

.service-card__desc {
    color: var(--color-text-muted);
    font-size: 13.5px;
    line-height: 1.6;
}


/* ===================================================================
   LAYER: components/form
   =================================================================== */
/* Contact form */
.contact-form {
    max-width: 560px;
    margin: 0 auto 40px;
    display: grid;
    gap: 16px;
    text-align: left;
}

.contact-form__row {
    display: grid;
    gap: 16px;
}

@media (min-width: 640px) {
    .contact-form__row {
        grid-template-columns: 1fr 1fr;
    }
}

.contact-form__field {
    display: grid;
    gap: 6px;
}

.contact-form__label {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.contact-form__input {
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    padding: 11px 14px;
    font: inherit;
    font-size: 14.5px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form__input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.contact-form__input::placeholder {
    color: var(--color-text-faint);
}

textarea.contact-form__input {
    resize: vertical;
    min-height: 140px;
}

/* Validation errors (default Symfony form theme renders <ul><li>) */
.contact-form ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: #f87171;
}

:root[data-theme='light'] .contact-form ul {
    color: #dc2626;
}

/* Honeypot: visually hidden, still submittable by naive bots */
.contact-form__honeypot {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.contact-form__success {
    color: var(--color-accent);
    font-weight: 500;
    font-size: 14.5px;
    margin-bottom: 24px;
}

.contact-form__submit {
    justify-self: center;
}


/* ===================================================================
   LAYER: components/reveal
   =================================================================== */
/*
 * Reveal-on-scroll — native CSS scroll-driven animation (no JS).
 *
 * Doctrine: the VISIBLE state is the default, so content is fully rendered and
 * indexable even without JS or scroll-timeline support (progressive enhancement).
 * Only browsers that support animation-timeline AND allow motion get the reveal.
 * We animate opacity/transform only (compositor-friendly, CLS-safe).
 */
@keyframes reveal-in {
    from {
        opacity: 0;
        transform: translateY(var(--reveal-shift));
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        [data-reveal] {
            animation: reveal-in var(--dur-slow) var(--ease-out-expo) both;
            animation-timeline: view();
            animation-range: entry 0% cover 25%;
        }
    }
}

/*
 * Turbo page transitions (Phase 4). Driven only by the .is-leaving / .is-entering
 * classes that transitions.js toggles on Turbo events — never on first load, so
 * the initial paint/LCP is untouched.
 */
@keyframes page-enter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
    main {
        transition: opacity var(--dur-fast) var(--ease-out-expo),
            transform var(--dur-fast) var(--ease-out-expo);
    }

    html.is-leaving main {
        opacity: 0;
        transform: translateY(-6px);
    }

    main.is-entering {
        animation: page-enter var(--dur-base) var(--ease-out-expo) both;
    }
}


/* ===================================================================
   LAYER: pages/home
   =================================================================== */
/* Hero */
.hero {
    position: relative;
    padding: var(--hero-pad);
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
}

/* Deep-tech grid backdrop, faded with a radial mask so it never touches text. */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--color-accent-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-accent-soft) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 72% 8%, #000, transparent 72%);
    mask-image: radial-gradient(ellipse 75% 65% at 72% 8%, #000, transparent 72%);
    pointer-events: none;
    z-index: 0;
}

.hero__glow {
    position: absolute;
    top: -200px;
    right: -140px;
    width: min(60vw, 560px);
    height: min(60vw, 560px);
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-accent-glow), transparent 70%);
    filter: blur(10px);
    pointer-events: none;
    z-index: 0;
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: 820px;
}

/* Indigo companion glow (bottom-left) for cyan→indigo depth. */
.hero::after {
    content: '';
    position: absolute;
    bottom: -180px;
    left: -120px;
    width: min(50vw, 460px);
    height: min(50vw, 460px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.16), transparent 70%);
    filter: blur(12px);
    pointer-events: none;
    z-index: 0;
}

.hero__eyebrow {
    font-family: var(--font-mono);
    font-size: clamp(11px, 1.4vw, 13px);
    color: var(--color-accent);
    margin-bottom: 22px;
    letter-spacing: 0.08em;
}

.hero__title {
    font-family: var(--font-display);
    font-size: clamp(34px, 6vw, 62px);
    line-height: 1.06;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 24px;
    letter-spacing: -0.02em;
}

.hero__title-accent {
    color: var(--color-accent);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .hero__title-accent {
        background: var(--gradient-accent);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

.hero__lead {
    font-size: clamp(15px, 2vw, 18px);
    line-height: 1.65;
    color: var(--color-text-muted);
    max-width: 620px;
    margin: 0 0 36px;
}

.hero__actions {
    display: flex;
    gap: 14px;
    margin-bottom: 52px;
    flex-wrap: wrap;
}

.hero__stats {
    display: flex;
    gap: clamp(24px, 4vw, 48px);
    flex-wrap: wrap;
}

.stat__value {
    font-size: clamp(18px, 2.4vw, 22px);
    font-weight: 700;
    color: var(--color-text);
}

.stat__label {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--color-text-faint);
    margin-top: 4px;
}

/*
 * Hero signature (Phase 2, option A — kinetic typography, perf-safe).
 * The <h1> (LCP element) is deliberately NOT animated so it paints instantly;
 * only supporting, non-LCP elements stagger in, and decoration reacts to the
 * cursor. Everything is gated behind prefers-reduced-motion.
 */
@keyframes hero-enter {
    from { transform: translateY(14px); }
    to   { transform: none; }
}

/* Cursor parallax on decorative layers (vars set by hero_controller.js). */
.hero__glow {
    transform: translate(calc(var(--mx, 0) * 34px), calc(var(--my, 0) * 34px));
    transition: transform 0.4s var(--ease-out-expo);
}

.hero::before {
    transform: translate(calc(var(--mx, 0) * -16px), calc(var(--my, 0) * -16px));
    transition: transform 0.5s var(--ease-out-expo);
}

@media (prefers-reduced-motion: no-preference) {
    .hero__eyebrow,
    .hero__lead,
    .hero__actions,
    .hero__stats {
        animation: hero-enter var(--dur-base) var(--ease-out-expo) both;
    }

    .hero__eyebrow { animation-delay: 0.04s; }
    .hero__lead    { animation-delay: 0.10s; }
    .hero__actions { animation-delay: 0.16s; }
    .hero__stats   { animation-delay: 0.22s; }
}

/* Blog filters */
.blog__filters {
    display: flex;
    gap: 10px;
    margin: 28px 0;
    flex-wrap: wrap;
}

/* Portfolio note */
.projects__note {
    color: var(--color-text-dim);
    font-size: 13.5px;
    margin: 0 0 8px;
}

/* Assistant */
.assistant {
    display: grid;
    grid-template-columns: var(--two-col-grid);
    gap: 48px;
    align-items: center;
}

.assistant__title {
    margin: 0 0 14px;
}

.assistant__lead {
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.assistant__questions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.assistant__question {
    font-size: 13.5px;
    color: var(--color-text-muted);
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.assistant__panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 20px;
}

.assistant__status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.assistant__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
}

.assistant__status-text {
    font-family: var(--font-mono);
    color: var(--color-text);
    font-size: 12.5px;
}

.assistant__bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    font-size: 13.5px;
    margin-bottom: 10px;
}

.assistant__bubble--bot {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

.assistant__bubble--user {
    margin-left: auto;
    background: var(--color-accent-solid);
    color: #fff;
    margin-bottom: 16px;
}

.assistant__input {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px 14px;
    color: var(--color-text-faint);
    font-size: 13px;
}

/* Contact */
.contact {
    text-align: center;
}

.contact__eyebrow {
    font-family: var(--font-mono);
    color: var(--color-accent);
    font-size: 12px;
    margin-bottom: 16px;
    letter-spacing: 0.1em;
}

.contact__title {
    font-size: clamp(26px, 5vw, 42px);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 18px;
    letter-spacing: -0.02em;
}

.contact__lead {
    color: var(--color-text-muted);
    font-size: 16px;
    margin-bottom: 34px;
}

.contact__actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.contact__socials {
    display: flex;
    gap: 22px;
    justify-content: center;
    font-size: 13.5px;
    flex-wrap: wrap;
}

.contact__social {
    color: var(--color-text-muted);
}

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


/* ===================================================================
   LAYER: pages/login
   =================================================================== */
.login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login__form {
    width: 100%;
    max-width: 360px;
    display: grid;
    gap: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px;
}

.login__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.login__field {
    display: grid;
    gap: 6px;
}

.login__label {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.login__input {
    width: 100%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    padding: 11px 14px;
    font: inherit;
    font-size: 14.5px;
}

.login__input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.login__error {
    color: #f87171;
    font-size: 13.5px;
    margin: 0;
}

.login__submit {
    width: 100%;
}


/* ===================================================================
   LAYER: pages/blog-post
   =================================================================== */
.blog-post {
    max-width: 720px;
    margin: 0 auto;
}

.blog-post__meta {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.blog-post__title {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 32px;
    letter-spacing: -0.02em;
}

.blog-post__content {
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.7;
}

.blog-post__content p {
    margin: 0 0 20px;
}

.blog-post__content h2,
.blog-post__content h3 {
    color: var(--color-text);
    margin: 32px 0 16px;
}

.blog-post__content a {
    color: var(--color-accent);
}

.blog-post__back {
    margin-top: 40px;
}

.blog-post__back a {
    color: var(--color-accent);
    font-size: 14px;
}