/* =============================================================
   Spreadnix — Animations & transitions
   ============================================================= */

/* ---- Scroll reveal ---------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .05s; }
[data-reveal-delay="2"] { transition-delay: .10s; }
[data-reveal-delay="3"] { transition-delay: .15s; }
[data-reveal-delay="4"] { transition-delay: .20s; }
[data-reveal-delay="5"] { transition-delay: .25s; }

/* ---- Page route transition -------------------------------- */
#view { animation: viewIn .45s var(--ease-out); }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Keyframes -------------------------------------------- */
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.92) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-14px); }
}
/* Ring inherits the element's own accent via currentColor. */
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 50%, transparent); }
  70%  { box-shadow: 0 0 0 16px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sheen {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
@keyframes shake {
  10%,90% { transform: translateX(-1px); }
  20%,80% { transform: translateX(2px); }
  30%,50%,70% { transform: translateX(-4px); }
  40%,60% { transform: translateX(4px); }
}
@keyframes countUpBlur {
  from { filter: blur(6px); opacity: .3; }
  to   { filter: blur(0); opacity: 1; }
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.float { animation: floaty 6s ease-in-out infinite; }
.spin  { animation: spin 1s linear infinite; }

/* Sheen sweep used on premium buttons / cards on hover */
.sheen { position: relative; overflow: hidden; }
.sheen::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--grad-sheen);
  transform: translateX(-120%);
  pointer-events: none;
}
.sheen:hover::after { animation: sheen .9s var(--ease-out); }