/* Produkt-Animationen (Storyboard: animationen-story.md).
   Reines CSS/SVG, kein Video/GIF. viewBox 0 0 1000 500 skaliert responsiv mit dem verfügbaren
   Platz (bis max. 1000px Breite) und folgt automatisch dem Light-/Dark-Theme über die
   bestehenden Farbvariablen aus landing.css. */

.cap-anim {
  position: relative;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 2 / 1;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  overflow: hidden;
  container-type: inline-size;
}

/* Eigenständige Showcase-Section oberhalb der Kernfunktionen (statt in einer Kachel) */
.showcase { background: var(--surface); }
.showcase .cap-anim { margin-top: 24px; }

.cap-anim .anim-scene {
  position: absolute;
  inset: 0;
  animation: animSceneReset 20s steps(1, end) infinite;
}

.cap-anim svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cap-anim .anim-cards {
  position: absolute;
  right: 1%;
  top: 4%;
  width: 22%;
  display: flex;
  flex-direction: column;
  gap: 2%;
}

.cap-anim .anim-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--steel);
  border-radius: 7px;
  padding: 4.5% 7%;
  font-size: clamp(9px, 2.6cqw, 15px);
  line-height: 1.25;
  color: var(--parchment);
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
  font-weight: 600;
}

.cap-anim .anim-check {
  color: var(--android);
  font-weight: 800;
  margin-left: 4px;
  opacity: 0;
}

.cap-anim .anim-caption {
  position: absolute;
  left: 3%;
  bottom: 4%;
  right: 3%;
  font-size: clamp(13px, 3.6cqw, 26px);
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--steel);
}

.cap-anim .anim-heading {
  position: absolute;
  left: 3%;
  top: 4%;
  right: 3%;
  font-family: var(--mono);
  font-size: clamp(9px, 2.2cqw, 13px);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bronze);
  z-index: 2;
}

/* ── Gesamtszene: harter Schnitt am Loop-Punkt (kein sanftes Fade -> wirkt schneller/knackiger) */
@keyframes animSceneReset {
  0%   { opacity: 1; }
  88%  { opacity: 1; }
  94%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Snappy Timing-Kurve für alle Bewegungen — schnell rein, leichtes Überschwingen, kein "linear"-Trott */
:root { --snap: cubic-bezier(.34, 1.56, .64, 1); }

/* ── Pilot: "Aufnahme" — 20s, 3 Akte, 5 Interaktionen, durchgehend Bewegung ─
   Akt 1 (0–34%)   Männchen klickt sich manuell durch 5 UI-Elemente, wird
                    zunehmend gestresst (Schweiß, angespannter Mund)
   Akt 2 (35–48%)  GUI Test Studio-Logo poppt rein — "Aufnahme gestartet"
   Akt 3 (48–88%)  Männchen tritt glücklich zur Seite, Cursor klickt sich
                    allein und schnell durch dieselben 5 Elemente
   Reset (88–100%) harter Schnitt zurück zu 0%                                */

/* ── Akt 1: Arme (5 Ziele nacheinander) ─────────────────────────────────── */
.anim-aufnahme .anim-figure-desk {
  animation: aufDeskFigure 20s var(--snap) infinite;
}
@keyframes aufDeskFigure {
  0%, 31%   { opacity: 1; transform: translateY(0); }
  34%, 100% { opacity: 0; transform: translateY(6px); }
}

.anim-aufnahme .anim-arm-1 { animation: aufArm1 20s var(--snap) infinite; }
@keyframes aufArm1 { 0%,1.5%{opacity:0} 3%,6.5%{opacity:1} 8%,100%{opacity:0} }

.anim-aufnahme .anim-arm-2 { animation: aufArm2 20s var(--snap) infinite; }
@keyframes aufArm2 { 0%,7.5%{opacity:0} 9%,12.5%{opacity:1} 14%,100%{opacity:0} }

.anim-aufnahme .anim-arm-3 { animation: aufArm3 20s var(--snap) infinite; }
@keyframes aufArm3 { 0%,13.5%{opacity:0} 15%,18.5%{opacity:1} 20%,100%{opacity:0} }

.anim-aufnahme .anim-arm-4 { animation: aufArm4 20s var(--snap) infinite; }
@keyframes aufArm4 { 0%,19.5%{opacity:0} 21%,24.5%{opacity:1} 26%,100%{opacity:0} }

.anim-aufnahme .anim-arm-5 { animation: aufArm5 20s var(--snap) infinite; }
@keyframes aufArm5 { 0%,25.5%{opacity:0} 27%,30.5%{opacity:1} 32%,100%{opacity:0} }

/* Mimik: entspannt -> angespannt/schwitzend */
.anim-aufnahme .anim-mouth-calm { animation: aufMouthCalm 20s steps(1,end) infinite; }
@keyframes aufMouthCalm { 0%,19%{opacity:1} 21%,100%{opacity:0} }

.anim-aufnahme .anim-mouth-stressed { animation: aufMouthStressed 20s steps(1,end) infinite; }
@keyframes aufMouthStressed { 0%,20%{opacity:0} 22%,100%{opacity:1} }

.anim-aufnahme .anim-brows { animation: aufBrows 20s steps(1,end) infinite; }
@keyframes aufBrows { 0%,20%{opacity:0} 22%,100%{opacity:1} }

.anim-aufnahme .anim-sweat-1 { animation: aufSweat1 20s var(--snap) infinite; }
@keyframes aufSweat1 { 0%,11%{opacity:0; transform:translateY(-4px);} 13%,100%{opacity:1; transform:translateY(0);} }

.anim-aufnahme .anim-sweat-2 { animation: aufSweat2 20s var(--snap) infinite; }
@keyframes aufSweat2 { 0%,20%{opacity:0; transform:translateY(-4px);} 22%,100%{opacity:1; transform:translateY(0);} }

/* Modal-Dialog "Speichern" — blitzt bei Klick 5 kurz auf (manuell + automatisch) */
.anim-aufnahme .anim-modal { animation: aufModal 20s var(--snap) infinite; transform-origin: 610px 215px; }
@keyframes aufModal {
  0%, 28.5% { opacity: 0; transform: scale(.85); }
  30.5%     { opacity: 1; transform: scale(1.04); }
  32%, 33%  { opacity: 1; transform: scale(1); }
  35%, 60%  { opacity: 0; transform: scale(.85); }
  61.5%     { opacity: 1; transform: scale(1.04); }
  63%, 64%  { opacity: 1; transform: scale(1); }
  66%, 100% { opacity: 0; transform: scale(.85); }
}

/* Testschritt-Karten — 5 Stück, poppen nacheinander während Akt 1 */
.anim-aufnahme .anim-card-1 { animation: aufCard1 20s var(--snap) infinite; }
@keyframes aufCard1 { 0%,5%{opacity:0; transform:translateX(20px) scale(.9);} 8%,86%{opacity:1; transform:translateX(0) scale(1);} 100%{opacity:1; transform:translateX(0) scale(1);} }

.anim-aufnahme .anim-card-2 { animation: aufCard2 20s var(--snap) infinite; }
@keyframes aufCard2 { 0%,11%{opacity:0; transform:translateX(20px) scale(.9);} 14%,86%{opacity:1; transform:translateX(0) scale(1);} 100%{opacity:1; transform:translateX(0) scale(1);} }

.anim-aufnahme .anim-card-3 { animation: aufCard3 20s var(--snap) infinite; }
@keyframes aufCard3 { 0%,17%{opacity:0; transform:translateX(20px) scale(.9);} 20%,86%{opacity:1; transform:translateX(0) scale(1);} 100%{opacity:1; transform:translateX(0) scale(1);} }

.anim-aufnahme .anim-card-4 { animation: aufCard4 20s var(--snap) infinite; }
@keyframes aufCard4 { 0%,23%{opacity:0; transform:translateX(20px) scale(.9);} 26%,86%{opacity:1; transform:translateX(0) scale(1);} 100%{opacity:1; transform:translateX(0) scale(1);} }

.anim-aufnahme .anim-card-5 { animation: aufCard5 20s var(--snap) infinite; }
@keyframes aufCard5 { 0%,29%{opacity:0; transform:translateX(20px) scale(.9);} 32%,86%{opacity:1; transform:translateX(0) scale(1);} 100%{opacity:1; transform:translateX(0) scale(1);} }

/* Häkchen auf den Karten während Akt 3 (automatisch bestätigt) */
.anim-aufnahme .anim-check-1 { animation: aufCheck1 20s steps(1,end) infinite; }
@keyframes aufCheck1 { 0%,50.5%{opacity:0} 52%,100%{opacity:1} }
.anim-aufnahme .anim-check-2 { animation: aufCheck2 20s steps(1,end) infinite; }
@keyframes aufCheck2 { 0%,53.5%{opacity:0} 55%,100%{opacity:1} }
.anim-aufnahme .anim-check-3 { animation: aufCheck3 20s steps(1,end) infinite; }
@keyframes aufCheck3 { 0%,56%{opacity:0} 57.5%,100%{opacity:1} }
.anim-aufnahme .anim-check-4 { animation: aufCheck4 20s steps(1,end) infinite; }
@keyframes aufCheck4 { 0%,58.5%{opacity:0} 60%,100%{opacity:1} }
.anim-aufnahme .anim-check-5 { animation: aufCheck5 20s steps(1,end) infinite; }
@keyframes aufCheck5 { 0%,61%{opacity:0} 62.5%,100%{opacity:1} }

/* Ripples an den 5 Zielen — je ein Puls in Akt 1 (manuell) und Akt 3 (automatisch) */
.anim-aufnahme .anim-ripple-p1 { animation: rippleP1 20s var(--snap) infinite; transform-origin: 450px 176px; }
@keyframes rippleP1 { 0%,4.5%{r:3;opacity:0} 6%{r:11;opacity:1} 8%,50%{r:44;opacity:0} 51.5%{r:11;opacity:1} 53%,100%{r:44;opacity:0} }

.anim-aufnahme .anim-ripple-p2 { animation: rippleP2 20s var(--snap) infinite; transform-origin: 543px 133px; }
@keyframes rippleP2 { 0%,10.5%{r:3;opacity:0} 12%{r:11;opacity:1} 14%,53%{r:44;opacity:0} 54.5%{r:11;opacity:1} 56%,100%{r:44;opacity:0} }

.anim-aufnahme .anim-ripple-p3 { animation: rippleP3 20s var(--snap) infinite; transform-origin: 623px 190px; }
@keyframes rippleP3 { 0%,16.5%{r:3;opacity:0} 18%{r:11;opacity:1} 20%,56%{r:44;opacity:0} 57%{r:11;opacity:1} 58.5%,100%{r:44;opacity:0} }

.anim-aufnahme .anim-ripple-p4 { animation: rippleP4 20s var(--snap) infinite; transform-origin: 506px 240px; }
@keyframes rippleP4 { 0%,22.5%{r:3;opacity:0} 24%{r:11;opacity:1} 26%,58.5%{r:44;opacity:0} 59.5%{r:11;opacity:1} 61%,100%{r:44;opacity:0} }

.anim-aufnahme .anim-ripple-p5 { animation: rippleP5 20s var(--snap) infinite; transform-origin: 553px 278px; }
@keyframes rippleP5 { 0%,28.5%{r:3;opacity:0} 30%{r:11;opacity:1} 32%,61%{r:44;opacity:0} 62%{r:11;opacity:1} 63.5%,100%{r:44;opacity:0} }

/* ── Akt 2: GUI Test Studio Logo-Moment — voller Vorhang statt Overlay,
   damit nichts von der App/den Figuren "angeschnitten" durchscheint ────── */
.anim-aufnahme .anim-curtain {
  animation: aufCurtain 20s var(--snap) infinite;
}
@keyframes aufCurtain {
  0%, 33%   { opacity: 0; }
  35%, 46%  { opacity: 1; }
  48%, 100% { opacity: 0; }
}

.anim-aufnahme .anim-logo-mark {
  animation: aufLogoMark 20s var(--snap) infinite;
  transform-origin: 500px 250px;
}
@keyframes aufLogoMark {
  0%, 35%   { opacity: 0; transform: scale(.2) rotate(-6deg); }
  38%       { opacity: 1; transform: scale(1.2) rotate(2deg); }
  40%       { opacity: 1; transform: scale(.94) rotate(0deg); }
  42%       { opacity: 1; transform: scale(1.04); }
  44%       { opacity: 1; transform: scale(1); }
  47%, 100% { opacity: 0; transform: scale(.6); }
}

/* ── Akt 3: Männchen tritt zur Seite, glücklich ──────────────────────────── */
.anim-aufnahme .anim-figure-aside {
  animation: aufAsideFigure 20s var(--snap) infinite;
}
@keyframes aufAsideFigure {
  0%, 45%   { opacity: 0; transform: translateX(-30px) scale(.92); }
  48%       { opacity: 1; transform: translateX(6px) scale(1.05); }
  50%, 86%  { opacity: 1; transform: translateX(0) scale(1); }
  100%      { opacity: 1; transform: translateX(0) scale(1); }
}

.anim-aufnahme .anim-figure-aside .anim-head-bob {
  animation: aufHeadBob 1.8s ease-in-out infinite;
  transform-origin: 150px 244px;
}
@keyframes aufHeadBob {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50%      { transform: rotate(5deg) translateY(-6px); }
}

.anim-aufnahme .anim-cursor {
  animation: aufCursor 20s var(--snap) infinite;
  transform-origin: 0 0;
}
@keyframes aufCursor {
  0%, 47%   { opacity: 0; transform: translate(160px, 30px) scale(1); }
  49.5%     { opacity: 1; transform: translate(442px, 168px) scale(1.2); }
  51%       { opacity: 1; transform: translate(444px, 170px) scale(1); }
  52.5%     { opacity: 1; transform: translate(533px, 125px) scale(1); }
  54%       { opacity: 1; transform: translate(535px, 127px) scale(1); }
  55.5%     { opacity: 1; transform: translate(613px, 182px) scale(1); }
  57%       { opacity: 1; transform: translate(615px, 184px) scale(1); }
  58.5%     { opacity: 1; transform: translate(498px, 232px) scale(1); }
  60%       { opacity: 1; transform: translate(500px, 234px) scale(1); }
  61.5%     { opacity: 1; transform: translate(544px, 270px) scale(1); }
  63%, 86%  { opacity: 1; transform: translate(546px, 272px) scale(1); }
  100%      { opacity: 1; transform: translate(546px, 272px) scale(1); }
}

/* Captions — erzählen die drei Akte in Textform mit, harte schnelle Wechsel */
.anim-aufnahme .anim-caption-1,
.anim-aufnahme .anim-caption-2,
.anim-aufnahme .anim-caption-3 {
  opacity: 0;
}
.anim-aufnahme .anim-caption-1 { animation: aufCaption1 20s steps(1, end) infinite; }
@keyframes aufCaption1 { 0%,1%{opacity:0} 2%,30%{opacity:1} 33%{opacity:0} 100%{opacity:0} }
.anim-aufnahme .anim-caption-2 { animation: aufCaption2 20s steps(1, end) infinite; }
@keyframes aufCaption2 { 0%,34%{opacity:0} 36%,45%{opacity:1} 47%{opacity:0} 100%{opacity:0} }
.anim-aufnahme .anim-caption-3 { animation: aufCaption3 20s steps(1, end) infinite; }
@keyframes aufCaption3 { 0%,48%{opacity:0} 50%,86%{opacity:1} 90%{opacity:0} 100%{opacity:0} }

@media (prefers-reduced-motion: reduce) {
  .cap-anim .anim-scene,
  .cap-anim [class*="anim-"] {
    animation: none !important;
  }
  .anim-aufnahme .anim-figure-desk,
  .anim-aufnahme [class^="anim-arm-"],
  .anim-aufnahme .anim-curtain,
  .anim-aufnahme .anim-logo-mark,
  .anim-aufnahme .anim-cursor,
  .anim-aufnahme .anim-modal,
  .anim-aufnahme .anim-mouth-stressed,
  .anim-aufnahme .anim-brows,
  .anim-aufnahme .anim-sweat-1,
  .anim-aufnahme .anim-sweat-2 { opacity: 0 !important; }
  .anim-aufnahme .anim-figure-aside,
  .anim-aufnahme .anim-mouth-calm,
  .anim-aufnahme [class^="anim-card-"],
  .anim-aufnahme [class^="anim-check-"],
  .anim-aufnahme .anim-caption-3 {
    opacity: 1 !important;
    transform: none !important;
  }
}