/* Shared motion layer. Content is always in the DOM; animations only run
   when motion.js adds .motion-ok (JS on, no reduced-motion preference). */

.motion-ok .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--reveal-delay, 0ms);
}
.motion-ok .reveal.is-visible{ opacity:1; transform:none; }

/* Soft aurora behind app/product page heroes */
.page-aurora{
  position:absolute; inset:0 0 auto 0; height:640px; pointer-events:none; overflow:hidden; z-index:0;
}
.page-aurora::before, .page-aurora::after{
  content:""; position:absolute; border-radius:9999px; filter:blur(70px); opacity:.55;
}
.page-aurora::before{
  width:520px; height:520px; left:-120px; top:-160px;
  background:radial-gradient(circle, rgba(52,211,153,0.22), transparent 65%);
}
.page-aurora::after{
  width:460px; height:460px; right:-140px; top:40px;
  background:radial-gradient(circle, rgba(99,102,241,0.18), transparent 65%);
}
.motion-ok .page-aurora::before{ animation:aurora-a 16s ease-in-out infinite alternate; }
.motion-ok .page-aurora::after{ animation:aurora-b 19s ease-in-out infinite alternate; }
@keyframes aurora-a{ to{ transform:translate(120px, 60px) scale(1.15); } }
@keyframes aurora-b{ to{ transform:translate(-100px, 40px) scale(1.1); } }
main{ position:relative; z-index:1; }

/* Hero app icon: gentle float and glow */
.motion-ok .hero-icon{ animation:icon-float 6s ease-in-out infinite; }
.hero-icon{ box-shadow:0 0 0 1px rgba(255,255,255,0.04), 0 18px 50px -12px rgba(52,211,153,0.35); }
@keyframes icon-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* Pointer-following spotlight on cards and panels */
.spotlight{ position:relative; isolation:isolate; }
.spotlight::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background:radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(52,211,153,0.09), transparent 45%);
  opacity:0; transition:opacity .3s ease;
}
.spotlight:hover::after{ opacity:1; }

/* Primary call-to-action shimmer */
.cta-shine{ position:relative; overflow:hidden; }
.cta-shine::before{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.65), transparent);
  transform:skewX(-20deg);
}
.motion-ok .cta-shine::before{ animation:cta-shine 4.5s ease-in-out 1.2s infinite; }
@keyframes cta-shine{ 0%{ left:-60%; } 30%,100%{ left:130%; } }

@media (prefers-reduced-motion: reduce){
  .motion-ok .reveal{ opacity:1; transform:none; transition:none; }
}