/* ─────────────────────────────────────────────────────────────
   Shared interaction + accessibility layer for every page.
   Linked after each page's own <style>, so it refines those rules.
   ───────────────────────────────────────────────────────────── */

:root {
  /* 0.38 measured ~3:1 on --bg; 0.55 clears WCAG AA (4.5:1) for small text */
  --fg-faint: rgba(232, 230, 225, 0.55);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --glass: rgba(11, 13, 15, 0.72);
  --glass-thick: rgba(17, 20, 23, 0.86);
}

/* ───────── focus ───────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ───────── press feedback ─────────
   Respond on pointer-down, not on release. Touch devices have no
   hover, so this is the only feedback a phone user gets. */
.hero-cta, .nav-cta, .cta-mail, .copy-email, .menu-btn, .about-more,
.cta-primary, .cta-secondary, .about-linkedin, .cookie-accept, .cookie-decline,
.modal-close {
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 180ms var(--ease-out),
    background-color 160ms, border-color 160ms, color 160ms,
    box-shadow 200ms, opacity 160ms;
}
.hero-cta:active, .nav-cta:active, .cta-mail:active, .copy-email:active,
.menu-btn:active, .about-more:active, .cta-primary:active, .about-linkedin:active,
.cookie-accept:active, .cookie-decline:active, .modal-close:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}
.post-card { -webkit-tap-highlight-color: transparent; }
.post-card:active { background: var(--bg-3); }

/* ───────── nav material ─────────
   The glass lives on a pseudo-element so the nav itself isn't a
   backdrop root; that lets the mobile menu panel blur the page too. */
.nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* ───────── mobile menu ─────────
   Drops from under the nav and leaves the same way it came. */
@media (max-width: 880px) {
  .nav-links {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--pad) 24px;
    background: var(--glass-thick);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    transition:
      opacity 180ms ease-out,
      transform 240ms var(--ease-out),
      visibility 0s linear 240ms;
  }
  .nav-links.open {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition:
      opacity 180ms ease-out,
      transform 240ms var(--ease-out),
      visibility 0s;
  }
  .nav-links a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
    color: var(--fg-dim);
    text-decoration: none;
  }
  .nav-links a.active { color: var(--fg); }
  .nav-links .nav-cta {
    margin-top: 16px;
    padding: 12px 16px;
    text-align: center;
    color: var(--fg);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
  }

  .menu-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--fg);
    cursor: pointer;
  }
}

/* Hamburger folds into a close mark, hinting at what a second tap does */
.menu-btn path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 240ms var(--ease-out), opacity 160ms;
}
.menu-btn[aria-expanded="true"] .l1 { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .l2 { opacity: 0; }
.menu-btn[aria-expanded="true"] .l3 { transform: translateY(-4px) rotate(-45deg); }

/* ───────── reduced motion ─────────
   Swap travel for a short cross-fade; keep feedback that aids comprehension. */
@keyframes wrc-fade { from { opacity: 0; } to { opacity: 1; transform: none; } }
@keyframes wrc-blink { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .fade-up, .fade-up-2, .fade-up-3, .post-card {
    transform: none;
    animation-name: wrc-fade;
    animation-duration: 200ms;
  }
  .loading-dots span { animation-name: wrc-blink; }

  h1.hero-title .strike { animation: none; background-size: 100% 2px; }

  .nav-links, .nav-links.open, #cookie-banner, #cookie-banner.show, .modal { transform: none; }
  .menu-btn path { transition: opacity 160ms; }
  .menu-btn[aria-expanded="true"] .l1,
  .menu-btn[aria-expanded="true"] .l3 { transition: none; }
}

/* ───────── reduced transparency / more contrast ───────── */
@media (max-width: 880px) and (prefers-reduced-transparency: reduce),
       (max-width: 880px) and (prefers-contrast: more) {
  .nav-links { background: var(--bg-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav::before, #cookie-banner {
    background: var(--bg-2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .modal-overlay { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root {
    --fg-dim: rgba(232, 230, 225, 0.85);
    --fg-faint: rgba(232, 230, 225, 0.72);
    --line: rgba(232, 230, 225, 0.22);
    --line-strong: rgba(232, 230, 225, 0.45);
  }
  .nav::before, #cookie-banner {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}