/* ── THE DOMAINS, STACKED ────────────────────────────────────────────────────
   src/views/domain-stack.js + public/js/domain-stack.js. Arian's stacking
   cards (images-scrolling-animation.tsx), ported, holding the Academy's own
   Domain pads — so this sheet only places them; the pads are drawn by
   academy.css and academy-next.css, which scope their skin to .dstack as they
   do to the Academy's pages.

   The component's geometry:
     · room above the first pad: 5vh · 8vh · 10vh;
     · every slot sticks to the top of the screen, and its pad stands
       200px − 5vh down from there, each one 15px lower than the one before;
     · a pad shrinks toward its top edge, from 1 as it lands (--start, its
       share of the way through the deck) to --target when the last one lands.
   The script writes that progress, 0 to 1, as --p. Without it the pads
   still stack, at full size.

   Under the last slot: the hold (the finished deck stays a moment while the
   page scrolls on), then room for the pads themselves, which stand lower
   than their slots, so the band ends just under the deck and nothing spills
   onto the Codes below. */
.dstack {
  /* The component drew photographs at 280×200 · 360×240 · 420×280 ·
     500×300. A pad carries its name, what it is and its stage over the
     picture, so it is drawn a little larger, keeping the same wide shape. */
  --dstack-w: min(calc(100vw - 2 * var(--gutter)), 380px);
  --dstack-h: 250px;
  --dstack-hold: 30vh;
  --dstack-top: 5vh;
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--dstack-top) 0 calc(200px - 5vh + (var(--n, 1) - 1) * 15px + 3rem);
}
@media (min-width: 640px) { .dstack { --dstack-w: 480px; --dstack-h: 300px; --dstack-top: 8vh; } }
@media (min-width: 1024px) { .dstack { --dstack-w: 560px; --dstack-h: 350px; --dstack-top: 10vh; } }
.dstack::after { content: ''; flex: none; height: var(--dstack-hold); }

.dstack__slot {
  position: sticky; top: 0;
  display: flex; justify-content: center;
  width: 100%; padding-inline: var(--gutter);
}
/* A card with keyboard focus comes to the top of the deck, not under it. */
.dstack__slot:focus-within { z-index: 10; }
/* Each pad is a stacking context of its own, so nothing inside one (its
   words, its lock) can paint over the pad laid on top of it. */
.dstack__card {
  position: relative; isolation: isolate;
  top: calc(-5vh + var(--i, 0) * 15px + 200px);
  width: var(--dstack-w); height: var(--dstack-h);
  transform-origin: top;
  transform: scale(calc(1 - (1 - var(--target, 1)) * clamp(0, (var(--p, 0) - var(--start, 0)) / max(.0001, 1 - var(--start, 0)), 1)));
  will-change: transform;
}

/* The pad fills its slot exactly. On the hub it sets its own height (340px,
   230px on a phone) and its picture is held to that on a phone. */
.dstack .card-domain { height: 100%; --tile-h: none; }
.dstack .card-domain .card__link { min-height: 0; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .dstack__card { transform: none; will-change: auto; }
}

/* Where the page rests on the finished deck: a third of the way into the
   hold, under the bar (the last slot sticks at the band's top plus every
   slot before it). A stop of its own, on a phone (home.css) and with a wheel
   (smooth-scroll.js), so a flick lands on the five pads, not past them. */
.dstack__stop {
  position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none;
  top: calc(var(--dstack-top) + (var(--n, 1) - 1) * var(--dstack-h) + var(--nav-h) + var(--dstack-hold) / 3);
}

/* Behind the deck, each Domain's picture, full screen and blurred (views/
   domain-stack.js): a layer the height of the band, whose screen-high window
   sticks while the deck goes by. It paints the band, so the moving shape
   behind the page (sacred.css) is not seen here. */
.dstack__bgwrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dstack__bg { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: #05060a; }
.dstack__bgimg { position: absolute; inset: -6%; transition: opacity .35s linear; }
.dstack__bgimg .art, .dstack__bgimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dstack__bgimg img { filter: blur(26px) saturate(1.15) brightness(.62); transform: scale(1.08); }
.dstack__slot { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .dstack__bgimg { transition: none; } }
/* A blur softens a picture's edges to nothing, which showed the ground as a
   dark strip down the side: the picture reaches well past the screen. The
   rule that holds every backdrop to the screen's width (rhythm.css) is lifted
   here, where it cut the picture short on the right; the window clips it. */
.dstack .dstack__bgimg { inset: -14%; max-width: none; }