.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.hero-decoration {
  position: absolute; right: 0; top: 0;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(217,119,6,0.1), transparent 70%);
  filter: blur(60px); z-index: -1; pointer-events: none;
}

.bg-grid {
  position: absolute;
  inset: 0;
  background-size: 50px 50px;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
  z-index: -2;
  animation: gridMove 20s linear infinite;
}
@keyframes gridMove {
  0% { transform: translateY(0); }
  100% { transform: translateY(50px); }
}

.hero-glow {
  position: absolute; top: 50%; left: 50%;
  width: 80vw; height: 80vw; max-width: 800px; max-height: 800px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(245, 158, 11, 0.08) 0%, transparent 60%);
  z-index: -1; pointer-events: none;
}

@keyframes heroBgFade {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
.hero-bg-img-alt {
  animation: heroBgFade 12s infinite ease-in-out;
}