/* =========================================================
   NADLAB mobile laboratory bubbles
   Continuous decorative animation only.

   Two bubbles are animated for every color.
   While one bubble pops, its paired bubble is already
   appearing from behind.

   Important:
   - no layout changes;
   - no changes to large circles;
   - no scroll / resize listeners;
   - only transform and opacity are animated.
   ========================================================= */

@media (max-width: 720px) {
  .mobile-lab-entry__bubble {
    transform-origin: center center;
    will-change: transform, opacity;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
      0 8px 16px rgba(15, 23, 42, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.30),
      inset 0 -8px 14px rgba(15, 23, 42, 0.08);
  }

  .mobile-lab-entry__bubble--purple {
    --bubble-color: #a653d7;
    --bubble-background:
      radial-gradient(
        circle at 30% 24%,
        rgba(255, 255, 255, 0.38) 0%,
        rgba(255, 255, 255, 0.14) 25%,
        rgba(255, 255, 255, 0) 48%
      ),
      linear-gradient(
        145deg,
        #bd78e5 0%,
        #a653d7 58%,
        #8432b4 100%
      );
  }

  .mobile-lab-entry__bubble--yellow {
    --bubble-color: #d7ab55;
    --bubble-background:
      radial-gradient(
        circle at 30% 24%,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0.16) 25%,
        rgba(255, 255, 255, 0) 48%
      ),
      linear-gradient(
        145deg,
        #f0c973 0%,
        #d7ab55 58%,
        #b48836 100%
      );
  }

  .mobile-lab-entry__bubble--pink {
    --bubble-color: #ef72ed;
    --bubble-background:
      radial-gradient(
        circle at 30% 24%,
        rgba(255, 255, 255, 0.40) 0%,
        rgba(255, 255, 255, 0.15) 25%,
        rgba(255, 255, 255, 0) 48%
      ),
      linear-gradient(
        145deg,
        #f6a0f3 0%,
        #ef72ed 58%,
        #c84ac7 100%
      );
  }

  .mobile-lab-entry__bubble--pink-small {
    --bubble-color: #65cfe3;
    --bubble-background:
      radial-gradient(
        circle at 30% 24%,
        rgba(255, 255, 255, 0.44) 0%,
        rgba(255, 255, 255, 0.17) 25%,
        rgba(255, 255, 255, 0) 48%
      ),
      linear-gradient(
        145deg,
        #99e8f2 0%,
        #65cfe3 58%,
        #36aabc 100%
      );
  }

  /*
    The cloned partner stays behind the original bubble.
    Both remain behind the large circles from index.css.
  */
  .mobile-lab-entry__bubble.is-bubble-clone {
    z-index: 0;
  }

  .mobile-lab-entry.is-bubble-motion-active
  .mobile-lab-entry__bubble.is-bubble-animated,
  .mobile-lab-entry__canvas--hero.is-bubble-motion-active
  .mobile-lab-entry__bubble.is-bubble-animated {
    background: var(--bubble-background);
    animation-name: nadlab-mobile-bubble-cycle;
    animation-duration: var(--bubble-duration, 11000ms);
    animation-timing-function: linear;
    animation-delay: var(--bubble-phase-delay, 0ms);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
  }

  /*
    Ring shown at the pop moment.
  */
  .mobile-lab-entry__bubble::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 2px solid var(--bubble-color);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
  }

  .mobile-lab-entry.is-bubble-motion-active
  .mobile-lab-entry__bubble.is-bubble-animated::after,
  .mobile-lab-entry__canvas--hero.is-bubble-motion-active
  .mobile-lab-entry__bubble.is-bubble-animated::after {
    animation-name: nadlab-mobile-bubble-ring;
    animation-duration: var(--bubble-duration, 11000ms);
    animation-timing-function: ease-out;
    animation-delay: var(--bubble-phase-delay, 0ms);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
  }

  /*
    The bubble emerges from behind, floats forward,
    grows slightly and then pops.
  */
  @keyframes nadlab-mobile-bubble-cycle {
    /*
      Continuous movement:
      emerge from behind, rise and grow fluidly.
      No intermediate transform stops.
    */
    0% {
      opacity: 0;
      transform:
        translate(
          var(--bubble-from-x, 0px),
          var(--bubble-from-y, 20px)
        )
        scale(0.42);
    }

    7% {
      opacity: 0.28;
    }

    16% {
      opacity: 0.58;
    }

    30% {
      opacity: 0.84;
    }

    /*
      The bubble grows continuously from 0% to 46%.
    */
    46% {
      opacity: 0.98;
      transform:
        translate(
          var(--bubble-near-pop-x, 0px),
          var(--bubble-near-pop-y, -21px)
        )
        scale(var(--bubble-near-pop-scale, 1.10));
    }

    /*
      Quick final expansion: the pop moment.
    */
    49% {
      opacity: 0.14;
      transform:
        translate(
          var(--bubble-pop-x, 0px),
          var(--bubble-pop-y, -28px)
        )
        scale(var(--bubble-pop-scale, 1.28));
    }

    /*
      Remain hidden while the paired bubble is active.
    */
    50%,
    100% {
      opacity: 0;
      transform:
        translate(
          var(--bubble-pop-x, 0px),
          var(--bubble-pop-y, -28px)
        )
        scale(var(--bubble-pop-scale, 1.28));
    }
  }

  @keyframes nadlab-mobile-bubble-ring {
    0%,
    40% {
      opacity: 0;
      transform: scale(0.72);
    }

    45% {
      opacity: 0.44;
      transform: scale(1);
    }

    50% {
      opacity: 0;
      transform: scale(1.58);
    }

    100% {
      opacity: 0;
      transform: scale(1.58);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-lab-entry__bubble,
  .mobile-lab-entry__bubble::after {
    animation: none !important;
    transform: none !important;
  }
}