/* Living flask in the BetProfessor logo — one ~3 s cycle, started by assets/js/logo.js.
 * At rest every moving part is in its original place and the bubbles are invisible,
 * so the first and the last frame are the original logo. Coordinates: original PNG px. */
.bpl { display: block; width: 100%; height: auto; overflow: visible; }
.bpl .bpl-flask, .bpl .bpl-liquid { transform-box: view-box; }
.bpl .bpl-flask { transform-origin: 1033.5px 483px; }     /* the base of the flask */
.bpl .bpl-liquid { transform-origin: 1033.5px 440px; }
.bpl .bpl-in circle, .bpl .bpl-out circle { opacity: 0; transform-box: fill-box; transform-origin: center; }

.bpl.is-play .bpl-flask { animation: bplSway 3s cubic-bezier(.45, .05, .35, 1) both; }
.bpl.is-play .bpl-liquid { animation: bplLevel 3s cubic-bezier(.45, .05, .35, 1) both; }   /* keeps the surface level */
.bpl.is-play .bpl-in circle { animation: bplRise 1.15s cubic-bezier(.3, .6, .4, 1) both; }
.bpl.is-play .bpl-in circle:nth-child(1) { animation-delay: .22s; }
.bpl.is-play .bpl-in circle:nth-child(2) { animation-delay: .52s; animation-duration: 1s; }
.bpl.is-play .bpl-in circle:nth-child(3) { animation-delay: .78s; animation-duration: 1.3s; }
.bpl.is-play .bpl-in circle:nth-child(4) { animation-delay: 1.12s; animation-duration: .95s; }
.bpl.is-play .bpl-out circle:nth-child(1) { animation: bplPopL .9s cubic-bezier(.25, .6, .35, 1) 1.7s both; }
.bpl.is-play .bpl-out circle:nth-child(2) { animation: bplPopR .85s cubic-bezier(.25, .6, .35, 1) 2.02s both; }

@keyframes bplSway {
  0%, 28% { transform: rotate(0); }
  42% { transform: rotate(2.6deg); }
  56% { transform: rotate(-2.4deg); }
  69% { transform: rotate(1.3deg); }
  81% { transform: rotate(-.5deg); }
  90%, 100% { transform: rotate(0); }
}
@keyframes bplLevel {
  0%, 28% { transform: rotate(0); }
  42% { transform: rotate(-2.6deg); }
  56% { transform: rotate(2.4deg); }
  69% { transform: rotate(-1.3deg); }
  81% { transform: rotate(.5deg); }
  90%, 100% { transform: rotate(0); }
}
@keyframes bplRise {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  18% { opacity: .95; transform: translate(1px, -6px) scale(1); }
  55% { transform: translate(-4px, -26px) scale(1); }
  85% { opacity: .9; }
  100% { opacity: 0; transform: translate(2px, -46px) scale(.85); }
}
@keyframes bplPopL {
  0% { opacity: 0; transform: translate(0, 6px) scale(.4); }
  25% { opacity: 1; transform: translate(-6px, -30px) scale(1); }
  70% { opacity: .85; transform: translate(-26px, -96px) scale(.8); }
  100% { opacity: 0; transform: translate(-36px, -132px) scale(.25); }
}
@keyframes bplPopR {
  0% { opacity: 0; transform: translate(0, 6px) scale(.4); }
  25% { opacity: 1; transform: translate(6px, -26px) scale(1); }
  70% { opacity: .85; transform: translate(24px, -84px) scale(.8); }
  100% { opacity: 0; transform: translate(34px, -118px) scale(.25); }
}
@media (prefers-reduced-motion: reduce) {
  .bpl.is-play * { animation: none !important; }
}

/* sizes in the site: the full word mark is ~180–200 px wide (ТЗ §8.1); a compact mark below 360 */
.logo .bpl { width: 196px; }
.logo--hdr { position: relative; }
.logo__mini { display: none; width: 34px; height: 34px; border-radius: 10px; }
.drawer .logo .bpl { width: 170px; }
.footer .logo .bpl { width: 200px; }
@media (max-width: 767px) { .logo--hdr .bpl { width: 150px; } }
@media (max-width: 389px) { .logo--hdr .bpl { width: 132px; } }  /* room for "Log in" with a desktop scrollbar */
@media (max-width: 359px) { .logo--hdr .bpl { display: none; } .logo__mini { display: block; } }