html { scroll-behavior: smooth; }
body { background: #ffffff; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.reveal-in { opacity: 1; transform: translateY(0); }

/* ---------- Hero load-in stagger ---------- */
@keyframes loadUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.load-item { opacity: 0; animation: loadUp .8s cubic-bezier(.22,1,.36,1) forwards; }
.load-1 { animation-delay: .05s; }
.load-2 { animation-delay: .18s; }
.load-3 { animation-delay: .32s; }
.load-4 { animation-delay: .46s; }
.load-5 { animation-delay: .62s; }

/* ---------- Hero atmosphere ---------- */
.hero-glow {
  position: absolute;
  top: -20%; left: 50%;
  width: 900px; height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(52,152,219,.35) 0%, rgba(52,152,219,0) 62%);
  pointer-events: none;
  animation: floatGlow 12s ease-in-out infinite alternate;
}
@keyframes floatGlow {
  from { transform: translateX(-50%) translateY(0); }
  to   { transform: translateX(-45%) translateY(40px); }
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 40%, transparent 100%);
  pointer-events: none;
}
.wave {
  position: absolute; bottom: -1px; left: 0; right: 0; height: 60px;
  background: #ffffff;
  clip-path: ellipse(75% 100% at 50% 100%);
}

/* ---------- Testimonial quote fade ---------- */
@keyframes quoteFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.quote-fade { animation: quoteFade .5s ease forwards; }

/* ---------- CTA orb ---------- */
.cta-orb {
  position: absolute;
  width: 380px; height: 380px;
  top: -120px; right: -100px;
  background: radial-gradient(circle, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* ---------- Toast ---------- */
@keyframes toastPop {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.toast-pop { animation: toastPop .35s cubic-bezier(.34,1.56,.64,1) forwards; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .load-item, .hero-glow, .quote-fade, .toast-pop {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

::selection { background: #3498DB; color: #fff; }