@use '../abstract' as *;
.top-banner {
  position:relative; overflow:hidden; display:flex; justify-content:center;
  padding-block:pxToRem(5); padding-inline:pxToRem(12);

  &-bg {
    position:absolute; inset:0;
    block-size:60px; inline-size:100%;
    svg, img {
      animation:rotate 7s infinite linear;
      inline-size:100vw;
      filter:blur(8px);
      max-inline-size:none; max-block-size:none;
      @media (prefers-reduced-motion) { animation:none; }
    }
  }
  &-bg-1 {
    position:absolute; inset-inline-start:0; inset-block-start:0;
    transform:translateX(-60%) translateY(-35%); /* for inline svg */

    inline-size:100vw;
  }
  &-bg-2 {
    position:absolute; inset-inline-end:0; inset-block-start:0;
    transform:translateX(55%) translateY(-50%); /* for inline svg */
    inline-size:100vw;
  }
  &-content { position:relative; z-index:1; line-height:pxToRem(50); transition:var(--transition); }
  &-button { position:absolute; inset-block:0; inset-inline-end:pxToRem(12); }

  [data-banner-hidden] & {
    display: none;
  }
  @media #{$break1} {
    inline-size:100%; padding:pxToRem(16);
    &-content { display:flex; flex-direction:column; inline-size:100%; line-height:1.5; transition:var(--transition); }
    &-button {
      position:static; line-height:1; align-self:end; order:-1;
      margin-block-start:-4px; margin-inline-end:-5px;  margin-block-end:pxToRem(8);
    }
  }
}