/* ---------------------------------------------------------------------------
   motion.css — the accessibility preferences, honoured properly.

   Reduced motion does not mean no feedback. It means a gentler, non-vestibular
   equivalent: things still respond, they just stop travelling and stop
   overshooting. Colour and opacity changes carry comprehension, so they stay.
--------------------------------------------------------------------------- */

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

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Anything that arrived by moving now simply arrives. */
  .reveal { opacity: 1 !important; transform: none !important; }
  .stop { opacity: 1 !important; }

  /* The signature is already written and the pulse already lit — both handled
     in motif.js, which never starts a ticker under this setting. These are the
     belt-and-braces. */
  .signature path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .ecg .glow { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }

  /* Wedges hold their angle instead of shearing. */
  .wedge-b, .wedge-t, .wedge-tb { --wedge: 4vw !important; }

  /* The film holds on its poster. motif.js also refuses to start playback under
     this setting; hiding the frame here means that even if a browser autoplays
     against our wishes, nothing full-screen is moving. */
  .hero__video { visibility: hidden; }
  .hero__media {
    background-image: url("../img/hero-poster.jpg");
    background-size: cover;
    background-position: 50% 42%;
  }
  .hero__cue svg { animation: none !important; }

  /* No lift, no travel — colour still confirms the hover. */
  .card:hover, .social__link:hover, .creedcard:hover .creedcard__icon,
  .js-rail .rail__viewport:not(.is-dragging) .card:hover { transform: none !important; }
  .pulse-btn:active, .social__link:active, .reveal-btn:active,
  .creedcard:active .creedcard__icon { transform: none !important; }
}

/* --- Reduced transparency ------------------------------------------------
   Frostier and more solid: raise the background opacity and drop the blur
   rather than removing the surface altogether.                             */

@media (prefers-reduced-transparency: reduce) {
  .chrome {
    background: var(--ground);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--rule);
  }
  .route__mapwrap { backdrop-filter: none; -webkit-backdrop-filter: none; }
  @media (max-width: 58rem) { .route__mapwrap { background: var(--ground); } }

  /* The lattice inside the dark panels is the only truly translucent texture
     here; pull it back so the panels read as flat colour. */
  .dark__field { opacity: 0.3; }
  .dots { opacity: 0.5; }
  .ecg .glow { opacity: 0.14; filter: none; }
}

/* --- Increased contrast --------------------------------------------------
   Near-solid backgrounds, defined borders, and the decorative textures out of
   the way of the text.                                                      */

@media (prefers-contrast: more) {
  :root {
    --ink-2: var(--ink);
    --ink-3: color-mix(in srgb, var(--ink) 80%, transparent);
    --rule: color-mix(in srgb, var(--ink) 50%, transparent);
    --on-dark-2: var(--on-dark);
    --on-dark-rule: color-mix(in srgb, #EAF0F7 55%, transparent);
  }

  .chrome {
    background: var(--ground);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: 2px solid var(--ink);
  }

  /* Texture is the first thing to go when contrast matters. */
  .dark__field, .dots { display: none; }
  .ecg .glow { display: none; }
  .ecg path { stroke-width: 3.2; }

  .card, .social__link, .tag, .reveal-btn { border: 1px solid currentColor; }
  .stop { opacity: 1; }
  .creedcard__gloss { border-bottom-width: 3px; }
  :focus-visible { outline-width: 3px; }
}

/* --- Coarse pointers -----------------------------------------------------
   Touch targets get real size. Nothing is gated behind hover.              */

@media (pointer: coarse) {
  .chrome__link { padding-block: 0.8rem; }
  .pulse-btn { width: 2.9rem; height: 2.9rem; }
  .reveal-btn { padding-block: 0.9rem; }
}

/* --- Print ---------------------------------------------------------------
   A nurse's site should print as a readable document, not as a screenshot.  */

@media print {
  .chrome, .progress, .corner-mark, .railtext, .dark__field, .dots,
  .hero__media, .pulse-rule, .rail__hint, .signature, .vital__tick,
  .hero__cue, .reveal-btn { display: none !important; }

  body { background: #fff; color: #000; }
  .hero { min-height: auto; padding-block: 0 2rem; background: #fff !important; color: #000 !important; }
  .hero__cm, .hero__full, .hero__roles b, .hero__place { color: #000 !important; }
  .hero__inner { padding-block: 0 !important; }
  .dark, .card, .vital, .colophon { background: #fff !important; color: #000 !important; }
  .dark .prose, .card__meta, .vital__label, .colophon__where { color: #333 !important; }
  .card__figure, .vital__figure { color: #000 !important; }

  .wedge-b, .wedge-t, .wedge-tb, .card, .photoframe img, .colophon__portrait { clip-path: none !important; }

  .reveal { opacity: 1 !important; transform: none !important; }
  .stop { opacity: 1 !important; page-break-inside: avoid; }

  /* Nothing to press on paper, so print the prayer open. */
  .letter { grid-template-rows: 1fr !important; opacity: 1 !important; }

  .rail__viewport { overflow: visible !important; }
  .rail__track { flex-wrap: wrap; width: auto !important; transform: none !important; }
  .card { width: 15rem; min-height: auto; break-inside: avoid; border: 1px solid #999; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}