/* ============================================
   Coral Reef Animations Library v2.0
   Deep Sea Cyberpunk Animation System
   ============================================ */

/* === Bubble Particle System === */
@keyframes bubbleRise {
  0% { transform: translateY(100vh) scale(0.3); opacity: 0; }
  10% { opacity: 0.6; }
  50% { transform: translateY(50vh) scale(0.8) translateX(20px); opacity: 0.8; }
  90% { opacity: 0.4; }
  100% { transform: translateY(-10vh) scale(1.2) translateX(-10px); opacity: 0; }
}

@keyframes bubbleFloat {
  0%, 100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(15px) translateY(-8px); }
  50% { transform: translateX(-10px) translateY(-15px); }
  75% { transform: translateX(8px) translateY(-5px); }
}

@keyframes bubbleShimmer {
  0%, 100% { box-shadow: 0 0 5px rgba(0, 255, 255, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.1); }
  50% { box-shadow: 0 0 15px rgba(0, 255, 255, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.3); }
}

.bubble-particle {
  position: fixed;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3), rgba(0, 255, 255, 0.1));
  border: 1px solid rgba(0, 255, 255, 0.2);
  pointer-events: none;
  z-index: 1;
  animation: bubbleRise linear infinite, bubbleShimmer ease-in-out infinite;
}

.bubble-particle:nth-child(1) { width: 8px; height: 8px; left: 5%; animation-duration: 12s, 3s; animation-delay: 0s; }
.bubble-particle:nth-child(2) { width: 12px; height: 12px; left: 15%; animation-duration: 15s, 4s; animation-delay: 2s; }
.bubble-particle:nth-child(3) { width: 6px; height: 6px; left: 25%; animation-duration: 10s, 2.5s; animation-delay: 4s; }
.bubble-particle:nth-child(4) { width: 10px; height: 10px; left: 35%; animation-duration: 14s, 3.5s; animation-delay: 1s; }
.bubble-particle:nth-child(5) { width: 14px; height: 14px; left: 45%; animation-duration: 16s, 4.5s; animation-delay: 3s; }
.bubble-particle:nth-child(6) { width: 7px; height: 7px; left: 55%; animation-duration: 11s, 2.8s; animation-delay: 5s; }
.bubble-particle:nth-child(7) { width: 9px; height: 9px; left: 65%; animation-duration: 13s, 3.2s; animation-delay: 2.5s; }
.bubble-particle:nth-child(8) { width: 11px; height: 11px; left: 75%; animation-duration: 15s, 3.8s; animation-delay: 4.5s; }
.bubble-particle:nth-child(9) { width: 5px; height: 5px; left: 85%; animation-duration: 9s, 2.2s; animation-delay: 1.5s; }
.bubble-particle:nth-child(10) { width: 13px; height: 13px; left: 95%; animation-duration: 17s, 4.2s; animation-delay: 3.5s; }

/* === Coral Glow Pulse System === */
@keyframes coralPulse {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.3) saturate(1.2); }
}

@keyframes coralSway {
  0%, 100% { transform: rotate(0deg) scaleY(1); }
  25% { transform: rotate(2deg) scaleY(1.02); }
  75% { transform: rotate(-2deg) scaleY(0.98); }
}

@keyframes coralGrowth {
  0% { transform: scaleY(0); opacity: 0; transform-origin: bottom; }
  60% { transform: scaleY(1.1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}

.coral-element {
  animation: coralPulse 4s ease-in-out infinite, coralSway 6s ease-in-out infinite;
}

.coral-grow-in {
  animation: coralGrowth 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* === Neon Text Effects === */
@keyframes neonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px var(--neon-color, #FF6B9D),
      0 0 80px var(--neon-color, #FF6B9D),
      0 0 90px var(--neon-color, #FF6B9D),
      0 0 100px var(--neon-color, #FF6B9D),
      0 0 150px var(--neon-color, #FF6B9D);
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}

@keyframes neonPulse {
  0%, 100% {
    text-shadow:
      0 0 4px #fff,
      0 0 10px #fff,
      0 0 20px var(--neon-color, #00F5FF),
      0 0 40px var(--neon-color, #00F5FF);
  }
  50% {
    text-shadow:
      0 0 2px #fff,
      0 0 5px #fff,
      0 0 10px var(--neon-color, #00F5FF),
      0 0 20px var(--neon-color, #00F5FF);
  }
}

@keyframes neonBorderPulse {
  0%, 100% {
    box-shadow:
      0 0 5px var(--neon-color, #00F5FF),
      0 0 10px var(--neon-color, #00F5FF),
      inset 0 0 5px var(--neon-color, #00F5FF);
  }
  50% {
    box-shadow:
      0 0 10px var(--neon-color, #00F5FF),
      0 0 20px var(--neon-color, #00F5FF),
      0 0 40px var(--neon-color, #00F5FF),
      inset 0 0 10px var(--neon-color, #00F5FF);
  }
}

.neon-text-flicker {
  animation: neonFlicker 1.5s infinite alternate;
  --neon-color: #FF6B9D;
}

.neon-text-pulse {
  animation: neonPulse 2s ease-in-out infinite;
  --neon-color: #00F5FF;
}

.neon-border-pulse {
  animation: neonBorderPulse 2s ease-in-out infinite;
  --neon-color: #00F5FF;
}

/* === Deep Sea Light Rays === */
@keyframes lightRay {
  0% { transform: rotate(-30deg) translateY(-100%); opacity: 0; }
  50% { opacity: 0.15; }
  100% { transform: rotate(-30deg) translateY(100%); opacity: 0; }
}

@keyframes lightShaft {
  0%, 100% { opacity: 0.05; }
  50% { opacity: 0.15; }
}

.light-ray {
  position: absolute;
  width: 2px;
  height: 200%;
  background: linear-gradient(to bottom, transparent, rgba(0, 245, 255, 0.3), transparent);
  animation: lightRay 8s linear infinite;
  pointer-events: none;
}

.light-ray:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 8s; }
.light-ray:nth-child(2) { left: 25%; animation-delay: 2s; animation-duration: 10s; width: 3px; }
.light-ray:nth-child(3) { left: 40%; animation-delay: 4s; animation-duration: 7s; }
.light-ray:nth-child(4) { left: 60%; animation-delay: 1s; animation-duration: 9s; width: 4px; }
.light-ray:nth-child(5) { left: 80%; animation-delay: 3s; animation-duration: 11s; }

.light-shaft-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -30deg,
    transparent,
    transparent 50px,
    rgba(0, 245, 255, 0.02) 50px,
    rgba(0, 245, 255, 0.02) 51px
  );
  animation: lightShaft 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* === Jellyfish Float Animation === */
@keyframes jellyfishFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-20px) rotate(3deg); }
  50% { transform: translateY(-10px) rotate(-2deg); }
  75% { transform: translateY(-25px) rotate(1deg); }
}

@keyframes jellyfishPulse {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  50% { transform: scaleX(1.05) scaleY(0.95); }
}

@keyframes jellyfishGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 107, 157, 0.4)); }
  50% { filter: drop-shadow(0 0 25px rgba(255, 107, 157, 0.8)); }
}

.jellyfish-element {
  animation: jellyfishFloat 8s ease-in-out infinite, jellyfishPulse 3s ease-in-out infinite, jellyfishGlow 4s ease-in-out infinite;
}

/* === Card Flip Animation === */
@keyframes cardFlipIn {
  0% { transform: perspective(800px) rotateY(90deg); opacity: 0; }
  100% { transform: perspective(800px) rotateY(0deg); opacity: 1; }
}

@keyframes cardFlipOut {
  0% { transform: perspective(800px) rotateY(0deg); opacity: 1; }
  100% { transform: perspective(800px) rotateY(-90deg); opacity: 0; }
}

@keyframes cardDeal {
  0% { transform: translateX(200px) translateY(-100px) rotate(20deg) scale(0.5); opacity: 0; }
  100% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); opacity: 1; }
}

.card-flip-in { animation: cardFlipIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.card-flip-out { animation: cardFlipOut 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.card-deal { animation: cardDeal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* === Chip Stack Animation === */
@keyframes chipBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes chipSpin {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes chipStack {
  0% { transform: translateY(-50px); opacity: 0; }
  60% { transform: translateY(5px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

.chip-bounce { animation: chipBounce 1s ease-in-out infinite; }
.chip-spin { animation: chipSpin 2s linear infinite; }
.chip-stack { animation: chipStack 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

/* === Roulette Wheel Animation === */
@keyframes rouletteSpinSlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rouletteSpinFast {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(1080deg); }
}

@keyframes rouletteBallDrop {
  0% { transform: rotate(0deg) translateX(120px); }
  50% { transform: rotate(720deg) translateX(80px); }
  100% { transform: rotate(1440deg) translateX(60px); }
}

.roulette-slow { animation: rouletteSpinSlow 10s linear infinite; }
.roulette-fast { animation: rouletteSpinFast 3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; }
.roulette-ball { animation: rouletteBallDrop 4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; }

/* === Slot Machine Animation === */
@keyframes slotSpin {
  0% { transform: translateY(0); }
  100% { transform: translateY(-300%); }
}

@keyframes slotStop {
  0% { transform: translateY(-300%); }
  70% { transform: translateY(5%); }
  85% { transform: translateY(-2%); }
  100% { transform: translateY(0); }
}

@keyframes slotWin {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  25% { transform: scale(1.1); filter: brightness(1.5); }
  50% { transform: scale(1); filter: brightness(1.2); }
  75% { transform: scale(1.05); filter: brightness(1.4); }
}

@keyframes slotLever {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(45deg); }
  100% { transform: rotate(0deg); }
}

.slot-spin { animation: slotSpin 0.1s linear infinite; }
.slot-stop { animation: slotStop 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.slot-win { animation: slotWin 0.8s ease-in-out infinite; }
.slot-lever { animation: slotLever 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

/* === Dice Roll Animation === */
@keyframes diceRoll {
  0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  25% { transform: rotateX(90deg) rotateY(180deg) rotateZ(45deg); }
  50% { transform: rotateX(180deg) rotateY(360deg) rotateZ(90deg); }
  75% { transform: rotateX(270deg) rotateY(540deg) rotateZ(135deg); }
  100% { transform: rotateX(360deg) rotateY(720deg) rotateZ(180deg); }
}

@keyframes diceBounce {
  0% { transform: translateY(-200px) rotateX(720deg); opacity: 0; }
  40% { transform: translateY(0) rotateX(0deg); opacity: 1; }
  55% { transform: translateY(-40px) rotateX(90deg); }
  70% { transform: translateY(0) rotateX(0deg); }
  80% { transform: translateY(-15px) rotateX(45deg); }
  90% { transform: translateY(0) rotateX(0deg); }
  95% { transform: translateY(-5px) rotateX(10deg); }
  100% { transform: translateY(0) rotateX(0deg); }
}

.dice-roll { animation: diceRoll 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.dice-bounce { animation: diceBounce 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

/* === Water Ripple Effect === */
@keyframes waterRipple {
  0% { transform: scale(0); opacity: 0.8; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes waterSurface {
  0%, 100% { transform: translateY(0) scaleX(1); }
  25% { transform: translateY(-3px) scaleX(1.01); }
  50% { transform: translateY(0) scaleX(0.99); }
  75% { transform: translateY(3px) scaleX(1.01); }
}

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

.water-ripple {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(0, 245, 255, 0.3);
  animation: waterRipple 2s ease-out infinite;
  pointer-events: none;
}

.water-surface { animation: waterSurface 4s ease-in-out infinite; }

.water-caustics {
  background: repeating-conic-gradient(
    rgba(0, 245, 255, 0.03) 0deg,
    transparent 10deg,
    rgba(0, 245, 255, 0.03) 20deg
  );
  animation: waterCaustics 10s linear infinite;
}

/* === Treasure Chest Animation === */
@keyframes chestOpen {
  0% { transform: rotateX(0deg); transform-origin: bottom; }
  100% { transform: rotateX(-110deg); transform-origin: bottom; }
}

@keyframes coinShower {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(200px) rotate(720deg); opacity: 0; }
}

@keyframes goldGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5)); }
  50% { filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.9)); }
}

.chest-open { animation: chestOpen 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.coin-shower { animation: coinShower 1.5s ease-in forwards; }
.gold-glow { animation: goldGlow 2s ease-in-out infinite; }

/* === Scroll-Triggered Animations === */
@keyframes fadeInUp {
  0% { transform: translateY(40px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes fadeInDown {
  0% { transform: translateY(-40px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes fadeInLeft {
  0% { transform: translateX(-40px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes fadeInRight {
  0% { transform: translateX(40px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes fadeInScale {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeInRotate {
  0% { transform: rotate(-10deg) scale(0.9); opacity: 0; }
  100% { transform: rotate(0deg) scale(1); opacity: 1; }
}

@keyframes slideInFromSea {
  0% { transform: translateY(100px) scale(0.9); opacity: 0; filter: blur(5px); }
  100% { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
}

.animate-fade-in-up { animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.animate-fade-in-down { animation: fadeInDown 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.animate-fade-in-left { animation: fadeInLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.animate-fade-in-right { animation: fadeInRight 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.animate-fade-in-scale { animation: fadeInScale 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.animate-fade-in-rotate { animation: fadeInRotate 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.animate-slide-from-sea { animation: slideInFromSea 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

/* Animation delays for staggered effects */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1s; }

/* === Holographic Effect === */
@keyframes hologramScan {
  0% { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}

@keyframes hologramFlicker {
  0%, 100% { opacity: 1; }
  5% { opacity: 0.8; }
  10% { opacity: 1; }
  15% { opacity: 0.6; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  85% { opacity: 0.7; }
  90% { opacity: 1; }
}

@keyframes hologramDistort {
  0%, 100% { transform: skewX(0deg); }
  25% { transform: skewX(0.5deg); }
  75% { transform: skewX(-0.5deg); }
}

.hologram-effect {
  position: relative;
  animation: hologramFlicker 4s linear infinite;
}

.hologram-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 245, 255, 0.03) 2px,
    rgba(0, 245, 255, 0.03) 4px
  );
  animation: hologramScan 3s linear infinite;
  pointer-events: none;
}

.hologram-distort { animation: hologramDistort 3s ease-in-out infinite; }

/* === Data Stream Animation === */
@keyframes dataStream {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

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

@keyframes dataPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.data-stream {
  background: linear-gradient(to bottom, transparent, rgba(0, 245, 255, 0.5), transparent);
  animation: dataStream 2s linear infinite;
}

.data-flow-h {
  background: linear-gradient(to right, transparent, rgba(0, 245, 255, 0.5), transparent);
  animation: dataFlowHorizontal 3s linear infinite;
}

.data-pulse { animation: dataPulse 1.5s ease-in-out infinite; }

/* === Sonar Ping Animation === */
@keyframes sonarPing {
  0% { transform: scale(0); opacity: 1; border-width: 3px; }
  100% { transform: scale(3); opacity: 0; border-width: 1px; }
}

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

.sonar-ping {
  position: absolute;
  border-radius: 50%;
  border: 3px solid rgba(0, 245, 255, 0.6);
  animation: sonarPing 2s ease-out infinite;
}

.sonar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00F5FF;
  animation: sonarDot 1s ease-in-out infinite;
}

/* === Anchor Drop Animation === */
@keyframes anchorDrop {
  0% { transform: translateY(-200px) rotate(-15deg); opacity: 0; }
  60% { transform: translateY(10px) rotate(5deg); opacity: 1; }
  80% { transform: translateY(-5px) rotate(-2deg); }
  100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}

@keyframes chainLink {
  0% { transform: translateY(-50px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.anchor-drop { animation: anchorDrop 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.chain-link { animation: chainLink 0.3s ease-out forwards; }

/* === Fish Swimming Animation === */
@keyframes fishSwimRight {
  0% { transform: translateX(-100vw) translateY(0) scaleX(1); }
  45% { transform: translateX(50vw) translateY(-20px) scaleX(1); }
  50% { transform: translateX(55vw) translateY(-20px) scaleX(-1); }
  95% { transform: translateX(-45vw) translateY(10px) scaleX(-1); }
  100% { transform: translateX(-100vw) translateY(0) scaleX(1); }
}

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

@keyframes schoolOfFish {
  0% { transform: translateX(-200px) translateY(0); }
  25% { transform: translateX(0) translateY(-30px); }
  50% { transform: translateX(200px) translateY(0); }
  75% { transform: translateX(0) translateY(30px); }
  100% { transform: translateX(-200px) translateY(0); }
}

.fish-swim { animation: fishSwimRight 20s linear infinite; }
.fish-wiggle { animation: fishWiggle 0.5s ease-in-out infinite; }
.school-of-fish { animation: schoolOfFish 15s ease-in-out infinite; }

/* === Treasure Map Animation === */
@keyframes mapUnfold {
  0% { transform: scaleX(0) scaleY(0); transform-origin: center; opacity: 0; }
  50% { transform: scaleX(1) scaleY(0.1); opacity: 0.5; }
  100% { transform: scaleX(1) scaleY(1); opacity: 1; }
}

@keyframes pathDraw {
  0% { stroke-dashoffset: 1000; }
  100% { stroke-dashoffset: 0; }
}

@keyframes xMarkPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px red); }
  50% { transform: scale(1.2); filter: drop-shadow(0 0 15px red); }
}

.map-unfold { animation: mapUnfold 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.path-draw { animation: pathDraw 3s linear forwards; stroke-dasharray: 1000; }
.x-mark-pulse { animation: xMarkPulse 1s ease-in-out infinite; }

/* === Depth Pressure Effect === */
@keyframes depthPressure {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(0.98); filter: brightness(0.95); }
}

@keyframes depthDarken {
  0% { background-color: rgba(0, 10, 30, 0); }
  100% { background-color: rgba(0, 10, 30, 0.3); }
}

.depth-pressure { animation: depthPressure 8s ease-in-out infinite; }
.depth-darken { animation: depthDarken 0.5s ease-in forwards; }

/* === Bioluminescence Effect === */
@keyframes bioLumGlow {
  0%, 100% { opacity: 0.2; filter: blur(10px); }
  50% { opacity: 0.8; filter: blur(5px); }
}

@keyframes bioLumTrail {
  0% { width: 0; opacity: 1; }
  100% { width: 100px; opacity: 0; }
}

@keyframes bioLumSparkle {
  0%, 100% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1); opacity: 1; }
}

.bio-lum-glow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 245, 255, 0.6), transparent);
  animation: bioLumGlow 3s ease-in-out infinite;
  pointer-events: none;
}

.bio-lum-trail {
  height: 2px;
  background: linear-gradient(to right, rgba(0, 245, 255, 0.8), transparent);
  animation: bioLumTrail 1s ease-out forwards;
}

.bio-lum-sparkle {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #00F5FF;
  animation: bioLumSparkle 2s ease-in-out infinite;
}

/* === Submarine Window Effect === */
@keyframes windowCondensation {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.3; }
}

@keyframes windowReflection {
  0% { transform: translateX(-100%) rotate(30deg); }
  100% { transform: translateX(200%) rotate(30deg); }
}

.window-condensation {
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.1), transparent);
  animation: windowCondensation 10s ease-in-out infinite;
}

.window-reflection {
  position: absolute;
  width: 30%;
  height: 200%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05), transparent);
  animation: windowReflection 8s linear infinite;
  pointer-events: none;
}

/* === Loading Animations === */
@keyframes coralLoader {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes coralLoaderDots {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

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

.coral-loader {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 245, 255, 0.2);
  border-top-color: #00F5FF;
  border-radius: 50%;
  animation: coralLoader 1s linear infinite;
}

.coral-loader-dots span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00F5FF;
  animation: coralLoaderDots 1.4s ease-in-out infinite;
}

.coral-loader-dots span:nth-child(1) { animation-delay: -0.32s; }
.coral-loader-dots span:nth-child(2) { animation-delay: -0.16s; }
.coral-loader-dots span:nth-child(3) { animation-delay: 0s; }

.sea-wave-loader {
  height: 3px;
  background: linear-gradient(to right, transparent, #00F5FF, transparent);
  animation: seaWaveLoader 1.5s ease-in-out infinite;
}

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

@media (max-width: 768px) {
  .bubble-particle { display: none; }
  .light-ray { display: none; }
  .light-shaft-overlay { display: none; }
  .fish-swim { display: none; }
  .bio-lum-glow { display: none; }
}

/* === Performance Optimizations === */
.gpu-accelerated {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.animation-paused { animation-play-state: paused; }
.animation-running { animation-play-state: running; }