.reveal { opacity: 1; transform: none; }
.reveal.is-animated { 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;
  /* Instant paint — never gate LCP on entrance animation */
  opacity: 1;
  transform: none;
  animation: none;
}
.d1, .d2, .d3 { animation-delay: 0ms; }

@keyframes riseSoft {
  from { opacity: 0.35; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 768px) {
  .hero-orb {
    filter: blur(10px);
    opacity: 0.55;
  }
}

.orb {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,82,0,.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);
  /* Lighter blur = less GPU cost during first paint */
  filter: blur(14px);
  opacity: 0.55;
  animation: float 10s ease-in-out infinite;
}
@keyframes float {
  50% { transform: translateY(-18px) scale(1.05); }
}

.scroll-hint {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; 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; }
  html { scroll-behavior: auto; }
  .clip-reveal span { transform: none; animation: none; }
}