/*
===============================================================================
ASKCARBI GLOBAL FUTURISTIC BUTTON EFFECTS V2
===============================================================================
Applies to the original homepage, organized homepage, navigation, assistant
controls, tool cards, emergency controls and future interactive controls.
===============================================================================
*/

:root {
  --carbi-effect-blue:
    rgba(31, 132, 255, 0.82);

  --carbi-effect-cyan:
    rgba(0, 229, 255, 0.76);

  --carbi-effect-white:
    rgba(255, 255, 255, 0.96);

  --carbi-effect-shadow:
    rgba(13, 96, 255, 0.34);
}


/*
 * Global interactive targets.
 *
 * Do not require the organized-home body class.
 */
button,
[role="button"],
a[href],
input[type="button"],
input[type="submit"],
input[type="reset"],
.carbi-tool-card,
.carbi-category-card,
.carbi-category-button,
.carbi-assistant-launcher,
.carbi-home-launcher,
.carbi-home-button,
.carbi-bottom-nav button,
.bottom-nav button,
nav button,
[data-tab],
[data-open-create],
[data-save-preferences],
[data-request-notifications],
[data-reminder-action] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color:
    transparent;

  transform:
    translate3d(0, 0, 0)
    scale(1);

  transition:
    transform 120ms ease,
    filter 160ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}


/*
 * Keep text and icons above the visual effects.
 */
button > *,
[role="button"] > *,
a[href] > *,
.carbi-tool-card > *,
.carbi-category-card > *,
.carbi-category-button > * {
  position: relative;
  z-index: 3;
}


/*
 * Light sweep layer.
 */
button::after,
[role="button"]::after,
a[href]::after,
.carbi-tool-card::after,
.carbi-category-card::after,
.carbi-category-button::after,
.carbi-assistant-launcher::after,
.carbi-home-launcher::after,
.carbi-home-button::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -35%;
  pointer-events: none;

  background:
    linear-gradient(
      115deg,
      transparent 34%,
      rgba(255, 255, 255, 0.12) 42%,
      rgba(110, 231, 255, 0.66) 49%,
      rgba(255, 255, 255, 0.42) 54%,
      transparent 63%
    );

  transform:
    translateX(-125%)
    rotate(4deg);

  opacity: 0;
}


/*
 * Press-down response.
 */
button:active,
[role="button"]:active,
a[href]:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
.carbi-tool-card:active,
.carbi-category-card:active,
.carbi-category-button:active,
.carbi-assistant-launcher:active,
.carbi-home-launcher:active,
.carbi-home-button:active {
  transform:
    translate3d(0, 2px, 0)
    scale(0.965);

  filter:
    brightness(1.08)
    saturate(1.14);

  box-shadow:
    0 0 0 2px
      rgba(255, 255, 255, 0.56),
    0 0 16px
      var(--carbi-effect-blue),
    0 0 30px
      rgba(0, 225, 255, 0.42),
    inset 0 0 18px
      rgba(255, 255, 255, 0.22);
}


/*
 * Keyboard and accessibility focus.
 */
button:focus-visible,
[role="button"]:focus-visible,
a[href]:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
.carbi-tool-card:focus-visible,
.carbi-category-card:focus-visible,
.carbi-category-button:focus-visible {
  outline:
    3px solid
    rgba(20, 143, 255, 0.52);

  outline-offset:
    3px;

  box-shadow:
    0 0 0 2px
      rgba(255, 255, 255, 0.92),
    0 0 20px
      rgba(0, 190, 255, 0.7);
}


/*
 * JavaScript activation state.
 */
.carbi-future-press {
  transform:
    translate3d(0, 2px, 0)
    scale(0.965) !important;

  filter:
    brightness(1.1)
    saturate(1.16) !important;

  box-shadow:
    0 0 0 2px
      rgba(255, 255, 255, 0.7),
    0 0 18px
      var(--carbi-effect-blue),
    0 0 34px
      rgba(0, 225, 255, 0.46),
    inset 0 0 20px
      rgba(255, 255, 255, 0.24) !important;
}


.carbi-future-sweep::after {
  animation:
    carbiFutureSweep
    460ms ease-out;
}


.carbi-future-pulse {
  animation:
    carbiFuturePulse
    520ms ease-out;
}


/*
 * Touch-position ripple.
 */
.carbi-future-ripple {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  border-radius: 999px;

  width:
    var(--carbi-ripple-size, 100px);

  height:
    var(--carbi-ripple-size, 100px);

  left:
    var(--carbi-ripple-x, 50%);

  top:
    var(--carbi-ripple-y, 50%);

  transform:
    translate(-50%, -50%)
    scale(0.05);

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(91, 224, 255, 0.78) 24%,
      rgba(34, 128, 255, 0.42) 48%,
      transparent 72%
    );

  box-shadow:
    0 0 20px
      rgba(0, 221, 255, 0.74);

  animation:
    carbiFutureRipple
    560ms ease-out forwards;
}


@keyframes carbiFutureRipple {
  0% {
    opacity: 0.98;

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

  65% {
    opacity: 0.48;
  }

  100% {
    opacity: 0;

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


@keyframes carbiFutureSweep {
  0% {
    opacity: 0;

    transform:
      translateX(-125%)
      rotate(4deg);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;

    transform:
      translateX(125%)
      rotate(4deg);
  }
}


@keyframes carbiFuturePulse {
  0% {
    box-shadow:
      0 0 0 0
        rgba(0, 201, 255, 0.72);
  }

  60% {
    box-shadow:
      0 0 0 12px
        rgba(0, 201, 255, 0);
  }

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


/*
 * Preserve emergency red identity while adding a red/cyan pulse.
 */
button[class*="emergency" i]:active,
[class*="emergency" i][role="button"]:active,
button[class*="sos" i]:active,
[class*="sos" i][role="button"]:active {
  box-shadow:
    0 0 0 2px
      rgba(255, 255, 255, 0.72),
    0 0 18px
      rgba(255, 47, 47, 0.8),
    0 0 32px
      rgba(0, 219, 255, 0.34),
    inset 0 0 18px
      rgba(255, 255, 255, 0.22);
}


/*
 * Respect customers who disable motion.
 */
@media (
  prefers-reduced-motion:
  reduce
) {
  button,
  [role="button"],
  a[href],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .carbi-tool-card,
  .carbi-category-card,
  .carbi-category-button {
    transition:
      none !important;

    animation:
      none !important;
  }

  .carbi-future-ripple {
    display:
      none !important;
  }
}