/* Kheiron production interaction layer — implements outputs/06-wireframes/interaction-brief.md */

/* Press feedback: brief caps travel at 1px translation or scale(.96), shadow inversion carries the weight */
.btn:active,
button:active,
.form-submit:active {
  transform: translateY(1px);
}

/* Visible focus for every interactive element, independent of hover */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--action, #c0392b);
  outline-offset: 3px;
  border-radius: 4px;
}

/* WCAG 2.5.8 minimum target size for small form controls */
input[type="checkbox"],
input[type="radio"] {
  min-width: 24px;
  min-height: 24px;
}

/* Macro 1/2 — sticky nav: opacity shift only, no height change, no content overlap */
.site-header {
  transition: background-color 220ms ease-out, box-shadow 220ms ease-out;
}
.site-header[data-scrolled="true"] {
  background-color: rgba(20, 24, 27, .92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}

/* Macro 2/2 — home hero parallax, conceptual machine plane only */
[data-parallax] {
  will-change: transform;
  transition: opacity 350ms ease-out;
}

/* Consent UI — analytics remains absent until an explicit opt-in. */
.consent-panel {
  position: fixed;
  z-index: 1000;
  right: 24px;
  bottom: 24px;
  left: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  max-width: 920px;
  margin: 0 auto;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  color: #eef2f4;
  background: rgba(20,24,27,.98);
  box-shadow: 0 18px 60px rgba(0,0,0,.38);
}
.consent-panel[hidden] { display: none; }
.consent-panel h2 { margin: 7px 0 8px; color: #fff; font-size: clamp(1.12rem,2vw,1.45rem); line-height: 1.2; }
.consent-panel p { max-width: 68ch; margin: 0 0 9px; color: #c8d2d7; font-size: .92rem; }
.consent-panel a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.consent-actions .btn { white-space: nowrap; }
.consent-reject { border-color: rgba(255,255,255,.28); color: #fff; background: transparent; }
.consent-control {
  position: fixed;
  z-index: 900;
  left: 14px;
  bottom: 12px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  color: #fff;
  background: rgba(20,24,27,.9);
  font: 600 .72rem/1.2 Inter, sans-serif;
  cursor: pointer;
}

@media (max-width: 700px) {
  .consent-panel { grid-template-columns: 1fr; gap: 18px; right: 12px; bottom: 12px; left: 12px; padding: 20px; }
  .consent-actions { justify-content: stretch; }
  .consent-actions .btn { flex: 1 1 190px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  [data-parallax] {
    transform: scale(1.008) !important;
    will-change: auto;
  }
}