/* ============================================================
   Визуал фоновых пузырей — эталон: заставка Windows 7.
   Чистая сфера БЕЗ внутреннего кольца:
     .bubble    — прозрачный центр + тонкая светлая кромка у
                  самого края (радиальный градиент) с едва
                  заметным голубым/розовым отливом; кромка не
                  имеет отдельных inset-теней — потому кольца
                  внутри сферы не возникает;
     ::before   — один крупный мягкий белый спекуляр
                  сверху-слева, размазанный по поверхности;
     ::after    — малый яркий глинт рядом со спекуляром +
                  лёгкое высветление нижне-правой кромки
                  (контровой свет).
   Все блики в процентах — масштабируются с размером пузыря.
   HTML-генератор в index.html задаёт размер, left,
   animation-duration и animation-delay — они работают как есть.
   Траектория обязана выносить пузырь ПОЛНОСТЬЮ за верхний край
   экрана до рестарта анимации (см. translateY в @keyframes float).
   ============================================================ */

.bubble {
  position: absolute;
  bottom: -160px;
  border-radius: 50%;
  overflow: hidden;
  background:
    /* чуть заметное остекление тела, к центру — почти ноль */
    radial-gradient(circle closest-side at 50% 50%,
      rgba(205,238,255,.05) 0%,
      rgba(205,238,255,.02) 55%,
      rgba(205,238,255,0) 88%),
    /* кромка: прозрачна до 92%, затем деликатный отлив и
       тонкая ровная светлая линия на самом краю */
    radial-gradient(circle closest-side at 50% 50%,
      rgba(255,255,255,0) 92%,
      rgba(176,227,255,.13) 95%,
      rgba(255,215,242,.16) 98%,
      rgba(255,255,255,.60) 100%);
  border: 1px solid rgba(255,255,255,.40);
  box-shadow: 0 0 10px rgba(200,235,255,.22);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  animation: float linear infinite;
}

.bubble::before {
  content: "";
  position: absolute;
  left: 10%;
  top: 7%;
  width: 52%;
  height: 36%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse closest-side at 46% 42%,
      rgba(255,255,255,.88) 0%,
      rgba(255,255,255,.42) 46%,
      rgba(255,255,255,0) 100%),
    /* мягкая растяжка блика вниз-вправо по поверхности */
    radial-gradient(ellipse 120% 90% at 62% 80%,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,0) 72%);
  transform: rotate(-16deg);
}

.bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    /* малый горячий глинт рядом со спекуляром */
    radial-gradient(circle at 27% 23%,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.50) 2.2%,
      rgba(255,255,255,0) 6%),
    /* контровой свет: высветление нижне-правой кромки */
    radial-gradient(circle at 82% 88%,
      rgba(255,255,255,.46) 0%,
      rgba(255,255,255,.16) 15%,
      rgba(255,255,255,0) 38%);
}

@keyframes float {
  0%   { transform: translateY(0)      translateX(0);        opacity: 0; }
  6%   { opacity: 1; }
  50%  { transform: translateY(-72vh)  translateX(26px); }
  100% { transform: translateY(-145vh) translateX(-18px);    opacity: 1; }
}