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

.cyber-button {
  --cyber-accent: var(--accent-cyan);
  --cyber-accent-2: #bffefa;
  --cyber-glow: rgba(53, 240, 232, 0.34);
  --cyber-surface-a: rgba(14, 92, 123, 0.82);
  --cyber-surface-b: rgba(5, 22, 36, 0.94);
  /* Canon note: if you appreciate this style, consume the whole primitive. Do not copy only the fill, trace, or shape into a local partial clone. Keep the real button unclipped for reliable edge clicks; only pseudo layers draw the cut cyber shape. */
  --cyber-cut: 18px;
  --cyber-inset: 2px;
  --cyber-shape: polygon(var(--cyber-cut) 0, 100% 0, 100% calc(100% - var(--cyber-cut)), calc(100% - var(--cyber-cut)) 100%, 0 100%, 0 var(--cyber-cut));
  /* Inner fills are inset, so their cut must shrink by the inset or mobile shows triangular gaps. */
  --cyber-inner-cut: calc(var(--cyber-cut) - var(--cyber-inset));
  --cyber-inner-shape: polygon(var(--cyber-inner-cut) 0, 100% 0, 100% calc(100% - var(--cyber-inner-cut)), calc(100% - var(--cyber-inner-cut)) 100%, 0 100%, 0 var(--cyber-inner-cut));
  --cyber-trace-offset: -400ms;
  --cyber-cloud-offset: -1200ms;
  --cyber-press-ms: 920ms;
  --cyber-cloud-ms: 10500ms;
  --cyber-cloud-delay: var(--cyber-cloud-offset);
  --cyber-trace-ms: 25200ms;
  --cyber-trace-delay: var(--cyber-trace-offset);
  --cyber-contact-ms: 240ms;
  --cyber-contact-delay: 0ms;
  --cyber-shell-press-ms: var(--cyber-press-ms);
  --cyber-shell-press-delay: 0ms;
  --cyber-color-bloom-ms: var(--cyber-press-ms);
  --cyber-color-bloom-delay: 0ms;
  --cyber-edge-surge-ms: var(--cyber-press-ms);
  --cyber-edge-surge-delay: 0ms;
  --cyber-shockwave-ms: var(--cyber-press-ms);
  --cyber-shockwave-delay: 0ms;
  --cyber-ready-pulse-ms: 1650ms;
  --cyber-ready-pulse-delay: 0ms;
  --cyber-cloud-intensity: 1;
  --cyber-contact-intensity: 1;
  --cyber-shell-press-intensity: 1;
  --cyber-color-bloom-intensity: 1;
  --cyber-edge-surge-intensity: 1;
  --cyber-shockwave-intensity: 1;
  --cyber-ready-pulse-intensity: 1;
  isolation: isolate;
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 0;
  outline: 0 solid transparent;
  background: transparent;
  color: var(--text-primary);
  box-shadow: none;
  /* Suppress native rectangles; cyber layers carry expressive feedback and telemetry. */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* Preserve vertical scrolling while blocking sideways card-drag rubber banding. */
  touch-action: pan-y pinch-zoom;
  transform: translateZ(0);
  transition:
    transform var(--cyber-contact-ms) cubic-bezier(.2, .9, .2, 1) var(--cyber-contact-delay),
    filter var(--cyber-contact-ms) cubic-bezier(.2, .9, .2, 1) var(--cyber-contact-delay),
    color 180ms cubic-bezier(.2, .9, .2, 1);
}

.choice.cyber-button,
.hero__actions .choice.cyber-button,
.button.cyber-button,
.support-chip.cyber-button {
  /* Cyber buttons own their visual shell; legacy button/choice/chip paint creates rectangular artifacts. */
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
}

.cyber-button::before,
.cyber-button::after {
  position: absolute;
  content: "";
  pointer-events: none;
  clip-path: var(--cyber-shape);
}

.cyber-button::before {
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cyber-accent) 54%, transparent), rgba(255, 255, 255, .16), color-mix(in srgb, var(--cyber-accent-2) 44%, transparent));
  opacity: .68;
  filter:
    drop-shadow(0 0 7px color-mix(in srgb, var(--cyber-accent) 18%, transparent))
    drop-shadow(0 0 16px color-mix(in srgb, var(--cyber-accent) 12%, transparent));
  transition:
    opacity 220ms cubic-bezier(.2, .9, .2, 1),
    filter 260ms cubic-bezier(.2, .9, .2, 1);
}

.cyber-button::after {
  inset: var(--cyber-inset);
  z-index: -1;
  clip-path: var(--cyber-inner-shape);
  background:
    radial-gradient(circle at 22% 8%, color-mix(in srgb, var(--cyber-accent) 34%, transparent), transparent 30%),
    radial-gradient(circle at 84% 72%, color-mix(in srgb, var(--cyber-accent-2) 24%, transparent), transparent 35%),
    linear-gradient(115deg, rgba(255, 255, 255, .16), transparent 27% 70%, rgba(255, 255, 255, .08)),
    linear-gradient(180deg, var(--cyber-surface-a), var(--cyber-surface-b)),
    linear-gradient(var(--cyber-surface-b), var(--cyber-surface-b));
  background-size: 160% 160%, 150% 150%, 180% 180%, 100% 100%, 100% 100%;
  animation: cyberSurfaceClouds var(--cyber-cloud-ms) ease-in-out var(--cyber-cloud-delay) infinite;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  filter: brightness(1) saturate(1);
  opacity: var(--cyber-cloud-intensity);
  transition:
    filter 420ms cubic-bezier(.18, .84, .22, 1),
    box-shadow 520ms cubic-bezier(.18, .84, .22, 1);
}

.cyber-button--trace::before {
  /* The trace is additive edge light over a solid clipped base, not a transparent replacement shell. */
  background:
    conic-gradient(
      from var(--cyber-trace-angle) at 50% 50%,
      transparent 0deg,
      transparent 38deg,
      color-mix(in srgb, var(--cyber-accent) 76%, transparent) 54deg,
      rgba(255, 255, 255, .68) 64deg,
      color-mix(in srgb, var(--cyber-accent-2) 70%, transparent) 76deg,
      transparent 94deg,
      transparent 212deg,
      color-mix(in srgb, var(--cyber-accent) 68%, transparent) 228deg,
      rgba(255, 255, 255, .5) 236deg,
      transparent 254deg,
      transparent 360deg
    ),
    linear-gradient(135deg, color-mix(in srgb, var(--cyber-accent) 38%, transparent), rgba(255, 255, 255, .1), color-mix(in srgb, var(--cyber-accent-2) 30%, transparent));
  opacity: .82;
  filter:
    drop-shadow(0 0 7px var(--cyber-glow))
    drop-shadow(0 0 17px color-mix(in srgb, var(--cyber-accent) 22%, transparent));
  animation: cyberTrace var(--cyber-trace-ms) linear var(--cyber-trace-delay) infinite;
}

.cyber-button > * {
  position: relative;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

.cyber-button > .cyber-flash,
.cyber-button > .cyber-edge-flash,
.cyber-button > .cyber-shockwave {
  position: absolute;
  pointer-events: none;
}

.cyber-button > .cyber-flash {
  inset: var(--cyber-inset);
  z-index: 0;
  clip-path: var(--cyber-inner-shape);
  opacity: 0;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--cyber-accent) 52%, rgba(255, 255, 255, .36)), transparent 62%),
    linear-gradient(90deg, color-mix(in srgb, var(--cyber-accent) 46%, transparent), color-mix(in srgb, var(--cyber-accent-2) 42%, transparent));
  box-shadow: none;
}

.cyber-button > .cyber-edge-flash {
  inset: 0;
  z-index: 0;
  clip-path: var(--cyber-shape);
  opacity: 0;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cyber-accent) 72%, transparent), rgba(255, 255, 255, .28), color-mix(in srgb, var(--cyber-accent-2) 54%, transparent));
}

.cyber-button > .cyber-shockwave {
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--cyber-accent) 54%, transparent), transparent 66%);
  filter: blur(8px);
  opacity: 0;
  transform: scale(1);
}

.cyber-button:not(:disabled):focus-visible {
  transform: translateY(-3px) scale(1.01);
  filter: brightness(1.16) saturate(1.22);
  border-color: transparent;
  outline: 0;
}

/* Touch contact is deliberate, JS-owned hover energy; never rely on sticky mobile :hover. */
.cyber-button.is-cyber-touching:not(:disabled) {
  transform: translateY(calc(-3px * var(--cyber-contact-intensity))) scale(calc(1 + .01 * var(--cyber-contact-intensity)));
  filter: brightness(calc(1 + .16 * var(--cyber-contact-intensity))) saturate(calc(1 + .22 * var(--cyber-contact-intensity)));
  border-color: transparent;
  outline: 0;
}

.cyber-button:not(:disabled):focus-visible::before {
  opacity: .98;
  filter:
    drop-shadow(0 0 18px var(--cyber-glow))
    drop-shadow(0 0 52px color-mix(in srgb, var(--cyber-accent) 58%, transparent))
    drop-shadow(0 0 86px color-mix(in srgb, var(--cyber-accent) 28%, transparent));
}

.cyber-button.is-cyber-touching:not(:disabled)::before {
  opacity: .98;
  filter:
    drop-shadow(0 0 18px var(--cyber-glow))
    drop-shadow(0 0 52px color-mix(in srgb, var(--cyber-accent) 58%, transparent))
    drop-shadow(0 0 86px color-mix(in srgb, var(--cyber-accent) 28%, transparent));
}

.cyber-button:not(:disabled):focus-visible::after {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .24),
    inset 0 0 32px color-mix(in srgb, var(--cyber-accent) 42%, transparent),
    inset 0 -18px 46px color-mix(in srgb, var(--cyber-accent-2) 30%, transparent);
  filter: brightness(1.32) saturate(1.38);
}

.cyber-button.is-cyber-touching:not(:disabled)::after {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .24),
    inset 0 0 32px color-mix(in srgb, var(--cyber-accent) 42%, transparent),
    inset 0 -18px 46px color-mix(in srgb, var(--cyber-accent-2) 30%, transparent);
  filter: brightness(1.32) saturate(1.38);
}

.cyber-button.is-cyber-recovering:not(:disabled):focus-visible {
  transform: translateY(-3px) scale(1.008);
  filter: brightness(1.15) saturate(1.2);
  transition-duration: 360ms, 420ms, 260ms;
}

.cyber-button.is-cyber-recovering:not(:disabled):focus-visible::before {
  opacity: .94;
  filter:
    drop-shadow(0 0 16px var(--cyber-glow))
    drop-shadow(0 0 46px color-mix(in srgb, var(--cyber-accent) 50%, transparent))
    drop-shadow(0 0 74px color-mix(in srgb, var(--cyber-accent) 22%, transparent));
  transition-duration: 420ms, 460ms;
}

.cyber-button.is-cyber-recovering:not(:disabled):focus-visible::after {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .2),
    inset 0 0 28px color-mix(in srgb, var(--cyber-accent) 36%, transparent),
    inset 0 -16px 40px color-mix(in srgb, var(--cyber-accent-2) 26%, transparent);
  filter: brightness(1.24) saturate(1.3);
  transition-duration: 460ms, 520ms;
}

@media (any-hover: hover) and (any-pointer: fine) {
  .topbar__link:hover {
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
  }

  .choice:hover,
  .button:hover,
  .support-chip:hover {
    transform: translateY(-2px);
    border-color: var(--accent-cyan);
  }

  .cyber-button:not(:disabled):hover {
    transform: translateY(-3px) scale(1.01);
    filter: brightness(1.16) saturate(1.22);
    border-color: transparent;
    outline: 0;
  }

  .cyber-button:not(:disabled):hover::before {
    opacity: .98;
    filter:
      drop-shadow(0 0 18px var(--cyber-glow))
      drop-shadow(0 0 52px color-mix(in srgb, var(--cyber-accent) 58%, transparent))
      drop-shadow(0 0 86px color-mix(in srgb, var(--cyber-accent) 28%, transparent));
  }

  .cyber-button:not(:disabled):hover::after {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .24),
      inset 0 0 32px color-mix(in srgb, var(--cyber-accent) 42%, transparent),
      inset 0 -18px 46px color-mix(in srgb, var(--cyber-accent-2) 30%, transparent);
    filter: brightness(1.32) saturate(1.38);
  }

  .cyber-button.is-cyber-recovering:not(:disabled):hover {
    transform: translateY(-3px) scale(1.008);
    filter: brightness(1.15) saturate(1.2);
    transition-duration: 360ms, 420ms, 260ms;
  }

  .cyber-button.is-cyber-recovering:not(:disabled):hover::before {
    opacity: .94;
    filter:
      drop-shadow(0 0 16px var(--cyber-glow))
      drop-shadow(0 0 46px color-mix(in srgb, var(--cyber-accent) 50%, transparent))
      drop-shadow(0 0 74px color-mix(in srgb, var(--cyber-accent) 22%, transparent));
    transition-duration: 420ms, 460ms;
  }

  .cyber-button.is-cyber-recovering:not(:disabled):hover::after {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .2),
      inset 0 0 28px color-mix(in srgb, var(--cyber-accent) 36%, transparent),
      inset 0 -16px 40px color-mix(in srgb, var(--cyber-accent-2) 26%, transparent);
    filter: brightness(1.24) saturate(1.3);
    transition-duration: 460ms, 520ms;
  }
}

.cyber-button.is-cyber-pressed {
  animation: cyberPressShell var(--cyber-shell-press-ms) cubic-bezier(.15, .9, .2, 1) var(--cyber-shell-press-delay) both;
}

.cyber-button.is-cyber-flashing {
  color: #fff;
  text-shadow:
    0 0 10px rgba(255, 255, 255, .34),
    0 0 20px color-mix(in srgb, var(--cyber-accent) 30%, transparent);
  animation: cyberTextFlash var(--cyber-shell-press-ms) cubic-bezier(.15, .9, .2, 1) var(--cyber-shell-press-delay) both;
}

.cyber-button.is-cyber-flashing > .cyber-flash {
  animation: cyberColorBloom var(--cyber-color-bloom-ms) cubic-bezier(.13, .88, .2, 1) var(--cyber-color-bloom-delay) both;
}

.cyber-button.is-cyber-flashing > .cyber-edge-flash {
  animation: cyberEdgeSurge var(--cyber-edge-surge-ms) cubic-bezier(.15, .9, .2, 1) var(--cyber-edge-surge-delay) both;
}

.cyber-button.is-cyber-flashing > .cyber-shockwave {
  animation: cyberShockwave var(--cyber-shockwave-ms) cubic-bezier(.12, .78, .2, 1) var(--cyber-shockwave-delay) both;
}

.cyber-button--plasma {
  --cyber-accent: var(--accent-magenta);
  --cyber-accent-2: var(--accent-purple);
  --cyber-glow: rgba(255, 32, 233, 0.38);
  --cyber-surface-a: rgba(104, 28, 128, 0.9);
  --cyber-surface-b: rgba(18, 16, 46, 0.97);
  --cyber-trace-offset: -1800ms;
}

.cyber-button--ion {
  --cyber-accent: var(--accent-cyan);
  --cyber-accent-2: #bffefa;
  --cyber-glow: rgba(53, 240, 232, 0.34);
  --cyber-surface-a: rgba(12, 78, 92, 0.82);
  --cyber-surface-b: rgba(6, 22, 32, 0.96);
  --cyber-trace-offset: -3600ms;
}

.cyber-button--large {
  --cyber-cut: 22px;
  min-height: clamp(92px, 15vw, 128px);
  padding: clamp(22px, 4vw, 34px) clamp(24px, 5vw, 42px);
}

.cyber-button--large strong {
  font-size: clamp(1.45rem, 5vw, 2.2rem);
}

.cyber-button--large span {
  font-size: clamp(1rem, 3vw, 1.22rem);
}

.cyber-button--offer {
  min-height: 58px;
  padding: .92rem 1.1rem;
}

.cyber-button--support {
  min-height: 76px;
}

.cyber-button--utility {
  --cyber-cut: 12px;
  min-height: 42px;
  padding-inline: 18px;
}

.cyber-button--low,
.cyber-button--secondary {
  --cyber-cut: 14px;
  min-height: 50px;
  color: var(--cyber-accent);
  background: transparent;
  filter: saturate(.98);
}

.cyber-button--low::before,
.cyber-button--secondary::before {
  background: linear-gradient(135deg, color-mix(in srgb, var(--cyber-accent) 86%, transparent), rgba(255, 255, 255, .1), color-mix(in srgb, var(--cyber-accent-2) 58%, transparent));
  filter:
    drop-shadow(0 0 7px var(--cyber-glow))
    drop-shadow(0 0 22px color-mix(in srgb, var(--cyber-accent) 28%, transparent));
  animation: cyberLowPulse 6.2s ease-in-out infinite;
}

.cyber-button--low::after,
.cyber-button--secondary::after {
  background:
    radial-gradient(ellipse at 50% 116%, color-mix(in srgb, var(--cyber-accent) 13%, transparent), transparent 58%),
    linear-gradient(180deg, rgba(5, 9, 15, .58), rgba(4, 6, 12, .72));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cyber-accent) 13%, transparent),
    inset 0 0 22px rgba(0, 0, 0, .36);
}

.cyber-button--secondary:disabled {
  cursor: default;
}

.cyber-button--access {
  --cyber-cut: 8px;
  min-width: min(100%, 260px);
}

.cyber-button--access:disabled {
  cursor: not-allowed;
  opacity: .48;
  filter: grayscale(.18) saturate(.52) brightness(.76);
}

.cyber-button--access:disabled::before {
  opacity: .48;
  animation-play-state: paused;
  filter: drop-shadow(0 0 5px rgba(255, 32, 233, .14));
}

.cyber-button--access:disabled::after {
  background:
    linear-gradient(180deg, rgba(40, 20, 52, .32), rgba(6, 9, 16, .82));
}

.modal-close.cyber-button {
  --cyber-cut: 0px;
  --cyber-inset: 1px;
  min-width: 44px;
  width: 44px;
  min-height: 36px;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
}

.modal-close.cyber-button::before {
  opacity: .92;
  background:
    linear-gradient(135deg, rgba(53, 240, 232, .84), rgba(255, 255, 255, .14), rgba(53, 240, 232, .48)),
    linear-gradient(180deg, rgba(13, 52, 60, .98), rgba(6, 19, 24, .98));
  filter:
    drop-shadow(0 0 6px color-mix(in srgb, var(--cyber-accent) 34%, transparent))
    drop-shadow(0 0 16px color-mix(in srgb, var(--cyber-accent) 18%, transparent));
}

.modal-close.cyber-button::after {
  inset: 2px;
  clip-path: none;
  background:
    radial-gradient(circle at 32% 16%, rgba(53, 240, 232, .18), transparent 42%),
    linear-gradient(180deg, rgba(18, 48, 56, .99), rgba(9, 24, 30, 1));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    inset 0 0 16px rgba(53, 240, 232, .14);
}

body.is-transmission-ready .cyber-button--access:not(:disabled)::before {
  animation:
    cyberTrace var(--cyber-trace-ms) linear var(--cyber-trace-delay) infinite,
    cyberReadyPulse var(--cyber-ready-pulse-ms) ease-in-out var(--cyber-ready-pulse-delay) infinite;
}

body.is-transmission-ready .cyber-button--access:not(:disabled)::after {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .2), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(255, 32, 233, .42), transparent 58%),
    linear-gradient(90deg, rgba(255, 32, 233, .38), rgba(139, 57, 255, .54)),
    linear-gradient(180deg, rgba(122, 26, 128, .96), rgba(24, 16, 56, .98));
}

@keyframes cyberTrace {
  to {
    --cyber-trace-angle: 360deg;
  }
}

@keyframes cyberReadyPulse {
  0%,
  100% {
    opacity: calc(.82 * var(--cyber-ready-pulse-intensity));
    filter:
      drop-shadow(0 0 12px rgba(255, 32, 233, .6))
      drop-shadow(0 0 30px rgba(255, 32, 233, .32));
  }

  50% {
    opacity: var(--cyber-ready-pulse-intensity);
    filter:
      drop-shadow(0 0 22px rgba(255, 32, 233, .96))
      drop-shadow(0 0 64px rgba(255, 32, 233, .58));
  }
}

@keyframes cyberSurfaceClouds {
  0%,
  100% {
    background-position: 18% 12%, 82% 76%, 0% 50%, 50% 50%, 50% 50%;
  }

  42% {
    background-position: 44% 24%, 58% 92%, 52% 50%, 50% 50%, 50% 50%;
  }

  68% {
    background-position: 12% 64%, 92% 36%, 100% 50%, 50% 50%, 50% 50%;
  }
}

@keyframes cyberPressShell {
  /* Press/select glow must stay shape-aware; real filter drop-shadows expose rectangular glow corners. */
  0% {
    transform: translateZ(0) scale(calc(1 - .015 * var(--cyber-shell-press-intensity)));
  }

  26% {
    transform: translateZ(0) scale(calc(1 + .018 * var(--cyber-shell-press-intensity)));
  }

  100% {
    transform: translateZ(0) scale(1);
  }
}

@keyframes cyberTextFlash {
  0%,
  100% {
    color: #fff;
    text-shadow:
      0 0 10px rgba(255, 255, 255, .34),
      0 0 18px color-mix(in srgb, var(--cyber-accent) 28%, transparent);
  }

  30% {
    color: #fff;
    text-shadow:
      0 0 14px rgba(255, 255, 255, .52),
      0 0 30px color-mix(in srgb, var(--cyber-accent) 42%, transparent);
  }

  64% {
    color: #fff;
    text-shadow:
      0 0 12px rgba(255, 255, 255, .5),
      0 0 26px color-mix(in srgb, var(--cyber-accent) 46%, transparent);
  }
}

@keyframes cyberEdgeSurge {
  0% {
    opacity: 0;
    filter:
      drop-shadow(0 0 0 color-mix(in srgb, var(--cyber-accent) 0%, transparent));
  }

  34% {
    opacity: calc(.86 * var(--cyber-edge-surge-intensity));
    filter:
      drop-shadow(0 0 24px color-mix(in srgb, var(--cyber-accent) 94%, transparent))
      drop-shadow(0 0 76px color-mix(in srgb, var(--cyber-accent) 64%, transparent))
      drop-shadow(0 0 120px color-mix(in srgb, var(--cyber-accent-2) 36%, transparent));
  }

  100% {
    opacity: 0;
    filter:
      drop-shadow(0 0 18px color-mix(in srgb, var(--cyber-accent) 18%, transparent));
  }
}

@keyframes cyberColorBloom {
  0% {
    opacity: 0;
    transform: scale(.98);
    filter: brightness(1.08) saturate(1.12);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .1),
      inset 0 0 18px color-mix(in srgb, var(--cyber-accent) 22%, transparent);
  }

  32% {
    opacity: calc(.9 * var(--cyber-color-bloom-intensity));
    transform: scale(1.015);
    filter: brightness(1.48) saturate(1.58);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .32),
      inset 0 0 34px color-mix(in srgb, var(--cyber-accent) 54%, transparent),
      inset 0 -18px 58px color-mix(in srgb, var(--cyber-accent-2) 42%, transparent);
  }

  58% {
    opacity: calc(.42 * var(--cyber-color-bloom-intensity));
    transform: scale(1.006);
    filter: brightness(1.26) saturate(1.34);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .18),
      inset 0 0 24px color-mix(in srgb, var(--cyber-accent) 34%, transparent);
  }

  100% {
    opacity: 0;
    transform: scale(1);
    filter: brightness(1) saturate(1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  }
}

@keyframes cyberShockwave {
  0% {
    opacity: 0;
    transform: scale(1);
    filter: blur(0);
  }

  18% {
    opacity: calc(.95 * var(--cyber-shockwave-intensity));
    transform: scale(1);
    filter: blur(3px);
  }

  100% {
    opacity: 0;
    transform: scale(1.58);
    filter: blur(30px);
  }
}

@keyframes cyberLowPulse {
  0%,
  100% {
    opacity: .68;
    filter:
      drop-shadow(0 0 5px var(--cyber-glow))
      drop-shadow(0 0 13px color-mix(in srgb, var(--cyber-accent) 18%, transparent));
  }

  48% {
    opacity: .9;
    filter:
      drop-shadow(0 0 9px var(--cyber-glow))
      drop-shadow(0 0 26px color-mix(in srgb, var(--cyber-accent) 34%, transparent));
  }
}