/**
 * Rausku Landing Page - Fish Animation Background
 * Theme: Mecha Fish AI Assistant — Sharp and Calm
 * 
 * Animated background with floating mecha fish particles
 * for the hero section.
 */

/* ========================================
   FISH CONTAINER
   ======================================== */
.fish-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Ensure fish overlay stays above background image but below hero text */
.hero .fish-container { z-index: 1; }
.hero .hero-content { z-index: 2; }

/* ========================================
   MECHA FISH PARTICLES
   ======================================== */
.mecha-fish-particle {
  position: absolute;
  opacity: 0.15;
  filter: blur(0.5px);
}

.mecha-fish-particle svg {
  width: 100%;
  height: 100%;
  fill: url(#fishGradient);
}

/* Fish sizes */
.fish-xs { width: 20px; height: 20px; }
.fish-sm { width: 40px; height: 40px; }
.fish-md { width: 60px; height: 60px; }
.fish-lg { width: 100px; height: 100px; }
.fish-xl { width: 150px; height: 150px; }

/* Fish positions and animations */
.fish-1 {
  top: 10%;
  left: -5%;
  animation: swim-across 25s linear infinite;
}

.fish-2 {
  top: 30%;
  right: -5%;
  animation: swim-across-reverse 30s linear infinite;
  animation-delay: -5s;
}

.fish-3 {
  top: 60%;
  left: -10%;
  animation: swim-across 35s linear infinite;
  animation-delay: -10s;
}

.fish-4 {
  top: 80%;
  right: -5%;
  animation: swim-across-reverse 28s linear infinite;
  animation-delay: -15s;
}

.fish-5 {
  top: 20%;
  left: -5%;
  animation: swim-across 20s linear infinite;
  animation-delay: -8s;
}

.fish-6 {
  top: 45%;
  right: -8%;
  animation: swim-across-reverse 32s linear infinite;
  animation-delay: -20s;
}

.fish-7 {
  top: 70%;
  left: -3%;
  animation: swim-across 22s linear infinite;
  animation-delay: -12s;
}

.fish-8 {
  top: 5%;
  right: -10%;
  animation: swim-across-reverse 27s linear infinite;
  animation-delay: -3s;
}

/* Deep background fish (slower, more transparent) */
.fish-deep {
  opacity: 0.08;
  filter: blur(2px);
}

.fish-deep-1 {
  top: 15%;
  left: -20%;
  animation: swim-across-slow 45s linear infinite;
}

.fish-deep-2 {
  top: 55%;
  right: -20%;
  animation: swim-across-slow-reverse 50s linear infinite;
  animation-delay: -15s;
}

.fish-deep-3 {
  top: 85%;
  left: -15%;
  animation: swim-across-slow 40s linear infinite;
  animation-delay: -25s;
}

/* ========================================
   FISH ANIMATION KEYFRAMES
   ======================================== */

/* Swimming from left to right */
@keyframes swim-across {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  20% {
    transform: translateX(25vw) translateY(-20px) rotate(3deg);
  }
  40% {
    transform: translateX(50vw) translateY(10px) rotate(-2deg);
  }
  60% {
    transform: translateX(75vw) translateY(-15px) rotate(2deg);
  }
  80% {
    transform: translateX(100vw) translateY(5px) rotate(-1deg);
  }
  100% {
    transform: translateX(110vw) translateY(0) rotate(0deg);
  }
}

/* Swimming from right to left */
@keyframes swim-across-reverse {
  0% {
    transform: translateX(0) translateY(0) rotate(180deg);
  }
  20% {
    transform: translateX(-25vw) translateY(15px) rotate(177deg);
  }
  40% {
    transform: translateX(-50vw) translateY(-10px) rotate(182deg);
  }
  60% {
    transform: translateX(-75vw) translateY(20px) rotate(178deg);
  }
  80% {
    transform: translateX(-100vw) translateY(-5px) rotate(181deg);
  }
  100% {
    transform: translateX(-110vw) translateY(0) rotate(180deg);
  }
}

/* Slow swimming variants */
@keyframes swim-across-slow {
  0% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(30vw) translateY(-30px);
  }
  50% {
    transform: translateX(60vw) translateY(20px);
  }
  75% {
    transform: translateX(90vw) translateY(-15px);
  }
  100% {
    transform: translateX(120vw) translateY(0);
  }
}

@keyframes swim-across-slow-reverse {
  0% {
    transform: translateX(0) translateY(0) rotate(180deg);
  }
  25% {
    transform: translateX(-30vw) translateY(25px) rotate(180deg);
  }
  50% {
    transform: translateX(-60vw) translateY(-15px) rotate(180deg);
  }
  75% {
    transform: translateX(-90vw) translateY(20px) rotate(180deg);
  }
  100% {
    transform: translateX(-120vw) translateY(0) rotate(180deg);
  }
}

/* ========================================
   BUBBLE PARTICLES
   ======================================== */
.bubble-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bubble {
  position: absolute;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3), rgba(34, 211, 238, 0.1));
  border-radius: 50%;
  opacity: 0.3;
}

.bubble-xs { width: 4px; height: 4px; }
.bubble-sm { width: 8px; height: 8px; }
.bubble-md { width: 12px; height: 12px; }
.bubble-lg { width: 20px; height: 20px; }

/* Bubble positions and animations */
.bubble-1 {
  bottom: -20px;
  left: 10%;
  animation: rise 8s ease-in infinite;
}

.bubble-2 {
  bottom: -20px;
  left: 25%;
  animation: rise 12s ease-in infinite;
  animation-delay: -2s;
}

.bubble-3 {
  bottom: -20px;
  left: 40%;
  animation: rise 10s ease-in infinite;
  animation-delay: -5s;
}

.bubble-4 {
  bottom: -20px;
  left: 60%;
  animation: rise 15s ease-in infinite;
  animation-delay: -3s;
}

.bubble-5 {
  bottom: -20px;
  left: 75%;
  animation: rise 9s ease-in infinite;
  animation-delay: -7s;
}

.bubble-6 {
  bottom: -20px;
  left: 90%;
  animation: rise 11s ease-in infinite;
  animation-delay: -4s;
}

.bubble-7 {
  bottom: -20px;
  left: 15%;
  animation: rise 13s ease-in infinite;
  animation-delay: -6s;
}

.bubble-8 {
  bottom: -20px;
  left: 50%;
  animation: rise 14s ease-in infinite;
  animation-delay: -1s;
}

@keyframes rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.3;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-100vh) scale(0.5);
    opacity: 0;
  }
}

/* ========================================
   LIGHT RAYS
   Subtle underwater light effect
   ======================================== */
.light-rays {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.1;
}

.light-ray {
  position: absolute;
  top: -20%;
  width: 100px;
  height: 150%;
  background: linear-gradient(
    180deg,
    rgba(34, 211, 238, 0.3) 0%,
    rgba(14, 165, 233, 0.1) 50%,
    transparent 100%
  );
  transform: rotate(15deg);
  filter: blur(20px);
  animation: ray-sway 10s ease-in-out infinite;
}

.light-ray:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
}

.light-ray:nth-child(2) {
  left: 35%;
  animation-delay: -3s;
  width: 80px;
}

.light-ray:nth-child(3) {
  left: 60%;
  animation-delay: -6s;
  width: 120px;
}

.light-ray:nth-child(4) {
  left: 80%;
  animation-delay: -2s;
  width: 60px;
}

@keyframes ray-sway {
  0%, 100% {
    transform: rotate(15deg) translateX(0);
    opacity: 0.1;
  }
  50% {
    transform: rotate(20deg) translateX(20px);
    opacity: 0.15;
  }
}

/* ========================================
   PARTICLE FIELD
   Small floating particles
   ======================================== */
.particle-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(34, 211, 238, 0.4);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(34, 211, 238, 0.6);
}

/* Random particle positions */
.particle:nth-child(1) { top: 10%; left: 5%; animation: float-particle 15s ease-in-out infinite; }
.particle:nth-child(2) { top: 25%; left: 15%; animation: float-particle 18s ease-in-out infinite 1s; }
.particle:nth-child(3) { top: 40%; left: 8%; animation: float-particle 12s ease-in-out infinite 2s; }
.particle:nth-child(4) { top: 60%; left: 20%; animation: float-particle 20s ease-in-out infinite 0.5s; }
.particle:nth-child(5) { top: 80%; left: 12%; animation: float-particle 16s ease-in-out infinite 3s; }
.particle:nth-child(6) { top: 15%; right: 10%; animation: float-particle 14s ease-in-out infinite 1.5s; }
.particle:nth-child(7) { top: 35%; right: 5%; animation: float-particle 17s ease-in-out infinite 2.5s; }
.particle:nth-child(8) { top: 55%; right: 15%; animation: float-particle 13s ease-in-out infinite 0.8s; }
.particle:nth-child(9) { top: 75%; right: 8%; animation: float-particle 19s ease-in-out infinite 4s; }
.particle:nth-child(10) { top: 90%; right: 20%; animation: float-particle 11s ease-in-out infinite 2.2s; }

@keyframes float-particle {
  0%, 100% {
    transform: translate(0, 0);
    opacity: 0.4;
  }
  25% {
    transform: translate(30px, -20px);
    opacity: 0.7;
  }
  50% {
    transform: translate(-20px, -40px);
    opacity: 0.5;
  }
  75% {
    transform: translate(20px, -20px);
    opacity: 0.6;
  }
}

/* ========================================
   WAVE ANIMATION (SVG)
   ======================================== */
.wave-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  overflow: hidden;
  pointer-events: none;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%230F172A' fill-opacity='0.3' d='M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") repeat-x;
  background-size: 50% 100%;
  animation: wave-move 15s linear infinite;
}

.wave:nth-child(2) {
  bottom: 10px;
  opacity: 0.5;
  animation: wave-move 20s linear infinite reverse;
}

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

/* ========================================
   INTERACTIVE FISH (HOVER)
   ======================================== */
.interactive-fish {
  cursor: pointer;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.interactive-fish:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 20px rgba(34, 211, 238, 0.8));
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .mecha-fish-particle,
  .bubble,
  .light-ray,
  .particle,
  .wave {
    animation: none;
  }
  
  .fish-1, .fish-2, .fish-3, .fish-4,
  .fish-5, .fish-6, .fish-7, .fish-8,
  .fish-deep-1, .fish-deep-2, .fish-deep-3 {
    animation: none;
    opacity: 0.05;
  }
}