/* Animations & Transitions Styles */

.anim-page {
  /* Custom variables for this page */
}

/* Transitions Demo */
.transition-demo {
  width: 100px;
  height: 100px;
  background: var(--primary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.transition-demo:hover {
  width: 200px;
  background: var(--accent-2);
  transform: rotate(5deg);
}

/* Timing Functions Demo */
.timing-demo-controls {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.timing-demo-controls label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 500;
}

.timing-demo-controls input[type="radio"] {
  cursor: pointer;
}

.timing-demo-btn {
  padding: 0.75rem 1.5rem;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 1rem;
  transition: background 0.2s ease;
}

.timing-demo-btn:hover {
  background: var(--primary-dark);
}

.timing-demo {
  width: 60px;
  height: 60px;
  background: var(--primary);
  border-radius: 8px;
  margin-top: 1rem;
  animation: timingSlide 1s ease forwards;
}

@keyframes timingSlide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(300px);
  }
}

/* Keyframe Animations */
.keyframe-demos {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: flex-end;
  padding: 3rem 1rem;
  background: var(--bg-alt);
  color: var(--text);
  border-radius: 8px;
  min-height: 250px;
}

.bounce-demo {
  width: 60px;
  height: 60px;
  background: var(--primary);
  border-radius: 8px;
  animation: bounce 1s ease-in-out infinite;
}

.spin-demo {
  width: 60px;
  height: 60px;
  background: var(--accent-2);
  border-radius: 8px;
  animation: spin 2s linear infinite;
}

.pulse-demo {
  width: 60px;
  height: 60px;
  background: var(--primary);
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
}

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

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.8);
  }
}

/* Performance Demo */
.performance-demos {
  display: flex;
  gap: 3rem;
  padding: 2rem;
  background: var(--bg-alt);
  color: var(--text);
  border-radius: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.perf-good,
.perf-bad {
  text-align: center;
}

.perf-good p,
.perf-bad p {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--text);
}

.perf-box {
  width: 80px;
  height: 80px;
  background: var(--primary);
  border-radius: 8px;
  margin: 0 auto;
  cursor: pointer;
  transition: transform 0.4s ease;
}

.perf-good:hover .perf-box {
  transform: scale(1.5) rotateY(180deg);
}

.perf-box-bad {
  width: 80px;
  height: 80px;
  background: var(--primary);
  border-radius: 8px;
  margin: 0 auto;
  cursor: pointer;
  transition: width 0.4s ease, height 0.4s ease;
}

.perf-bad:hover .perf-box-bad {
  width: 120px;
  height: 120px;
}

/* Quick Links */
.quick-links {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.pill {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--primary);
  color: white;
  border-radius: 20px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s ease;
  cursor: pointer;
}

.pill:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .timing-demo {
    animation: timingSlide 1s ease forwards;
  }

  @keyframes timingSlide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(150px);
    }
  }

  .keyframe-demos {
    gap: 1rem;
    min-height: 200px;
  }

  .performance-demos {
    gap: 1.5rem;
  }
}