/*
 * MOP Animations & Micro-interactions
 */

/* ═══════════════════════════════════════════════════════════
	 KEYFRAME ANIMATIONS
	 ═══════════════════════════════════════════════════════════ */

/* Fade In Up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

/* Puppet String */
@keyframes puppetString {
  from {
    transform: scaleY(0);
    transform-origin: top;
  }

  to {
    transform: scaleY(1);
    transform-origin: top;
  }
}

/* Copper Shimmer */
@keyframes copperShimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* Pulse Glow */
@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(184, 115, 51, 0.3);
  }

  50% {
    box-shadow: 0 0 40px rgba(184, 115, 51, 0.6);
  }
}

/* Float */
@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

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

/* ═══════════════════════════════════════════════════════════
	 SCROLL ANIMATIONS
	 ═══════════════════════════════════════════════════════════ */

[data-animate] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

/* Stagger children */
[data-animate-stagger]>* {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}

/* ═══════════════════════════════════════════════════════════
	 HOVER EFFECTS
	 ═══════════════════════════════════════════════════════════ */

/* Link animated underline */
.link-animated {
  position: relative;
  color: var(--color-bronze-copper);
  text-decoration: none;
}

.link-animated::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-bronze-copper);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-normal) var(--ease-out);
}

.link-animated:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Image zoom */

/* ═══════════════════════════════════════════════════════════
	 LOADING STATES
	 ═══════════════════════════════════════════════════════════ */

/* Skeleton */

@keyframes skeleton {
  0% {
    background-position: 200% 0;
  }

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

/* Spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-bronze-copper);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ═══════════════════════════════════════════════════════════
	 PAGE TRANSITIONS
	 ═══════════════════════════════════════════════════════════ */