/* Easter egg styles: hulk-fist. Moved verbatim out of static/app.css (egg rebuild); linked right after app.css in index.html. */
/* ================================================================
   Marvel pack — Hulk Fist punch celebrate. Vendored cutout PNG.
   Center punch-through-glass → scale-pop impact → hold → exit. .chulkfist-*
   ================================================================ */
.chulkfist-wrap {
  position: fixed;
  inset: 0;
  z-index: 8100;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1100px;
}

/* Brief glass-shatter flash at impact (no asset pipeline). */
.chulkfist-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.72) 0%, rgba(200, 255, 210, 0.18) 18%, transparent 42%),
    linear-gradient(115deg, transparent 48%, rgba(255, 255, 255, 0.55) 49.5%, transparent 51%),
    linear-gradient(28deg, transparent 47%, rgba(255, 255, 255, 0.4) 50%, transparent 53%),
    linear-gradient(-40deg, transparent 46%, rgba(255, 255, 255, 0.35) 50%, transparent 54%);
  opacity: 0;
  animation: chulkfist-glass 1.5s ease-out forwards;
}

.chulkfist-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  /* linear + dense approach keys = smooth rush; impact settle uses ease-out ATF */
  animation: chulkfist-punch 1.5s linear forwards;
  will-change: transform, opacity, filter;
}

.chulkfist-img {
  width: 560px;
  max-width: min(90vw, 720px);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.42));
  user-select: none;
  -webkit-user-drag: none;
}

@keyframes chulkfist-punch {
  /* Far / small — dense steps for a smooth rush (no big scale jumps) */
  0%   {
    transform: translateZ(-380px) scale(0.08) rotate(-6deg);
    opacity: 0;
    filter: blur(2px);
  }
  5%   {
    opacity: 1;
    filter: blur(1.5px);
    transform: translateZ(-340px) scale(0.11) rotate(-5deg);
  }
  12%  {
    transform: translateZ(-280px) scale(0.18) rotate(-4deg);
    opacity: 1;
    filter: blur(1px);
  }
  18%  {
    transform: translateZ(-220px) scale(0.28) rotate(-3deg);
    filter: blur(0.6px);
  }
  24%  {
    transform: translateZ(-150px) scale(0.42) rotate(-1deg);
    filter: blur(0.3px);
  }
  30%  {
    transform: translateZ(-80px) scale(0.58) rotate(0deg);
    filter: blur(0);
  }
  35%  {
    transform: translateZ(-20px) scale(0.78) rotate(1deg);
  }
  39%  {
    transform: translateZ(30px) scale(1.05) rotate(2deg);
    animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  /* Impact pop (noticeable, not face-filling) + short shake */
  42%  {
    transform: translateZ(55px) scale(1.55) rotate(-3deg) translate(-8px, 5px);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  46%  {
    transform: translateZ(48px) scale(1.36) rotate(2deg) translate(8px, -4px);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  50%  {
    transform: translateZ(52px) scale(1.48) rotate(-1deg) translate(-4px, 2px);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  55%  {
    transform: translateZ(50px) scale(1.42) rotate(0deg) translate(0, 0);
    animation-timing-function: linear;
  }
  /* Hold */
  72%  {
    transform: translateZ(50px) scale(1.42) rotate(0deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  /* Exit — not larger than peak */
  100% { transform: translateZ(70px) scale(1.52) rotate(3deg); opacity: 0; }
}

@keyframes chulkfist-glass {
  0, 38% { opacity: 0; }
  42%     { opacity: 1; }
  48%     { opacity: 0.55; }
  60%     { opacity: 0.12; }
  100%    { opacity: 0; }
}

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