/* Motion and finish pass (Emil Kowalski's animation rules + Impeccable's craft floor). */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- Browser surfaces ---------- */
::selection { background: var(--accent); color: var(--ink-dark); }
input, select, textarea { caret-color: var(--accent); }
html { scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) var(--bg); }
a { text-underline-offset: 0.2em; }
h1, h2, h3 { text-wrap: balance; }

/* ---------- Phones: no grey tap flash, no double-tap delay ---------- */
html { -webkit-tap-highlight-color: transparent; }
a, button, .btn, input, select, textarea { touch-action: manipulation; }

/* ---------- Press feedback ---------- */
.btn, .pl-chip {
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.btn:active, .pl-chip:active, .chip input:active + span { transform: scale(0.97); }
.pl-opt { transition: border-color 150ms ease, transform 160ms var(--ease-out); }
.pl-opt:active { transform: scale(0.98); }

/* ---------- Hover only where there is a mouse ---------- */
.g-item img { transition: transform 300ms var(--ease-out); }
@media (hover: none), (pointer: coarse) {
  .g-item:hover img, .pl-opt:hover { transform: none; }
}

/* ---------- Hero: the one authored moment ---------- */
.motion .hero img { animation: hero-settle 1600ms var(--ease-out) both; }
.motion .hero-content > * { animation: rise 700ms var(--ease-out) both; }
.motion .hero-content > :nth-child(2) { animation-delay: 80ms; }
.motion .hero-content > :nth-child(3) { animation-delay: 160ms; }
.motion .hero-content > :nth-child(4) { animation-delay: 240ms; }
@keyframes hero-settle { from { transform: scale(1.04); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Portfolio: photos develop in as they scroll into view ---------- */
.motion .g-item { opacity: 0; transform: translateY(16px); clip-path: inset(0 0 6% 0); }
.motion .g-item.in {
  opacity: 1; transform: none; clip-path: inset(0 0 0 0);
  transition: opacity 600ms ease, transform 700ms var(--ease-out), clip-path 700ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* ---------- Form sent ---------- */
.form-status.show { animation: rise 400ms var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .motion .hero img { animation: none; }
  .motion .hero-content > *, .form-status.show { animation: fade 300ms ease both; }
  .motion .g-item { transform: none; clip-path: none; }
  .motion .g-item.in { transition: opacity 300ms ease; }
  .btn:active, .pl-chip:active, .pl-opt:active { transform: none; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

/* Nav: once past the hero, give it a solid backing so links stay readable over content */
nav { transition: background-color 200ms ease; }
nav.scrolled { background: rgba(var(--shade, 18,16,13), 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }