/* ============================================================
   365in — animations.css
   All keyframes + scroll-reveal classes + stagger + reduced motion
   ============================================================ */

/* ---------- Keyframes ---------- */
@keyframes floatArena     { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-12px) rotate(1deg)} }
@keyframes tickerUp       { from{transform:translateY(0)} to{transform:translateY(-50%)} }
@keyframes tickerRight    { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes glowPulse      { 0%,100%{opacity:0.4;transform:scale(1)} 50%{opacity:0.7;transform:scale(1.08)} }
@keyframes signalRing     { 0%{opacity:0.7;transform:translate(-50%,-50%) scale(0.8)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)} }
@keyframes countUp        { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes shimmer        { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes slideDown      { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideInRight   { from{opacity:0;transform:translateX(60px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeScale      { from{opacity:0;transform:scale(0.94)} to{opacity:1;transform:scale(1)} }
@keyframes borderGlow     { 0%,100%{border-color:var(--green-border)} 50%{border-color:var(--green-bright)} }
@keyframes gradientShift  { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes glitchNum      { 0%,100%{clip-path:inset(0)} 25%{clip-path:inset(20% 0 60% 0)} 75%{clip-path:inset(60% 0 20% 0)} }
@keyframes floatY         { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes spinSlow       { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* ---------- Animation utility classes ---------- */
.anim-float       { animation: floatY 5s ease-in-out infinite; }
.anim-glow-pulse  { animation: glowPulse 2.4s ease-in-out infinite; }
.anim-slide-down  { animation: slideDown 0.5s var(--ease) both; }
.anim-slide-right { animation: slideInRight 0.6s var(--ease) both; }
.anim-fade-scale  { animation: fadeScale 0.5s var(--ease) both; }
.anim-border-glow { animation: borderGlow 3s ease-in-out infinite; }
.shimmer-text {
  background: linear-gradient(100deg, var(--text-secondary) 20%, var(--green-bright) 50%, var(--text-secondary) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 4s linear infinite;
}

/* ---------- Scroll reveal ---------- */
.reveal       { opacity:0; transform:translateY(32px); transition:opacity 0.65s ease, transform 0.65s ease; }
.reveal-left  { opacity:0; transform:translateX(-40px); transition:opacity 0.65s ease, transform 0.65s ease; }
.reveal-right { opacity:0; transform:translateX(40px); transition:opacity 0.65s ease, transform 0.65s ease; }
.reveal-scale { opacity:0; transform:scale(0.92); transition:opacity 0.55s ease, transform 0.55s ease; }
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible { opacity:1; transform:none; }

/* ---------- Stagger children ---------- */
.stagger > *               { transition-delay: 0s; }
.stagger > *:nth-child(1)  { transition-delay: 0s; }
.stagger > *:nth-child(2)  { transition-delay: 0.1s; }
.stagger > *:nth-child(3)  { transition-delay: 0.2s; }
.stagger > *:nth-child(4)  { transition-delay: 0.3s; }
.stagger > *:nth-child(5)  { transition-delay: 0.4s; }
.stagger > *:nth-child(6)  { transition-delay: 0.5s; }
.stagger > *:nth-child(7)  { transition-delay: 0.6s; }
.stagger > *:nth-child(8)  { transition-delay: 0.7s; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity:1; transform:none; }
}