/* AnimalGuessr Reactions — VFX-Toolkit
   pure-CSS Animationen, kein Asset noetig. Pointer-events: none
   damit Game-Buttons unter dem Layer voll interaktiv bleiben. */

#ag-reactions-layer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  overflow: hidden;
}

.ag-reaction {
  position: absolute;
  left: 50%;
  top: 38%;
  /* Start invisible & slightly left of final position. Animations override transform. */
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(92vw, 680px);
  text-align: center;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45));
}

.ag-reaction-top {
  font-family: 'Impact', 'Arial Narrow Bold', 'Helvetica Neue', sans-serif;
  font-weight: 900;
  font-size: clamp(1.9rem, 7vw, 4rem);
  line-height: 1.05;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 5px #000;
  paint-order: stroke fill;
  text-shadow:
    0 5px 0 #000,
    0 0 16px rgba(255, 80, 73, 0.55),
    0 0 28px rgba(0, 0, 0, 0.75);
}

.ag-reaction-emoji {
  font-size: clamp(4.2rem, 17vw, 9rem);
  line-height: 1;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55));
}

/* === Default: slide from left + grow + settle (longer, more cinematic) === */
.ag-reaction--blast {
  animation: ag-blast 820ms cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
}
@keyframes ag-blast {
  0%   { transform: translate(calc(-50% - 60vw), -50%) scale(0.55) rotate(-6deg); opacity: 0; }
  30%  { transform: translate(-50%, -50%)              scale(1.18) rotate(2deg);  opacity: 1; }
  55%  { transform: translate(-50%, -50%)              scale(0.96) rotate(-1deg); }
  78%  { transform: translate(-50%, -50%)              scale(1.04) rotate(0.4deg); }
  100% { transform: translate(-50%, -50%)              scale(1)    rotate(0);     opacity: 1; }
}

/* === Shake (peinlich-Stimmung) — von links rein + leichtes Wackeln === */
.ag-reaction--shake {
  animation: ag-shake 780ms cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
}
@keyframes ag-shake {
  0%   { transform: translate(calc(-50% - 60vw), -50%) scale(0.6);  opacity: 0; }
  35%  { transform: translate(-50%, -50%)              scale(1.18); opacity: 1; }
  50%  { transform: translate(-48%, -50%)              scale(1.06); }
  62%  { transform: translate(-52%, -50%)              scale(1.04); }
  74%  { transform: translate(-49%, -52%)              scale(1.02); }
  86%  { transform: translate(-51%, -49%)              scale(1.01); }
  100% { transform: translate(-50%, -50%)              scale(1);    opacity: 1; }
}

/* === Flip (plot-twist) — von links + Rotation === */
.ag-reaction--flip {
  animation: ag-flip 880ms cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
  perspective: 800px;
}
@keyframes ag-flip {
  0%   { transform: translate(calc(-50% - 60vw), -50%) rotateY(-90deg) scale(0.6); opacity: 0; }
  55%  { transform: translate(-50%, -50%)              rotateY(15deg)  scale(1.12); opacity: 1; }
  100% { transform: translate(-50%, -50%)              rotateY(0)      scale(1);    opacity: 1; }
}

/* === Glitch (catastrophic / rare drops) — länger, dramatischer === */
.ag-reaction--glitch {
  animation: ag-glitch 920ms steps(10, end) forwards;
}
@keyframes ag-glitch {
  0%   { transform: translate(calc(-50% - 60vw), -52%) scale(0.6);  opacity: 0;   filter: none; }
  30%  { transform: translate(-48%, -52%)              scale(1.3);  opacity: 1;   filter: hue-rotate(45deg) saturate(2); }
  50%  { transform: translate(-52%, -48%)              scale(0.95); opacity: 0.9; filter: hue-rotate(-30deg); }
  70%  { transform: translate(-49%, -50%)              scale(1.08); opacity: 1;   filter: none; }
  85%  { transform: translate(-51%, -50%)              scale(0.98); filter: invert(0.15); }
  100% { transform: translate(-50%, -50%)              scale(1);    opacity: 1;   filter: none; }
}

/* === Slow-glitch (cult easter eggs — eerie, langsam) === */
.ag-reaction--slow-glitch {
  animation: ag-slow-glitch 1400ms ease-in-out forwards;
}
@keyframes ag-slow-glitch {
  0%   { transform: translate(calc(-50% - 60vw), -50%) scale(0.6); opacity: 0; filter: blur(8px); }
  30%  { transform: translate(-50%, -50%)              scale(1.2); opacity: 0.8; filter: blur(0) hue-rotate(180deg); }
  60%  { transform: translate(-50%, -50%)              scale(1);   opacity: 1; filter: none; }
  100% { transform: translate(-50%, -50%)              scale(1);   opacity: 1; }
}

/* === Out (slide-out to right + fade) — länger und cinematic === */
.ag-reaction--out {
  animation: ag-out 480ms cubic-bezier(0.55, 0, 0.45, 1) forwards !important;
}
@keyframes ag-out {
  0%   { opacity: 1; transform: translate(-50%, -50%)              scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + 60vw), -50%) scale(0.85); }
}

/* === Flash (lightning-correct, 200ms white bang) === */
.ag-flash {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 8999;
  pointer-events: none;
  animation: ag-flash-anim 200ms ease-out forwards;
}
@keyframes ag-flash-anim {
  0%   { opacity: 0.92; }
  100% { opacity: 0; }
}

/* === Shockwave (streak milestone, ring expansion) === */
.ag-shockwave {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid rgba(255, 80, 73, 0.9);
  transform: translate(-50%, -50%) scale(0);
  z-index: 8998;
  pointer-events: none;
  animation: ag-shockwave-anim 600ms ease-out forwards;
}
@keyframes ag-shockwave-anim {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 1; border-width: 8px; }
  100% { transform: translate(-50%, -50%) scale(80);  opacity: 0; border-width: 1px; }
}

/* === RTL friendly === */
html[dir="rtl"] .ag-reaction-top {
  letter-spacing: 0;
}

/* === Reduzierte Bewegung (Accessibility) === */
@media (prefers-reduced-motion: reduce) {
  .ag-reaction, .ag-flash, .ag-shockwave {
    animation: none !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
}