/* Voidhaus motion law — cross-document View Transitions (the ink dip), a
   consistent focus ring, and nav interaction. Durations/easings reference the
   tokens in tokens.css. Loaded (render-blocking) in every house head so the
   @view-transition rule is present before any navigation begins. */

/* ---- the ink dip: cross-document View Transitions (progressive enhancement;
   ignored by browsers without support -> instant nav, no JS router) ---- */
@view-transition { navigation: auto; }

@keyframes vh-vt-out { to   { opacity: 0; } }
@keyframes vh-vt-in  { from { opacity: 0; } }

/* the overlay backdrop the content dips through = house ink */
::view-transition { background-color: #07080D; }
/* old content eases toward ink (exit), new emerges from it (entrance);
   total = --dur-4, no slides, no zooms */
::view-transition-old(root){
  animation: vh-vt-out calc(var(--dur-4) / 2) var(--ease-in) both;
}
::view-transition-new(root){
  animation: vh-vt-in  calc(var(--dur-4) / 2) var(--ease-out) both;
  animation-delay: calc(var(--dur-4) / 2);
}

/* ---- stable chrome: nav + footer carry their own transition group so they
   hold visually across navigation instead of repainting with the content ---- */
nav#vhNav { view-transition-name: vh-nav; }
footer    { view-transition-name: vh-footer; }
::view-transition-group(vh-nav),
::view-transition-group(vh-footer){ animation-duration: var(--dur-2); }

/* ---- focus-visible: one 2px lacquer ring, 2px offset, sitewide, never removed ---- */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
[tabindex]:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid #9C1F14 !important;
  outline-offset: 2px !important;
  border-radius: 1px;
}

/* ---- nav links: animated underline (scaleX from left) replaces colour-only
   hover. Excludes the logo (it carries the mark svg). ---- */
nav#vhNav a:not(:has(svg)) { position: relative; }
nav#vhNav a:not(:has(svg))::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine){
  nav#vhNav a:not(:has(svg)):hover::after { transform: scaleX(1); }
}

/* ---- CTA arrows: glyph nudges 3px on hover (the text button itself never
   scales) ---- */
[data-arrow]{ display: inline-block; transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine){
  a:hover [data-arrow], button:hover [data-arrow],
  [role="button"]:hover [data-arrow]{ transform: translateX(3px); }
}

/* ---- reduced-motion law: no view transition, reveals land final-state, every
   duration collapses to ~1ms ---- */
@media (prefers-reduced-motion: reduce){
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation: none !important; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}