/* Motion augments the existing composition; all content is visible by default. */
.title-line {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

@media screen and (prefers-reduced-motion: no-preference) {
  html[data-motion="gsap"] [data-motion-item]:is(a, button):not(:disabled):active {
    scale: .98 !important;
  }
}

/* Independent translate preserves GSAP's element transforms. */
@media screen and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduced"]):not([data-motion="static-fallback"])
  :is(.press-image-link, .concept-link, .chapter-download a, .primary-link, .page-nav-button, .start-link, .hospital-link) {
    transition: translate 180ms ease, box-shadow 180ms ease;
  }

  html:not([data-motion="reduced"]):not([data-motion="static-fallback"])
  :is(.press-image-link, .concept-link, .chapter-download a, .primary-link, .page-nav-button, .start-link, .hospital-link):not(:disabled):hover {
    translate: 0 -2px !important;
  }
}

@media (max-width: 760px) {
  .page-navigation { gap: 6px; }
  .page-navigation .page-nav-button {
    min-width: 88px;
    gap: 7px;
    padding: 10px 12px;
    font-size: 14px;
  }
}

@media (max-width: 380px) {
  .page-navigation { gap: 4px; }
  .page-navigation .page-nav-button {
    min-width: 80px;
    gap: 5px;
    padding-inline: 8px;
    font-size: 13px;
  }
}

/* These modes also recover a page if JavaScript exits during an entrance. */
html:is([data-motion="reduced"], [data-motion="static-fallback"]) [data-motion-item] {
  opacity: 1 !important;
  visibility: visible !important;
  translate: none !important;
  scale: none !important;
  transition: none !important;
  animation: none !important;
}
html:is([data-motion="reduced"], [data-motion="static-fallback"]) [data-motion-item]:not(.paper):not([data-motion-item="lookup-handle"]) {
  transform: none !important;
}
html:is([data-motion="reduced"], [data-motion="static-fallback"]) .paper-back { transform: rotate(-9deg) !important; }
html:is([data-motion="reduced"], [data-motion="static-fallback"]) .paper-middle { transform: rotate(3deg) !important; }
html:is([data-motion="reduced"], [data-motion="static-fallback"]) .paper-front { transform: rotate(10deg) !important; }
html:is([data-motion="reduced"], [data-motion="static-fallback"]) .lookup-symbol i { transform: rotate(45deg) !important; }

@media (prefers-reduced-motion: reduce) {
  [data-motion-item] {
    opacity: 1 !important;
    visibility: visible !important;
    translate: none !important;
    scale: none !important;
    transition: none !important;
    animation: none !important;
  }
  [data-motion-item]:not(.paper):not([data-motion-item="lookup-handle"]) { transform: none !important; }
  .paper-back { transform: rotate(-9deg) !important; }
  .paper-middle { transform: rotate(3deg) !important; }
  .paper-front { transform: rotate(10deg) !important; }
  .lookup-symbol i { transform: rotate(45deg) !important; }
}

@media print {
  [data-motion-item]:not([data-motion-item="lookup-handle"]),
  html:is([data-motion="reduced"], [data-motion="static-fallback"]) [data-motion-item]:not([data-motion-item="lookup-handle"]),
  html:is([data-motion="reduced"], [data-motion="static-fallback"]) .paper {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    transition: none !important;
    animation: none !important;
  }
  .lookup-symbol i,
  html:is([data-motion="reduced"], [data-motion="static-fallback"]) .lookup-symbol i {
    transform: rotate(45deg) !important;
  }
}