@property --thumb-image {
  syntax: "<image>";
  inherits: true;
}

.container {
  isolation: isolate;
  display: block grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;

  container-type: inline-size;

  overflow: hidden visible;
  scroll-snap-type: inline mandatory;
  overscroll-behavior-inline: contain;

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }

  scroll-marker-group: after;

  &::scroll-marker-group {
    display: block grid;

    grid-auto-flow: column;
    grid-auto-columns: 5em;
    gap: 1rem;
    justify-content: start;

    padding-inline: var(--size-6);

    inline-size: 100%;
    block-size: 8.333333em;

    z-index: 1;
  }
}

.page {
  --__i: var(--sibling-index);
  --__c: var(--sibling-count);
  scroll-snap-align: center;
  position: relative;
  display: grid;
  grid: repeat(3, auto) / 15em 1fr;
  grid-template-areas:
    "thumbnail . ."
    "thumbnail title cta"
    "thumbnail detail detail"
    "thumbnail summary summary";
  align-content: end;
  align-items: center;
  gap: 1rem;
  padding: var(--size-6);
  block-size: 80vh;
  overflow: clip;
  container-type: scroll-state;

  animation:
    animate-in linear forwards,
    animate-out linear forwards;
  animation-timeline: view(inline);
  animation-range: entry, exit;

  color: var(--gray-0);

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    background: linear-gradient(182.5deg, transparent 20%, var(--surface-2) 90%),
      linear-gradient(transparent 50%, #0007 75%);
  }

  &::scroll-marker {
    display: block;
    content: " ";

    inline-size: 5rem;
    aspect-ratio: 3 / 5;

    background: var(--thumb-image) center / cover no-repeat;
    background-color: cornflowerblue;
    border-radius: var(--radius-2);

    transform: scale(1);
    transform-origin: top left;
    transition: 0.3s;
  }

  &::scroll-marker:target-current {
    /* outline: 1px solid white; */
    transform: translate(calc(-0cqi - (6rem * (var(--__i) - 1))), -29rem)
      scale(3);
  }
}

.title {
  grid-area: title;
  font-size: 2.5em;
  z-index: 1;
  filter: contrast(9);
}

.cta {
  grid-area: cta;
  z-index: 1;
  border-radius: var(--radius-2);
  background-color: var(--gray-2);
  color: var(--gray-8);
  text-decoration-color: var(--gray-8);
  padding: var(--size-3);
  font-weight: var(--font-weight-9);
  outline-offset: var(--size-1);

  &:focus-visible {
    outline: 1px solid var(--gray-2);
  }
}

.thumbnail {
  grid-area: thumbnail;
  inline-size: 15em;
  aspect-ratio: 3 / 5;
  border-radius: var(--radius-3);
  object-fit: cover;
  object-position: center;
  z-index: 1;
  opacity: 0 !important;
}

.background {
  position: absolute;
  inset: 0;
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.detail {
  grid-area: detail;
  z-index: 1;
}

.summary {
  grid-area: summary;
  text-wrap: balance;
  z-index: 1;
}

@keyframes animate-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes animate-out {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}