/* Deck's own font, served from this site (no Google Fonts request). */
@font-face {
  font-family: "Nunito";
  src: url("./fonts/nunito-v16-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
}

/* ---- The deck of cards (index.html) ----
   Without JavaScript the cards are simply listed one below the other.
   With it (html.js), one card is pinned in the middle of the screen and
   scrolling deals the next card over it. Scrolling itself stays normal. */
/* Each card is one stop: scrolling snaps from card to card, so one
   flick of the wheel, trackpad or finger moves exactly one card. The
   section's height and the stop points are set in pixels by the script
   (index.html), so they always match the screen. */
html.js {
  scroll-snap-type: y mandatory;
}
.js .deck {
  position: relative;
  height: calc((var(--cards) - 1) * 20svh + 100svh);
}
.js .snap {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  scroll-snap-align: start;
}
.js .stage {
  position: sticky;
  top: 0;
  height: 100svh;
  padding-bottom: 6rem; /* room for the fixed footer */
  display: flex;
  align-items: center;
  justify-content: center;
}
.js .card {
  position: absolute;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.5s ease;
  will-change: transform, opacity;
}
.js .card[data-state="next"] {
  transform: translateY(110svh) rotate(3deg);
}
.js .card[data-state="active"] {
  transform: none;
}
.js .card[data-state="prev"] {
  transform: translateY(-14px) scale(0.96);
  opacity: 0.45;
}
.js .card[data-state="gone"] {
  transform: translateY(-26px) scale(0.92);
  opacity: 0;
}

/* Visitors who ask for less motion get instant changes. */
@media (prefers-reduced-motion: reduce) {
  .js .card {
    transition: none;
  }
  html.js {
    scroll-behavior: auto;
  }
}

/* Without JavaScript the cards are a plain list; keep the last one clear
   of the fixed footer. */
html:not(.js) main {
  padding-bottom: 8rem;
}