/* ============================================================
   佚名战神 — Liquid Glass Navigation Hub
   style.css · v3.0.0
   ------------------------------------------------------------
   Sections:
     1.  Design tokens
     2.  Reset & base
     3.  Utility (SVG defs, focus, selection, scrollbar)
     4.  Ambient background (brand orbs + dot grid)
     5.  Liquid Glass material system
     6.  Header / nav pill
     7.  Hero
     8.  Services grid & cards
     9.  Buttons
     10. Footer
     11. Modals
     12. Toast
     13. Cursor layers
     14. Entrance pre-hide (FOUC guard)
     15. Responsive
      16. Reduced motion
      17. 404 page
    ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
    /* Brand palette (from the logo motion suite) */
    --bg:            #0c0c10;
    --text:          #d0d0d0;
    --heading:       #ffffff;
    --muted:         #777777;
    --faint:         #4a4a50;
    --green:         #64a61f;
    --green-bright:  #74b829;
    --green-soft:    #8cc63f;
    --blue:          #2a4976;
    --danger:        #ff5c5c;

    /* Glass material */
    --glass-bg:      rgba(255, 255, 255, 0.045);
    --glass-border:  rgba(255, 255, 255, 0.09);

    /* Radius scale */
    --radius-card:    14px;
    --radius-control: 12px;
    --radius-pill:    999px;

    /* Spacing rhythm — 8px base */
    --space-1: 0.5rem;   /* 8  */
    --space-2: 1rem;     /* 16 */
    --space-3: 1.5rem;   /* 24 */
    --space-4: 2rem;     /* 32 */
    --space-6: 3rem;     /* 48 */
    --space-9: 4.5rem;   /* 72 */

    /* Typography */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Liberation Mono', monospace;

    /* Motion — mirrors the logo motion suite easing tokens */
    --ease-enter:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-settle:    cubic-bezier(0.4, 0, 0.2, 1);
    --ease-narrative: cubic-bezier(0.34, 0, 0.14, 1);

    /* Elevation */
    --shadow-float: 0 16px 48px rgba(0, 0, 0, 0.42);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    color: var(--heading);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

a {
    color: inherit;
}

button {
    font-family: inherit;
}

/* ============================================================
   3. UTILITY
   ============================================================ */
.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

::selection {
    background: rgba(100, 166, 31, 0.38);
    color: #ffffff;
}

:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
}

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-pill);
    border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* ============================================================
   4. AMBIENT BACKGROUND
   Two large blurred brand orbs drifting slowly + one accent,
   plus an ultra-subtle dot grid. Loops stay in CSS (cheap).
   ============================================================ */
.bg-scene {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    will-change: transform;
}

.orb-1 {
    width: 46vmax;
    height: 46vmax;
    top: -20%;
    left: -14%;
    background: radial-gradient(circle at 38% 38%, rgba(100, 166, 31, 0.20), rgba(100, 166, 31, 0) 66%);
    animation: orb-drift-a 56s var(--ease-settle) infinite alternate;
}

.orb-2 {
    width: 42vmax;
    height: 42vmax;
    right: -14%;
    bottom: -24%;
    background: radial-gradient(circle at 58% 42%, rgba(42, 73, 118, 0.30), rgba(42, 73, 118, 0) 66%);
    animation: orb-drift-b 64s var(--ease-settle) infinite alternate;
}

.orb-3 {
    width: 26vmax;
    height: 26vmax;
    top: 34%;
    left: 56%;
    background: radial-gradient(circle at 50% 50%, rgba(100, 166, 31, 0.10), rgba(42, 73, 118, 0) 68%);
    animation: orb-drift-c 72s var(--ease-settle) infinite alternate;
}

@keyframes orb-drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(7vw, 5vh, 0) scale(1.08); }
}

@keyframes orb-drift-b {
    from { transform: translate3d(0, 0, 0) scale(1.05); }
    to   { transform: translate3d(-6vw, -4vh, 0) scale(1); }
}

@keyframes orb-drift-c {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-5vw, 6vh, 0); }
}

.bg-grid {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1.4px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 38%, #000 25%, transparent 78%);
    mask-image: radial-gradient(ellipse 85% 65% at 50% 38%, #000 25%, transparent 78%);
}

/* ============================================================
   5. LIQUID GLASS MATERIAL
   Layer model (single .glass class):
     base      — frosted surface: translucent bg + backdrop blur
     ::before  — refractive edge layer: backdrop blur pushed
                 through the SVG displacement filter (#glass-distortion)
     ::after   — specular highlight: top sheen gradient + inset
                 hairline shadows (top bright / bottom faint)
   Pseudo layers sit at z-index -1 inside an isolated stacking
   context, so they render above the element's own background
   but below its content — content needs no z-index management.
   Browsers without backdrop-filter keep the plain frosted look.
   ============================================================ */
.glass {
    position: relative;
    isolation: isolate;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
}

.glass::before,
.glass::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}

/* Specular highlight — always on */
.glass::after {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.018) 42%,
        rgba(255, 255, 255, 0) 70%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .glass {
        background: rgba(255, 255, 255, 0.035);
        backdrop-filter: blur(20px) saturate(160%);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
    }

    /* Refractive edge distortion — the liquid-glass signature.
       A faint sheen gradient gives feDisplacementMap something
       to warp (otherwise it would displace transparent pixels),
       so the rounded rim bends organically like real glass. */
    .glass::before {
        background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(255, 255, 255, 0.015) 55%,
            rgba(255, 255, 255, 0.045) 100%);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        filter: url(#glass-distortion);
    }
}

/* Firefox: filter:url() + backdrop-filter is unreliable — drop the
   displacement layer, keep the frosted glass + specular sheen
   (still a complete, handsome material). */
@supports (-moz-appearance: none) {
    .glass::before {
        content: none;
    }
}

/* ============================================================
   6. HEADER / NAV PILL
   ============================================================ */
.site-header {
    position: fixed;
    top: var(--space-2);
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    padding: 0 var(--space-2);
    pointer-events: none; /* only the pill itself is interactive */
}

.nav-pill {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 8px 10px 8px var(--space-2);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-float);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.brand-mark {
    width: 28px;
    height: 28px;
    display: block;
}

.brand-name {
    color: var(--heading);
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: -0.02em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link {
    color: var(--text);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--heading);
}

.nav-link:active {
    background: rgba(100, 166, 31, 0.16);
}

/* ============================================================
   7. HERO
   ============================================================ */
.hero {
    position: relative;
    text-align: center;
    padding: 148px var(--space-3) var(--space-3);
    /* Soft spotlight behind hero content — seats the gradient title over the
       vivid particle field and adds depth without a hard edge. */
    background: radial-gradient(ellipse 90% 78% at 50% 40%, rgba(12, 12, 16, 0.45), rgba(12, 12, 16, 0.18) 48%, transparent 72%);
}

.hero-logo {
    display: inline-block;
    cursor: pointer; /* click pulses the particle background */
}

/* Full-page WebGL particle background (living M). Sits inside .bg-scene
   (fixed, z-index -2). Tuned for vivid-but-legible. */
.bg-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.82;
}
.bg-particles canvas { display: block; }

.hero-logo-svg {
    width: 72px;
    height: 72px;
    display: block;
    overflow: visible; /* entrance slide must not clip */
    filter: drop-shadow(0 10px 30px rgba(100, 166, 31, 0.16));
}

/* GSAP transforms the monogram paths individually — give each
   path its own bounding-box origin so x/y/scale behave. */
.hero-logo-svg path {
    transform-box: fill-box;
    transform-origin: center;
}

.hero-title {
    margin-top: 18px;
    font-size: clamp(3rem, 9vw, 5.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 38%, #8fc94a 62%, #4a7bb0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-subtitle {
    margin-top: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.38em;
    padding-left: 0.38em; /* optically re-center tracked text */
    text-transform: uppercase;
    color: var(--muted);
}

/* ============================================================
   8. SERVICES GRID & CARDS
   ============================================================ */
.services {
    padding: var(--space-4) var(--space-3) var(--space-9);
}

.services-grid {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--space-3);
    perspective: 900px; /* stage for GSAP 3D tilt */
}

.card {
    position: relative;
    padding: 28px 26px 26px;
    border-radius: var(--radius-card);
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.4s ease;
    will-change: transform;
    overflow: hidden;
}

.card:hover {
    border-color: rgba(100, 166, 31, 0.5);
    box-shadow: 0 18px 50px -12px rgba(100, 166, 31, 0.28), 0 8px 24px -8px rgba(42, 73, 118, 0.22);
}

/* Shine sweep — a diagonal light band that sweeps across the card on hover. */
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.10) 48%, rgba(255, 255, 255, 0.04) 54%, transparent 72%);
    background-size: 220% 100%;
    background-position: 100% 0;
    pointer-events: none;
    transition: background-position 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    border-radius: inherit;
}
.card:hover::after {
    background-position: -120% 0;
}

.card-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: var(--space-2);
}

.card-title {
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.card-url {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 20px;
    word-break: break-all;
}

/* ============================================================
   9. BUTTONS (pill CTAs; press animation lives in main.js)
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--green);
    color: var(--bg);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    will-change: transform;
}

.card:hover .btn,
.btn:hover {
    background: var(--green-bright);
}

/* ============================================================
   10. FOOTER
   ============================================================ */
.site-footer {
    padding: var(--space-3) var(--space-3) var(--space-6);
    text-align: center;
}

.footer-copy {
    font-size: 0.9rem;
    color: var(--text);
}

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 12px 0 14px;
}

.footer-link {
    color: var(--muted);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--green-soft);
}

.footer-version {
    color: var(--faint);
    font-size: 0.78rem;
}

/* ============================================================
   11. MODALS — liquid glass panels over a dimmed, blurred stage
   GSAP drives the panel/backdrop when present (html.has-gsap);
   otherwise CSS transitions take over (html:not(.has-gsap)).
   ============================================================ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
}

.modal[hidden] {
    display: none;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 6, 9, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
}

.modal-panel {
    position: relative;
    width: min(520px, 100%);
    max-height: min(80vh, 640px);
    overflow-y: auto;
    border-radius: var(--radius-card);
    padding: 34px var(--space-4) 30px;
    box-shadow: var(--shadow-float);
    transform: scale(0.92);
    opacity: 0;
}

/* CSS fallback transitions (only when GSAP is absent) */
html:not(.has-gsap) .modal-backdrop {
    transition: opacity 0.3s ease;
}
html:not(.has-gsap) .modal-panel {
    transition: transform 0.42s var(--ease-enter), opacity 0.42s ease;
}
html:not(.has-gsap) .modal.is-open .modal-backdrop {
    opacity: 1;
}
html:not(.has-gsap) .modal.is-open .modal-panel {
    transform: scale(1);
    opacity: 1;
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--heading);
}

.modal-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: var(--space-2);
    padding-right: var(--space-6);
}

.modal-text {
    font-size: 0.92rem;
    line-height: 1.75;
    margin-bottom: 14px;
}

.modal-text:last-child {
    margin-bottom: 0;
}

.modal-text .hl {
    color: var(--green-soft);
    font-weight: 600;
}

.modal-email {
    color: var(--green-soft);
    text-decoration: none;
    border-bottom: 1px solid rgba(140, 198, 63, 0.35);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.modal-email:hover {
    color: var(--green-bright);
    border-bottom-color: var(--green-bright);
}

/* ============================================================
   12. TOAST — top-center liquid glass pill
   ============================================================ */
.toast-zone {
    position: fixed;
    top: 22px;
    left: 0;
    right: 0;
    z-index: 400;
    display: flex;
    justify-content: center;
    padding: 0 var(--space-2);
    pointer-events: none;
}

.toast {
    visibility: hidden;
    opacity: 0;
    padding: 11px 24px;
    border-radius: var(--radius-pill);
    border-color: rgba(100, 166, 31, 0.55); /* success accent */
    box-shadow: var(--shadow-float);
    color: var(--heading);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    max-width: 90vw;
}

.toast.toast-error {
    border-color: rgba(255, 92, 92, 0.60);
}

/* CSS fallback (only when GSAP is absent): a simple fade. The GSAP
   path slides via yPercent — no CSS transform is set here so GSAP's
   transform never compounds with a parsed pixel translate. */
html:not(.has-gsap) .toast {
    transition: opacity 0.4s ease, visibility 0.4s;
}
html:not(.has-gsap) .toast.is-visible {
    visibility: visible;
    opacity: 1;
}

/* ============================================================
   13. CURSOR LAYERS — enabled by JS only on fine-pointer devices
   ============================================================ */
.cursor-dot,
.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
    display: none;
    border-radius: 50%;
    pointer-events: none;
}

.has-cursor .cursor-dot,
.has-cursor .cursor-glow {
    display: block;
}

.cursor-dot {
    width: 8px;
    height: 8px;
    background: var(--green);
    box-shadow: 0 0 10px rgba(100, 166, 31, 0.55);
}

.cursor-glow {
    width: 240px;
    height: 240px;
    background: radial-gradient(circle,
        rgba(100, 166, 31, 0.14) 0%,
        rgba(42, 73, 118, 0.07) 42%,
        transparent 66%);
}

/* ============================================================
   14. ENTRANCE PRE-HIDE (FOUC guard)
   Content is hidden only when motion is welcome AND before JS
   reveals it. main.js reveals immediately on reduced-motion or
   GSAP-failure; <noscript> in index.php covers the no-JS case.
   Scoped to the homepage (body:not(.page-404)) — the 404 page
   reuses .nav-pill but has no JS, so it must never be pre-hidden.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    body:not(.page-404) .nav-pill,
    body:not(.page-404) .hero-logo,
    body:not(.page-404) .hero-title,
    body:not(.page-404) .hero-subtitle,
    body:not(.page-404) .card {
        opacity: 0;
    }
}

/* ============================================================
   15. RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
    .hero {
        padding-top: 128px;
    }

    .nav-pill {
        gap: 12px;
        padding: 8px 8px 8px 14px;
    }

    .nav-link {
        padding: 6px 11px;
        font-size: 0.82rem;
    }

    .services {
        padding: var(--space-3) var(--space-2) var(--space-6);
    }

    .modal-panel {
        padding: 30px 24px 26px;
    }
}

@media (max-width: 480px) {
    .brand-name {
        display: none; /* keep the pill compact on very small screens */
    }
}

@media (max-width: 380px) {
    .hero-title {
        font-size: 2.4rem;
    }

    .hero-subtitle {
        letter-spacing: 0.3em;
        padding-left: 0.3em;
    }

    .card {
        padding: 24px 20px 22px;
    }
}

/* ============================================================
   16. REDUCED MOTION
   Ambient loops stop; main.js mirrors this by skipping the
   entrance timeline, tilt and cursor layers entirely.
   (Late in the file so it wins specificity ties cleanly.)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .orb {
        animation: none;
    }

    .nav-link,
    .footer-link,
    .modal-close,
    .btn {
        transition: none;
    }
}

/* ============================================================
   17. 404 PAGE
   Standalone error page (404.html) — same brand language, pure
   CSS motion (no GSAP on this page), reuses the liquid-glass
   material, ambient orbs, and M monogram. Entrance animations
   are gated under prefers-reduced-motion: no-preference so the
   reduced-motion default is a clean static render.
   ============================================================ */
.page-404 {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.nf-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px 96px;
    gap: 14px;
    position: relative;
    z-index: 1;
}

/* M monogram — per-path transforms need fill-box origin. */
.nf-logo {
    width: 96px;
    height: 96px;
    margin-bottom: 6px;
}
.nf-logo path {
    transform-box: fill-box;
    transform-origin: center;
}

.nf-code {
    font-family: var(--font-body);
    font-size: clamp(96px, 20vw, 184px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(125deg, var(--green-soft) 0%, var(--green) 45%, var(--blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 8px 40px rgba(100, 166, 31, 0.22));
    margin: 0;
}

.nf-title {
    font-size: clamp(1.4rem, 3.4vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--heading);
    margin: 4px 0 0;
}

.nf-msg {
    font-size: 0.95rem;
    color: var(--muted);
    letter-spacing: 0.02em;
    margin: 0 0 14px;
    max-width: 32ch;
}

.nf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    border-radius: var(--radius-pill);
    color: var(--green-soft);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: transform 0.25s var(--ease-enter), color 0.25s ease, background-color 0.25s ease;
}
.nf-btn:hover {
    color: var(--heading);
    transform: translateY(-2px);
}
.nf-btn:active {
    transform: translateY(0) scale(0.97);
}
.nf-btn:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
}

/* ---- CSS-only entrance (logo choreography mirrors the home
   page's GSAP timeline: left from x:-40, right from x:+40,
   arm-gap from y:-12 scale .85, on a back.out(1.7)-ish curve).
   cubic-bezier(0.34, 1.56, 0.64, 1) ≈ back.out(1.7).         ---- */
@media (prefers-reduced-motion: no-preference) {
    @keyframes nf-left  { from { opacity: 0; transform: translateX(-40px); } }
    @keyframes nf-right { from { opacity: 0; transform: translateX(40px); } }
    @keyframes nf-arm   { from { opacity: 0; transform: translateY(-12px) scale(0.85); } }
    @keyframes nf-rise  { from { opacity: 0; transform: translateY(22px); } }

    .nf-logo #left-shape  { animation: nf-left  1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.00s both; }
    .nf-logo #right-shape { animation: nf-right 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.06s both; }
    .nf-logo #arm-gap     { animation: nf-arm   0.96s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s both; }

    .nf-code  { animation: nf-rise 0.8s var(--ease-enter) 0.50s both; }
    .nf-title { animation: nf-rise 0.7s var(--ease-enter) 0.62s both; }
    .nf-msg   { animation: nf-rise 0.7s var(--ease-enter) 0.74s both; }
    .nf-btn   { animation: nf-rise 0.7s var(--ease-enter) 0.86s both; }

    /* The from-keyframes only set opacity/transform; the resting
       state (no animation) is the final visible state, so when
       reduced motion is requested everything renders statically. */
}

/* 404 responsive */
@media (max-width: 480px) {
    .nf-stage { padding: 24px 20px 72px; }
    .nf-logo  { width: 72px; height: 72px; }
    .nf-msg   { font-size: 0.88rem; }
}