/*
 * Unified Hub navigation feedback.
 *
 * The navigation script owns both scrolling and
 * destination highlighting.
 */


/* Click feedback on the selected Hub button. */

.wc-hub-nav
a.fbb-hub-nav-clicked {
  animation:
    fbbHubNavClick
    .38s
    ease-out
    1 !important;
}


@keyframes fbbHubNavClick {
  0% {
    box-shadow:
      0 0 0 0
      rgba(0,177,255,0);
  }

  40% {
    border-color:
      #00ff87 !important;

    box-shadow:
      0 0 0 4px
      rgba(0,255,135,.12),

      0 0 22px
      rgba(0,177,255,.20);
  }

  100% {
    box-shadow:
      0 0 0 0
      rgba(0,177,255,0);
  }
}


/*
 * Destination overlay.
 * This does not alter the size, margin, transform or
 * brightness of the selected card.
 */

.fbb-hub-destination {
  position:
    relative !important;
}


.fbb-hub-destination::after {
  content:"";

  position:absolute;

  inset:
    0;

  z-index:
    50;

  border:
    2px solid
    transparent;

  border-radius:
    inherit;

  opacity:
    0;

  pointer-events:
    none;

  box-shadow:
    0 0 0 0
    rgba(0,177,255,0),

    inset 0 0 0
    rgba(0,255,135,0);
}


.fbb-hub-destination.fbb-hub-destination-flash::after {
  animation:
    fbbHubDestinationFlash
    1.35s
    ease-out
    1;
}


@keyframes fbbHubDestinationFlash {
  0% {
    opacity:
      0;

    border-color:
      rgba(0,177,255,0);

    box-shadow:
      0 0 0 0
      rgba(0,177,255,0),

      inset 0 0 0
      rgba(0,255,135,0);
  }

  16% {
    opacity:
      1;

    border-color:
      rgba(0,177,255,.98);

    box-shadow:
      0 0 0 5px
      rgba(0,177,255,.12),

      0 0 32px
      rgba(0,177,255,.22),

      inset 0 0 22px
      rgba(0,177,255,.08);
  }

  48% {
    opacity:
      1;

    border-color:
      rgba(0,255,135,.95);

    box-shadow:
      0 0 0 6px
      rgba(0,255,135,.10),

      0 0 38px
      rgba(0,255,135,.20),

      inset 0 0 25px
      rgba(0,255,135,.07);
  }

  78% {
    opacity:
      .55;

    border-color:
      rgba(56,189,248,.55);

    box-shadow:
      0 0 0 3px
      rgba(56,189,248,.07),

      0 0 18px
      rgba(56,189,248,.11),

      inset 0 0 12px
      rgba(56,189,248,.04);
  }

  100% {
    opacity:
      0;

    border-color:
      rgba(56,189,248,0);

    box-shadow:
      0 0 0 0
      rgba(56,189,248,0),

      0 0 0
      rgba(56,189,248,0),

      inset 0 0 0
      rgba(56,189,248,0);
  }
}


#fbbLeagueIntelligence,
#fbbLeagueStandingsTarget,
#fbbLast5Averages,
#fbbRecentFormTarget,
#fbbPlayersTarget {
  scroll-margin-top:
    96px !important;
}


@media(max-width:760px) {
  #fbbLeagueIntelligence,
  #fbbLeagueStandingsTarget,
  #fbbLast5Averages,
  #fbbRecentFormTarget,
  #fbbPlayersTarget {
    scroll-margin-top:
      80px !important;
  }
}


@media(prefers-reduced-motion:reduce) {
  .wc-hub-nav
  a.fbb-hub-nav-clicked {
    animation:
      none !important;
  }


  .fbb-hub-destination.fbb-hub-destination-flash::after {
    animation:
      fbbHubReducedFlash
      .8s
      ease-out
      1;
  }


  @keyframes fbbHubReducedFlash {
    0%,
    100% {
      opacity:
        0;
    }

    20%,
    75% {
      opacity:
        1;

      border-color:
        rgba(0,177,255,.9);

      box-shadow:
        0 0 0 4px
        rgba(0,255,135,.10);
    }
  }
}