/* ============================
   GoogolCatBook — Animation System
   ============================ */

/* ---------- Keyframes ---------- */

@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 scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes heartPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.45); }
  60%  { transform: scale(0.88); }
  100% { transform: scale(1); }
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.2); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.15); }
  70%      { transform: scale(1); }
}

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

@keyframes pawSpin {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(90deg) scale(1.1); }
  50%  { transform: rotate(180deg) scale(1); }
  75%  { transform: rotate(270deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

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

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

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(8deg); }
}

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

@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 138, 0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(255, 107, 138, 0); }
}

@keyframes rainbowGlow {
  0%   { box-shadow: 0 0 20px rgba(255, 107, 138, 0.6); }
  33%  { box-shadow: 0 0 20px rgba(255, 168, 92, 0.6); }
  66%  { box-shadow: 0 0 20px rgba(126, 216, 200, 0.6); }
  100% { box-shadow: 0 0 20px rgba(255, 107, 138, 0.6); }
}

@keyframes ripple {
  to {
    transform: scale(3);
    opacity: 0;
  }
}

@keyframes catReveal {
  0%   { opacity: 0; transform: scale(0.9) rotate(-2deg); }
  60%  { opacity: 1; transform: scale(1.02) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ---------- Utility Animation Classes ---------- */

.animate-fade-in       { animation: fadeIn 0.4s ease both; }
.animate-fade-in-up    { animation: fadeInUp 0.5s ease both; }
.animate-fade-in-down  { animation: fadeInDown 0.4s ease both; }
.animate-scale-in      { animation: scaleIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }
.animate-bounce-in     { animation: bounceIn 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) both; }
.animate-float         { animation: float 3s ease-in-out infinite; }
.animate-wiggle        { animation: wiggle 0.5s ease-in-out; }
.animate-heartbeat     { animation: heartBeat 1.2s ease-in-out infinite; }
.animate-pulse-ring    { animation: pulse 1.5s ease-in-out infinite; }

/* Stagger delays for gallery cards */
.animate-fade-in-up:nth-child(1)  { animation-delay: 0.05s; }
.animate-fade-in-up:nth-child(2)  { animation-delay: 0.10s; }
.animate-fade-in-up:nth-child(3)  { animation-delay: 0.15s; }
.animate-fade-in-up:nth-child(4)  { animation-delay: 0.20s; }
.animate-fade-in-up:nth-child(5)  { animation-delay: 0.25s; }
.animate-fade-in-up:nth-child(6)  { animation-delay: 0.30s; }
.animate-fade-in-up:nth-child(7)  { animation-delay: 0.35s; }
.animate-fade-in-up:nth-child(8)  { animation-delay: 0.40s; }

/* ---------- Skeleton Loader ---------- */

.skeleton {
  background: linear-gradient(
    90deg,
    #f0d5dc 25%,
    #ffe0ea 50%,
    #f0d5dc 75%
  );
  background-size: 400px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--border-radius);
}

/* ---------- Loading Spinner ---------- */

.spinner {
  width: 48px;
  height: 48px;
  font-size: 2rem;
  display: inline-block;
  animation: pawSpin 1s linear infinite;
  transform-origin: center;
}

.spinner-sm {
  width: 24px;
  height: 24px;
  font-size: 1rem;
}

/* ---------- Transition Helpers ---------- */

.transition-all    { transition: all 0.3s ease; }
.transition-fast   { transition: all 0.15s ease; }
.transition-slow   { transition: all 0.5s ease; }

/* ---------- Hover Lift Effect ---------- */

.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

/* ---------- Cat Reveal for Random Page ---------- */

.cat-reveal {
  animation: catReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}