/* Hero phone — full app screen, in normal flow (no crop/peek) */

.hero__phone-stage {
  margin-top: clamp(2.25rem, 5vh, 3.25rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.phone--hero {
  position: relative;
  width: clamp(220px, 24vw, 290px);
  aspect-ratio: 402 / 874;
  border-radius: clamp(30px, 4vw, 40px);
  background: #000;
  box-shadow: var(--shadow-phone), 0 0 0 1px rgba(241, 239, 245, 0.08);
}

.phone__screen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: #000;
}

.game-screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font: 500 0.72rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hero__scroll-chev {
  font-size: 1.15rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.9;
  animation: phone-scroll-bob 2.4s ease-in-out infinite;
}

@keyframes phone-scroll-bob {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(7px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-chev { animation: none; opacity: 0.8; }
}