/* karm.dev — UI Kit styles. Load AFTER colors_and_type.css + tokens.css */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg-1);
  color: var(--fg-1);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
}

/* =======================================================
   BUTTON
   ======================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.btn-sm { padding: var(--space-2) var(--space-6); font-size: var(--text-sm); }
.btn-md { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.btn-lg { padding: var(--space-6) var(--space-12); font-size: var(--text-lg); }

.btn-primary {
  background: var(--brand);
  color: var(--fg-inverse);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--brand-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: var(--bg-2);
  color: var(--brand);
  border: 1.5px solid var(--brand);
}
.btn-secondary:hover { background: var(--bg-1); box-shadow: var(--shadow-sm); }

.btn-accent {
  background: var(--accent);
  color: var(--fg-inverse);
  box-shadow: var(--shadow-accent);
}
.btn-accent:hover {
  background: var(--accent-hover);
  color: var(--brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.btn-accent:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--brand);
}
.btn-ghost:hover { background: var(--bg-3); }

.btn:disabled, .btn.is-loading { opacity: 0.6; cursor: not-allowed; transform: none !important; }

.btn-spinner {
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* =======================================================
   TAG
   ======================================================= */
.tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-family: var(--font-sans);
}
.tag-accent { background: var(--accent-soft); color: var(--accent); }
.tag-neutral { background: var(--bg-3); color: var(--fg-2); }
.tag-brand { background: var(--navy-900); color: var(--white); }

/* =======================================================
   CARD / PROJECT CARD
   ======================================================= */
.card {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: var(--padding-card);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

.project-card {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.project-card.is-hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.project-card__image {
  height: 180px;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.project-card__image::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(16,185,129,0.25), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(110,231,183,0.15), transparent 45%);
  opacity: 0.9;
}
.project-card__icon {
  font-size: 3rem;
  position: relative;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}
.project-card__body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.project-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}
.project-card__desc {
  font-size: var(--text-sm);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-4);
  flex: 1;
}
.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.project-card__action { margin-top: auto; }

/* =======================================================
   SKILL CARD
   ======================================================= */
.skill-card {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  transition: all var(--transition-normal);
}
.skill-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--border-2);
}
.skill-card__icon { font-size: 2.5rem; margin-bottom: var(--space-4); line-height: 1; }
.skill-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}
.skill-card__skills {
  color: var(--fg-2);
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* =======================================================
   FORM
   ======================================================= */
.form-group { margin-bottom: var(--space-6); }
.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  font-size: var(--text-base);
}
.form-input {
  width: 100%;
  padding: var(--space-4);
  border: 1.5px solid var(--border-1);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  transition: all var(--transition-normal);
  background: var(--bg-1);
  color: var(--fg-1);
  outline: none;
}
.form-input:hover { border-color: var(--border-2); }
.form-input.is-focused,
.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
  background: var(--bg-2);
}
.form-input.is-error { border-color: var(--error); }
.form-input.is-error:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12); }
.form-input.is-success { border-color: var(--success); }
textarea.form-input { min-height: 120px; resize: vertical; font-family: inherit; }
.form-feedback {
  font-size: var(--text-sm);
  margin-top: var(--space-2);
  margin-bottom: 0;
}
.form-feedback.is-error { color: var(--error); }
.form-feedback.is-success { color: var(--success); }

/* =======================================================
   NAV
   ======================================================= */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-8);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-1);
  position: sticky; top: 0;
  z-index: var(--z-sticky);
  backdrop-filter: blur(8px);
}
.site-nav__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--fg-1);
}
.logo-mark { display: inline-flex; }
.logo-text {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
  color: var(--fg-1);
  letter-spacing: -0.3px;
}
.logo-dot { color: var(--accent); }
.site-nav__links {
  display: flex;
  list-style: none;
  gap: var(--space-8);
  margin: 0; padding: 0;
}
.site-nav__links a {
  color: var(--fg-2);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
  position: relative;
  transition: color var(--transition-normal);
}
.site-nav__links a:hover { color: var(--fg-1); }
.site-nav__links a.is-active {
  color: var(--fg-1);
}
.site-nav__links a.is-active::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--accent); border-radius: 2px;
}

/* =======================================================
   HERO
   ======================================================= */
.hero {
  padding: var(--space-24) var(--space-8);
  background:
    radial-gradient(circle at 85% 20%, rgba(16, 185, 129, 0.10), transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(15, 23, 46, 0.04), transparent 50%),
    var(--bg-1);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--border-1) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-1) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 40%, black, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, black, transparent 70%);
  opacity: 0.35;
  pointer-events: none;
}
.hero__inner {
  max-width: 900px; margin: 0 auto;
  position: relative;
  text-align: center;
  animation: fadeInUp 0.8s ease-out;
}
.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent);
  background: var(--accent-soft);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
  letter-spacing: var(--tracking-wide);
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-6);
  text-wrap: balance;
}
.hero__title em {
  font-style: italic;
  color: var(--accent);
}
.hero__lead {
  font-size: var(--text-lg);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
  max-width: 640px;
  margin: 0 auto var(--space-8);
  font-weight: var(--fw-light);
  text-wrap: pretty;
}
.hero__actions {
  display: flex; gap: var(--space-4);
  justify-content: center;
  margin-bottom: var(--space-12);
  flex-wrap: wrap;
}
.hero__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--fg-2);
  flex-wrap: wrap;
  justify-content: center;
}
.hero__meta strong { color: var(--fg-1); font-weight: var(--fw-bold); }
.hero__dot { width: 4px; height: 4px; background: var(--border-2); border-radius: 50%; }
.hero__status { color: var(--accent); font-style: normal; }

/* =======================================================
   LAYOUT / SECTIONS
   ======================================================= */
.section {
  padding: var(--space-16) var(--space-8);
  max-width: 1200px;
  margin: 0 auto;
}
.section--alt {
  background: var(--bg-3);
  max-width: none;
  margin: 0;
}
.section--alt > .section-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.section__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}
.section__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  letter-spacing: var(--tracking-tight);
}
.section__lead {
  font-size: var(--text-lg);
  color: var(--fg-2);
  max-width: 640px;
  margin: 0 0 var(--space-12);
  line-height: var(--lh-relaxed);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
}

/* =======================================================
   FOOTER
   ======================================================= */
.site-footer {
  background: var(--bg-invert);
  color: var(--fg-inverse);
  padding: var(--space-12) var(--space-8) var(--space-6);
}
.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.site-footer__brand p {
  color: rgba(255,255,255,0.7);
  font-size: var(--text-sm);
  max-width: 320px;
  margin: var(--space-3) 0 0;
}
.site-footer__links {
  display: flex;
  gap: var(--space-6);
  align-items: center;
}
.site-footer__links a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  transition: color var(--transition-normal);
}
.site-footer__links a:hover { color: var(--accent); }
.site-footer__legal {
  max-width: 1200px;
  margin: var(--space-6) auto 0;
  color: rgba(255,255,255,0.5);
  font-size: var(--text-sm);
  text-align: center;
}

/* =======================================================
   INTRO ANIMATION
   Phase 1 (enter, 0–1.1s): K mark fades+scales in, chevron draws
   Phase 2 (expand, 1.1–2.4s): mark shrinks to nav size + "arm.dev" slides in
   Phase 3 (fade, 2.4–3.0s): everything fades out
   ======================================================= */
.intro-anim {
  position: fixed; inset: 0;
  background: var(--bg-1);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.55s ease-in;
}
.intro-anim--fade { opacity: 0; pointer-events: none; }

.intro-anim__stage {
  display: flex; align-items: center; gap: 0;
  position: relative;
}

.intro-anim__mark {
  animation: introMarkIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.intro-anim--expand .intro-anim__mark,
.intro-anim--fade .intro-anim__mark {
  animation: introMarkShrink 0.6s cubic-bezier(0.6, 0, 0.2, 1) forwards;
}

/* Draw-in for the K strokes */
.intro-anim__k {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: introDraw 0.9s 0.2s cubic-bezier(0.6, 0, 0.3, 1) forwards;
}

/* Wordmark — hidden during enter, reveals on expand */
.intro-anim__wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 56px;
  letter-spacing: -1.5px;
  color: var(--fg-1);
  display: inline-flex;
  align-items: baseline;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  margin-left: 0;
}
.intro-anim--expand .intro-anim__wordmark,
.intro-anim--fade .intro-anim__wordmark {
  animation: introWordIn 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.intro-anim__k-letter { opacity: 0; display: inline-block; }
.intro-anim--expand .intro-anim__k-letter,
.intro-anim--fade .intro-anim__k-letter {
  animation: introLetterFade 0.35s 0.45s ease-out forwards;
}
.intro-anim__rest {
  display: inline-block;
  transform: translateX(-8px);
  opacity: 0;
}
.intro-anim--expand .intro-anim__rest,
.intro-anim--fade .intro-anim__rest {
  animation: introRestSlide 0.7s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.intro-anim__dot { color: var(--accent); }

@keyframes introMarkIn {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes introMarkShrink {
  to { transform: scale(0.38); margin-right: 12px; }
}
@keyframes introDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes introWordIn {
  0%   { max-width: 0; opacity: 0; }
  20%  { opacity: 1; }
  100% { max-width: 420px; opacity: 1; }
}
@keyframes introLetterFade {
  to { opacity: 1; }
}
@keyframes introRestSlide {
  0%   { transform: translateX(20px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* =======================================================
   CONTACT GRID
   ======================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.2fr);
  gap: var(--space-16);
  align-items: start;
}
@media (max-width: 640px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* =======================================================
   NAV — HAMBURGER (hidden on desktop)
   ======================================================= */
.site-nav__hamburger {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--fg-1);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}
.site-nav__hamburger:hover { background: var(--bg-3); }

/* =======================================================
   RESPONSIVE
   ======================================================= */
@media (max-width: 768px) {
  .hero { padding: var(--space-16) var(--space-4); }
  .hero__title { font-size: var(--text-3xl); }
  .section { padding: var(--space-12) var(--space-4); }
  .site-nav { padding: var(--space-3) var(--space-4); position: relative; }
  .site-nav__links { display: none; }
  .site-nav__cta { display: none; }
  .site-nav__hamburger { display: inline-flex; }

  .site-nav--open .site-nav__links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg-2);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border-1);
    gap: var(--space-4);
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-md);
  }

  .site-nav--open .site-nav__links a {
    font-size: var(--text-base);
    padding: var(--space-2) 0;
  }
}