/* Site-wide slides: the homepage's scroll on every page. slides.js adds
   .hx-slides to <html> and .hx-slide to each top-level section. Slides are at
   least one screen tall, never clipped: a section that runs longer scrolls
   through before the next one snaps in. */

/* Pages that opt in with a server-rendered marker get the same behavior before
   slides.js hydrates. The marker keeps the first scroll gesture consistent on
   direct loads and on slower connections; slides.js still supplies the shared
   classes and back-to-top control once it runs. */
html:has(main[data-scroll-snap-page]) {
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--hx-header-h, 65px);
  scroll-behavior: smooth;
  overflow-y: auto;
}
html:has(main[data-scroll-snap-page]),
html:has(main[data-scroll-snap-page]) body {
  overflow-x: clip;
}
html:has(main[data-scroll-snap-page]) main[data-scroll-snap-page] > section[data-scroll-snap-section] {
  min-height: calc(100vh - var(--hx-header-h, 65px));
  min-height: calc(100svh - var(--hx-header-h, 65px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: 0 !important;
}
html:has(main[data-scroll-snap-page]) main[data-scroll-snap-page] > section[data-scroll-snap-section] > :not([aria-hidden="true"]):not(.absolute):not(.fixed) {
  width: 100%;
}
html:has(main[data-scroll-snap-page]) footer.unified-footer {
  scroll-snap-align: start;
}

html.hx-slides { scroll-snap-type: y mandatory; scroll-padding-top: var(--hx-header-h, 65px); scroll-behavior: smooth; }
/* A body with overflow set (often to hide sideways spill) becomes its own scroll
   container and swallows the snap points. clip hides the spill without that. */
html.hx-slides, html.hx-slides body { overflow-x: clip; overflow-y: visible; }
html.hx-slides { overflow-y: auto; }
html.hx-slides .hx-slide {
  min-height: calc(100vh - var(--hx-header-h, 65px));
  min-height: calc(100svh - var(--hx-header-h, 65px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* Pages give sections a scroll-margin for anchor links; scroll-padding-top
     already clears the header, so a margin here would leave a strip of the
     previous slide showing. */
  scroll-margin-top: 0 !important; /* beats the inline margin AutoSectionChrome sets */
}
html.hx-slides .hx-slide > :not([aria-hidden="true"]):not(.absolute):not(.fixed) { width: 100%; }
/* The footer snaps by its top: on a phone it is taller than the screen, and
   snapping by its bottom left its top unreachable between two snap points. */
html.hx-slides .hx-slide-end { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) {
  html:has(main[data-scroll-snap-page]) { scroll-snap-type: y proximity; scroll-behavior: auto; }
  html.hx-slides { scroll-snap-type: y proximity; scroll-behavior: auto; }
}

/* Back to top */
.hx-top {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 65;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: rgba(29, 29, 31, .88);
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(29, 29, 31, .55), inset 0 0 0 1px rgba(134,134,139, .45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(.92);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.hx-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.hx-top:hover { background: #1d1d1f; }
.hx-top:hover svg { transform: translateY(-2px); }
.hx-top:focus-visible { outline: 2px solid #86868b; outline-offset: 3px; }
.hx-top svg { width: 20px; height: 20px; transition: transform .2s ease; }
.hx-top svg path { stroke: url(#hx-top-gold); }
@media (prefers-reduced-motion: reduce) { .hx-top, .hx-top svg { transition: none; } }
@media print { .hx-top { display: none; } }