/*
  animations.css
  Centraliza microanimaciones, apariciones por scroll, skeleton loading
  y soporte para prefers-reduced-motion.
*/

@keyframes ambientDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(1.2rem, -1rem, 0) scale(1.04);
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes gridFloat {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-1.5rem, 1.5rem, 0);
  }
}

@keyframes skeletonShimmer {
  0% {
    background-position: 120% 0;
  }

  100% {
    background-position: -120% 0;
  }
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translate3d(0, 0.65rem, 0) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 1.4rem, 0) scale(0.985);
  filter: blur(10px);
  transition:
    opacity var(--duration-slow) var(--ease-premium),
    transform var(--duration-slow) var(--ease-premium),
    filter var(--duration-slow) var(--ease-premium);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.media-placeholder,
.card-visual,
.work-placeholder {
  background-size: 240% 100%;
  animation: skeletonShimmer 4s linear infinite;
}

.ambient-light {
  animation: ambientDrift 14s var(--ease-premium) infinite;
}

.ambient-grid {
  animation: gridFloat 18s linear infinite alternate;
}

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

  [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
  }
}