/* Donkey Factory — Reveal animations
 * The signature moments:
 *   1. Garage-door reveal of the result panels (slides in from top)
 *   2. Key-drop choreography: 4 keys fall into the 4 result tabs
 *   3. Statue shake on error
 *   4. URL preview thumbnail fly-in
 *
 * All effects auto-disable in HC mode and prefers-reduced-motion.
 * Triggered by adding the appropriate class from app.js lifecycle hooks.
 */

/* ── 1. Garage door reveal ─────────────────────────────────────────────── */

.wt-garage-door {
  transform-origin: top center;
  animation: wt-garage-down 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
  overflow: hidden;
}
@keyframes wt-garage-down {
  0%   { clip-path: inset(0 0 100% 0); transform: translateY(-12px); opacity: 0; }
  60%  { clip-path: inset(0 0 0    0); transform: translateY(0);     opacity: 1; }
  100% { clip-path: inset(0 0 0    0); transform: translateY(0);     opacity: 1; }
}

/* ── 2. Key drop choreography ──────────────────────────────────────────── */
/*
 * The result tabs (Tools, Steps, Safety, Tips) host placeholder slots where
 * keys "land". When extraction completes, app.js adds .wt-key-drop to each
 * slot with a stagger; the keys fall and bounce.
 */

.wt-key-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--primary);
  pointer-events: none;
}
.wt-key-slot > svg {
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateY(-32px) rotate(-12deg);
}
.wt-key-slot.wt-key-drop > svg {
  animation: wt-key-fall 620ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes wt-key-fall {
  0%   { opacity: 0;   transform: translateY(-32px) rotate(-12deg); }
  60%  { opacity: 1;   transform: translateY(4px)   rotate(6deg);   }
  80%  { opacity: 1;   transform: translateY(-2px)  rotate(-3deg);  }
  100% { opacity: 1;   transform: translateY(0)     rotate(0);      }
}

/* Stagger via per-tab delay class */
.wt-key-drop-1 > svg { animation-delay: 0ms;   }
.wt-key-drop-2 > svg { animation-delay: 120ms; }
.wt-key-drop-3 > svg { animation-delay: 240ms; }
.wt-key-drop-4 > svg { animation-delay: 360ms; }

/* Active tab gets a pulsing glow on its key */
.wt-tab-active .wt-key-slot > svg {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--primary) 55%, transparent));
}

/* ── 3. Statue shake on error ──────────────────────────────────────────── */

.wt-statue-shake {
  animation: wt-shake-statue 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes wt-shake-statue {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px);  }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* ── 4. URL thumbnail fly-in ───────────────────────────────────────────── */

.wt-thumb-flyin {
  animation: wt-thumb-fly 460ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes wt-thumb-fly {
  0%   { opacity: 0; transform: translateX(20px) scale(0.92); }
  100% { opacity: 1; transform: translateX(0)    scale(1);    }
}

/* ── 5. Statue lift-keys-out gesture (CSS only, viewer handles 3D) ─────── */
/* When the viewer is hidden (HC/no-WebGL), the poster gets this gentle
   "presenting" pulse during extraction. */
.wt-herakles-poster.is-presenting {
  animation: wt-present 1.4s ease-in-out infinite;
}
@keyframes wt-present {
  0%, 100% { transform: scale(1);    filter: brightness(1); }
  50%      { transform: scale(1.02); filter: brightness(1.08); }
}

/* ── HC + reduced motion floor ─────────────────────────────────────────── */

.hc .wt-garage-door,
.hc .wt-key-slot > svg,
.hc .wt-statue-shake,
.hc .wt-thumb-flyin,
.hc .wt-herakles-poster.is-presenting {
  animation: none !important;
  opacity: 1;
  transform: none;
  clip-path: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .wt-garage-door,
  .wt-key-slot > svg,
  .wt-statue-shake,
  .wt-thumb-flyin,
  .wt-herakles-poster.is-presenting {
    animation: none !important;
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}