.hero-visual > img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.hero-entrance {
  opacity: 0;
  animation: hero-rise-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.18s forwards;
}

@keyframes hero-rise-in {
  0% {
    opacity: 0;
    transform: perspective(1100px) translateY(72px) rotateY(-5deg) rotateX(2deg) scale(0.96);
  }
  38% { opacity: 0; }
  55% { opacity: 1; }
  100% {
    opacity: 1;
    transform: perspective(1100px) translateY(0) rotateY(-5deg) rotateX(2deg) scale(1);
  }
}

@media (max-width: 980px) {
  @keyframes hero-rise-in {
    0% { opacity: 0; transform: translateY(56px) scale(0.97); }
    38% { opacity: 0; }
    55% { opacity: 1; }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-entrance { opacity: 1; animation: none; }
  .marquee div { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}