.litter-animation {
  --litter-bg: oklch(0.045 0 0);
  --litter-ink: oklch(0.95 0 0);
  --litter-muted: oklch(0.76 0.008 240);
  --litter-blue: oklch(0.62 0.19 260);
  --litter-cyan: oklch(0.82 0.15 210);
  position: relative;
  min-height: 100svh;
  overflow: clip;
  color: var(--litter-ink);
  background: var(--litter-bg);
  isolation: isolate;
}

.litter-animation-stage {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: clip;
  background: var(--litter-bg);
  contain: paint;
  isolation: isolate;
}

.litter-animation-canvas,
.litter-animation-fallback,
.litter-animation-fallback img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.litter-animation-canvas {
  z-index: 2;
  display: block;
}

.litter-animation-fallback {
  z-index: 1;
  display: block;
  margin: 0;
  background: var(--litter-bg);
  transition: opacity 180ms cubic-bezier(0.25, 1, 0.5, 1);
}

.litter-animation-fallback img {
  display: block;
  object-fit: contain;
}

.litter-animation.is-ready .litter-animation-fallback {
  opacity: 0;
}

.litter-animation-light {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, oklch(0.03 0 0 / 0.58), transparent 20%, transparent 70%, oklch(0.03 0 0 / 0.72)),
    radial-gradient(circle at 50% 24%, oklch(0.64 0.18 258 / 0.15), transparent 28rem),
    radial-gradient(ellipse at center, transparent 30%, oklch(0.02 0 0 / 0.68) 88%);
}

.litter-animation[data-active-story="4"] .litter-animation-light {
  background:
    linear-gradient(180deg, oklch(0.03 0 0 / 0.18), transparent 20%, transparent 76%, oklch(0.03 0 0 / 0.34)),
    radial-gradient(circle at 50% 24%, oklch(0.64 0.18 258 / 0.08), transparent 30rem),
    radial-gradient(ellipse at center, transparent 42%, oklch(0.02 0 0 / 0.38) 92%);
}

.litter-story {
  position: absolute;
  z-index: 4;
  top: 50%;
  width: min(34rem, calc(100vw - 2rem));
  color: var(--litter-ink);
  opacity: 0;
  visibility: hidden;
  filter: blur(8px);
  transform: translateY(calc(-50% + 18px));
  transition:
    opacity 360ms cubic-bezier(0.25, 1, 0.5, 1),
    filter 420ms cubic-bezier(0.25, 1, 0.5, 1),
    transform 460ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 460ms;
  pointer-events: none;
  text-wrap: balance;
}

.litter-story.is-active {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  transform: translateY(-50%);
  transition-delay: 0s;
}

.litter-story-left {
  left: clamp(1rem, 7vw, 6rem);
}

.litter-story-right {
  right: clamp(1rem, 7vw, 6rem);
  text-align: right;
}

.litter-story-center {
  top: 23%;
  left: 50%;
  width: min(44rem, calc(100vw - 2rem));
  text-align: center;
  transform: translate(-50%, calc(-50% + 18px));
}

.litter-story-center.is-active {
  transform: translate(-50%, -50%);
}

.litter-animation .litter-story-kicker {
  margin: 0 0 0.8rem;
  color: var(--litter-cyan);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.litter-animation .litter-story h2 {
  max-width: 11ch;
  margin: 0;
  color: var(--litter-ink);
  font-family: Inter, "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.35rem);
  font-weight: 820;
  letter-spacing: -0.035em;
  line-height: 0.94;
  text-wrap: balance;
}

.litter-story-center h2 {
  max-width: 17ch;
  margin-inline: auto;
}

.litter-animation .litter-story > p:not(.litter-story-kicker) {
  max-width: 34rem;
  margin: 1.15rem 0 0;
  color: var(--litter-muted);
  font-size: clamp(1rem, 1.55vw, 1.28rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.litter-story-center > p:not(.litter-story-kicker) {
  margin-inline: auto;
}

.litter-story-right > p:not(.litter-story-kicker) {
  margin-left: auto;
}

.detail-litter .site-header {
  transition:
    transform 440ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 260ms ease,
    background 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease;
  will-change: transform, opacity;
}

body.is-litter-animation-active .site-header {
  transform: translateY(calc(-100% - 2px));
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 860px) {
  .litter-animation {
    min-height: 100svh;
  }

  .litter-animation-stage {
    min-height: 680px;
  }

  .litter-story,
  .litter-story-left,
  .litter-story-right,
  .litter-story-center {
    top: auto;
    right: auto;
    bottom: 5.5rem;
    left: 1rem;
    width: calc(100vw - 2rem);
    text-align: left;
    transform: translateY(18px);
  }

  .litter-story.is-active,
  .litter-story-center.is-active {
    transform: translateY(0);
  }

  .litter-animation .litter-story h2,
  .litter-story-center h2 {
    max-width: 10ch;
    margin-inline: 0;
    font-size: clamp(2.6rem, 13vw, 4.4rem);
  }

  .litter-animation .litter-story > p:not(.litter-story-kicker),
  .litter-story-center > p:not(.litter-story-kicker) {
    max-width: 29rem;
    margin-inline: 0;
    font-size: 1rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  .litter-animation {
    height: 100svh;
    min-height: 620px;
  }

  .litter-animation-stage {
    position: relative;
  }

  .litter-animation-canvas,
  .litter-animation-light {
    display: none;
  }

  .litter-animation-fallback,
  .litter-animation.is-ready .litter-animation-fallback {
    opacity: 1;
  }

  .litter-story:not([data-litter-story="0"]) {
    display: none;
  }
}