/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes float{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-14px) rotate(3deg); }
}

@keyframes marquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

@keyframes spin-slow{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

@keyframes ripple{
  to{ transform: scale(3); opacity: 0; }
}

@keyframes fadeInUp{
  from{ opacity: 0; transform: translateY(24px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ---- Scroll reveal ---- */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in-view{ opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view > *{ animation: fadeInUp .6s ease both; }
.reveal-stagger.in-view > *:nth-child(1){ animation-delay: .05s; }
.reveal-stagger.in-view > *:nth-child(2){ animation-delay: .12s; }
.reveal-stagger.in-view > *:nth-child(3){ animation-delay: .19s; }
.reveal-stagger.in-view > *:nth-child(4){ animation-delay: .26s; }
.reveal-stagger.in-view > *:nth-child(5){ animation-delay: .33s; }
.reveal-stagger.in-view > *:nth-child(6){ animation-delay: .4s; }
.reveal-stagger.in-view > *:nth-child(7){ animation-delay: .47s; }
.reveal-stagger.in-view > *:nth-child(8){ animation-delay: .54s; }

/* ---- Ripple buttons ---- */
.btn{ position: relative; overflow: hidden; }
.ripple-el{
  position: absolute; border-radius: 50%; background: rgba(255,255,255,0.5);
  transform: scale(0); pointer-events: none; animation: ripple .6s ease-out;
}
.btn-secondary .ripple-el, .btn-ghost .ripple-el{ background: rgba(76,79,245,0.25); }

/* ---- Loading bar (page load) ---- */
.page-loader{
  position: fixed; inset: 0; background: var(--paper); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease, visibility .5s ease;
}
.page-loader.hidden{ opacity: 0; visibility: hidden; }
.loader-mark{
  width: 56px; height: 56px; border-radius: 14px;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-family: var(--font-mono); font-weight: 600; font-size: 22px;
  animation: spin-slow 1.4s linear infinite;
}

/* ---- Gradient animated background (CTA accents) ---- */
.gradient-anim{
  background: linear-gradient(120deg, var(--indigo), var(--violet), var(--mint), var(--indigo));
  background-size: 300% 300%;
  animation: gradientMove 8s ease infinite;
}
@keyframes gradientMove{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}