/* ==================== Mascot Animations ==================== */
@keyframes owl-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.05); }
}

@keyframes owl-look {
  0%, 40%, 100% { transform: translateX(0); }
  20%           { transform: translateX(2px); }
  60%           { transform: translateX(-1px); }
}

@keyframes owl-wave {
  0%, 100% { transform: rotate(-10deg); }
  50%      { transform: rotate(15deg); }
}

@keyframes owl-zzz {
  0%, 100% { opacity: 0.2; transform: translateY(0); }
  50%      { opacity: 0.6; transform: translateY(-3px); }
}

.mascot .mascot-eyes {
  animation: owl-blink 4s ease-in-out infinite;
  transform-origin: center;
}

.mascot .mascot-pupil {
  animation: owl-look 6s ease-in-out infinite;
}

.mascot-waving .mascot-wave {
  animation: owl-wave 1.2s ease-in-out 3;
  transform-origin: 85px 65px;
}

.mascot-sleeping .mascot-zzz  { animation: owl-zzz 2s ease-in-out infinite; }
.mascot-sleeping .mascot-zzz2 { animation: owl-zzz 2s ease-in-out infinite 0.4s; }
.mascot-sleeping .mascot-zzz3 { animation: owl-zzz 2s ease-in-out infinite 0.8s; }

/* ==================== Skeleton Loading ==================== */
@keyframes skeleton-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: 400px 0; }
}

.skeleton-pulse {
  background: linear-gradient(
    90deg,
    var(--color-cloud) 0%,
    var(--color-fog) 50%,
    var(--color-cloud) 100%
  );
  background-size: 400px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* ==================== Page Transitions ==================== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.animate-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-in-up {
  animation: fadeInUp 0.4s ease-out forwards;
}

.animate-in-scale {
  animation: fadeInScale 0.3s ease-out forwards;
}

/* Staggered children animation */
.stagger-children > * {
  opacity: 0;
  animation: fadeIn 0.3s ease-out forwards;
}

.stagger-children > *:nth-child(1)  { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2)  { animation-delay: 0.10s; }
.stagger-children > *:nth-child(3)  { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4)  { animation-delay: 0.20s; }
.stagger-children > *:nth-child(5)  { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6)  { animation-delay: 0.30s; }
.stagger-children > *:nth-child(7)  { animation-delay: 0.35s; }
.stagger-children > *:nth-child(8)  { animation-delay: 0.40s; }
.stagger-children > *:nth-child(9)  { animation-delay: 0.45s; }
.stagger-children > *:nth-child(10) { animation-delay: 0.50s; }
.stagger-children > *:nth-child(n+11) { animation-delay: 0.55s; }

/* ==================== Hover Effects ==================== */
.hover-lift {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ==================== Quote Decorations ==================== */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

/* ==================== Spinner ==================== */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-fog);
  border-top-color: var(--color-mocha);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: var(--space-lg) auto;
}

.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner-lg { width: 40px; height: 40px; border-width: 4px; }