:root {
  color-scheme: light;
  background: #e9e9ec;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 0;
  min-height: 100svh;
  margin: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.debug-controls {
  position: fixed;
  z-index: 20;
  top: 16px;
  left: 16px;
  padding: 8px 10px;
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 9px;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 3px 14px rgb(0 0 0 / 12%);
  color: #222;
  font: 13px/18px -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  cursor: default;
  user-select: none;
}

.debug-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
}

.debug-toggle input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #147ef5;
  cursor: pointer;
}

/* 375 × 812 design canvas; all supplied PNGs are exported at 3×. */
.screen {
  position: relative;
  container-type: inline-size;
  width: min(375px, 100vw);
  aspect-ratio: 375 / 812;
  overflow: hidden;
  isolation: isolate;
  background: white;
}

img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.home,
.scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scrim {
  background: rgb(0 0 0 / 60%);
  opacity: 0;
  animation: scrim-in 450ms cubic-bezier(0.46, 0.21, 0, 1) forwards;
}

.sheet {
  position: absolute;
  top: 74.4cqw; /* y = 279 */
  left: 0;
  width: 100%;
  height: 142.133333cqw; /* 533 */
  overflow: hidden;
  border-radius: 3.2cqw 3.2cqw 0 0;
  background: white;
  transform: translateY(100%);
  animation: sheet-in 450ms cubic-bezier(0.46, 0.21, 0, 1) forwards;
  will-change: transform;
}

.cover-background {
  position: absolute;
  inset: -28cqw -27cqw -14cqw;
  overflow: hidden;
  opacity: 0.1;
  transform: rotate(-8.94deg) scale(1.12);
  transform-origin: 50% 38%;
  will-change: transform, opacity;
}

.cover-column {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 1.466667cqw;
  width: 23.95cqw;
  height: max-content;
  will-change: transform;
}

.cover-column img {
  width: 23.95cqw;
  height: 23.95cqw;
  flex: 0 0 auto;
  border-radius: 1.466667cqw;
  object-fit: cover;
}

/* Figma uses five cards in the offset columns and six in the columns that start at the top. */
.cover-column:nth-child(odd) img:last-child {
  display: none;
}

/* Nine columns with alternating vertical offsets, matching the Figma matrix. */
.cover-column-1 { top: 12.8cqw; left: 0cqw; animation: cover-column-up 10.97s linear infinite alternate; }
.cover-column-2 { top: 0cqw; left: 25.416667cqw; animation: cover-column-down 12.74s linear infinite alternate; }
.cover-column-3 { top: 12.8cqw; left: 50.833334cqw; animation: cover-column-up 13.93s linear infinite alternate; }
.cover-column-4 { top: 0cqw; left: 76.250001cqw; animation: cover-column-down 11.85s linear infinite alternate; }
.cover-column-5 { top: 12.8cqw; left: 101.666668cqw; animation: cover-column-up 13.33s linear infinite alternate; }
.cover-column-6 { top: 0cqw; left: 127.083335cqw; animation: cover-column-down 12.45s linear infinite alternate; }
.cover-column-7 { top: 12.8cqw; left: 152.500002cqw; animation: cover-column-up 14.22s linear infinite alternate; }
.cover-column-8 { top: 0cqw; left: 177.916669cqw; animation: cover-column-down 12.15s linear infinite alternate; }
.cover-column-9 { top: 12.8cqw; left: 203.333336cqw; animation: cover-column-up 13.03s linear infinite alternate; }

.sheet-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(255 255 255 / 40%), #fff 10.532%);
}

/* Debug mode leaves only the animated cover background visible inside the sheet. */
.debug-hide-sheet-content .sheet-wash {
  opacity: 0;
  pointer-events: none;
}

.debug-hide-sheet-content .cover-background {
  opacity: 0.24;
}

.debug-hide-sheet-content .slice {
  opacity: 0 !important;
  pointer-events: none;
}

.slice {
  position: absolute;
  object-fit: contain;
}

.title {
  left: 5.333333cqw; /* x = 20 */
  top: 8.266667cqw; /* y = 31 inside sheet */
  width: 89.333333cqw;
  height: 20.266667cqw;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  animation: content-in 460ms cubic-bezier(0.2, 0, 0, 1) 150ms forwards;
}

/* item slices include 15px of shadow padding at the left and 11px at the top. */
.episode {
  left: 1.333333cqw;
  width: 93.333333cqw;
  height: 25.6cqw;
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.985);
  animation: item-in 430ms cubic-bezier(0.2, 0, 0, 1) var(--item-delay) forwards;
  will-change: transform, opacity;
}

.episode-1 {
  top: 29.866667cqw; /* visible cover starts at screen y = 402 */
  --item-delay: 230ms;
}

.episode-2 {
  top: 53.6cqw; /* visible cover starts at screen y = 491 */
  --item-delay: 300ms;
}

.episode-3 {
  top: 77.333333cqw; /* visible cover starts at screen y = 580 */
  --item-delay: 370ms;
}

.actions-slice {
  left: 5.333333cqw;
  top: 106.4cqw; /* screen y = 678 */
  width: 89.333333cqw;
  height: 24.8cqw;
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(0.98);
  animation: content-in 460ms cubic-bezier(0.2, 0, 0, 1) 460ms forwards;
  will-change: transform, opacity;
}

@keyframes scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sheet-in {
  from { transform: translate3d(0, 100%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes cover-column-up {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -16cqw, 0); }
}

@keyframes cover-column-down {
  from { transform: translate3d(0, -12cqw, 0); }
  to { transform: translate3d(0, 8cqw, 0); }
}

@keyframes content-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.99); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes item-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.is-closed .sheet {
  pointer-events: none;
  animation: sheet-out 350ms cubic-bezier(0.32, 0.38, 0.2, 1) forwards;
}

.is-closed .scrim {
  pointer-events: none;
  animation: scrim-out 350ms cubic-bezier(0.32, 0.38, 0.2, 1) forwards;
}

.is-closed .slice {
  animation: none;
  opacity: 1;
  transform: none;
}

@keyframes sheet-out {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 100%, 0); }
}

@keyframes scrim-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .scrim,
  .sheet,
  .cover-background,
  .cover-column,
  .title,
  .episode,
  .actions-slice {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .cover-background {
    opacity: 0.1;
  }

  .is-closed .sheet {
    animation: none;
    transform: translateY(100%);
  }

  .is-closed .scrim {
    animation: none;
    opacity: 0;
  }
}