/* My Page Builder Effects. Generated by tools/effects-css.mjs — edit that file, not this one. */

@property --mypb-fx-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes mypb-fx-spin { to { --mypb-fx-angle: 360deg; } }
@keyframes mypb-fx-sheen {
  0% { transform: translateX(-150%) skewX(-15deg); }
  60%, 100% { transform: translateX(250%) skewX(-15deg); }
}
@keyframes mypb-fx-flow { to { background-position: 300% 0; } }
@keyframes mypb-fx-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes mypb-fx-aurora {
  0% { background-position: 0% 0%, 100% 0%, 50% 100%; }
  50% { background-position: 100% 50%, 0% 100%, 0% 0%; }
  100% { background-position: 50% 100%, 50% 0%, 100% 50%; }
}
@keyframes mypb-fx-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: var(--mypb-fx-neon); }
  20%, 24%, 55% { text-shadow: none; }
}
@keyframes mypb-fx-ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* Positioning for the layers. No specificity, so an element set to absolute, fixed or sticky keeps that.
   isolation keeps the layers drawn "behind" (z-index -1) inside the element, over its background. */
:where(:is([data-mypb-effect="conic"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="conic"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom)))), :is([data-mypb-effect="glow"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="glow"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom)))), :is([data-mypb-effect="sheen"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="sheen"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom)))), :is([data-mypb-effect="beam"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="beam"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom)))), :is([data-mypb-effect="gradient_border"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="gradient_border"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom)))), :is([data-mypb-effect="aurora"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="aurora"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom)))), :is([data-mypb-effect="spotlight"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="spotlight"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom)))), :is([data-mypb-effect="ripple"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="ripple"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))) {
  position: relative;
  isolation: isolate;
}
/* Button faces clip their content (overflow: hidden); the halo and the glow are drawn outside the face. */
[data-mypb-effect="conic"]:not([data-mypb-effect-target="self"]) > .button-atom,
[data-mypb-effect="glow"]:not([data-mypb-effect-target="self"]) > .button-atom {
  overflow: visible;
}
:where(:is([data-mypb-effect="sheen"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="sheen"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))) {
  overflow: hidden;
}

/* Rotating Conic: a blurred, spinning multi-colour halo behind the element. */
:is([data-mypb-effect="conic"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="conic"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::before {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  inset: calc(-1 * var(--mypb-fx-width, 4px));
  background: conic-gradient(from var(--mypb-fx-angle), var(--mypb-fx-c1, #7c3aed), var(--mypb-fx-c2, #06b6d4), var(--mypb-fx-c3, #f43f5e), var(--mypb-fx-c1, #7c3aed));
  filter: blur(var(--mypb-fx-blur, 5px)) saturate(1.3);
  animation: mypb-fx-spin var(--mypb-fx-speed, 4s) linear infinite;
}
/* ...and the element's face drawn again over the halo, so only the edge shows (a see-through face lets the
   halo show through, which is the look of a gradient-filled button). */
:is([data-mypb-effect="conic"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="conic"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  inset: 0;
  background: inherit;
}

:is([data-mypb-effect="conic"][data-mypb-effect-trigger="hover"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="conic"][data-mypb-effect-trigger="hover"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::before {
  opacity: 0;
  animation: none;
  transition: opacity .3s ease;
}
:is([data-mypb-effect="conic"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="conic"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::before {
  opacity: 1;
  animation: mypb-fx-spin var(--mypb-fx-speed, 4s) linear infinite;
}

/* Shimmer Sheen: a skewed band of light sweeping across. */
:is([data-mypb-effect="sheen"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="sheen"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, var(--mypb-fx-color, rgba(255, 255, 255, .45)), transparent);
  transform: translateX(-150%) skewX(-15deg);
  animation: mypb-fx-sheen var(--mypb-fx-speed, 2.5s) ease-in-out infinite;
}

:is([data-mypb-effect="sheen"][data-mypb-effect-trigger="hover"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="sheen"][data-mypb-effect-trigger="hover"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::after {
  opacity: 0;
  animation: none;
  transition: opacity .3s ease;
}
:is([data-mypb-effect="sheen"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="sheen"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::after {
  opacity: 1;
  animation: mypb-fx-sheen var(--mypb-fx-speed, 2.5s) ease-in-out infinite;
}

/* Border Beam: a point of light tracing the edge. */
:is([data-mypb-effect="beam"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="beam"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  inset: 0;
  padding: var(--mypb-fx-width, 2px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  background: conic-gradient(from var(--mypb-fx-angle), transparent 0 72%, var(--mypb-fx-color, #22d3ee) 92%, #fff 98%, transparent 100%);
  animation: mypb-fx-spin var(--mypb-fx-speed, 3s) linear infinite;
}

:is([data-mypb-effect="beam"][data-mypb-effect-trigger="hover"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="beam"][data-mypb-effect-trigger="hover"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::after {
  opacity: 0;
  animation: none;
  transition: opacity .3s ease;
}
:is([data-mypb-effect="beam"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="beam"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::after {
  opacity: 1;
  animation: mypb-fx-spin var(--mypb-fx-speed, 3s) linear infinite;
}

/* Gradient Border: colours flowing around the edge. */
:is([data-mypb-effect="gradient_border"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="gradient_border"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  inset: 0;
  padding: var(--mypb-fx-width, 2px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  background: linear-gradient(90deg, var(--mypb-fx-c1, #7c3aed), var(--mypb-fx-c2, #06b6d4), var(--mypb-fx-c3, #f43f5e), var(--mypb-fx-c1, #7c3aed)) 0 0 / 300% 100%;
  animation: mypb-fx-flow var(--mypb-fx-speed, 4s) linear infinite;
}

:is([data-mypb-effect="gradient_border"][data-mypb-effect-trigger="hover"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="gradient_border"][data-mypb-effect-trigger="hover"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::after {
  opacity: 0;
  animation: none;
  transition: opacity .3s ease;
}
:is([data-mypb-effect="gradient_border"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="gradient_border"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::after {
  opacity: 1;
  animation: mypb-fx-flow var(--mypb-fx-speed, 4s) linear infinite;
}

/* Glow Pulse: a soft coloured glow that breathes. */
:is([data-mypb-effect="glow"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="glow"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::before {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  inset: 0;
  box-shadow: 0 0 var(--mypb-fx-blur, 18px) calc(var(--mypb-fx-blur, 18px) / 3) var(--mypb-fx-color, #8b5cf6);
  animation: mypb-fx-pulse var(--mypb-fx-speed, 2s) ease-in-out infinite;
}

:is([data-mypb-effect="glow"][data-mypb-effect-trigger="hover"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="glow"][data-mypb-effect-trigger="hover"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::before {
  opacity: 0;
  animation: none;
  transition: opacity .3s ease;
}
:is([data-mypb-effect="glow"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="glow"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::before {
  opacity: 1;
  animation: mypb-fx-pulse var(--mypb-fx-speed, 2s) ease-in-out infinite;
}

/* Aurora Background: slow-moving colour clouds behind the content (over the element's own background). */
:is([data-mypb-effect="aurora"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="aurora"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::before {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  inset: 0;
  opacity: .85;
  background:
    radial-gradient(40% 60% at 50% 50%, var(--mypb-fx-c1, #7c3aed), transparent 70%),
    radial-gradient(45% 55% at 50% 50%, var(--mypb-fx-c2, #06b6d4), transparent 70%),
    radial-gradient(35% 50% at 50% 50%, var(--mypb-fx-c3, #f43f5e), transparent 70%);
  background-size: 200% 200%;
  background-repeat: no-repeat;
  animation: mypb-fx-aurora var(--mypb-fx-speed, 12s) ease-in-out infinite alternate;
}
:is([data-mypb-effect="aurora"][data-mypb-effect-trigger="hover"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="aurora"][data-mypb-effect-trigger="hover"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::before {
  opacity: 0;
  animation: none;
  transition: opacity .6s ease;
}
:is([data-mypb-effect="aurora"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="aurora"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::before {
  opacity: .85;
  animation: mypb-fx-aurora var(--mypb-fx-speed, 12s) ease-in-out infinite alternate;
}

/* Neon Text: glowing text with an occasional flicker. */
:is([data-mypb-effect="neon"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="neon"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom)))) {
  --mypb-fx-neon:
    0 0 calc(var(--mypb-fx-blur, 10px) / 3) var(--mypb-fx-color, #22d3ee),
    0 0 var(--mypb-fx-blur, 10px) var(--mypb-fx-color, #22d3ee),
    0 0 calc(var(--mypb-fx-blur, 10px) * 2) var(--mypb-fx-color, #22d3ee);
  text-shadow: var(--mypb-fx-neon);
  animation: mypb-fx-flicker var(--mypb-fx-speed, 3s) linear infinite;
}
:is([data-mypb-effect="neon"][data-mypb-effect-trigger="hover"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="neon"][data-mypb-effect-trigger="hover"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom)))) {
  text-shadow: none;
  animation: none;
  transition: text-shadow .3s ease;
}
:is([data-mypb-effect="neon"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="neon"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):is([data-mypb-effect-target="self"], :not(:has(> .button-atom)))) {
  text-shadow: var(--mypb-fx-neon);
  animation: mypb-fx-flicker var(--mypb-fx-speed, 3s) linear infinite;
}

/* Cursor Spotlight: a soft light following the pointer (position set by effects.js). */
:is([data-mypb-effect="spotlight"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="spotlight"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  inset: 0;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(
    var(--mypb-fx-size, 220px) circle at var(--mypb-fx-x, 50%) var(--mypb-fx-y, 50%),
    var(--mypb-fx-color, rgba(255, 255, 255, .28)),
    transparent 70%
  );
}
:is([data-mypb-effect="spotlight"][data-mypb-fx-active]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="spotlight"][data-mypb-fx-active]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::after {
  opacity: 1;
}

/* Magnetic: the element leans towards the pointer (offset set by effects.js). */
:is([data-mypb-effect="magnetic"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="magnetic"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom)))) {
  translate: var(--mypb-fx-mx, 0px) var(--mypb-fx-my, 0px);
  transition: translate .25s cubic-bezier(.2, .8, .2, 1);
}

/* Click Ripple: rings spreading from where the element was clicked (added by effects.js). */
.mypb-fx-ripples {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}
.mypb-fx-ripple {
  position: absolute;
  border-radius: 50%;
  background: var(--mypb-fx-color, rgba(255, 255, 255, .45));
  transform: translate(-50%, -50%) scale(0);
  opacity: 1;
  animation: mypb-fx-ripple var(--mypb-fx-speed, .6s) ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  :is([data-mypb-effect="conic"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="conic"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::before,
  :is([data-mypb-effect="glow"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="glow"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::before,
  :is([data-mypb-effect="aurora"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="aurora"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::before,
  :is([data-mypb-effect="sheen"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="sheen"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::after,
  :is([data-mypb-effect="beam"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="beam"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::after,
  :is([data-mypb-effect="gradient_border"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="gradient_border"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::after,
  :is([data-mypb-effect="conic"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="conic"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::before,
  :is([data-mypb-effect="glow"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="glow"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::before,
  :is([data-mypb-effect="aurora"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="aurora"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::before,
  :is([data-mypb-effect="sheen"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="sheen"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::after,
  :is([data-mypb-effect="beam"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="beam"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::after,
  :is([data-mypb-effect="gradient_border"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="gradient_border"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::after,
  :is([data-mypb-effect="neon"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="neon"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom)))),
  :is([data-mypb-effect="neon"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="neon"][data-mypb-effect-trigger="hover"]:is(:hover, :focus-within):is([data-mypb-effect-target="self"], :not(:has(> .button-atom)))),
  .mypb-fx-ripple {
    animation: none !important;
  }
  :is([data-mypb-effect="sheen"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="sheen"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom))))::after {
    display: none;
  }
  :is([data-mypb-effect="magnetic"]:not([data-mypb-effect-target="self"]) > .button-atom, [data-mypb-effect="magnetic"]:is([data-mypb-effect-target="self"], :not(:has(> .button-atom)))) {
    translate: none;
  }
}