/*
 * Homepage screen-two molecular barrier loop.
 * Particles disperse into a compact molecular cloud, gather into a vertical
 * barrier and release again. Mobile, English and reduced-motion keep the
 * stable divider only.
 */

@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  html:not([lang="en"]):not([data-lang="en"])
    body.dbc-home-page #bioten[data-v7160-divider-impact]
    #v287-packaging-title > span:first-child,
  html:not([lang="en"]):not([data-lang="en"])
    body.dbc-home-page #bioten[data-v7160-divider-impact]
    #v287-packaging-title .v716-packaging-title__system {
    position: relative;
    z-index: 2;
  }

  html:not([lang="en"]):not([data-lang="en"])
    body.dbc-home-page #bioten[data-v7160-divider-impact]
    #v287-packaging-title .v7113-packaging-title__separator[data-v793-divider]::before {
    box-shadow: none;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scaleY(.9);
    transform-origin: 50% 50%;
    transition:
      opacity 180ms cubic-bezier(.22, 1, .36, 1),
      box-shadow 180ms cubic-bezier(.22, 1, .36, 1),
      transform 180ms cubic-bezier(.22, 1, .36, 1);
  }

  html:not([lang="en"]):not([data-lang="en"])
    body.dbc-home-page #bioten[data-v7160-divider-impact]
    #v287-packaging-title .v7113-packaging-title__separator[data-v793-divider]::after {
    display: none;
  }

  html:not([lang="en"]):not([data-lang="en"])
    body.dbc-home-page #bioten[data-v7160-divider-impact]
    #v287-packaging-title .v7113-packaging-title__separator:is(.is-v7118-scattered, .is-v7118-forming)::before {
    box-shadow: none;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scaleY(.9);
    transition-duration: 0ms;
  }

  html:not([lang="en"]):not([data-lang="en"])
    body.dbc-home-page #bioten[data-v7160-divider-impact]
    #v287-packaging-title .v7113-packaging-title__separator.is-v7118-dispersing::before {
    box-shadow: none;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scaleY(.92);
    transition-duration: 70ms;
  }

  html:not([lang="en"]):not([data-lang="en"])
    body.dbc-home-page #bioten[data-v7160-divider-impact]
    #v287-packaging-title .v7113-packaging-title__separator.is-v7118-barrier::before {
    box-shadow:
      0 0 .58rem rgb(15 138 101 / .36),
      0 0 1rem rgb(21 95 145 / .12);
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scaleY(1.025);
    animation: v7160-molecular-barrier-beat 280ms cubic-bezier(.16, 1, .3, 1) both;
    transition-duration: 80ms;
  }

  html:not([lang="en"]):not([data-lang="en"])
    body.dbc-home-page #bioten[data-v7160-divider-impact]
    .v7118-particle-divider__canvas {
    z-index: 1;
    width: 68px;
    min-width: 68px;
    max-width: none;
    opacity: 1;
    filter: saturate(1.08) contrast(1.08);
    transform: translate3d(-50%, -50%, 0);
  }

}

@keyframes v7160-molecular-barrier-beat {
  0% {
    box-shadow: 0 0 .2rem rgb(15 138 101 / .18);
    opacity: .58;
    transform: translate3d(-50%, -50%, 0) scaleX(.92) scaleY(.94);
  }
  30% {
    box-shadow:
      0 0 .88rem rgb(15 138 101 / .54),
      0 0 1.32rem rgb(21 95 145 / .19);
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scaleX(1.45) scaleY(1.08);
  }
  54% {
    box-shadow: 0 0 .36rem rgb(15 138 101 / .27);
    opacity: .82;
    transform: translate3d(-50%, -50%, 0) scaleX(.98) scaleY(.99);
  }
  76% {
    box-shadow:
      0 0 .7rem rgb(15 138 101 / .43),
      0 0 1.06rem rgb(21 95 145 / .14);
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scaleX(1.24) scaleY(1.045);
  }
  100% {
    box-shadow:
      0 0 .58rem rgb(15 138 101 / .36),
      0 0 1rem rgb(21 95 145 / .12);
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scaleX(1.08) scaleY(1.025);
  }
}

@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  body.dbc-home-page #bioten[data-v7160-divider-impact]
    .v7118-particle-divider__canvas,
  body.dbc-home-page #bioten[data-v7160-divider-impact]
    #v287-packaging-title .v7113-packaging-title__separator::after {
    display: none !important;
  }

  body.dbc-home-page #bioten[data-v7160-divider-impact]
    #v287-packaging-title .v7113-packaging-title__separator::before {
    animation: none !important;
    transition: none !important;
  }
}