/* Verified badges — see docs/superpowers/specs/2026-08-05-verified-badges-design.md
 *
 * Two rules that must not be "tidied up":
 *   1. NO mix-blend-mode. A blend-mode aurora is invisible over the tinted
 *      mark. Every layer composites directly.
 *   2. The halo stays at the Gentle level (2-2.5px radii). A stronger halo
 *      was reviewed and rejected as noisy against the 63.75%-saturation art.
 */

.agv-badge {
  position: relative;
  display: inline-block;
  width: var(--agv-badge-size, 26px);
  height: calc(var(--agv-badge-size, 26px) * 0.6406);   /* artwork ratio */
  vertical-align: -2px;
  flex: 0 0 auto;
  filter:
    drop-shadow(0 0 3px color-mix(in srgb, var(--agv-badge-tint) 62%, transparent))
    drop-shadow(0 0 9px color-mix(in srgb, var(--agv-badge-tint) 32%, transparent));
}

.agv-badge--profile { --agv-badge-size: 40px; }
.agv-badge--inline  { --agv-badge-size: 26px; }
.agv-badge--dense   { --agv-badge-size: 19px; }

.agv-badge__art {
  position: absolute;
  inset: 0;
  background: var(--agv-badge-mark) center / contain no-repeat;
}

/* Dark surfaces use the official white logo variant. The mark's interior is
 * transparent (the snow is negative space), so the colour art reads hollow
 * on dark and must be swapped rather than filled.
 *
 * `[data-theme="dark"]` is currently INERT: the platform is light-only by
 * product decision and nothing ever sets that attribute — see
 * templates/partials/_head_common.html, which ships
 * `<meta name="color-scheme" content="light only">` and says so explicitly.
 * `.agv-on-dark` is the LIVE mechanism here: it targets dark surfaces inside
 * otherwise-light pages (full-screen reel player, reel card overlays,
 * messenger threads, globe pin callouts). Nothing applies that class yet —
 * Task 8 wires it onto those surfaces. Keep both selectors: the
 * `[data-theme="dark"]` half is free to keep and ready if that product
 * decision is ever reversed. Do not delete the `-white.png` assets or this
 * rule as "unused" just because no template references `.agv-on-dark` yet. */
[data-theme="dark"] .agv-badge__art,
.agv-on-dark .agv-badge__art {
  background-image: var(--agv-badge-mark-white);
}

/* Aurora layers are masked to the mark's own alpha channel, which is what
 * confines every effect to the exact silhouette. */
.agv-badge__veil,
.agv-badge__curtain {
  position: absolute;
  inset: 0;
  opacity: 0;
  -webkit-mask-image: var(--agv-badge-mark);
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--agv-badge-mark);
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}

/* Same dark-surface mechanism as .agv-badge__art above: `.agv-on-dark` is the
 * live selector (Task 8 applies it to actual dark surfaces); `[data-theme=
 * "dark"]` is currently inert site-wide (light-only product decision, see
 * _head_common.html). Kept for the same reason — not dead code to prune. */
[data-theme="dark"] .agv-badge__veil,
[data-theme="dark"] .agv-badge__curtain,
.agv-on-dark .agv-badge__veil,
.agv-on-dark .agv-badge__curtain {
  -webkit-mask-image: var(--agv-badge-mark-white);
  mask-image: var(--agv-badge-mark-white);
}

.agv-badge__gem {
  position: absolute;
  left: calc(49% - 26%);
  top: 36%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 2;
  background:
    radial-gradient(70% 62% at 32% 20%, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0) 62%),
    linear-gradient(140deg, var(--agv-badge-tint), #0d1c3a);
  box-shadow: 0 1px 2px rgba(8, 20, 44, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.68);
}

.agv-badge__gem svg { width: 60%; height: 60%; }

/* ---------- profile-only aurora ---------- */

.agv-badge--live .agv-badge__veil {
  opacity: 0.68;
  background: linear-gradient(100deg,
    var(--agv-a1) 0%, var(--agv-a2) 18%, var(--agv-a3) 36%,
    var(--agv-a1) 54%, var(--agv-a2) 72%, var(--agv-a3) 90%, var(--agv-a1) 100%);
  background-size: 250% 100%;
  background-repeat: repeat;
  animation: agv-badge-drift 7s linear infinite;
}

.agv-badge--live .agv-badge__curtain {
  opacity: 1;
  background: linear-gradient(105deg,
    transparent 30%, rgba(255, 255, 255, 0.5) 45%, rgba(255, 255, 255, 0.16) 52%, transparent 66%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  animation: agv-badge-sweep 4.6s ease-in-out infinite;
}

.agv-badge--live { animation: agv-badge-halo 7s ease-in-out infinite; }

@keyframes agv-badge-drift {
  0%   { background-position: 0 0; }
  100% { background-position: -250% 0; }
}

@keyframes agv-badge-sweep {
  0%        { background-position: 130% 0; }
  58%, 100% { background-position: -160% 0; }
}

/* Gentle halo — a breathing rim, not a cloud. */
@keyframes agv-badge-halo {
  0%, 100% {
    filter:
      drop-shadow(0 0 2px color-mix(in srgb, var(--agv-a1) 32%, transparent))
      drop-shadow(0 0 5px color-mix(in srgb, var(--agv-a1) 14%, transparent));
  }
  33% {
    filter:
      drop-shadow(0 0 2.5px color-mix(in srgb, var(--agv-a2) 35%, transparent))
      drop-shadow(0 0 6px color-mix(in srgb, var(--agv-a2) 16%, transparent));
  }
  66% {
    filter:
      drop-shadow(0 0 2.2px color-mix(in srgb, var(--agv-a3) 33%, transparent))
      drop-shadow(0 0 5.5px color-mix(in srgb, var(--agv-a3) 15%, transparent));
  }
}

/* One curtain sweep as hover feedback, then still. */
.agv-badge:hover .agv-badge__curtain {
  opacity: 1;
  background: linear-gradient(105deg,
    transparent 30%, rgba(255, 255, 255, 0.5) 45%, rgba(255, 255, 255, 0.16) 52%, transparent 66%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  animation: agv-badge-sweep 1.4s ease-in-out 1;
}

@media (prefers-reduced-motion: reduce) {
  .agv-badge--live,
  .agv-badge--live .agv-badge__veil,
  .agv-badge--live .agv-badge__curtain,
  .agv-badge:hover .agv-badge__curtain {
    animation: none;
  }
  .agv-badge--live .agv-badge__curtain,
  .agv-badge:hover .agv-badge__curtain { opacity: 0; }
}