/*
 * PB SMM
 * Particle Signature v2
 *
 * Living visual signature.
 * No card.
 * No label.
 * No crosshair.
 */


.pb-ai-signature {
  position: relative;

  flex:
    0 0 auto;

  width:
    calc(100% - 2px);

  height:
    132px;

  margin:
    auto 1px 8px;

  padding:
    0;

  overflow:
    visible;

  border:
    0;

  border-radius:
    0;

  background:
    transparent;

  box-shadow:
    none;

  cursor:
    default;

  user-select:
    none;

  -webkit-user-select:
    none;

  isolation:
    isolate;
}


.pb-ai-signature
+ .pb-sidebar-foot {
  margin-top:
    0 !important;
}


.pb-ai-signature-stage {
  position:
    absolute;

  inset:
    0;

  overflow:
    visible;

  border:
    0;

  border-radius:
    0;

  background:
    transparent;

  pointer-events:
    auto;

  cursor:
    default;
}


.pb-ai-signature-stage::before {
  content:
    "";

  position:
    absolute;

  left:
    50%;

  top:
    52%;

  width:
    136px;

  height:
    74px;

  transform:
    translate(
      -50%,
      -50%
    )
    scale(.92);

  border-radius:
    50%;

  background:
    radial-gradient(
      ellipse at center,

      rgba(
        71,
        121,
        232,
        .075
      )
      0%,

      rgba(
        93,
        157,
        241,
        .035
      )
      42%,

      transparent
      73%
    );

  filter:
    blur(
      18px
    );

  opacity:
    .30;

  pointer-events:
    none;

  transition:
    opacity .7s ease,
    transform .9s
      cubic-bezier(
        .16,
        .75,
        .25,
        1
      );
}


.pb-ai-signature:hover
.pb-ai-signature-stage::before {
  opacity:
    .65;

  transform:
    translate(
      -50%,
      -50%
    )
    scale(
      1.08
    );
}


.pb-ai-signature canvas {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  display:
    block;

  cursor:
    default;

  touch-action:
    pan-y;
}


/*
 * Tiny atmospheric depth.
 * Invisible until the object is engaged.
 */

.pb-ai-signature-depth {
  position:
    absolute;

  inset:
    7px 3px;

  overflow:
    hidden;

  pointer-events:
    none;

  opacity:
    0;

  transition:
    opacity .45s ease;
}


.pb-ai-signature:hover
.pb-ai-signature-depth {
  opacity:
    1;
}


.pb-ai-signature-depth::before,
.pb-ai-signature-depth::after {
  content:
    "";

  position:
    absolute;

  left:
    50%;

  width:
    158px;

  height:
    64px;

  border-radius:
    50%;

  border-top:
    1px solid
      rgba(
        86,
        145,
        239,
        .13
      );

  transform:
    translateX(-50%);

  animation:
    pb-signature-depth-a
    9s
    cubic-bezier(
      .2,
      .7,
      .2,
      1
    )
    infinite alternate;
}


.pb-ai-signature-depth::before {
  top:
    56px;
}


.pb-ai-signature-depth::after {
  top:
    67px;

  width:
    176px;

  border-color:
    rgba(
      116,
      177,
      247,
      .10
    );

  animation-name:
    pb-signature-depth-b;

  animation-duration:
    13s;

  animation-delay:
    -5s;
}


@keyframes pb-signature-depth-a {

  from {
    transform:
      translateX(
        calc(-50% - 6px)
      )
      scaleX(.96);
  }

  to {
    transform:
      translateX(
        calc(-50% + 7px)
      )
      scaleX(1.04);
  }

}


@keyframes pb-signature-depth-b {

  from {
    transform:
      translateX(
        calc(-50% + 8px)
      )
      rotate(1deg);
  }

  to {
    transform:
      translateX(
        calc(-50% - 8px)
      )
      rotate(-1deg);
  }

}


@media (max-height: 720px) {

  .pb-ai-signature {
    height:
      108px;
  }

}


@media (max-width: 900px) {

  .pb-ai-signature {
    display:
      none;
  }

}


@media (
  prefers-reduced-motion:
    reduce
) {

  /*
   * Interaction stays enabled.
   * Only autonomous decorative CSS
   * animation is disabled.
   */

  .pb-ai-signature-depth::before,
  .pb-ai-signature-depth::after {
    animation:
      none !important;
  }

}