@layer components {
  /* Icon from the sprite: <svg class="icon"><use href="/images/icons.svg#name"/></svg> */
  .icon {
    flex: none;
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .icon--filled {
    fill: currentColor;
  }

  /* Mono label: small caps-style eyebrow text */
  .label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-muted);
  }

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

  /* A shell command shown as a label: "$ ls ~/work", "> cat about.md". Never uppercased. */
  .cmd {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-accent);
  }

  /* Blinking block cursor (terminal flavor). Static under reduced motion. */
  .cursor {
    display: inline-block;
    width: 0.6em;
    height: 1.05em;
    margin-left: 0.1em;
    vertical-align: -0.15em;
    background: var(--color-accent);
  }

  @media (prefers-reduced-motion: no-preference) {
    .cursor {
      animation: blink 1.1s steps(1) infinite;
    }
  }

  @keyframes blink {
    50% {
      opacity: 0;
    }
  }

  /* Inline text link */
  .link {
    color: var(--color-accent);
    font-weight: 500;
    text-decoration-line: underline;
    text-decoration-color: var(--color-accent-line);
    transition: text-decoration-color var(--dur-fast);

    &:hover {
      text-decoration-color: var(--color-accent);
    }
  }

  /* Mono link with a trailing icon, e.g. "View on LinkedIn ↗" */
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-accent);
    text-decoration: none;

    & .icon {
      transition: transform var(--dur) var(--ease-out);
    }

    &:hover {
      text-decoration: underline;
    }

    &:hover .icon {
      transform: translate(2px, -2px);
    }
  }

  /* Buttons */
  .btn {
    --btn-h: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-height: var(--btn-h);
    padding: 0.5rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition:
      background-color var(--dur-fast),
      border-color var(--dur-fast),
      color var(--dur-fast),
      box-shadow var(--dur),
      transform var(--dur-fast);

    &:active {
      transform: translateY(1px);
    }

    & .icon {
      font-size: 1.1em;
    }

    & .icon--trail {
      transition: transform var(--dur) var(--ease-out);
    }

    &:hover .icon--trail {
      transform: translateX(3px);
    }
  }

  .btn--primary {
    background: var(--color-accent);
    color: var(--color-on-accent);

    &:hover {
      background: #f8ac2c;
      box-shadow: 0 0 28px -6px var(--color-accent);
    }
  }

  .btn--outline {
    border-color: var(--color-border-strong);
    background: rgb(43 35 27 / 0.7);
    color: var(--color-text);

    &:hover {
      border-color: var(--color-accent-line);
      background: var(--color-surface-2);
      color: var(--color-accent);
    }
  }

  .btn--ghost {
    color: var(--color-muted);

    &:hover {
      background: var(--color-surface);
      color: var(--color-text);
    }
  }

  .btn--lg {
    --btn-h: 3.25rem;
    padding-inline: 1.5rem;
    font-size: 0.9375rem;
  }

  .btn--sm {
    --btn-h: 2.25rem;
    padding: 0.35rem 0.8rem;
    font-size: var(--text-xs);
  }

  .btn--block {
    width: 100%;
  }

  /* Status pill */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    width: fit-content;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--color-accent-line);
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.02em;
  }

  .badge--muted {
    border-color: var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text-soft);
  }

  /* Live dot with a soft radar ping */
  .badge__dot {
    position: relative;
    flex: none;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
  }

  @media (prefers-reduced-motion: no-preference) {
    .badge__dot::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: currentColor;
      animation: ping 2.4s var(--ease-out) infinite;
    }
  }

  @keyframes ping {
    0% {
      transform: scale(1);
      opacity: 0.7;
    }
    70%,
    100% {
      transform: scale(3);
      opacity: 0;
    }
  }

  /* Tech tag */
  .tag {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-text-soft);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.3;
  }

  .tag--lg {
    padding: 0.45rem 0.8rem;
    font-size: var(--text-sm);
  }

  /* Card. Add data-spotlight for the pointer glow (js/spotlight.js). */
  .card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    transition:
      border-color var(--dur),
      box-shadow var(--dur);

    &:hover {
      border-color: rgb(245 158 11 / 0.3);
    }
  }

  .card--featured {
    border-color: var(--color-accent-line);
    box-shadow: 0 0 40px -16px rgb(245 158 11 / 0.35);
  }

  [data-spotlight]::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    pointer-events: none;
    opacity: var(--spot-o, 0);
    background: radial-gradient(
      600px circle at var(--spot-x, 50%) var(--spot-y, 50%),
      var(--color-glow),
      transparent 45%
    );
    transition: opacity var(--dur-slow) var(--ease-out);
  }

  .card__body {
    padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  }

  .card__title {
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: var(--leading-snug);
    letter-spacing: -0.01em;
  }

  /* Terminal window chrome: three dots and a mono title bar */
  .terminal {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .terminal__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.5rem;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: rgb(43 35 27 / 0.6);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-muted);
  }

  .terminal__dots {
    display: flex;
    gap: 0.45rem;
    margin-right: 0.35rem;

    & span {
      width: 0.65rem;
      height: 0.65rem;
      border-radius: 50%;
      background: rgb(181 168 152 / 0.35);
    }

    & span:nth-child(1) {
      background: rgb(234 122 62 / 0.85);
    }

    & span:nth-child(2) {
      background: rgb(245 158 11 / 0.85);
    }
  }

  .terminal__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .terminal__meta {
    margin-left: auto;
    white-space: nowrap;
  }

  .terminal__body {
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  }

  /*
    Section heading:
    01  $ ls ~/featured-work  ───────────
    Featured Work                         (serif)
    description
  */
  .section-head {
    display: grid;
    gap: var(--space-4);
    margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
  }

  .section-head__cmd {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-accent);

    &::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--color-border);
    }
  }

  .section-head__index {
    color: var(--color-faint);
  }

  .section-head__cmd .prompt {
    color: var(--color-muted);
  }

  .section-head__title {
    max-width: 18ch;
    font-size: var(--text-3xl);
  }

  .section-head__desc {
    max-width: 42rem;
    color: var(--color-muted);
    font-size: var(--text-lg);
    text-wrap: balance;
  }

  /* Bulleted list with amber ▸ markers */
  .ticks {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    list-style: none;

    & li {
      position: relative;
      padding-left: 1.4em;
    }

    & li::before {
      content: "";
      position: absolute;
      left: 0.1em;
      top: 0.62em;
      width: 0.5em;
      height: 0.55em;
      background: var(--color-accent);
      clip-path: polygon(0 0, 100% 50%, 0 100%);
    }
  }

  /* Form fields */
  .field {
    display: grid;
    gap: 0.45rem;
  }

  .field__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .field__input {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: 1rem; /* 16px keeps iOS from zooming on focus */
    transition:
      border-color var(--dur-fast),
      box-shadow var(--dur-fast);

    &::placeholder {
      color: rgb(181 168 152 / 0.8);
    }

    &:focus {
      outline: none;
      border-color: rgb(245 158 11 / 0.6);
      box-shadow: 0 0 0 3px rgb(245 158 11 / 0.2);
    }
  }

  textarea.field__input {
    min-height: 8.5rem;
    resize: vertical;
  }

  /*
    Scroll reveal (js/reveal.js adds .is-revealed). Hidden only when JS runs and
    motion is allowed. If the script never loads, a failsafe shows everything.
  */
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    [data-reveal] {
      transition:
        opacity var(--dur-slow) var(--ease-out),
        transform var(--dur-slow) var(--ease-out);
      transition-delay: calc(var(--reveal-i, 0) * 80ms);
    }

    [data-reveal]:not(.is-revealed) {
      opacity: 0;
      transform: translateY(18px);
    }

    html:not([data-js]) [data-reveal]:not(.is-revealed) {
      animation: reveal-failsafe 0s 2.5s forwards;
    }
  }

  @keyframes reveal-failsafe {
    to {
      opacity: 1;
      transform: none;
    }
  }
}