/* ===================================
   ANIMATIONS & TRANSITIONS
   Modern, smooth, playful animations
   =================================== */

/* ===================================
   SCROLL-TRIGGERED ANIMATIONS
   =================================== */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  will-change: opacity, transform;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-fade-in {
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.animate-fade-in.visible {
  opacity: 1;
}

.animate-slide-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.animate-slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.animate-slide-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.animate-slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.animate-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.animate-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for lists */
.animate-stagger-1 { transition-delay: 0ms; }
.animate-stagger-2 { transition-delay: 100ms; }
.animate-stagger-3 { transition-delay: 200ms; }
.animate-stagger-4 { transition-delay: 300ms; }
.animate-stagger-5 { transition-delay: 400ms; }
.animate-stagger-6 { transition-delay: 500ms; }

/* ===================================
   HERO ANIMATIONS
   =================================== */

@keyframes hero-fade-in {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.hero-logo {
  animation: hero-fade-in 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

@keyframes gradient-shift {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.hero-overlay {
  animation: gradient-shift 8s ease-in-out infinite;
}

/* Parallax effect applied via JavaScript */
.hero-background {
  will-change: transform;
}

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

.image-hover {
  overflow: hidden;
  border-radius: var(--radius-lg);
  position: relative;
}

.image-hover img {
  transition: transform var(--transition-bounce), filter var(--transition-smooth);
  will-change: transform;
}

.image-hover:hover img {
  transform: scale(1.08);
  filter: brightness(1.1);
}

/* Playful tilt effect */
.image-hover-tilt {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.image-hover-tilt img {
  transition: transform var(--transition-bounce), filter var(--transition-smooth);
  will-change: transform;
}

.image-hover-tilt:hover img {
  transform: scale(1.08) rotate(2deg);
  filter: brightness(1.1);
}

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

.card-hover {
  transition: transform var(--transition-bounce), box-shadow var(--transition-smooth);
  will-change: transform;
}

.card-hover:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: var(--shadow-2xl);
}

.card-hover-glow {
  position: relative;
  transition: transform var(--transition-smooth);
  will-change: transform;
}

.card-hover-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-secondary),
    var(--color-accent)
  );
  opacity: 0;
  transition: opacity var(--transition-smooth);
  z-index: -1;
}

.card-hover-glow:hover {
  transform: translateY(-8px);
}

.card-hover-glow:hover::before {
  opacity: 1;
}

/* ===================================
   BUTTON ANIMATIONS
   =================================== */

.btn {
  position: relative;
  overflow: hidden;
  transition: all var(--transition-bounce);
  will-change: transform;
}

.btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-lg);
}

.btn:active {
  transform: scale(0.96);
  transition: transform 100ms ease-out;
}

/* Ripple effect */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width var(--transition-slow), height var(--transition-slow);
}

.btn-ripple:active::after {
  width: 300px;
  height: 300px;
}

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

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

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-base-2);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.loading-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Progress bar animation */
.progress-bar {
  height: 4px;
  background: var(--color-base-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-secondary),
    var(--color-accent)
  );
  background-size: 200% 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-base);
  will-change: width;
  animation: gradient-flow 3s ease infinite;
}

@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ===================================
   MODAL ANIMATIONS
   =================================== */

@keyframes modal-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-backdrop {
  animation: modal-backdrop-in var(--transition-smooth) ease-out;
}

.modal-content {
  animation: modal-in var(--transition-smooth) cubic-bezier(0.4, 0, 0.2, 1);
}

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

@keyframes slide-in-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.mobile-menu-enter {
  animation: slide-in-right var(--transition-smooth) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stagger menu items */
.mobile-menu-item {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.mobile-menu-item.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ===================================
   IMAGE LAZY LOADING
   =================================== */

.lazy-image {
  filter: blur(20px);
  transition: filter var(--transition-slow);
}

.lazy-image.loaded {
  filter: blur(0);
}

/* ===================================
   FLOATING ANIMATION
   =================================== */

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

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

/* ===================================
   WIGGLE ANIMATION (playful for dogs!)
   =================================== */

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

.wiggle {
  animation: wiggle 0.5s ease-in-out;
}

.hover-wiggle:hover {
  animation: wiggle 0.5s ease-in-out;
}

/* ===================================
   BOUNCE ANIMATION
   =================================== */

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

.bounce {
  animation: bounce 1s ease-in-out infinite;
}

/* ===================================
   FADE TRANSITIONS
   =================================== */

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity var(--transition-smooth);
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity var(--transition-smooth);
}

/* ===================================
   TEXT ANIMATIONS
   =================================== */

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

.text-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-text-0) 40%,
    var(--color-primary) 50%,
    var(--color-text-0) 60%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-shimmer 3s linear infinite;
}

/* ===================================
   PERFORMANCE OPTIMIZATIONS
   =================================== */

/* GPU acceleration hints */
.gpu-accelerate {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* 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;
    scroll-behavior: auto !important;
  }
}

/* ===================================
   VIEW TRANSITIONS API (Modern browsers)
   =================================== */

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.3s;
  }
}