.home-shell {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: clamp(7.6rem, 20svh, 11.5rem) 1rem 7rem;
  overflow: hidden;
  overscroll-behavior: none;
  transition: padding 520ms var(--spring), opacity 520ms var(--motion-ease), filter 520ms var(--spring), transform 520ms var(--spring);
}

.deck {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(65vw, 116rem);
  aspect-ratio: 2 / 1;
  min-height: 15rem;
  max-height: 74svh;
  transform-origin: 50% 42%;
  transition: width 520ms var(--spring), height 520ms var(--spring), max-height 520ms var(--spring), opacity 520ms var(--motion-ease), filter 520ms var(--spring), transform 520ms var(--spring);
}

.card {
  --deck-ease: cubic-bezier(.2, .82, .22, 1);
  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
  min-width: 0;
  border-radius: 14px;
  background: var(--card);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 26px 90px rgba(17,17,17,.08);
  transform: translateY(4.5rem) scale(.9);
  transition:
    border-radius 620ms var(--deck-ease),
    box-shadow 620ms var(--deck-ease),
    transform 620ms var(--deck-ease),
    opacity 220ms ease;
}

.card.is-active,
.card.is-next,
.card.is-outgoing {
  will-change: transform, opacity;
}

.card.is-active {
  z-index: 12;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.card.is-next {
  z-index: 9;
  opacity: .72;
  transform: translateY(10vh) scale(.88);
}

.card.is-next-2 {
  z-index: 8;
  opacity: .46;
  transform: translateY(17vh) scale(.78);
}

.card.is-prev {
  z-index: 13;
  opacity: 0;
  transform: translateY(-64vh) scale(.85) rotate(8deg);
}

.card.is-hidden-deep {
  z-index: 7;
  opacity: 0;
  transform: translateY(3.5rem) scale(.88);
}

body.is-leaving-home .home-shell {
  opacity: 0;
  transform: translateY(-1rem) scale(.985);
  transition: opacity 560ms var(--motion-ease), transform 560ms var(--spring);
}

body.is-leaving-home .card {
  pointer-events: none;
}

body.is-leaving-home .card.is-active {
  transform: translateY(0) scale(1);
}

body.is-leaving-home .card.is-next {
  opacity: 0;
  transform: translateY(4vh) scale(.84);
}

body.is-leaving-home .card.is-next-2 {
  opacity: 0;
  transform: translateY(11vh) scale(.74);
}

body.is-returning-home .card.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

body.is-returning-home .card:not(.is-active) {
  opacity: 0;
  pointer-events: none;
}

.card.is-outgoing-forward,
.card.is-outgoing-back {
  z-index: 16;
  opacity: 1;
}

.card.is-outgoing-forward {
  transform: translateY(-110vh) rotate(-4deg) scale(.96);
  transition: transform 620ms var(--deck-ease), opacity 120ms linear 500ms;
}

.card.is-outgoing-back {
  transform: translateY(110vh) rotate(4deg) scale(.96);
  transition: transform 620ms var(--deck-ease), opacity 120ms linear 500ms;
}