/* Camada geral da animação Sea */
.sea-celebration-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

/* 🌊 Base fixa de água – cobre o rodapé SEMPRE */
.sea-wave-base {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 220%;
  height: 170px;
  background: radial-gradient(
    ellipse at 50% 120%,
    rgba(56, 189, 248, 0.65) 0%,
    rgba(56, 189, 248, 0.45) 25%,
    rgba(15, 23, 42, 0) 80%
  );
  opacity: 0.95;
  pointer-events: none;
}

/* 🌊 Ondas animadas (back + front) */
.sea-wave {
  position: absolute;
  left: 50%;
  bottom: -140px;
  transform: translateX(-50%);
  width: 220%;
  height: 380px;

  background: radial-gradient(
    ellipse at 50% 80%,
    rgba(56, 189, 248, 0.9) 0%,
    rgba(56, 189, 248, 0.75) 22%,
    rgba(56, 189, 248, 0.45) 45%,
    rgba(15, 23, 42, 0) 82%
  );

  clip-path: ellipse(70% 60% at 50% 100%);
  opacity: 0;
  filter: drop-shadow(0 0 40px rgba(56, 189, 248, 0.85));
  pointer-events: none;
}

.sea-wave-back {
  animation: seaWaveRiseBack 16000ms ease-out forwards;
}

.sea-wave-front {
  animation: seaWaveRiseFront 14000ms ease-out forwards;
}

@keyframes seaWaveRiseBack {
  0% { opacity: 0; transform: translate(-50%, 90px); }
  20% { opacity: 1; }
  55% { transform: translate(-50%, -80px); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 40px); }
}

@keyframes seaWaveRiseFront {
  0% { opacity: 0; transform: translate(-50%, 120px); }
  18% { opacity: 1; }
  50% { transform: translate(-50%, -130px); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 60px); }
}

/* espuma */
.sea-wave::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 10%, rgba(240, 249, 255, 0.9), transparent 55%);
  opacity: 0;
  animation: seaWaveFoam 14000ms ease-out forwards;
}

@keyframes seaWaveFoam {
  0% { opacity: 0; transform: translateY(40px) scale(0.9); }
  20% { opacity: 0.8; }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translateY(60px) scale(1.05); }
}

/* 🦈 Tubarão Sea */
.sea-shark {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  width: 108px;
  height: 108px;
  background-image: url("/assets/icons/sea_shark-f5179196.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  filter:
    drop-shadow(0 0 18px rgba(15, 23, 42, 0.9))
    drop-shadow(0 0 32px rgba(56, 189, 248, 0.8));
  animation: seaSharkJump 13500ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes seaSharkJump {
  0% { bottom: -80px; opacity: 0; transform: translateX(-50%) scale(0.85); }
  20% { bottom: 120px; opacity: 1; transform: translateX(-50%) scale(1.05); }
  45% { bottom: 260px; transform: translateX(-50%) scale(1.08); }
  70% { bottom: 200px; opacity: 1; }
  90% { bottom: 40px; opacity: 0.5; }
  100% { bottom: -70px; opacity: 0; transform: translateX(-50%) scale(0.9); }
}

/* Cristais */
.sea-crystal {
  position: absolute;
  width: 7px;
  height: 18px;
  border-radius: 999px;
  opacity: 0;
  transform-origin: center;
  background: linear-gradient(to bottom, #e0f2fe, #67e8f9, #22c1c3);
  box-shadow:
    0 0 8px rgba(56, 189, 248, 0.9),
    0 0 18px rgba(59, 130, 246, 0.8);
  animation: seaCrystalBurst 13000ms ease-out forwards;
}

@keyframes seaCrystalBurst {
  0% { opacity: 0; transform: translate(0,0) scale(0.4) rotate(0deg); }
  15% { opacity: 1; }
  55% { opacity: 1; }
  100% {
    opacity: 0;
    transform:
      translate(calc(var(--dx) * 1.9), calc(var(--dy) * 1.9))
      scale(1.35)
      rotate(260deg);
  }
}

/* Spray */
.sea-spray-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: radial-gradient(circle, #e0f2fe, rgba(56, 189, 248, 0));
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(191, 219, 254, 0.9));
  animation: seaSpray 8500ms ease-out forwards;
}

@keyframes seaSpray {
  0% { opacity: 0; transform: translate(0,0) scale(0.4); }
  20% { opacity: 1; }
  60% { opacity: 1; }
  100% {
    opacity: 0;
    transform:
      translate(calc(var(--sx) * 1.6), calc(var(--sy) * 1.6))
      scale(1.1);
  }
}

/* Ray & Octopus */
.sea-ray,
.sea-octopus {
  position: absolute;
  bottom: -70px;
  width: 80px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  will-change: transform, bottom, opacity;
}

.sea-ray {
  left: 32%;
  background-image: url("/assets/icons/sea_ray-711e451a.png");
  animation: seaRayToss 13000ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards 200ms;
}

.sea-octopus {
  left: 68%;
  background-image: url("/assets/icons/sea_octopus-12866d9b.png");
  animation: seaOctopusToss 13000ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards 350ms;
}

@keyframes seaRayToss {
  0% { bottom: -80px; opacity: 0; transform: translateX(-50%) scale(0.8) rotate(-10deg); }
  20% { opacity: 1; }
  35% { bottom: 150px; transform: translateX(-65%) scale(1.05) rotate(-160deg); }
  55% { bottom: 190px; transform: translateX(-35%) scale(1.0) rotate(-240deg); }
  80% { opacity: 1; }
  100% { bottom: -60px; opacity: 0; transform: translateX(-50%) scale(0.9) rotate(-280deg); }
}

@keyframes seaOctopusToss {
  0% { bottom: -80px; opacity: 0; transform: translateX(-50%) scale(0.8) rotate(8deg); }
  20% { opacity: 1; }
  35% { bottom: 155px; transform: translateX(-35%) scale(1.08) rotate(150deg); }
  55% { bottom: 195px; transform: translateX(-65%) scale(1.0) rotate(230deg); }
  80% { opacity: 1; }
  100% { bottom: -60px; opacity: 0; transform: translateX(-50%) scale(0.9) rotate(270deg); }
}

/* Avatar */
.sea-user-avatar {
  position: absolute;
  bottom: -40px;
  left: 50%;
  width: 80px;
  height: 80px;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
  border: 3px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
  transform: translateX(-50%) scale(0.9);
  opacity: 0;
  animation: seaUserFloat 6s ease-out forwards;
}

@keyframes seaUserFloat {
  0% { bottom: -60px; opacity: 0; transform: translateX(-50%) scale(0.7) rotate(0deg); }
  25% { bottom: 160px; opacity: 1; transform: translateX(-50%) scale(1.1) rotate(12deg); }
  60% { bottom: 200px; transform: translateX(-50%) scale(1.1) rotate(-8deg); }
  100% { bottom: -50px; opacity: 0; transform: translateX(-50%) scale(0.8) rotate(20deg); }
}

.rest-ranking-scroll {
  /* continua rolando normalmente */
  overflow-y: auto;

  /* some com a barra em todos os navegadores */
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* IE e Edge antigo */
}

.rest-ranking-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}