/* Easter egg styles: infinity-gauntlet. Moved verbatim out of static/app.css (egg rebuild); linked right after app.css in index.html. */
/* ================================================================
   Marvel pack — Infinity Gauntlet (liudean2023 CodePen zazXWK).
   Still center PNG + gem shine; page dust + white wipe on is-snap. .cgauntlet-*
   ================================================================ */
.cgauntlet-wrap {
  position: fixed;
  inset: 0;
  z-index: 8100;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cgauntlet-wipe {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  z-index: 1;
}

.cgauntlet-dust {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
}

.cgauntlet-ash {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 45%;
  background: rgba(150, 146, 140, 0.92);
  opacity: 0;
  will-change: transform, opacity;
}

.cgauntlet-stage {
  position: relative;
  z-index: 3;
  width: min(420px, 72vw);
  aspect-ratio: 738 / 1083;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.35));
}

@media (max-height: 700px) {
  .cgauntlet-stage { width: min(300px, 58vw); }
}

.cgauntlet-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* Knuckle hitboxes from pen (738×1083 → %); #soul center as .cgauntlet-gem--yellow. */
.cgauntlet-gem {
  position: absolute;
  border-radius: 42%;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: opacity, transform, box-shadow;
}

/* Mind (yellow) — first knuckle. */
.cgauntlet-gem--yellow {
  left: 31.5%;
  top: 20.0%;
  width: 6.0%;
  height: 5.2%;
  --cgauntlet-gem: #ffd84d;
}

.cgauntlet-gem--red {
  left: 39.0%;
  top: 18.4%;
  width: 7.2%;
  height: 7.2%;
  --cgauntlet-gem: #f43837;
}

.cgauntlet-gem--blue {
  left: 50.5%;
  top: 18.2%;
  width: 7.9%;
  height: 7.4%;
  --cgauntlet-gem: #3d8af9;
}

.cgauntlet-gem--purple {
  left: 59.9%;
  top: 19.0%;
  width: 7.05%;
  height: 7.4%;
  --cgauntlet-gem: #c4359f;
}

/* Time stone (green) on thumb. */
.cgauntlet-gem--green {
  left: 74.5%;
  top: 40.6%;
  width: 5.0%;
  height: 3.8%;
  --cgauntlet-gem: #2ecc71;
}

/* Soul (orange) — back of hand @ 44.7% / 30%. */
.cgauntlet-gem--orange {
  left: 44.7%;
  top: 30%;
  width: 7.05%;
  height: 4.62%;
  --cgauntlet-gem: #fcae50;
}

/* One twinkle per stone → hold; finale expands held glows into white (no second flash). */
.cgauntlet-gem.is-shine {
  animation: cgauntlet-shine 1.35s ease-out forwards;
}

@keyframes cgauntlet-shine {
  0% {
    opacity: 0;
    transform: scale(0.6);
    box-shadow: 0 0 0 0 transparent;
    background: transparent;
  }
  35% {
    opacity: 1;
    transform: scale(1.12);
    background: color-mix(in srgb, var(--cgauntlet-gem) 55%, #fff);
    box-shadow:
      0 0 10px 3px var(--cgauntlet-gem),
      0 0 22px 8px color-mix(in srgb, var(--cgauntlet-gem) 70%, transparent);
  }
  100% {
    opacity: 0.92;
    transform: scale(1);
    background: color-mix(in srgb, var(--cgauntlet-gem) 48%, transparent);
    box-shadow:
      0 0 10px 3px var(--cgauntlet-gem),
      0 0 20px 7px color-mix(in srgb, var(--cgauntlet-gem) 55%, transparent);
  }
}

.cgauntlet-wrap.is-dust .cgauntlet-dust {
  animation: cgauntlet-snow-layer var(--cgauntlet-snow-ms, 6s) ease-in-out forwards;
}

.cgauntlet-wrap.is-dust .cgauntlet-ash {
  animation: cgauntlet-ash-full var(--cgauntlet-snow-ms, 6s) linear forwards;
}

.cgauntlet-ash--heavy {
  border-radius: 40%;
  box-shadow: 0 0 6px 1px rgba(160, 155, 148, 0.45);
}

/* Finale: snow over everything (incl. glove), bloom, glove dissolves, white holds. */
.cgauntlet-wrap.is-finale .cgauntlet-dust {
  z-index: 4;
}

.cgauntlet-wrap.is-finale .cgauntlet-gem.is-shine {
  animation: cgauntlet-gem-expand 1.55s ease-out forwards;
}

.cgauntlet-wrap.is-finale .cgauntlet-stage {
  animation: cgauntlet-stage-dissolve 1.55s ease-in forwards;
}

.cgauntlet-wrap.is-finale .cgauntlet-ash {
  animation: cgauntlet-ash-dissolve 1.7s ease-out forwards;
}

.cgauntlet-wrap.is-snap .cgauntlet-wipe {
  z-index: 5;
  animation: cgauntlet-wipe 1.45s ease-in forwards;
}

.cgauntlet-wrap.is-snap .cgauntlet-dust {
  animation: cgauntlet-snow-into-white 1.45s ease-in forwards;
}

@keyframes cgauntlet-stage-dissolve {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.35)) brightness(1);
  }
  35% {
    opacity: 0.85;
    transform: scale(1.04);
    filter: drop-shadow(0 0 56px rgba(255, 255, 255, 0.45)) brightness(1.22);
  }
  70% {
    opacity: 0.35;
    transform: scale(1.07);
    filter: drop-shadow(0 0 80px rgba(255, 255, 255, 0.55)) brightness(1.38);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
    filter: drop-shadow(0 0 100px rgba(255, 255, 255, 0.4)) brightness(1.5);
  }
}

@keyframes cgauntlet-ash-dissolve {
  0%   { opacity: 0.85; transform: translate(var(--cgauntlet-dx, 0), var(--cgauntlet-dy, -80px)) scale(1.35); }
  40%  { opacity: 1; transform: translate(calc(var(--cgauntlet-dx, 0) * 1.1), calc(var(--cgauntlet-dy, -80px) * 1.05)) scale(1.65); }
  100% { opacity: 0.55; transform: translate(calc(var(--cgauntlet-dx, 0) * 1.25), calc(var(--cgauntlet-dy, -80px) * 1.2)) scale(1.85); }
}

@keyframes cgauntlet-snow-into-white {
  0%   { opacity: 1; }
  55%  { opacity: 0.7; }
  100% { opacity: 0; }
}

@keyframes cgauntlet-gem-expand {
  0% {
    opacity: 0.92;
    transform: scale(1);
    background: color-mix(in srgb, var(--cgauntlet-gem) 48%, transparent);
    box-shadow:
      0 0 10px 3px var(--cgauntlet-gem),
      0 0 20px 7px color-mix(in srgb, var(--cgauntlet-gem) 55%, transparent);
  }
  35% {
    opacity: 1;
    transform: scale(2.5);
    background: color-mix(in srgb, var(--cgauntlet-gem) 50%, transparent);
    box-shadow:
      0 0 36px 16px var(--cgauntlet-gem),
      0 0 84px 36px color-mix(in srgb, var(--cgauntlet-gem) 60%, transparent),
      0 0 130px 60px rgba(255, 255, 255, 0.38);
  }
  65% {
    opacity: 0.88;
    transform: scale(3.3);
    background: color-mix(in srgb, var(--cgauntlet-gem) 40%, transparent);
    box-shadow:
      0 0 48px 22px color-mix(in srgb, var(--cgauntlet-gem) 75%, #fff),
      0 0 120px 56px color-mix(in srgb, var(--cgauntlet-gem) 45%, transparent),
      0 0 180px 90px rgba(255, 255, 255, 0.48);
  }
  100% {
    opacity: 0;
    transform: scale(4);
    background: transparent;
    box-shadow: 0 0 110px 70px rgba(255, 255, 255, 0.5);
  }
}

@keyframes cgauntlet-wipe {
  0%   { opacity: 0; }
  15%  { opacity: 0.14; }
  35%  { opacity: 0.42; }
  60%  { opacity: 0.78; }
  85%  { opacity: 1; }
  100% { opacity: 1; }
}

/* ~0–60% build with gems; ~60% soft peak; rest eases into white. */
@keyframes cgauntlet-snow-layer {
  0%   { opacity: 0.28; }
  40%  { opacity: 0.65; }
  58%  { opacity: 0.88; }
  68%  { opacity: 1; }
  88%  { opacity: 0.45; }
  100% { opacity: 0; }
}

@keyframes cgauntlet-ash-full {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.65); }
  8%   { opacity: 0.45; }
  35%  { opacity: 0.72; transform: translate(calc(var(--cgauntlet-dx, 0) * 0.3), calc(var(--cgauntlet-dy, -80px) * 0.28)) scale(1); }
  55%  { opacity: 0.9; transform: translate(calc(var(--cgauntlet-dx, 0) * 0.55), calc(var(--cgauntlet-dy, -80px) * 0.55)) scale(1.25); }
  64%  { opacity: 1; transform: translate(calc(var(--cgauntlet-dx, 0) * 0.85), calc(var(--cgauntlet-dy, -80px) * 0.8)) scale(1.48); }
  78%  { opacity: 0.75; transform: translate(var(--cgauntlet-dx, 0), var(--cgauntlet-dy, -80px)) scale(1.55); }
  100% { opacity: 0; transform: translate(calc(var(--cgauntlet-dx, 0) * 1.2), calc(var(--cgauntlet-dy, -80px) * 1.15)) scale(0.45); }
}

@media (prefers-reduced-motion: reduce) {
  .cgauntlet-wrap { display: none; }
}