/* =========================================================
   NADLAB desktop laboratory bubbles
   Very subtle continuous animation.

   Same visual idea as mobile:
   - emerge from behind;
   - float upward;
   - grow fluidly;
   - pop softly;
   - paired replacement is already emerging.

   Important:
   - desktop only;
   - one shared color;
   - decorative only;
   - no layout changes;
   - transform and opacity animations only.
   ========================================================= */

@media (min-width: 721px) {
  .help-hub__top {
    position: relative;
    isolation: isolate;
  }

  /*
    Keep only the normal page sections above the decorative layer.

    Important:
    Do not apply position: relative to the floating cards.
    Their original viewport-based positioning must remain intact.
  */
  .help-hub__overlay-top,
  .help-hub__mobile-stage-zone,
  .help-hub__hero,
  .help-hub__virtual-tour,
  .help-hub__seekers-wrap {
    position: relative;
    z-index: 1;
  }

  .desktop-lab-bubbles {
    position: absolute;
    z-index: 0;
    inset-inline: 0;
    top: 128px;
    height: 780px;
    overflow: visible;
    pointer-events: none;

    /*
      Change only this value if you want another shared color.
    */
    --desktop-bubble-color: #1b2438;

    --desktop-bubble-background:
      rgba(27, 36, 56, 0.15);
  }
  
  .desktop-lab-bubbles {opacity:0.15;}

  .desktop-lab-bubbles__bubble {
    position: absolute;
    display: block;
    box-sizing: border-box;
    aspect-ratio: 1;
    border: 3px solid rgba(27, 36, 56, 0.48);
    border-radius: 50%;
    opacity: 0;
    background: var(--desktop-bubble-background);
    box-shadow: none;
    transform-origin: center center;
    will-change: transform, opacity;
  }

  /*
    Paired clones remain slightly farther behind.
  */
  .desktop-lab-bubbles__bubble.is-desktop-bubble-clone {
    z-index: -1;
  }

  .desktop-lab-bubbles.is-motion-active
  .desktop-lab-bubbles__bubble.is-desktop-bubble-animated {
    animation-name: nadlab-desktop-bubble-cycle;
    animation-duration: var(--desktop-bubble-duration, 15000ms);
    animation-timing-function: linear;
    animation-delay: var(--desktop-bubble-phase-delay, 0ms);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
  }

  .desktop-lab-bubbles__bubble::after {
    content: "";
    position: absolute;
    inset: -7px;
    border: 3px solid rgba(27, 36, 56, 1);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
  }

  .desktop-lab-bubbles.is-motion-active
  .desktop-lab-bubbles__bubble.is-desktop-bubble-animated::after {
    animation-name: nadlab-desktop-bubble-ring;
    animation-duration: var(--desktop-bubble-duration, 15000ms);
    animation-timing-function: linear;
    animation-delay: var(--desktop-bubble-phase-delay, 0ms);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
  }

  /*
    Same sequence as mobile, but much softer.
  */
  @keyframes nadlab-desktop-bubble-cycle {
    /*
      Temporary high-visibility mode for visual decisions.
      Geometry and timing remain unchanged.
    */
    0% {
      opacity: 0;
      transform:
        translate(
          var(--desktop-bubble-from-x, 0px),
          var(--desktop-bubble-from-y, 16px)
        )
        scale(0.46);
    }

    8% {
      opacity: 0.28;
    }

    18% {
      opacity: 0.48;
    }

    32% {
      opacity: 0.68;
    }

    46% {
      opacity: 0.92;
      transform:
        translate(
          var(--desktop-bubble-near-pop-x, 0px),
          var(--desktop-bubble-near-pop-y, -18px)
        )
        scale(var(--desktop-bubble-near-pop-scale, 1.07));
    }

    49% {
      opacity: 0.20;
      transform:
        translate(
          var(--desktop-bubble-pop-x, 0px),
          var(--desktop-bubble-pop-y, -24px)
        )
        scale(var(--desktop-bubble-pop-scale, 1.22));
    }

    50%,
    100% {
      opacity: 0;
      transform:
        translate(
          var(--desktop-bubble-pop-x, 0px),
          var(--desktop-bubble-pop-y, -24px)
        )
        scale(var(--desktop-bubble-pop-scale, 1.22));
    }
  }

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

    46% {
      opacity: 1;
      transform: scale(1);
    }

    50%,
    100% {
      opacity: 0;
      transform: scale(1.72);
    }
  }

  /*
    Positions remain fixed.
    Only the internal transform animation changes.
  */
  .desktop-lab-bubbles__bubble--1 {
    width: 88px;
    inset-inline-end: 3%;
    top: 7%;
  }

  .desktop-lab-bubbles__bubble--2 {
    width: 52px;
    inset-inline-end: 18%;
    top: 47%;
  }

  .desktop-lab-bubbles__bubble--3 {
    width: 74px;
    inset-inline-start: 5%;
    top: 16%;
  }

  .desktop-lab-bubbles__bubble--4 {
    width: 44px;
    inset-inline-start: 21%;
    top: 66%;
  }

  .desktop-lab-bubbles__bubble--5 {
    width: 34px;
    inset-inline-end: 42%;
    top: 2%;
  }

  .desktop-lab-bubbles__bubble--6 {
    width: 58px;
    inset-inline-start: 20%;
    top: 0;
  }
}

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