.home-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  gap: 20px;
  padding: 24px 18px 40px;
}

.home-copy {
  width: min(100%, 760px);
  text-align: center;
}

.poster-stage {
  width: min(100%, 760px);
  display: grid;
  place-items: center;
}

.poster-card {
  position: relative;
  width: min(86vw, 700px);
  animation: poster-rise 900ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.poster-card::before {
  content: "";
  position: absolute;
  inset: 6% 12% 9%;
  border: 1px solid rgba(5, 5, 5, 0.12);
  transform: translate(16px, 16px);
}

.poster-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(5, 5, 5, 0.22));
}

.poster-trigger {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 3%;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 22%;
  border: 1px solid rgba(255, 214, 202, 0.82);
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.12), rgba(5, 5, 5, 0.34));
  box-shadow: 0 0 0 1px rgba(5, 5, 5, 0.22), 0 18px 28px rgba(5, 5, 5, 0.18);
  clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease,
    box-shadow 180ms ease;
}

.poster-trigger:hover,
.poster-trigger:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(255, 214, 202, 1);
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.18), rgba(5, 5, 5, 0.42));
  box-shadow: 0 0 0 1px rgba(5, 5, 5, 0.28), 0 22px 34px rgba(5, 5, 5, 0.24);
  outline: none;
}

@keyframes poster-rise {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 720px) {
  .home-shell {
    padding-bottom: 28px;
  }

  .poster-card {
    width: min(92vw, 620px);
  }

  .poster-trigger {
    left: 14%;
    right: 14%;
    bottom: 2%;
    min-height: 24%;
  }
}