/* ============================================================
   WeBuild Technology Inc. — animations.css
   Keyframes + scroll-reveal utilities. Loaded on every page.
   ============================================================ */

/* ---- Keyframes ---- */
@keyframes hero-in{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:none}
}
@keyframes feed-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@keyframes blink{
  0%,100%{opacity:1}50%{opacity:.35}
}
@keyframes pulse-travel{
  0%{left:0;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{left:calc(100% - 7px);opacity:0}
}
@keyframes pulse-travel-v{
  0%{top:0;left:-2.5px;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{top:calc(100% - 7px);left:-2.5px;opacity:0}
}
@keyframes wave-bounce{
  from{height:18%}
  to{height:95%}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bar-grow{
  from{transform:scaleY(0)}
  to{transform:scaleY(1)}
}
@keyframes modal-in{
  from{opacity:0;transform:translateY(24px) scale(.97)}
  to{opacity:1;transform:none}
}
@keyframes float-slow{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}
@keyframes grad-shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ---- Hero entrance ---- */
.hero-anim > *{opacity:0;animation:hero-in .8s cubic-bezier(.2,.8,.3,1) forwards}
.hero-anim > *:nth-child(1){animation-delay:.05s}
.hero-anim > *:nth-child(2){animation-delay:.15s}
.hero-anim > *:nth-child(3){animation-delay:.28s}
.hero-anim > *:nth-child(4){animation-delay:.42s}
.hero-anim > *:nth-child(5){animation-delay:.55s}
.hero-visual{opacity:0;animation:hero-in .9s .45s cubic-bezier(.2,.8,.3,1) forwards}

/* ---- Animated gradient headline accent ---- */
.grad-animate{
  background:linear-gradient(115deg,#3D52E8,#9B5CF6,#F2798C,#9B5CF6,#3D52E8);
  background-size:280% 280%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:grad-shift 9s ease infinite;
}

/* ---- Scroll reveal (activated by main.js IntersectionObserver) ---- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}
.reveal-d4{transition-delay:.32s}

/* ---- Ambient float for hero visual ---- */
.floaty{animation:float-slow 7s ease-in-out infinite}

/* ---- Glow on featured cards ---- */
.glow{position:relative}
.glow::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1;
  background:linear-gradient(120deg,rgba(61,82,232,.6),rgba(155,92,246,.5),rgba(242,121,140,.55));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;transition:opacity .3s;
}
.glow:hover::before{opacity:1}

/* ---- Accessibility: respect reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,.hero-anim > *,.hero-visual,.sys-event{opacity:1 !important;transform:none !important}
}