@layer reset, tokens, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  a { color: inherit; }
  ol, ul { padding: 0; margin: 0; list-style: none; }
}

@layer tokens {
  :root {
    --bg: #0a0e14;
    --fg: #e6edf3;
    --fg-dim: #9ba4b0;
    --line: #1f2732;
    --line-2: #3a4553;
    --amber: #ffb347;
    --cyan: #7dfccd;

    --font-sans: "Inter", "Inter Variable", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", "JetBrains Mono Variable", ui-monospace, monospace;

    --measure: 68ch;
    --gutter: clamp(1rem, 4vw, 3rem);
    --step-0: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
    --step-1: clamp(1rem,  0.92rem + 0.4vw, 1.125rem);
    --step-2: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --step-3: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
    --step-4: clamp(2.5rem, 1.5rem + 5vw, 5rem);
    --step-5: clamp(3.5rem, 2rem + 8vw, 8rem);
  }

  @font-face {
    font-family: 'Inter Variable';
    src: url('assets/fonts/Inter-Variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
  }
  @font-face {
    font-family: 'JetBrains Mono Variable';
    src: url('assets/fonts/JetBrainsMono-Variable.woff2') format('woff2-variations');
    font-weight: 100 800;
    font-display: swap;
  }
}

@layer base {
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--step-1);
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
  }
  body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.93  0 0 0 0 0.95  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    pointer-events: none; opacity: .5; z-index: 1; mix-blend-mode: overlay;
  }
  section { padding: clamp(4rem, 10vw, 8rem) var(--gutter); position: relative; z-index: 2; }
  h1, h2, h3 { font-weight: 500; letter-spacing: -0.02em; margin: 0 0 1rem; }
  h2 { font-size: var(--step-3); color: var(--fg); border-top: 1px solid var(--line); padding-top: 1.5rem; }
  p { margin: 0 0 1rem; max-width: var(--measure); color: var(--fg-dim); }
}

@layer components {
  .lang-toggle {
    position: fixed; top: 1.25rem; right: var(--gutter); z-index: 10;
    font-family: var(--font-mono); font-size: 0.85rem; color: var(--fg-dim);
    display: flex; gap: .25rem; align-items: center;
  }
  .lang-toggle button {
    padding: .2rem .5rem; border: 1px solid var(--line); color: var(--fg-dim);
    transition: color .2s, border-color .2s;
  }
  .lang-toggle button[aria-pressed="true"] { color: var(--amber); border-color: var(--amber); }

  .hud {
    position: fixed; top: 1.25rem; left: var(--gutter); z-index: 10;
    font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-dim);
    display: flex; gap: .5rem; align-items: center;
    padding: .25rem .5rem; border: 1px solid var(--line);
  }
  .hud-label { color: var(--line-2); text-transform: uppercase; letter-spacing: .1em; }
  .hud-value { color: var(--cyan); }

  .hero {
    min-height: 100vh; display: grid; place-items: center; position: relative;
    padding: var(--gutter);
  }
  .boot-terminal {
    font-family: var(--font-mono); font-size: var(--step-0);
    color: var(--cyan); line-height: 1.5; white-space: pre-wrap;
    max-width: 68ch; margin: 0; opacity: 1;
    transition: opacity .6s ease;
  }
  .boot-terminal.fade-out { opacity: 0; }

  .hero-body {
    text-align: left; opacity: 0; transform: translateY(12px);
    transition: opacity .8s ease, transform .8s ease;
  }
  .hero-body.visible { opacity: 1; transform: none; }
  .hero-body[hidden] { display: none; }
  .hero-name {
    font-size: var(--step-5); line-height: 0.95; letter-spacing: -0.04em;
    font-weight: 400; margin: 0 0 1rem;
  }
  .hero-tagline {
    font-size: var(--step-3); color: var(--fg); margin: 0 0 0.75rem;
    font-weight: 400;
  }
  .hero-phonetic {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--line-2);
    letter-spacing: 0.04em;
    margin: -0.4rem 0 1rem 0.15rem;
    opacity: .7;
  }
  .hero-phonetic:hover {
    color: var(--fg-dim);
    opacity: 1;
    transition: color .3s ease, opacity .3s ease;
  }
  .hero-oneliner {
    font-family: var(--font-mono); font-size: var(--step-1); color: var(--fg-dim);
    margin: 0 0 1.5rem;
  }
  .hero-trust {
    display: inline-block; font-family: var(--font-mono); font-size: .9rem;
    color: var(--amber); padding: .4rem .75rem; border: 1px solid var(--amber);
    margin: 0;
  }
  .hero-scroll {
    position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
    font-family: var(--font-mono); font-size: .75rem; color: var(--line-2);
    letter-spacing: .3em; text-transform: uppercase;
  }
  .hero-scroll::after {
    content: '▊'; display: inline-block; margin-left: .5rem;
    animation: blink 1s steps(2) infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }
}

@layer components {
  .manifesto p { font-size: var(--step-2); color: var(--fg); }
  .manifesto p + p { margin-top: 1rem; }

  .services-grid {
    display: grid; gap: 1px; background: var(--line); margin-top: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  .services-grid > article {
    background: var(--bg); padding: 2rem; min-height: 220px;
  }
  .services-grid h3 {
    font-family: var(--font-mono); font-size: var(--step-1); color: var(--amber);
    font-weight: 400; margin-bottom: .75rem;
  }

  .ansilume {
    background: linear-gradient(180deg, var(--bg) 0%, #0c1520 100%);
    border-block: 1px solid var(--cyan);
    text-align: center;
  }
  .ansilume-kicker {
    display: inline-block; font-family: var(--font-mono); font-size: .8rem;
    color: var(--cyan); letter-spacing: .3em; text-transform: uppercase;
    margin-bottom: 1.5rem;
  }
  .ansilume-logo {
    font-family: var(--font-mono); font-size: var(--step-5);
    color: var(--cyan); margin: 0 0 1.5rem; letter-spacing: -0.04em;
    text-shadow: 0 0 24px rgba(125, 252, 205, 0.35);
    border: 0; padding: 0;
    animation: ansilume-pulse 4s ease-in-out infinite;
  }
  @keyframes ansilume-pulse {
    0%, 100% { text-shadow: 0 0 16px rgba(125, 252, 205, 0.35); }
    50%      { text-shadow: 0 0 32px rgba(125, 252, 205, 0.6); }
  }
  .ansilume p { margin: 0 auto 2rem; max-width: 60ch; }
  .ansilume-cta {
    display: inline-block; padding: .75rem 1.5rem;
    border: 1px solid var(--cyan); color: var(--cyan);
    font-family: var(--font-mono); text-decoration: none;
    transition: background .2s, color .2s;
  }
  .ansilume-cta:hover { background: var(--cyan); color: var(--bg); }

  .portrait {
    display: grid; place-items: center; padding-block: 4rem;
  }
  .portrait picture {
    position: relative; max-width: 420px;
    filter: grayscale(100%) contrast(1.1);
    mix-blend-mode: luminosity;
  }
  .portrait img {
    width: 100%; height: auto;
  }
  .portrait picture::after {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(
      0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.12) 2px 3px
    );
    pointer-events: none;
  }
}

@layer components {
  .skills-category { margin-block: 2rem; }
  .skills-category-name {
    font-family: var(--font-mono); font-size: 1rem; color: var(--fg-dim);
    letter-spacing: .1em; text-transform: uppercase; margin-bottom: .75rem;
    display: flex; align-items: center; gap: .5rem;
  }
  .skills-category-name .status { color: var(--line-2); }
  .skills-category.highlight .skills-category-name { color: var(--amber); }
  .skills-items {
    display: flex; flex-wrap: wrap; gap: .5rem;
    font-family: var(--font-mono); font-size: .85rem;
  }
  .skills-items span {
    padding: .25rem .6rem; border: 1px solid var(--line); color: var(--fg);
  }
  .skills-items .ansilume-chip { color: var(--cyan); border-color: var(--cyan); }

  .timeline ol { border-left: 1px solid var(--line); margin-top: 2rem; }
  .timeline-note { font-family: var(--font-mono); font-size: .8rem; color: var(--line-2); }
  .timeline li {
    position: relative; padding: 1.5rem 0 1.5rem 2rem;
    border-bottom: 1px dashed var(--line);
  }
  .timeline li::before {
    content: ''; position: absolute; left: -5px; top: 2rem;
    width: 9px; height: 9px; background: var(--fg-dim); border-radius: 50%;
  }
  .timeline li.ansilume::before { background: var(--cyan); }
  .timeline li.clearance::before { background: var(--amber); }
  .timeline .role {
    font-family: var(--font-mono); font-size: .95rem; color: var(--fg);
    margin: 0 0 .25rem;
  }
  .timeline .industry {
    font-size: var(--step-2); color: var(--fg); margin: 0 0 .75rem;
    font-weight: 400;
  }
  .timeline .industry .badge {
    display: inline-block; font-family: var(--font-mono); font-size: .75rem;
    padding: .15rem .5rem; margin-left: .5rem; vertical-align: middle;
    border: 1px solid var(--amber); color: var(--amber);
  }
  .timeline li.ansilume .industry .badge {
    border-color: var(--cyan); color: var(--cyan);
  }
  .timeline .highlights { margin: .5rem 0; color: var(--fg-dim); }
  .timeline .highlights li {
    padding: .15rem 0; border: 0; list-style: '— '; margin-left: 1rem;
  }
  .timeline .highlights li::before { display: none; }
  .timeline .stack {
    display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem;
    font-family: var(--font-mono); font-size: .75rem;
  }
  .timeline .stack span { color: var(--line-2); }
  .timeline .stack span + span::before { content: ' · '; }

  .leadership ul { display: grid; gap: .75rem; font-size: var(--step-1); }
  .leadership li { padding-left: 1.5rem; position: relative; color: var(--fg); }
  .leadership li::before {
    content: '▸'; position: absolute; left: 0; color: var(--amber);
    font-family: var(--font-mono);
  }

  .awards ul { display: grid; gap: 1rem; margin-top: 2rem; }
  .awards li {
    display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; align-items: baseline;
    padding-block: .75rem; border-top: 1px solid var(--line);
  }
  .awards .year { font-family: var(--font-mono); color: var(--amber); font-size: 1rem; }
  .awards .title { color: var(--fg); font-size: var(--step-2); }

  .about dl {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
  }
  .about dt {
    font-family: var(--font-mono); font-size: .8rem; color: var(--line-2);
    text-transform: uppercase; letter-spacing: .2em; margin-bottom: .5rem;
  }
  .about dd { margin: 0; color: var(--fg); }

  .site-footer { padding: 4rem var(--gutter) 2rem; border-top: 1px solid var(--line); }
  .whoami {
    font-family: var(--font-mono); font-size: .85rem; color: var(--cyan);
    margin: 0 0 2rem; white-space: pre-wrap; max-width: 60ch;
  }
  .whoami-prompt { color: var(--amber); }
  .footer-meta {
    display: flex; justify-content: space-between; font-family: var(--font-mono);
    font-size: .8rem; color: var(--line-2); border-top: 1px solid var(--line);
    padding-top: 1rem;
  }
  .footer-meta a { color: var(--line-2); text-decoration: none; }
  .footer-meta a:hover { color: var(--amber); }

  #bg-ascii {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
    display: grid; place-items: center;
  }
  #bg-ascii pre {
    margin: 0; white-space: pre;
    font-family: var(--font-mono);
    font-size: clamp(8px, 1.8vmin, 22px);
    line-height: 1;
    color: var(--cyan);
    opacity: .18;
    text-shadow: 0 0 22px rgba(125, 252, 205, 0.22);
    animation: tux-breath 5.5s ease-in-out infinite;
    will-change: transform, opacity;
  }
  @keyframes tux-breath {
    0%, 100% { transform: scale(1) rotateY(-2deg); opacity: .18; }
    50%      { transform: scale(1.03) rotateY(2deg); opacity: .24; }
  }

  .hero-trust {
    font-size: 1rem;
    padding: .55rem 1rem;
    box-shadow: 0 0 28px rgba(255,179,71,.1);
    animation: trust-pulse 3.5s ease-in-out infinite;
  }
  @keyframes trust-pulse {
    0%, 100% { box-shadow: 0 0 22px rgba(255,179,71,.12); }
    50%      { box-shadow: 0 0 40px rgba(255,179,71,.28); }
  }

  .services-grid > article:first-child {
    border-left: 2px solid var(--amber);
    box-shadow: inset 0 0 40px rgba(255,179,71,.04);
  }
  .services-grid > article:first-child h3 {
    color: var(--amber);
  }
}

@layer components {
  .portrait picture {
    --reveal: 0;
    filter: grayscale(calc(100% - 100% * var(--reveal)))
            contrast(calc(1.1 - 0.1 * var(--reveal)));
  }
  .portrait picture::after {
    opacity: calc(1 - var(--reveal));
    transition: opacity .15s linear;
  }
}

@layer components {
  body { perspective: 1400px; perspective-origin: 50% 30%; }

  .hero-name {
    will-change: transform, opacity;
    transform: translateZ(var(--hero-z, 0px)) rotateX(var(--hero-rx, 0deg));
    transform-origin: 50% 100% 0;
    opacity: var(--hero-op, 1);
    transition: opacity .2s linear;
  }
  .hero-tagline {
    will-change: transform, opacity;
    transform: translateZ(var(--hero-z, 0px));
    opacity: var(--hero-op, 1);
    transition: opacity .2s linear;
  }
  .hud {
    transform: rotateX(var(--hud-tilt, 0deg));
    transform-origin: 0% 50%;
  }

  .services-grid { transform-style: preserve-3d; }
  .services-grid > article {
    transform: translateY(36px) rotateX(-14deg) translateZ(-90px);
    opacity: 0;
    transition: transform 1.1s cubic-bezier(.22,1,.36,1), opacity .9s ease;
    transform-origin: 50% 100% 0;
  }
  .services-grid > article.reveal {
    transform: translateY(0) rotateX(0) translateZ(0);
    opacity: 1;
  }

  .timeline li {
    transform: translateX(-28px) rotateY(-12deg);
    opacity: 0;
    transition: transform .85s cubic-bezier(.22,1,.36,1), opacity .7s ease;
    transform-origin: 0% 50%;
  }
  .timeline li.reveal { transform: none; opacity: 1; }

  .awards li {
    transform: translateY(20px) rotateX(-8deg);
    opacity: 0;
    transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .6s ease;
    transform-origin: 50% 100% 0;
  }
  .awards li.reveal { transform: none; opacity: 1; }

  .leadership li {
    transform: translateX(-18px);
    opacity: 0;
    transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .6s ease;
  }
  .leadership li.reveal { transform: none; opacity: 1; }

  .ansilume { perspective: 800px; }
  .ansilume-logo {
    transform: rotateX(var(--ansilume-rx, 0deg)) rotateY(var(--ansilume-ry, 0deg));
    transition: transform .25s cubic-bezier(.22,1,.36,1);
    will-change: transform;
  }

}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
  .services-grid > article,
  .timeline li,
  .awards li,
  .leadership li {
    transform: none !important; opacity: 1 !important;
  }
  .hero-name, .hero-tagline { transform: none !important; opacity: 1 !important; }
}