/* =========================================
   MOTION AND REVEAL EFFECTS
   ========================================= */

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes soft-appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes gentle-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

.animate-fade-up {
  animation: fade-up 800ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.animate-delay-1 {
  animation-delay: 120ms;
}

.animate-delay-2 {
  animation-delay: 240ms;
}

.animate-delay-3 {
  animation-delay: 360ms;
}

.animate-soft-appear {
  animation: soft-appear 900ms ease both;
}

/* Used later for sections that enter the viewport */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 750ms ease,
    transform 750ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reusable image treatment for future pages */
.image-frame {
  overflow: hidden;
  border-radius: var(--radius-medium);
}

.image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.image-frame:hover img {
  transform: scale(1.045);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .animate-fade-up,
  .animate-soft-appear {
    animation: none;
  }

  .image-frame img {
    transition: none;
  }
}