/* =========================================================
   SULVEO — 10. Keyframes & Animations
   ========================================================= */

@keyframes grid-drift {
  to { background-position: 54px 54px, 54px 54px; }
}

@keyframes gentle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-18px) rotate(1.5deg); }
}

@keyframes chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

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

@keyframes pulse-ring {
  from { transform: scale(1); opacity: .55; }
  to { transform: scale(1.9); opacity: 0; }
}

@keyframes ping {
  75%, 100% { transform: scale(2.2); opacity: 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spin { animation: spin 1s linear infinite; }

.float {
  animation: gentle-float 7.5s ease-in-out infinite;
  will-change: transform;
}
.float:hover { animation-play-state: paused; }
@media (min-width: 1024px) {
  .float.d1 { animation-delay: -1.2s; }
  .float.d2 { animation-delay: -2.4s; }
  .float.d3 { animation-delay: -3.6s; }
  .float.d4 { animation-delay: -4.8s; }
}

/* Scroll reveal (only active when JS is enabled via .js class in <head>) */
.reveal-mask {
  display: block;
  overflow: hidden;
  position: relative;
  line-height: inherit;
  contain: layout;
  padding-block: 0.2em 0.35em;
  margin-block: -0.2em -0.35em;
}
.reveal-mask > span {
  display: block;
  width: 100%;
}
.reveal-mask--fixed-1,
.reveal-mask--fixed-2 {
  min-height: 1.25em;
}
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}
.js .reveal-mask > span {
  transform: translateY(140%);
  transition: transform 1s var(--ease);
  will-change: transform;
}
.js .reveal-mask.in > span { transform: none; }

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal, .js .reveal-mask > span {
    opacity: 1 !important;
    transform: none !important;
  }
  .marquee__track { animation: none !important; }
}