/* animations.css */

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

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

@keyframes fadeOut{
  from{ opacity: 1; }
  to{ opacity: 0; }
}

@keyframes popIn{
  from{ opacity: 0; transform: translateY(10px) scale(.985); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes popOut{
  from{ opacity: 1; transform: translateY(0) scale(1); }
  to{ opacity: 0; transform: translateY(10px) scale(.985); }
}

@keyframes flash{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.012); }
  100%{ transform: scale(1); }
}

@keyframes shake{
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(-2px); }
  50%{ transform: translateX(2px); }
  75%{ transform: translateX(-1px); }
}

@keyframes patternDrift{
  0%{
    background-position:
      0 0,
      calc(var(--tile-size) / 2) calc(var(--tile-size) / 2);
  }
  100%{
    background-position:
      var(--tile-size) var(--tile-size),
      calc(var(--tile-size) / 2 + var(--tile-size)) calc(var(--tile-size) / 2 + var(--tile-size));
  }
}

@keyframes sheenLoop{
  0%{
    background-position: 0% 0%, 100% 100%, 0% 100%;
  }
  100%{
    background-position: 100% 100%, 0% 0%, 100% 0%;
  }
}

@keyframes bgBreath{
  0%   { opacity: var(--bgSheenOpacity); filter: blur(var(--bgSheenBlur)); }
  50%  { opacity: var(--bgBreathOpacity); filter: blur(var(--bgBreathBlur)); }
  100% { opacity: var(--bgSheenOpacity); filter: blur(var(--bgSheenBlur)); }
}

@keyframes lotFocus{
  0%{ box-shadow: 0 0 0 0 rgba(163, 200, 255, 0); }
  35%{ box-shadow: 0 0 0 2px rgba(205, 227, 255, 0.46), 0 0 34px rgba(133, 177, 250, 0.34); }
  100%{ box-shadow: 0 0 0 0 rgba(163, 200, 255, 0); }
}

@keyframes rippleWave{
  0%{ transform: scale(0); opacity: 0.85; }
  80%{ opacity: 0.34; }
  100%{ transform: scale(1); opacity: 0; }
}