:root {
  --nogin-pink: #ee2c7b;
  --nogin-pink-light: #ff78b3;
  --nogin-pink-hot: #ff1493;
  --nogin-lime: #caff18;
}

.holo {
  --holo-size: 168px;
  --holo-color: var(--nogin-pink);
  --holo-accent: #fff5fa;
  --holo-speed: 3.8s;
  --holo-intensity: 1;
  --holo-tilt: 0deg;
  position: relative;
  display: inline-grid;
  width: var(--holo-size);
  aspect-ratio: 1;
  place-items: center;
  isolation: isolate;
  color: var(--holo-color);
  filter: drop-shadow(0 0 calc(4px * var(--holo-intensity)) color-mix(in srgb, var(--holo-accent) 82%, transparent))
          drop-shadow(0 0 calc(15px * var(--holo-intensity)) color-mix(in srgb, var(--holo-accent) 36%, transparent));
  transform: rotate(var(--holo-tilt));
  contain: layout paint style;
}

.holo__icon,
.holo__ghost,
.holo__scan,
.holo__edge,
.holo__aura {
  width: 66%;
  height: 66%;
  object-fit: contain;
  color: inherit;
}

.holo__icon {
  position: relative;
  z-index: 2;
  opacity: .76;
  filter: url("#holo-waver");
  /*
   * Dense transparency texture on the body only. The darker edge clone is not
   * masked, so it remains a clean, exact Nogin-pink boundary.
   */
  mask-image: repeating-linear-gradient(
    to bottom,
    rgb(0 0 0 / .58) 0 1px,
    #000 1px 3px,
    rgb(0 0 0 / .76) 3px 4px
  );
  mask-size: 100% 4px;
  -webkit-mask-image: repeating-linear-gradient(
    to bottom,
    rgb(0 0 0 / .58) 0 1px,
    #000 1px 3px,
    rgb(0 0 0 / .76) 3px 4px
  );
  -webkit-mask-size: 100% 4px;
  animation:
    holo-flicker var(--holo-speed) steps(1, end) infinite,
    holo-texture-scroll 1.1s linear infinite;
}

/*
 * Dark inner edge: the shared SVG filter erodes the icon alpha and subtracts
 * that inset copy, leaving an opaque rim wholly inside the silhouette.
 */
.holo__edge {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  opacity: calc(.94 * var(--holo-intensity));
  filter: url("#holo-inner-edge");
  mix-blend-mode: normal;
  animation: holo-edge-pulse calc(var(--holo-speed) * 1.2) ease-in-out infinite;
}

/*
 * Near-white light source behind the glyph. Blur naturally enters counters and
 * gaps, making negative spaces glow without adding another visible stroke.
 */
.holo__aura {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: calc(.38 * var(--holo-intensity));
  filter: brightness(0) invert(1) blur(5px)
          drop-shadow(0 0 7px color-mix(in srgb, var(--holo-accent) 65%, transparent));
  transform: scale(.99);
  mix-blend-mode: screen;
  animation: holo-aura-pulse calc(var(--holo-speed) * 1.35) ease-in-out infinite;
}

.holo__icon :is(path, circle, rect, polygon, polyline, line, ellipse) {
  vector-effect: non-scaling-stroke;
}

.holo__ghost {
  position: absolute;
  z-index: 1;
  opacity: .13;
  color: var(--holo-accent);
  filter: blur(1px);
  transform: translateX(2px);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: holo-ghost calc(var(--holo-speed) * .73) steps(1, end) infinite;
}

.holo::after {
  content: "";
  position: absolute;
  inset: 7%;
  z-index: 3;
  border-radius: 10%;
  pointer-events: none;
}

/*
 * Bright scan-line copy of the icon. Because this is the icon image itself,
 * its alpha channel acts as a cookie cutter and no line can leave the glyph.
 */
.holo__scan {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  opacity: calc(.62 * var(--holo-intensity));
  filter: brightness(0) invert(1) sepia(.08) saturate(.25)
          drop-shadow(0 0 2px color-mix(in srgb, var(--holo-accent) 55%, transparent));
  mix-blend-mode: screen;
  mask-image:
    linear-gradient(to bottom,
      transparent 0 38%,
      #000 45% 52%,
      transparent 59% 100%),
    repeating-linear-gradient(to bottom, #000 0 1px, transparent 1px 4px);
  mask-size: 100% 36%, 100% 100%;
  mask-position: 0 -45%, 0 0;
  mask-repeat: repeat-y;
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to bottom,
      transparent 0 38%,
      #000 45% 52%,
      transparent 59% 100%),
    repeating-linear-gradient(to bottom, #000 0 1px, transparent 1px 4px);
  -webkit-mask-size: 100% 36%, 100% 100%;
  -webkit-mask-position: 0 -45%, 0 0;
  -webkit-mask-repeat: repeat-y;
  -webkit-mask-composite: source-in;
  animation: holo-scan-clipped calc(var(--holo-speed) * .58) linear infinite;
}

/* Sparse sparkle field and a brief horizontal flare. */
.holo::after {
  inset: 0;
  background:
    radial-gradient(circle at 18% 27%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 78% 20%, var(--holo-color) 0 1px, transparent 2.5px),
    radial-gradient(circle at 68% 78%, #fff 0 1.5px, transparent 3px),
    radial-gradient(circle at 27% 70%, var(--holo-accent) 0 1px, transparent 2px),
    linear-gradient(90deg, transparent 8%, var(--holo-color) 48%, #fff 50%, var(--holo-color) 52%, transparent 92%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 1px;
  background-repeat: no-repeat;
  background-position: center, center, center, center, center 58%;
  mix-blend-mode: screen;
  opacity: 0;
  filter: blur(.15px) drop-shadow(0 0 5px var(--holo-color));
  animation: holo-dust calc(var(--holo-speed) * 1.7) linear infinite;
}

.holo__base {
  display: none;
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 8%;
  height: 2px;
  z-index: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 4px #fff,
    0 0 10px 2px var(--holo-color),
    0 0 28px 7px color-mix(in srgb, var(--holo-color) 55%, transparent);
  opacity: .82;
}

.holo--with-base .holo__base { display: block; }

.holo__base::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: calc(var(--holo-size) * .72);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--holo-color) 15%, transparent),
    transparent 76%);
  clip-path: polygon(11% 100%, 89% 100%, 69% 0, 31% 0);
  filter: blur(5px);
  opacity: .55;
}

.holo--compact { --holo-size: 112px; }
.holo--calm { --holo-speed: 6.5s; --holo-intensity: .72; }
.holo--hot { --holo-speed: 2.6s; --holo-intensity: 1.3; }
.holo--nogin {
  --holo-color: var(--nogin-pink);
  --holo-accent: #fff5fa;
}
.holo--nogin-hot {
  --holo-color: var(--nogin-pink);
  --holo-accent: #fff0f7;
  --holo-speed: 2.9s;
  --holo-intensity: 1.2;
}
.holo--paused * ,
.holo--paused::before,
.holo--paused::after { animation-play-state: paused !important; }

@keyframes holo-scan-clipped {
  to {
    mask-position: 0 145%, 0 4px;
    -webkit-mask-position: 0 145%, 0 4px;
  }
}

@keyframes holo-flicker {
  0%, 8%, 11%, 18%, 52%, 55%, 100% { opacity: .76; transform: translate(0); }
  9% { opacity: .58; transform: translateX(-1px) skewX(-1deg); }
  10% { opacity: .84; transform: translateX(1px); }
  53% { opacity: .72; transform: translateY(1px); }
  54% { opacity: .8; transform: translateY(-1px); }
}

@keyframes holo-texture-scroll {
  to {
    mask-position: 0 4px;
    -webkit-mask-position: 0 4px;
  }
}

@keyframes holo-edge-pulse {
  0%, 100% { opacity: calc(.9 * var(--holo-intensity)); }
  48% { opacity: calc(.98 * var(--holo-intensity)); }
  52% { opacity: calc(.78 * var(--holo-intensity)); }
  56% { opacity: calc(.95 * var(--holo-intensity)); }
}

@keyframes holo-aura-pulse {
  0%, 100% { opacity: calc(.32 * var(--holo-intensity)); transform: scale(.99); }
  50% { opacity: calc(.46 * var(--holo-intensity)); transform: scale(1.01); }
}

@keyframes holo-ghost {
  0%, 24%, 27%, 72%, 75%, 100% { clip-path: inset(0 0 0 0); transform: translateX(2px); }
  25% { clip-path: inset(18% 0 57% 0); transform: translateX(-4px); }
  26% { clip-path: inset(62% 0 18% 0); transform: translateX(5px); }
  73% { clip-path: inset(38% 0 41% 0); transform: translateX(4px); }
  74% { clip-path: inset(7% 0 79% 0); transform: translateX(-3px); }
}

@keyframes holo-dust {
  0%, 12%, 30%, 61%, 82%, 100% { opacity: 0; transform: translate(0, 5px); }
  13% { opacity: .72; transform: translate(1px, 0); }
  15% { opacity: .2; transform: translate(3px, -4px); }
  31% { opacity: .52; transform: translate(-2px, 1px); }
  33% { opacity: 0; transform: translate(1px, -6px); }
  62% { opacity: .85; transform: translate(0, -2px); }
  64% { opacity: .16; transform: translate(4px, -8px); }
  83% { opacity: .42; transform: translate(-3px, 0); }
  85% { opacity: 0; transform: translate(0, -7px); }
}

@media (prefers-reduced-motion: reduce) {
  .holo *,
  .holo::after {
    animation: none !important;
  }
  .holo::after { opacity: .2; }
}