/* =============================================
   Freo Now — Ocean Depth Theme
   Creatures, bubbles, seaweed for each depth
   ============================================= */

/* ── Shared: all ocean creatures ── */
.ocean-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.ocean-creature {
  position: absolute;
  will-change: transform;
}

/* Sections need relative positioning for creature layers */
.steps-section { position: relative; overflow: hidden; }
.steps-section > .container { position: relative; z-index: 1; }
.signup-gradient { position: relative; overflow: hidden; }

/* =============================================
   UPPER OCEAN — How It Works (fish + bubbles)
   ============================================= */

/* ── Fish swimming left → right ── */
.fish {
  animation: swimRight linear infinite;
  width: 40px;
  height: 20px;
}

.fish.reverse {
  transform: scaleX(-1);
  animation-name: swimLeft;
}

.fish-1 { bottom: 30px;  left: -60px; animation-duration: 18s; animation-delay: 0s;  opacity: 0.25; }
.fish-2 { bottom: 80px;  left: -60px; animation-duration: 22s; animation-delay: 3s;  opacity: 0.20; }
.fish-3 { bottom: 55px;  right: -60px; animation-duration: 20s; animation-delay: 1s;  opacity: 0.22; }
.fish-4 { bottom: 120px; left: -60px; animation-duration: 25s; animation-delay: 5s;  opacity: 0.18; }
.fish-5 { bottom: 20px;  right: -60px; animation-duration: 16s; animation-delay: 8s;  opacity: 0.20; }
.fish-6 { bottom: 100px; left: -60px; animation-duration: 28s; animation-delay: 2s;  opacity: 0.15; }

@keyframes swimRight {
  0%   { transform: translateX(-80px); }
  100% { transform: translateX(calc(100vw + 80px)); }
}

@keyframes swimLeft {
  0%   { transform: scaleX(-1) translateX(-80px); }
  100% { transform: scaleX(-1) translateX(calc(100vw + 80px)); }
}

/* ── Bubbles rising ── */
.bubble {
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
  animation: bubbleRise linear infinite;
}

.bubble-1 { width: 8px;  height: 8px;  left: 15%; animation-duration: 8s;  animation-delay: 0s;   opacity: 0.30; }
.bubble-2 { width: 5px;  height: 5px;  left: 40%; animation-duration: 10s; animation-delay: 2s;   opacity: 0.25; }
.bubble-3 { width: 10px; height: 10px; left: 65%; animation-duration: 7s;  animation-delay: 4s;   opacity: 0.20; }
.bubble-4 { width: 6px;  height: 6px;  left: 80%; animation-duration: 9s;  animation-delay: 1s;   opacity: 0.25; }
.bubble-5 { width: 7px;  height: 7px;  left: 30%; animation-duration: 11s; animation-delay: 6s;   opacity: 0.20; }

@keyframes bubbleRise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; bottom: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-220px) translateX(15px); opacity: 0; bottom: 0; }
}

/* =============================================
   DEEP SEA — Why Freo Now (diver + glow)
   ============================================= */

.deep-sea-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}



.diver-1 {
  width: 120px;
  height: 60px;
  top: 70%;
  left: -140px;
  opacity: 0.3;
  animation: diverSwim 30s linear infinite;
}

@keyframes diverSwim {
  0%   { transform: translateX(0) translateY(0); }
  25%  { transform: translateX(30vw) translateY(-15px); }
  50%  { transform: translateX(60vw) translateY(5px); }
  75%  { transform: translateX(85vw) translateY(-10px); }
  100% { transform: translateX(calc(100vw + 160px)) translateY(0); }
}

/* Bioluminescent glow dots */
.bio-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: glowPulse ease-in-out infinite;
}

.glow-1 { width: 8px; height: 8px; background: rgba(100, 220, 255, 0.6); left: 15%; top: 25%; animation-duration: 4s; }
.glow-2 { width: 5px; height: 5px; background: rgba(120, 255, 200, 0.5); left: 50%; top: 55%; animation-duration: 5s; animation-delay: 1s; }
.glow-3 { width: 10px; height: 10px; background: rgba(100, 200, 255, 0.5); left: 80%; top: 20%; animation-duration: 6s; animation-delay: 2s; }
.glow-4 { width: 6px; height: 6px; background: rgba(150, 255, 220, 0.5); left: 35%; top: 72%; animation-duration: 4.5s; animation-delay: 3s; }
.glow-5 { width: 7px; height: 7px; background: rgba(80, 180, 255, 0.5); right: 20%; top: 42%; animation-duration: 5.5s; animation-delay: 1.5s; }

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

/* =============================================
   OCEAN FLOOR — Signup (seaweed, coral, crab)
   ============================================= */
.ocean-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Seaweed swaying */
.seaweed {
  position: absolute;
  bottom: 0;
  transform-origin: bottom center;
  animation: seaweedSway ease-in-out infinite;
}

.weed-1 { left: 5%;  width: 24px; height: 90px;  animation-duration: 4s; opacity: 0.25; }
.weed-2 { left: 15%; width: 20px; height: 70px;  animation-duration: 5s; animation-delay: 0.5s; opacity: 0.20; }
.weed-3 { right: 8%; width: 26px; height: 100px; animation-duration: 4.5s; animation-delay: 1s; opacity: 0.25; }
.weed-4 { right: 20%; width: 22px; height: 80px; animation-duration: 5.5s; animation-delay: 1.5s; opacity: 0.20; }
.weed-5 { left: 40%; width: 18px; height: 65px;  animation-duration: 4.2s; animation-delay: 2s; opacity: 0.18; }
.weed-6 { right: 35%; width: 24px; height: 85px; animation-duration: 5s; animation-delay: 0.8s; opacity: 0.22; }

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

/* Coral */
.coral {
  position: absolute;
  bottom: 0;
}

.coral-1 { left: 10%; width: 60px; height: 42px; opacity: 0.22; }
.coral-2 { right: 12%; width: 50px; height: 35px; opacity: 0.18; }
.coral-3 { left: 55%; width: 55px; height: 38px; opacity: 0.20; }

/* Crab */
.crab {
  position: absolute;
  bottom: 8px;
  opacity: 0.30;
  animation: crabWalk 20s linear infinite;
}

@keyframes crabWalk {
  0%   { left: -40px; transform: scaleX(1); }
  49%  { left: calc(100% + 10px); transform: scaleX(1); }
  50%  { left: calc(100% + 10px); transform: scaleX(-1); }
  99%  { left: -40px; transform: scaleX(-1); }
  100% { left: -40px; transform: scaleX(1); }
}

/* Floor bubbles — occasional */
.floor-bubble {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  animation: bubbleRise linear infinite;
}

.fb-1 { width: 6px; height: 6px; bottom: 10px; left: 25%; animation-duration: 12s; opacity: 0.20; }
.fb-2 { width: 4px; height: 4px; bottom: 5px;  left: 60%; animation-duration: 15s; animation-delay: 4s; opacity: 0.18; }
.fb-3 { width: 5px; height: 5px; bottom: 8px;  left: 45%; animation-duration: 10s; animation-delay: 8s; opacity: 0.20; }