/* Preview switcher shared by the alternative homepage designs (/design/home/*). */
.hd-switcher {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: calc(100vw - 24px);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px;
  border-radius: 200px;
  background: rgba(32, 32, 32, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font: 500 12px/1 Inter, system-ui, sans-serif;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.hd-switcher::-webkit-scrollbar { display: none; }
.hd-switcher-label { color: #828282; padding: 0 10px 0 12px; white-space: nowrap; }
.hd-switcher a {
  color: #efefef;
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 200px;
}
.hd-switcher a:hover { background: rgba(255, 255, 255, 0.1); }
.hd-switcher a[aria-current="page"] { background: #fff; color: #202020; }
.hd-switcher a:focus-visible { outline: 2px solid #ff682c; outline-offset: 1px; }
@media (max-width: 640px) {
  .hd-switcher-label { display: none; }
  .hd-switcher { bottom: 10px; }
}

/* style.css sets overflow-x: hidden on html/body, which breaks position: sticky.
   clip still hides sideways overflow without creating a scroll container. */
html:has(body.hd-page),
body.hd-page { overflow-x: clip; }

/* model-viewer's default grey loading bar reads as a stray line in these layouts. */
.hd-page model-viewer::part(default-progress-bar) { display: none; }

/* Section entrances (static/js/home-designs/reveal.js): heading, text, picture
   rise 24px with opacity, 70ms apart. Only armed once the script has run; the
   script drops .hd-ri after the entrance so each element's own styles return.
   `translate` (not transform) keeps any transform the design already sets. */
.hd-armed .hd-ri {
  transition: opacity 560ms cubic-bezier(.2,.7,.2,1), translate 700ms cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--hd-i, 0) * 70ms);
}
.hd-armed:not(.hd-in) .hd-ri { opacity: 0; translate: 0 24px; }
@media (prefers-reduced-motion: reduce) {
  .hd-armed:not(.hd-in) .hd-ri { opacity: 1; translate: none; }
}

/* Button feedback shared by every design: a small press. */
.hd-page main a[class*="-btn"]:active, .hd-page main button:active { translate: 0 1px; }

/* Still of the model, shown while it loads, if it fails, and without JS. */
model-viewer .hd-poster { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }

/* Phones: every standalone control gets a 44px tap target. Text links keep
   their look; an invisible box around them takes the tap. */
@media (max-width: 720px) {
  .hd-page .a-btn, .hd-page .d-btn,
  .hd-page .d-panel-toggle, .hd-page .d-reel-btn,
  .hd-page .e-aud-tabs button { min-height: 44px; }
  .hd-page .c-rail-btn { width: 44px; height: 44px; }
  .hd-page .e-aud-links a { padding: 0; min-height: 44px; display: flex; align-items: center; }

  .hd-page :is(.a-fieldline, .c-fields-line, .d-fields-line, .e-fields, .b-keywords, .b-refs-more, .d-live-qr) a,
  .hd-page :is(.c-link, .d-text-link, .e-surface-link) { position: relative; }
  .hd-page :is(.a-fieldline, .c-fields-line, .d-fields-line, .e-fields, .b-keywords, .b-refs-more, .d-live-qr) a::after,
  .hd-page :is(.c-link, .d-text-link, .e-surface-link)::after {
    content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%);
  }
  /* Rows of links sit 44px apart so the tap boxes don't overlap. */
  .hd-page :is(.a-fieldline, .c-fields-line, .d-fields-line, .e-fields) { row-gap: 22px; }
  .hd-page .b-keywords { line-height: 44px; }
}