/* ════════════════════════════════════════════════════════════════
                              BOLHAS
════════════════════════════════════════════════════════════════ */

/* Camada que contém todas as bolhas */
.planos__bubbles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Bolha base */
.bubble {
  position: absolute;
  bottom: 0px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.bubble img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
}
/* ══════════════════════════════════════════════════════
   Tamanhos: 3 classes para variar a escala visualmente
══════════════════════════════════════════════════════ */
.bubble--sm {
  width: 80px;
  height: 65px;
}
.bubble--md {
  width: 96px;
  height: 96px;
}
.bubble--lg {
  width: 155px;
  height: 80px;
}

/* ══════════════════════════════════════════════════════
   Keyframes de zigue-zague individuais.
   Cada um define uma trajetória X diferente enquanto
   translateY vai de 0 → -(altura da seção + buffer).
   O eixo Y é controlado pela duração da animação;
   o zigue-zague X é embutido em cada keyframe.
══════════════════════════════════════════════════════ */

/* Bolha 1: oscila para a direita depois esquerda */
@keyframes rise-1 {
  0% {
    transform: translateX(0px) translateY(0);
    opacity: 0;
    filter: blur(3px);
  }
  8% {
    opacity: 0.55;
  }
  30% {
    transform: translateX(22px) translateY(-25vh);
    filter: blur(1.5px);
  }
  55% {
    transform: translateX(-14px) translateY(-50vh);
    filter: blur(0.5px);
  }
  78% {
    transform: translateX(18px) translateY(-75vh);
    filter: blur(1px);
    opacity: 0.45;
  }
  92% {
    opacity: 0.15;
  }
  100% {
    transform: translateX(-8px) translateY(-105vh);
    opacity: 0;
    filter: blur(3px);
  }
}

/* Bolha 2: vai logo para a esquerda */
@keyframes rise-2 {
  0% {
    transform: translateX(0px) translateY(0);
    opacity: 0;
    filter: blur(4px);
  }
  10% {
    opacity: 0.5;
  }
  25% {
    transform: translateX(-28px) translateY(-22vh);
    filter: blur(2px);
  }
  50% {
    transform: translateX(16px) translateY(-48vh);
    filter: blur(0.8px);
  }
  75% {
    transform: translateX(-20px) translateY(-73vh);
    filter: blur(1.5px);
    opacity: 0.4;
  }
  90% {
    opacity: 0.12;
  }
  100% {
    transform: translateX(10px) translateY(-106vh);
    opacity: 0;
    filter: blur(4px);
  }
}

/* Bolha 3: zigue-zague mais curto e suave */
@keyframes rise-3 {
  0% {
    transform: translateX(0px) translateY(0);
    opacity: 0;
    filter: blur(2px);
  }
  12% {
    opacity: 0.6;
  }
  35% {
    transform: translateX(12px) translateY(-28vh);
    filter: blur(1px);
  }
  60% {
    transform: translateX(-10px) translateY(-54vh);
    filter: blur(0.3px);
  }
  82% {
    transform: translateX(8px) translateY(-78vh);
    filter: blur(1px);
    opacity: 0.35;
  }
  94% {
    opacity: 0.1;
  }
  100% {
    transform: translateX(-5px) translateY(-108vh);
    opacity: 0;
    filter: blur(2px);
  }
}

/* Bolha 4: amplitude maior */
@keyframes rise-4 {
  0% {
    transform: translateX(0px) translateY(0);
    opacity: 0;
    filter: blur(5px);
  }
  8% {
    opacity: 0.45;
  }
  28% {
    transform: translateX(-35px) translateY(-24vh);
    filter: blur(2.5px);
  }
  52% {
    transform: translateX(28px) translateY(-50vh);
    filter: blur(1px);
  }
  74% {
    transform: translateX(-22px) translateY(-74vh);
    filter: blur(2px);
    opacity: 0.3;
  }
  91% {
    opacity: 0.08;
  }
  100% {
    transform: translateX(15px) translateY(-107vh);
    opacity: 0;
    filter: blur(5px);
  }
}

/* Bolha 5: deriva constante para um lado */
@keyframes rise-5 {
  0% {
    transform: translateX(0px) translateY(0);
    opacity: 0;
    filter: blur(3.5px);
  }
  10% {
    opacity: 0.52;
  }
  33% {
    transform: translateX(18px) translateY(-26vh);
    filter: blur(1.8px);
  }
  58% {
    transform: translateX(8px) translateY(-52vh);
    filter: blur(0.6px);
  }
  80% {
    transform: translateX(24px) translateY(-77vh);
    filter: blur(1.5px);
    opacity: 0.38;
  }
  93% {
    opacity: 0.1;
  }
  100% {
    transform: translateX(14px) translateY(-106vh);
    opacity: 0;
    filter: blur(3.5px);
  }
}

/* Bolha 6: ritmo mais lento, zigue largo */
@keyframes rise-6 {
  0% {
    transform: translateX(0px) translateY(0);
    opacity: 0;
    filter: blur(4px);
  }
  9% {
    opacity: 0.48;
  }
  30% {
    transform: translateX(-20px) translateY(-22vh);
    filter: blur(2px);
  }
  55% {
    transform: translateX(30px) translateY(-49vh);
    filter: blur(0.8px);
  }
  77% {
    transform: translateX(-15px) translateY(-75vh);
    filter: blur(1.8px);
    opacity: 0.32;
  }
  92% {
    opacity: 0.09;
  }
  100% {
    transform: translateX(20px) translateY(-108vh);
    opacity: 0;
    filter: blur(4px);
  }
}

/* Bolha 7: micro-zigue quase reto */
@keyframes rise-7 {
  0% {
    transform: translateX(0px) translateY(0);
    opacity: 0;
    filter: blur(2.5px);
  }
  11% {
    opacity: 0.58;
  }
  32% {
    transform: translateX(8px) translateY(-27vh);
    filter: blur(1.2px);
  }
  57% {
    transform: translateX(-6px) translateY(-53vh);
    filter: blur(0.4px);
  }
  80% {
    transform: translateX(7px) translateY(-76vh);
    filter: blur(1.2px);
    opacity: 0.42;
  }
  93% {
    opacity: 0.12;
  }
  100% {
    transform: translateX(-4px) translateY(-107vh);
    opacity: 0;
    filter: blur(2.5px);
  }
}

/* Bolha 8: deriva para esquerda, ritmo lento */
@keyframes rise-8 {
  0% {
    transform: translateX(0px) translateY(0);
    opacity: 0;
    filter: blur(4.5px);
  }
  8% {
    opacity: 0.42;
  }
  27% {
    transform: translateX(-16px) translateY(-21vh);
    filter: blur(2.2px);
  }
  53% {
    transform: translateX(-28px) translateY(-47vh);
    filter: blur(0.9px);
  }
  76% {
    transform: translateX(-12px) translateY(-73vh);
    filter: blur(2px);
    opacity: 0.28;
  }
  91% {
    opacity: 0.07;
  }
  100% {
    transform: translateX(-20px) translateY(-106vh);
    opacity: 0;
    filter: blur(4.5px);
  }
}

/* ══════════════════════════════════════════════════════
   Instâncias individuais: posição horizontal + timing
══════════════════════════════════════════════════════ */

/* left é a âncora X de cada coluna de bolha */
.bubble:nth-child(1) {
  left: 5%;
  animation: rise-1 18s ease-in-out infinite;
  animation-delay: 0s;
}
.bubble:nth-child(2) {
  left: 17%;
  animation: rise-2 22s ease-in-out infinite;
  animation-delay: -7s;
}
.bubble:nth-child(3) {
  left: 31%;
  animation: rise-3 16s ease-in-out infinite;
  animation-delay: -3s;
}
.bubble:nth-child(4) {
  left: 46%;
  animation: rise-4 25s ease-in-out infinite;
  animation-delay: -11s;
}
.bubble:nth-child(5) {
  left: 58%;
  animation: rise-5 20s ease-in-out infinite;
  animation-delay: -5s;
}
.bubble:nth-child(6) {
  left: 70%;
  animation: rise-6 23s ease-in-out infinite;
  animation-delay: -14s;
}
.bubble:nth-child(7) {
  left: 81%;
  animation: rise-7 17s ease-in-out infinite;
  animation-delay: -2s;
}
.bubble:nth-child(8) {
  left: 91%;
  animation: rise-8 26s ease-in-out infinite;
  animation-delay: -9s;
}

/* ══════════════════════════════════════════════════════
                        MOBILE 
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .bubble--sm {
    width: 80px;
    height: 65px;
  }
  .bubble--md {
    width: 96px;
    height: 96px;
  }
  .bubble--lg {
    width: 145px;
    height: 80px;
  }

  /* Oculta bolhas das extremidades para não poluir telas estreitas */
  .bubble:nth-child(1),
  .bubble:nth-child(8) {
    display: none;
  }

  /* Reescreve todos os keyframes usando px para cobrir a seção inteira */
  @keyframes rise-1 {
    0% {
      transform: translateX(0px) translateY(0);
      opacity: 0;
      filter: blur(3px);
    }
    8% {
      opacity: 0.55;
    }
    30% {
      transform: translateX(22px) translateY(-240px);
      filter: blur(1.5px);
    }
    55% {
      transform: translateX(-14px) translateY(-480px);
      filter: blur(0.5px);
    }
    78% {
      transform: translateX(18px) translateY(-720px);
      filter: blur(1px);
      opacity: 0.45;
    }
    92% {
      opacity: 0.15;
    }
    100% {
      transform: translateX(-8px) translateY(-980px);
      opacity: 0;
      filter: blur(3px);
    }
  }
  @keyframes rise-2 {
    0% {
      transform: translateX(0px) translateY(0);
      opacity: 0;
      filter: blur(4px);
    }
    10% {
      opacity: 0.5;
    }
    25% {
      transform: translateX(-28px) translateY(-220px);
      filter: blur(2px);
    }
    50% {
      transform: translateX(16px) translateY(-460px);
      filter: blur(0.8px);
    }
    75% {
      transform: translateX(-20px) translateY(-700px);
      filter: blur(1.5px);
      opacity: 0.4;
    }
    90% {
      opacity: 0.12;
    }
    100% {
      transform: translateX(10px) translateY(-980px);
      opacity: 0;
      filter: blur(4px);
    }
  }
  @keyframes rise-3 {
    0% {
      transform: translateX(0px) translateY(0);
      opacity: 0;
      filter: blur(2px);
    }
    12% {
      opacity: 0.6;
    }
    35% {
      transform: translateX(12px) translateY(-260px);
      filter: blur(1px);
    }
    60% {
      transform: translateX(-10px) translateY(-510px);
      filter: blur(0.3px);
    }
    82% {
      transform: translateX(8px) translateY(-740px);
      filter: blur(1px);
      opacity: 0.35;
    }
    94% {
      opacity: 0.1;
    }
    100% {
      transform: translateX(-5px) translateY(-980px);
      opacity: 0;
      filter: blur(2px);
    }
  }
  @keyframes rise-4 {
    0% {
      transform: translateX(0px) translateY(0);
      opacity: 0;
      filter: blur(5px);
    }
    8% {
      opacity: 0.45;
    }
    28% {
      transform: translateX(-35px) translateY(-230px);
      filter: blur(2.5px);
    }
    52% {
      transform: translateX(28px) translateY(-470px);
      filter: blur(1px);
    }
    74% {
      transform: translateX(-22px) translateY(-710px);
      filter: blur(2px);
      opacity: 0.3;
    }
    91% {
      opacity: 0.08;
    }
    100% {
      transform: translateX(15px) translateY(-980px);
      opacity: 0;
      filter: blur(5px);
    }
  }
  @keyframes rise-5 {
    0% {
      transform: translateX(0px) translateY(0);
      opacity: 0;
      filter: blur(3.5px);
    }
    10% {
      opacity: 0.52;
    }
    33% {
      transform: translateX(18px) translateY(-250px);
      filter: blur(1.8px);
    }
    58% {
      transform: translateX(8px) translateY(-490px);
      filter: blur(0.6px);
    }
    80% {
      transform: translateX(24px) translateY(-730px);
      filter: blur(1.5px);
      opacity: 0.38;
    }
    93% {
      opacity: 0.1;
    }
    100% {
      transform: translateX(14px) translateY(-980px);
      opacity: 0;
      filter: blur(3.5px);
    }
  }
  @keyframes rise-6 {
    0% {
      transform: translateX(0px) translateY(0);
      opacity: 0;
      filter: blur(4px);
    }
    9% {
      opacity: 0.48;
    }
    30% {
      transform: translateX(-20px) translateY(-220px);
      filter: blur(2px);
    }
    55% {
      transform: translateX(30px) translateY(-460px);
      filter: blur(0.8px);
    }
    77% {
      transform: translateX(-15px) translateY(-710px);
      filter: blur(1.8px);
      opacity: 0.32;
    }
    92% {
      opacity: 0.09;
    }
    100% {
      transform: translateX(20px) translateY(-980px);
      opacity: 0;
      filter: blur(4px);
    }
  }
  @keyframes rise-7 {
    0% {
      transform: translateX(0px) translateY(0);
      opacity: 0;
      filter: blur(2.5px);
    }
    11% {
      opacity: 0.58;
    }
    32% {
      transform: translateX(8px) translateY(-250px);
      filter: blur(1.2px);
    }
    57% {
      transform: translateX(-6px) translateY(-490px);
      filter: blur(0.4px);
    }
    80% {
      transform: translateX(7px) translateY(-730px);
      filter: blur(1.2px);
      opacity: 0.42;
    }
    93% {
      opacity: 0.12;
    }
    100% {
      transform: translateX(-4px) translateY(-980px);
      opacity: 0;
      filter: blur(2.5px);
    }
  }
  @keyframes rise-8 {
    0% {
      transform: translateX(0px) translateY(0);
      opacity: 0;
      filter: blur(4.5px);
    }
    8% {
      opacity: 0.42;
    }
    27% {
      transform: translateX(-16px) translateY(-210px);
      filter: blur(2.2px);
    }
    53% {
      transform: translateX(-28px) translateY(-450px);
      filter: blur(0.9px);
    }
    76% {
      transform: translateX(-12px) translateY(-700px);
      filter: blur(2px);
      opacity: 0.28;
    }
    91% {
      opacity: 0.07;
    }
    100% {
      transform: translateX(-20px) translateY(-980px);
      opacity: 0;
      filter: blur(4.5px);
    }
  }

  /* Redistribui as colunas ativas para cobrir a largura do mobile */
  .bubble:nth-child(2) {
    left: 8%;
  }
  .bubble:nth-child(3) {
    left: 26%;
  }
  .bubble:nth-child(4) {
    left: 44%;
  }
  .bubble:nth-child(5) {
    left: 62%;
  }
  .bubble:nth-child(6) {
    left: 78%;
  }
  .bubble:nth-child(7) {
    left: 92%;
  }
}