/* ==========================================================================
   AWS badges · purple & silver holographic foil
   Layers are injected by assets/js/badges.js:
     a.cb.cbx
       span.cbx-glow                soft purple/silver halo behind the badge
       span.cbx-card                lifts on hover
         img                        the badge
         span.cbx-foil              shimmering holographic drift (masked to badge)
         span.cbx-spot              pointer-follow highlight (masked to badge)
       span.cbx-glints > .cbx-glint purple/silver star sparkles, random spots
   Animates only transform / opacity / background-position.
   Motion stays on regardless of prefers-reduced-motion (owner's call).
   ========================================================================== */

.cbx {
  --cbx-cycle: 6.4s;
  --cbx-offset: calc(var(--cbx-i, 0) * var(--cbx-cycle) * -0.5); /* stagger badge 2 by half a cycle */
  --fx: 0.5;
  --fy: 0.5;
  /* deep / mid / light: each badge glitters in its own colours (below) */
  --cbx-violet: 127, 104, 245;
  --cbx-lilac: 196, 181, 253;
  --cbx-silver: 237, 233, 254;

  position: relative;
  display: inline-flex;
  isolation: isolate;
  border-radius: 10px;
  overflow: visible;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Machine Learning Specialty: violet · Cloud Practitioner: slate + silver-mint */
.cbx--mls {
  --cbx-violet: 127, 104, 245;
  --cbx-lilac: 196, 181, 253;
  --cbx-silver: 237, 233, 254;
}

.cbx--clf {
  --cbx-violet: 120, 158, 168;
  --cbx-lilac: 192, 216, 216;
  --cbx-silver: 236, 244, 245;
}

/* ---------- card (tilt target) ---------- */
.cbx-card {
  position: relative;
  display: block;
  isolation: isolate;
  transform: translate(0, 0) scale(1);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cbx-card > img {
  position: relative;
  display: block;
  z-index: 0;
}

.cbx:hover .cbx-card,
.cbx:focus-visible .cbx-card {
  transform:
    translate(calc((var(--fx) - 0.5) * 3px), calc((var(--fy) - 0.5) * 3px - 2px))
    scale(1.06);
  transition-duration: 0.18s;
}

/* ---------- shared: layers clipped to the badge's own alpha ---------- */
.cbx-foil,
.cbx-spot {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: var(--cbx-mask);
          mask-image: var(--cbx-mask);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* ---------- holographic foil: slow purple/silver drift ---------- */
.cbx-foil {
  background-image: linear-gradient(
    115deg,
    rgba(var(--cbx-violet), 0) 0%,
    rgba(var(--cbx-lilac), 0.55) 18%,
    rgba(var(--cbx-silver), 0.75) 30%,
    rgba(var(--cbx-violet), 0.45) 42%,
    rgba(var(--cbx-violet), 0) 54%,
    rgba(var(--cbx-silver), 0.6) 68%,
    rgba(var(--cbx-lilac), 0.5) 80%,
    rgba(var(--cbx-violet), 0) 100%
  );
  background-size: 300% 300%;
  background-position: 0% 50%;
  mix-blend-mode: soft-light;
  opacity: 0.55;
  animation: cbx-foil calc(var(--cbx-cycle) * 0.9) ease-in-out var(--cbx-offset) infinite alternate;
}

@keyframes cbx-foil {
  from { background-position: 0% 30%; }
  to   { background-position: 100% 70%; }
}

.cbx:hover .cbx-foil,
.cbx:focus-visible .cbx-foil {
  animation-play-state: paused;
  background-position: calc(var(--fx) * 100%) calc(var(--fy) * 100%);
  opacity: 0.85;
  transition: opacity 0.25s ease;
}

/* ---------- pointer-follow highlight ---------- */
.cbx-spot {
  background-image: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(var(--cbx-silver), 0.55) 9%,
    rgba(var(--cbx-lilac), 0.35) 20%,
    rgba(var(--cbx-violet), 0.12) 32%,
    rgba(var(--cbx-violet), 0) 46%
  );
  background-size: 200% 200%;
  background-repeat: no-repeat;
  background-position: calc((1 - var(--fx)) * 100%) calc((1 - var(--fy)) * 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.cbx:hover .cbx-spot,
.cbx:focus-visible .cbx-spot {
  opacity: 0.75;
  transition-duration: 0.2s;
}

/* ---------- soft halo ---------- */
.cbx-glow {
  position: absolute;
  inset: -26%;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(var(--cbx-violet), 0.30) 0%,
    rgba(var(--cbx-lilac), 0.14) 45%,
    rgba(var(--cbx-silver), 0.05) 70%,
    rgba(var(--cbx-silver), 0) 100%
  );
  opacity: 0.55;
  transform: scale(0.94);
  will-change: transform, opacity;
  animation: cbx-breathe calc(var(--cbx-cycle) * 0.75) ease-in-out var(--cbx-offset) infinite alternate;
}

@keyframes cbx-breathe {
  from { opacity: 0.45; transform: scale(0.92); }
  to   { opacity: 0.85; transform: scale(1.02); }
}

.cbx:hover .cbx-glow,
.cbx:focus-visible .cbx-glow {
  animation-play-state: paused;
  opacity: 1;
  transform: scale(1.08);
  transition: opacity 0.3s ease, transform 0.4s ease;
}

/* ---------- glitter · star sparkles all over the badge ---------- */
.cbx-glints {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.cbx-glint {
  --s: 8px;
  --d: 2.4s;
  --r: 0deg;
  position: absolute;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) * -0.5) 0 0 calc(var(--s) * -0.5);
  opacity: 0;
  transform: scale(0.1) rotate(var(--r));
  will-change: transform, opacity;
  animation: cbx-twinkle var(--d) cubic-bezier(0.4, 0, 0.3, 1) infinite;
}

.cbx-glint svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@keyframes cbx-twinkle {
  0%   { opacity: 0; transform: scale(0.1) rotate(var(--r)); }
  14%  { opacity: 1; transform: scale(1) rotate(calc(var(--r) + 45deg)); }
  20%  { opacity: 0.85; transform: scale(0.78) rotate(calc(var(--r) + 60deg)); }
  34%  { opacity: 0; transform: scale(0.1) rotate(calc(var(--r) + 90deg)); }
  100% { opacity: 0; transform: scale(0.1) rotate(calc(var(--r) + 90deg)); }
}

/* at rest only a few sparkles, slow; hover brings the full glitter */
.cbx:not(:hover):not(:focus-visible) .cbx-glint--extra {
  visibility: hidden;
}

/* hover: the glitter speeds up */
.cbx:hover .cbx-glint,
.cbx:focus-visible .cbx-glint {
  animation-duration: calc(var(--d) * 0.55);
}

/* ---------- focus ring ---------- */
.cbx:focus-visible {
  box-shadow: 0 0 0 2px rgba(var(--cbx-lilac), 0.75), 0 0 0 5px rgba(var(--cbx-violet), 0.25);
}

/* ---------- pause while off screen ---------- */
.certs-badges:not(.cbx-live) .cbx *,
.certs-badges:not(.cbx-live) .cbx-glow {
  animation-play-state: paused;
}