/* ========================================
   FADE IN ANIMATIONS
======================================== */

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

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

@keyframes fadeInDown {
  from {
	opacity: 0;
	transform: translateY(-24px);
  }
  to {
	opacity: 1;
	transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
	opacity: 0;
	transform: translateX(-24px);
  }
  to {
	opacity: 1;
	transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
	opacity: 0;
	transform: translateX(24px);
  }
  to {
	opacity: 1;
	transform: translateX(0);
  }
}

/* ========================================
   SCALE ANIMATIONS
======================================== */

@keyframes scaleIn {
  from {
	opacity: 0;
	transform: scale(0.95);
  }
  to {
	opacity: 1;
	transform: scale(1);
  }
}

/* ========================================
   REVEAL ON SCROLL
======================================== */

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
	opacity var(--duration-slow) var(--ease-out),
	transform var(--duration-slow) var(--ease-out);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition:
	opacity var(--duration-slow) var(--ease-out),
	transform var(--duration-slow) var(--ease-out);
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition:
	opacity var(--duration-slow) var(--ease-out),
	transform var(--duration-slow) var(--ease-out);
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
	opacity var(--duration-slow) var(--ease-out),
	transform var(--duration-slow) var(--ease-out);
}

.reveal-stagger.revealed > *:nth-child(1) {
  transition-delay: 0ms;
}
.reveal-stagger.revealed > *:nth-child(2) {
  transition-delay: 100ms;
}
.reveal-stagger.revealed > *:nth-child(3) {
  transition-delay: 200ms;
}
.reveal-stagger.revealed > *:nth-child(4) {
  transition-delay: 300ms;
}
.reveal-stagger.revealed > *:nth-child(5) {
  transition-delay: 400ms;
}
.reveal-stagger.revealed > *:nth-child(6) {
  transition-delay: 500ms;
}

.reveal-stagger.revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   HOVER EFFECTS
======================================== */

.hover-lift {
  transition: transform var(--duration-fast) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-4px);
}

.hover-scale {
  transition: transform var(--duration-fast) var(--ease-out);
}

.hover-scale:hover {
  transform: scale(1.02);
}

.hover-glow {
  transition: box-shadow var(--duration-fast) var(--ease-out);
}

.hover-glow:hover {
  box-shadow: 0 0 24px var(--color-accent-light);
}

/* ========================================
   LINE ANIMATIONS
======================================== */

.line-draw {
  position: relative;
  display: inline-block;
}

.line-draw::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent);
  transition: width var(--duration-normal) var(--ease-out);
}

.line-draw:hover::after {
  width: 100%;
}

/* ========================================
   LOADING STATES
======================================== */

.skeleton {
  background: linear-gradient(
	90deg,
	var(--color-bg-alt) 0%,
	var(--color-bg) 50%,
	var(--color-bg-alt) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

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

/* ========================================
   PAGE TRANSITIONS
======================================== */

.page-enter {
  animation: fadeInUp var(--duration-normal) var(--ease-out);
}

/* ========================================
   MENU ANIMATIONS
======================================== */

.hamburger {
  width: 24px;
  height: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text);
  transition:
	transform var(--duration-fast) var(--ease-out),
	opacity var(--duration-fast) var(--ease-out);
  transform-origin: center;
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ========================================
   NUMBER COUNTER
======================================== */

.counter {
  font-variant-numeric: tabular-nums;
}

/* ========================================
   MARQUEE
======================================== */

.marquee {
  overflow: hidden;
  white-space: nowrap;
}

.marquee-content {
  display: inline-flex;
  animation: marquee 30s linear infinite;
}

@keyframes marquee {
  0% {
	transform: translateX(0);
  }
  100% {
	transform: translateX(-50%);
  }
}

.marquee:hover .marquee-content {
  animation-play-state: paused;
}