/* =========================
   UTILITIES
   ========================= */

.lazy-load{
  opacity:0;
  transition:opacity var(--transition-base);
}
.lazy-load.loaded{ opacity:1; }

.skeleton{
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0.1) 25%,
    rgba(255,255,255,0.2) 50%,
    rgba(255,255,255,0.1) 75%
  );
  background-size:200% 100%;
  animation:loading 1.5s infinite;
}
@keyframes loading{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}

@media (prefers-contrast: high){
  :root{
    --color-text:#ffffff;
    --color-text-secondary:#ffffff;
    --color-border:rgba(255,255,255,0.3);
  }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}