/* ============================================
   ANIMATED BACKGROUND - MEAT JOURNEY THEME
   ============================================ */

/* Gradient Shift Background */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  background: linear-gradient(
    135deg,
    #fff 0%,
    #ffe8ec 25%,
    #ffd4dc 50%,
    #ffe8ec 75%,
    #fff 100%
  );
  background-size: 400% 400%;
  animation: gradientShift 20s ease infinite;
}

@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Floating Meat Icons Pattern */
.meat-pattern-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.meat-icon-float {
  position: absolute;
  font-size: 3rem;
  opacity: 0.06;
  animation: floatAround 25s infinite ease-in-out;
  filter: blur(1px);
}

.meat-icon-float:nth-child(1) {
  content: '🥩';
  top: 10%;
  left: 10%;
  animation-delay: 0s;
  animation-duration: 28s;
}

.meat-icon-float:nth-child(2) {
  content: '🐷';
  top: 25%;
  right: 15%;
  animation-delay: 5s;
  animation-duration: 32s;
}

.meat-icon-float:nth-child(3) {
  content: '🐮';
  bottom: 35%;
  left: 20%;
  animation-delay: 10s;
  animation-duration: 30s;
}

.meat-icon-float:nth-child(4) {
  content: '🐔';
  bottom: 15%;
  right: 10%;
  animation-delay: 15s;
  animation-duration: 34s;
}

.meat-icon-float:nth-child(5) {
  content: '✨';
  top: 50%;
  left: 50%;
  animation-delay: 8s;
  animation-duration: 26s;
}

.meat-icon-float:nth-child(6) {
  content: '🔬';
  top: 70%;
  left: 30%;
  animation-delay: 12s;
  animation-duration: 29s;
}

@keyframes floatAround {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0.06;
  }
  25% {
    transform: translate(50px, -60px) rotate(90deg) scale(1.2);
    opacity: 0.1;
  }
  50% {
    transform: translate(-30px, 50px) rotate(180deg) scale(0.9);
    opacity: 0.04;
  }
  75% {
    transform: translate(60px, 30px) rotate(270deg) scale(1.1);
    opacity: 0.08;
  }
}

/* Animated Dot Pattern */
.page::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(232, 93, 117, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(255, 107, 136, 0.03) 0%, transparent 50%),
    radial-gradient(circle, rgba(232, 93, 117, 0.04) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 40px 40px;
  z-index: -1;
  pointer-events: none;
  animation: patternMove 40s linear infinite;
}

@keyframes patternMove {
  0% {
    background-position: 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 0 0, 0 0, 40px 40px;
  }
}

/* Wave Animation at Bottom */
.wave-divider {
  position: relative;
  width: 100%;
  height: 100px;
  overflow: hidden;
}

.wave-divider svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  animation: wave 15s linear infinite;
}

.wave-divider svg:nth-child(2) {
  animation-delay: -5s;
  opacity: 0.5;
}

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

/* Particle System */
.particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(232, 93, 117, 0.6), transparent);
  border-radius: 50%;
  animation: particleFloat 8s infinite ease-in-out;
}

.particle:nth-child(odd) {
  animation-duration: 10s;
  animation-delay: -2s;
}

.particle:nth-child(even) {
  animation-duration: 12s;
  animation-delay: -4s;
}

@keyframes particleFloat {
  0% {
    transform: translateY(100vh) translateX(0) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-100px) translateX(100px) scale(1);
    opacity: 0;
  }
}

/* Glow Effect on Sections */
.section-glow {
  position: relative;
}

.section-glow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  background: radial-gradient(
    circle,
    rgba(232, 93, 117, 0.08) 0%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  animation: pulse 4s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}

@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.3;
  }
}

/* Line Pattern Animation */
.line-pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(232, 93, 117, 0.02) 1px, transparent 1px),
    linear-gradient(0deg, rgba(232, 93, 117, 0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  animation: lineMove 30s linear infinite;
}

@keyframes lineMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 80px 80px;
  }
}

/* Meat Journey Path SVG */
.journey-path-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(232, 93, 117, 0.1) 20%,
    rgba(232, 93, 117, 0.2) 50%,
    rgba(232, 93, 117, 0.1) 80%,
    transparent 100%
  );
  z-index: 0;
}

.journey-path-bg::before,
.journey-path-bg::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 12px;
  height: 12px;
  background: var(--color-primary);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 20px rgba(232, 93, 117, 0.5);
  animation: pathPulse 2s ease-in-out infinite;
}

.journey-path-bg::before {
  top: 0;
}

.journey-path-bg::after {
  bottom: 0;
  animation-delay: 1s;
}

@keyframes pathPulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) scale(1.5);
    opacity: 0.5;
  }
}

/* Responsive - Reduce animations on mobile */
@media (max-width: 768px) {
  .meat-icon-float {
    font-size: 2rem;
    opacity: 0.04;
  }

  .particle {
    display: none;
  }

  .line-pattern {
    background-size: 60px 60px;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  body::before,
  .meat-icon-float,
  .particle,
  .line-pattern,
  .journey-path-bg::before,
  .journey-path-bg::after {
    animation: none;
  }

  .page::after {
    animation: none;
    background-position: 0 0;
  }
}