.reveal { opacity: 0; transform: translateY(28px); }
.reveal.in { opacity: 1; transform: none; transition: 900ms var(--ease); }

.clip-reveal { overflow: hidden; display: block; }
.clip-reveal span {
  display: block;
  transform: translateY(110%);
  animation: rise 900ms var(--ease) forwards;
}
.d1 { animation-delay: 80ms; }
.d2 { animation-delay: 180ms; }
.d3 { animation-delay: 280ms; }

@keyframes rise { to { transform: none; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.orb {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,79,1,.28), transparent 70%);
  filter: blur(8px); animation: float 8s ease-in-out infinite;
  pointer-events: none;
}
.hero-orb {
  width: min(420px, 55vw);
  height: min(420px, 55vw);
  right: max(-80px, -12vw);
  top: clamp(40px, 8vw, 80px);
}
@keyframes float {
  50% { transform: translateY(-18px) scale(1.05); }
}

.scroll-hint {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.scroll-hint i {
  width: 18px; height: 28px; border: 1px solid var(--border); border-radius: 12px; position: relative;
}
.scroll-hint i::after {
  content: ""; width: 3px; height: 6px; background: var(--orange); border-radius: 2px;
  position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
  animation: drip 1.4s var(--ease) infinite;
}
@keyframes drip { 50% { top: 14px; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
  .clip-reveal span { transform: none; animation: none; }
}