/* Fishing-scene and feedback animations shared across pages. */

@keyframes water-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 200px 0, -160px 0; }
}

.water-scene {
  position: relative;
  height: 220px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-500) 20%, transparent), transparent 40%),
    linear-gradient(180deg, #0b3a5c 0%, #0a2d49 55%, #071f34 100%);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.35), var(--shadow-soft);
}

.water-scene__waves {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(100deg, transparent 0 40px, color-mix(in srgb, #fff 6%, transparent) 40px 42px),
    repeating-linear-gradient(80deg, transparent 0 60px, color-mix(in srgb, #fff 4%, transparent) 60px 63px);
  animation: water-drift 7s linear infinite;
}

.water-scene__surface-glow {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-400) 22%, transparent), transparent);
}

.float-bob {
  position: absolute;
  bottom: 42%;
  left: 50%;
  width: 18px;
  height: 26px;
  transform: translate(-50%, 0);
  transition: bottom 0.5s var(--ease-out-soft), opacity 0.3s;
}
.float-bob__body {
  width: 100%;
  height: 100%;
  border-radius: 40% 40% 50% 50%;
  background: linear-gradient(180deg, var(--danger-500) 0%, var(--danger-500) 45%, #fff 45%, #fff 100%);
  box-shadow: 0 3px 8px rgba(0,0,0,0.35);
  animation: float-idle 2.4s ease-in-out infinite;
}
@keyframes float-idle {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-4px) rotate(2deg); }
}
.float-bob.is-biting .float-bob__body {
  animation: float-bite 0.35s ease-in-out infinite;
}
@keyframes float-bite {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(10px) scaleY(0.85); }
  60% { transform: translateY(-6px); }
}

.ripple {
  position: absolute;
  border: 2px solid color-mix(in srgb, #fff 55%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ripple-expand 1.6s var(--ease-out-soft) forwards;
  pointer-events: none;
}
@keyframes ripple-expand {
  from { width: 6px; height: 6px; opacity: 0.7; }
  to { width: 140px; height: 60px; opacity: 0; }
}

.splash-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, #fff 70%, var(--accent-400));
  pointer-events: none;
  animation: splash-fly 0.65s var(--ease-out-soft) forwards;
}
@keyframes splash-fly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx, 20px), var(--dy, -40px)) scale(0.3); opacity: 0; }
}

.cast-line {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 2px;
  background: color-mix(in srgb, #fff 40%, transparent);
  transform-origin: bottom center;
  transition: height 0.5s var(--ease-out-soft);
}

/* --- Bite indicator pulse (surrounds the "Подсечь!" button) --- */
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger-500) 55%, transparent); }
  70% { box-shadow: 0 0 0 22px color-mix(in srgb, var(--danger-500) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger-500) 0%, transparent); }
}
.btn--bite-pulse {
  animation: pulse-ring 1s ease-out infinite;
}

/* --- Reward pop (coins / xp gained) --- */
@keyframes reward-pop {
  0% { transform: scale(0.6) translateY(10px); opacity: 0; }
  55% { transform: scale(1.08) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.reward-pop {
  animation: reward-pop 0.5s var(--ease-spring) both;
}

@keyframes float-up-fade {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-46px); opacity: 0; }
}
.float-up-fade {
  animation: float-up-fade 1.1s var(--ease-out-soft) forwards;
}

/* --- Level-up burst --- */
@keyframes level-up-scale {
  0% { transform: scale(0.4); opacity: 0; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes level-up-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.level-up-badge {
  animation: level-up-scale 0.55s var(--ease-spring) both;
}
.level-up-badge::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold-400) 45%, transparent), transparent 70%);
  animation: level-up-glow 1.4s ease-in-out infinite;
  z-index: -1;
}

/* --- Generic fade/slide utilities for page and card entrance --- */
@keyframes fade-slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-in {
  animation: fade-slide-up 0.4s var(--ease-out-soft) both;
}
.animate-in--delay-1 { animation-delay: 0.05s; }
.animate-in--delay-2 { animation-delay: 0.1s; }
.animate-in--delay-3 { animation-delay: 0.15s; }

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, #fff 25%, transparent);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}