.reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 620ms cubic-bezier(0.2, 0.75, 0.25, 1), transform 620ms cubic-bezier(0.2, 0.75, 0.25, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.hero-visual::after {
  position: absolute;
  top: -36%;
  left: -26%;
  z-index: 1;
  width: 62%;
  height: 170%;
  content: "";
  pointer-events: none;
  background: linear-gradient(102deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: rotate(9deg);
  animation: morning-light 9s ease-in-out infinite;
}

.live-dot { animation: quiet-pulse 3.2s ease-in-out infinite; }

@keyframes morning-light {
  0%, 18% { transform: translateX(-35%) rotate(9deg); opacity: 0; }
  38%, 60% { opacity: 0.75; }
  80%, 100% { transform: translateX(260%) rotate(9deg); opacity: 0; }
}

@keyframes quiet-pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(120, 161, 136, 0.11); }
  50% { box-shadow: 0 0 0 8px rgba(120, 161, 136, 0.04); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-visual::after,
  .live-dot { animation: none; }
}