/* ============================================================
   COMPONENTS — Every reusable UI pattern
   Requires: tokens.css, base.css
   ============================================================ */


/* ═══════════════════════════════════════════════════════════
   PILL SYSTEM — unified sizes and variants
   ═══════════════════════════════════════════════════════════

   USAGE:
   - Base: <a class="pill">Link</a>
   - Sizes: pill--xs (6px 12px), pill--sm (10px 16px), pill--md (12px 20px), pill--lg (18px 36px)
   - Themes: pill--outline (border), pill--filled (solid bg), pill--accent (red), pill--bloom (interactive)
   - Combine: <a class="pill pill--lg pill--accent pill--bloom">Resume</a>

   DEPRECATED CLASSES (use new system instead):
   - .pill-base → use .pill .pill--sm
   - .cta-pill → use .pill .pill--lg .pill--accent .pill--bloom
   - .h-pill / .w-pill → use .pill .pill--xs
   - .scroll-cta → use .pill .pill--sm (with custom positioning)
═══════════════════════════════════════════════════════════ */

/* Base pill — all pills inherit these properties */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  text-decoration: none;
  transition:
    color            var(--dur-mid) ease,
    background-color var(--dur-mid) ease,
    border-color     var(--dur-mid) ease;
}

/* Size variants */
.pill--xs {
  padding: 6px 12px;
  font-size: var(--text-xs);
  border: 1px solid var(--color-line);
  gap: 8px;
}

.pill--sm {
  padding: 10px 16px 10px 18px;
  font-size: var(--text-xs);
  border: var(--border);
  gap: 10px;
}

.pill--md {
  padding: 12px 20px;
  font-size: var(--text-sm);
  border: var(--border);
  gap: 12px;
}

.pill--lg {
  padding: 18px 36px;
  font-size: 20px;
  gap: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
}

/* Theme variants */
.pill--outline {
  border: var(--border);
  background: transparent;
  color: var(--color-ink);
}
.pill--outline:hover {
  background: var(--color-ink);
  color: var(--color-bg);
}

.pill--filled {
  border: 1px solid var(--color-ink);
  background: var(--color-ink);
  color: var(--color-bg);
}
.pill--filled:hover {
  background: var(--color-ink);
}

.pill--accent {
  border: none;
  background: var(--color-accent);
  color: var(--color-bg);
}
.pill--accent:hover {
  opacity: 0.9;
}

/* Bloom effect variant (for CTA pills) */
.pill--bloom {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.pill--bloom::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-ink);
  clip-path: circle(0% at var(--bloom-x, 50%) var(--bloom-y, 50%));
  transition: clip-path var(--dur-slower) var(--ease-out);
  z-index: -1;
}
.pill--bloom:hover::before {
  clip-path: circle(150% at var(--bloom-x, 50%) var(--bloom-y, 50%));
}

/* Legacy compatibility — maps to new system */
.pill-base {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 18px;
  border: var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-style: normal;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════
   CHIP — skill tag / filter pill
   ═══════════════════════════════════════════════════════════ */
.chip {
  display: inline-block;
  padding: 6px 12px;
  border: var(--border-subtle);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--color-ink);
  text-decoration: none;
  transition:
    background-color var(--dur-fast) ease,
    color           var(--dur-fast) ease,
    border-color    var(--dur-fast) ease;
}
.chip:hover {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}


/* ═══════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #f1f1f1;
  border-bottom: var(--border-subtle);
}

.nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 18px var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo pill */
.logo {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 20px;
  letter-spacing: var(--tracking-tight);
  padding: 8px 16px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  background: transparent;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    color                  var(--dur-mid) ease,
    font-weight            var(--dur-fast) ease,
    font-style             var(--dur-fast) ease,
    font-variation-settings var(--dur-fast) ease,
    text-shadow            var(--dur-mid) ease;
}
.logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-ink);
  /* Radial bloom: circle expands from --bloom-x / --bloom-y, set
     by pill-bloom.js on pointerenter (and on pointerleave so the
     retraction follows the exit point too). 150% radius guarantees
     coverage from any entry point on a typical pill. */
  clip-path: circle(0% at var(--bloom-x, 50%) var(--bloom-y, 50%));
  transition: clip-path var(--dur-slower) var(--ease-out);
  z-index: -1;
}
.logo:hover {
  color: #fff;
  font-weight: var(--weight-bold);
  font-variation-settings: "wght" 700;
  /* Subtle luminance against the red-orange fill — single soft layer
     so it reads as a glow, not a halo. */
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
}
.logo:hover::before {
  clip-path: circle(150% at var(--bloom-x, 50%) var(--bloom-y, 50%));
}

/* Nav links */
.nav-links {
  display: flex;
  gap: var(--space-lg);
  list-style: none;
}
.nav-links a {
  color: var(--color-ink);
  text-decoration: none;
  font-size: 16px;
  font-weight: var(--weight-medium);
  font-style: normal;
  letter-spacing: var(--tracking-body);
  text-transform: uppercase;
  display: inline-grid;
  position: relative;
  transition:
    font-weight            var(--dur-fast) ease,
    font-style             var(--dur-fast) ease,
    font-variation-settings var(--dur-fast) ease;
}
/* Width-reserving ghost layer prevents layout shift on bold hover */
.nav-links a > span { grid-area: 1 / 1; }
.nav-links a::after {
  content: attr(data-text);
  grid-area: 1 / 1;
  font-weight: var(--weight-bold);
  visibility: hidden;
}
/* Underline wipe */
.nav-links a::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.nav-links a:hover {
  font-weight: var(--weight-bold);
  font-variation-settings: "wght" 700;
}
.nav-links a:hover::before { transform: scaleX(1); }

/* Current page — permanent underline, bold */
.nav-links a[aria-current="page"] {
  font-weight: var(--weight-bold);
  font-variation-settings: "wght" 700;
}
.nav-links a[aria-current="page"]::before {
  transform: scaleX(1);
  transform-origin: left center;
}


/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
.hero {
  padding: 0;
  height: calc(100vh - var(--nav-h));
  min-height: calc(640px - var(--nav-h));
  position: relative;
  border-bottom: var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero .container { position: relative; z-index: 1; }

/* Grid background SVG wrapper */
.hero-bg {
  position: absolute;
  width: min(1228.45px, calc(100vw - 64px));
  aspect-ratio: 1023.71 / 614.23;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}
.hero-bg svg { width: 100%; height: 100%; display: block; }

/* Pencil — replaces raster hero-rock.png */
.hero-pencil {
  position: absolute;
  left: calc(50% - 25px);
  top: 38%;
  height: 55vh;
  max-height: 480px;
  width: auto;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.18));
  animation: heroFloat var(--dur-float) var(--ease-soft) infinite;
  transform-origin: 50% 60%;
  will-change: transform;
}
@keyframes heroFloat {
  0%, 100% { transform: translate(-50%, 0); }
  50%       { transform: translate(-50%, -10px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-pencil { animation: none; transform: translate(-50%, 0); }
}

/* Hero display title — VISUAL DESIGNER */
.hero-title {
  position: relative;
  font-family: var(--font-sans);
  font-size: var(--text-hero);
  font-weight: var(--weight-semibold);
  font-variation-settings: "wght" 600;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -6px;
  white-space: nowrap;
  z-index: 1;
  user-select: none;
  transform: translateY(calc(-50% + 18px));
}
.hero-title .ch {
  display: inline-block;
  cursor: var(--cursor-pointer);
  transition:
    font-variation-settings var(--dur-mid) var(--ease-out),
    font-style              200ms ease,
    transform               180ms var(--ease-out);
}
.hero-title .ch.space { width: 0.32em; cursor: default; }
.hero-title .ch:active { transform: translateY(2px) scale(0.96); }

/* Lead paragraph below hero title */
.hero p.lead {
  margin-top: var(--space-md);
  font-size: var(--text-lg);
  max-width: 640px;
}

/* Scroll CTA pill anchored to grid */
.scroll-cta {
  position: absolute;
  bottom: 16.34%;
  left: 60.05%;
  z-index: 3;
  pointer-events: auto;
  overflow: hidden;
  isolation: isolate;
  transition:
    color                  var(--dur-mid) ease,
    font-weight            var(--dur-fast) ease,
    font-style             var(--dur-fast) ease,
    font-variation-settings var(--dur-fast) ease,
    text-shadow            var(--dur-mid) ease;
}
.scroll-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-ink);
  /* Radial bloom — see .logo::before for the contract. */
  clip-path: circle(0% at var(--bloom-x, 50%) var(--bloom-y, 50%));
  transition: clip-path var(--dur-slower) var(--ease-out);
  z-index: -1;
}
.scroll-cta:hover {
  color: #fff;
  font-weight: var(--weight-bold);
  font-variation-settings: "wght" 700;
  /* Same subtle glow as .logo on hover for pill-family consistency. */
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
}
.scroll-cta:hover::before {
  clip-path: circle(150% at var(--bloom-x, 50%) var(--bloom-y, 50%));
}
.scroll-cta .cta-arrow {
  width: 11px;
  height: 14px;
  flex: none;
  animation: ctaBounce 1.8s var(--ease-soft) infinite;
}
@keyframes ctaBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cta .cta-arrow { animation: none; }
}

/* Cursor-following tap hint */
.tap-pill {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 1000;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.7);
  transform-origin: top left;
  transition:
    opacity   var(--dur-mid) ease,
    transform var(--dur-mid) var(--ease-out);
  will-change: transform, opacity, top, left;
}
.tap-pill.show { opacity: 1; transform: scale(1); }


/* ═══════════════════════════════════════════════════════════
   PAGE HEADER — inner pages (Work, About, Playground)
   ═══════════════════════════════════════════════════════════ */
.page-header {
  padding: var(--space-2xl) 0 var(--space-xl);
  border-bottom: var(--border-subtle);
}
.page-header h1 {
  font-size: var(--text-h1);
  margin-top: var(--space-sm);
}


/* ═══════════════════════════════════════════════════════════
   WORK GRID
   ═══════════════════════════════════════════════════════════ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.work-item {}

/* Thumbnail — inline SVG fills this container */
.work-item .thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-box);
  border: var(--border-subtle);
  display: block;
  margin-bottom: var(--space-sm);
  position: relative;
  overflow: hidden;
}
.work-item .thumb svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.work-item .meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--space-xs);
}
.work-item .tag {
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Work section view-all link */
.work-more {
  margin-top: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  text-decoration: none;
  position: relative;
  display: inline-grid;
}
.work-more > span { grid-area: 1 / 1; }
.work-more::after {
  content: attr(data-text);
  grid-area: 1 / 1;
  font-weight: var(--weight-bold);
  font-style: italic;
  visibility: hidden;
}
.work-more::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1.5px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.work-more:hover { font-weight: var(--weight-bold); font-style: italic; }
.work-more:hover::before { transform: scaleX(1); }


/* ═══════════════════════════════════════════════════════════
   FILTER ROW — chip-based section filter (Work page)
   ═══════════════════════════════════════════════════════════ */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}
.chip-filter {
  background: transparent;
  border: var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--color-muted);
  cursor: var(--cursor-pointer);
  transition:
    background-color var(--dur-fast) ease,
    color            var(--dur-fast) ease,
    border-color     var(--dur-fast) ease;
}
.chip-filter:hover,
.chip-filter.active {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}


/* ═══════════════════════════════════════════════════════════
   ABOUT GRID
   ═══════════════════════════════════════════════════════════ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-xl);
  align-items: start;
}

/* Avatar — inline SVG fills this */
.avatar {
  width: 100%;
  aspect-ratio: 1;
  background: var(--color-box);
  border: var(--border-subtle);
  display: block;
  position: relative;
  overflow: hidden;
}
.avatar svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.about-text .eyebrow { margin-bottom: var(--space-md); }
.about-text h2 {
  font-size: var(--text-h2-about);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-md);
  max-width: 18ch;
}
.about-text p {
  margin-bottom: var(--space-sm);
  font-size: var(--text-body);
  max-width: 56ch;
}

/* Skills chip cluster */
.skills {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* Experience row */
.exp-list {
  margin-top: var(--space-lg);
  border-top: var(--border-subtle);
}
.exp-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-sm);
  align-items: baseline;
  padding: var(--space-sm) 0;
  border-bottom: var(--border-subtle);
}
.exp-item .role   { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.exp-item .co     { font-size: var(--text-md); color: var(--color-muted); }
.exp-item .period { font-size: var(--text-md); color: var(--color-muted); white-space: nowrap; }


/* ═══════════════════════════════════════════════════════════
   PLAYGROUND GRID
   ═══════════════════════════════════════════════════════════ */
.play-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.play-item {
  aspect-ratio: 1;
  background: var(--color-box);
  border: var(--border-subtle);
  display: block;
  position: relative;
  overflow: hidden;
}
.play-item svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}


/* ═══════════════════════════════════════════════════════════
   CONTACT SECTION
   ═══════════════════════════════════════════════════════════ */
.contact {
  text-align: left;
  background: var(--color-ink);
  color: var(--color-on-dark);
  border-bottom: none;
}
.contact .eyebrow { color: rgba(241, 241, 241, 0.5); }
.contact h2 {
  font-size: var(--text-h2-fluid);
  max-width: 800px;
  margin-bottom: var(--space-lg);
  color: var(--color-on-dark);
}
.contact p { color: rgba(241, 241, 241, 0.6); max-width: 56ch; }

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.contact-links a {
  color: var(--color-on-dark);
  text-decoration: none;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  border-bottom: 1px solid var(--color-on-dark);
  padding-bottom: 2px;
  display: inline-grid;
  transition: font-weight var(--dur-fast) ease;
}
.contact-links a > span { grid-area: 1 / 1; }
.contact-links a::after {
  content: attr(data-text);
  grid-area: 1 / 1;
  font-weight: var(--weight-extrabold);
  visibility: hidden;
}
.contact-links a:hover { font-weight: var(--weight-extrabold); }


/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
footer {
  padding: var(--space-lg);
  text-align: center;
  font-size: var(--text-md);
  color: rgba(241, 241, 241, 0.5);
  background: var(--color-ink);
  letter-spacing: var(--tracking-tight);
}


/* ═══════════════════════════════════════════════════════════
   BOTTOM NAV — fixed, mix-blend-mode difference
   ═══════════════════════════════════════════════════════════ */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  pointer-events: none;
}
.bottom-nav-inner {
  max-width: none;
  margin: 0;
  padding: 14px var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}
.bn-group {
  display: flex;
  align-items: center;
  gap: 18px;
  pointer-events: auto;
}
.bn-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
}
.bn-item .label {
  color: var(--color-ink);
  font-weight: var(--weight-medium);
  margin-right: 4px;
  opacity: 0.6;
}
.bn-divider {
  width: 1px; height: 12px;
  background: var(--color-ink);
  opacity: 0.4;
}
.bn-pulse {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  animation: bnPulse 1.6s ease-in-out infinite;
  flex: none;
}
@keyframes bnPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) { .bn-pulse { animation: none; } }

.bn-link {
  color: var(--color-ink);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  font-style: normal;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  position: relative;
  display: inline-grid;
  transition:
    font-weight            var(--dur-fast) ease,
    font-style             var(--dur-fast) ease,
    font-variation-settings var(--dur-fast) ease;
  pointer-events: auto;
}
.bn-link > span { grid-area: 1 / 1; }
.bn-link::after {
  content: attr(data-text);
  grid-area: 1 / 1;
  font-weight: var(--weight-bold);
  font-style: italic;
  visibility: hidden;
}
.bn-link::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1.5px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.bn-link:hover {
  font-weight: var(--weight-bold);
  font-style: italic;
  font-variation-settings: "wght" 700;
}
.bn-link:hover::before { transform: scaleX(1); }


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav-inner    { padding: 14px var(--space-md); }
  .nav-links    { gap: 18px; }
  .nav-links a  { font-size: var(--text-base); }

  .work-grid    { grid-template-columns: 1fr; gap: var(--space-md); }
  .about-grid   { grid-template-columns: 1fr; gap: var(--space-lg); }
  .avatar       { max-width: 260px; }
  .play-grid    { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }

  .bottom-nav-inner {
    padding: 12px var(--space-sm);
    gap: 12px;
    font-size: 10px;
  }
  .bn-group   { gap: 12px; }
  .bn-link    { font-size: 10px; }
  .bn-divider { display: none; }
}

@media (max-width: 480px) {
  .hero-pencil { height: 38vh; top: 45%; }
  .play-grid   { grid-template-columns: 1fr; }
}