/* ==========================================================================
   Section deck — each section fills the viewport and snaps to it.

   Native scroll-snap does the sliding, so wheel, trackpad, touch, keyboard
   and the scrollbar all behave for free. deck.js only adds the arrow, the
   edge-hover triggers, and keeps header links in sync.

   Sections stay scrollable when their content is taller than the viewport,
   so nothing is ever clipped on a short screen.
   ========================================================================== */

/* No scroll-snap. It fought the smooth anchor navigation and rubber-banded
   the page between slides. Full-height sections plus the arrow and edge-hover
   triggers give deliberate slide movement, while the scrollbar, wheel and
   touch still behave normally for anyone who just wants to read on. */
html {
  scroll-snap-type: none;
  scroll-padding-top: 0;
}

.deck > section {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  /* flex-start, not center: merged sections (how, buy) are taller than the
     viewport; centering would clip their tops. */
  justify-content: flex-start;
}

/* the hero is already laid out; don't fight it */
.deck > .hero { justify-content: flex-start; }

/* footer is not a slide */
footer { scroll-snap-align: none; min-height: 0; }

/* ---------- down arrow ---------- */

.deck-arrow {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-lite);
  background: rgba(13, 11, 19, .88);
  color: var(--text-dim);
  cursor: pointer;
  z-index: 60;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    opacity .3s cubic-bezier(.22, 1, .36, 1),
    transform .28s cubic-bezier(.22, 1, .36, 1),
    color .22s cubic-bezier(.22, 1, .36, 1),
    border-color .22s cubic-bezier(.22, 1, .36, 1);
}
.deck-arrow svg { width: 26px; height: 26px; }
.deck-arrow:hover { color: #fff; border-color: var(--orange); transform: translateX(-50%) translateY(-2px); }
.deck-arrow:active { transform: translateX(-50%) translateY(0) scale(.96); }
.deck-arrow:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* fades away on the last slide */
.deck-arrow[hidden] { display: block; opacity: 0; pointer-events: none; }

@media (max-width: 720px) {
  .deck-arrow { bottom: 16px; width: 46px; height: 46px; }
  .deck > section { min-height: auto; padding-top: 96px; padding-bottom: 96px; }
  html { scroll-snap-type: none; }
  .deck-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  .deck-arrow,
  .deck-arrow:hover,
  .deck-arrow:active {
    transition: none;
    transform: translateX(-50%);
  }
}