/* Illustrative concept animations — all gated behind .is-active (added by
   IntersectionObserver in reveal.js) and behind prefers-reduced-motion. */

.illustration { position: relative; width: 100%; aspect-ratio: 4/3; background: var(--color-paper-tint);
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-line); }

/* 1) ANTI-THESE — "Der überfüllte Markt" */
.market-illustration {
  background: radial-gradient(circle at 50% 50%, #F3F9F5 0%, var(--color-paper-tint) 65%, #ECF1EE 100%);
}
.market-illustration .market-line {
  position: absolute; top: 50%; left: 50%; height: 1.5px; width: var(--len, 80px);
  background: linear-gradient(90deg, transparent, var(--color-accent-ink) 88%);
  transform-origin: left center;
  transform: rotate(var(--ang, 0deg)) scaleX(0);
  opacity: 0;
  transition: transform 1.3s var(--ease-out) 0.15s, opacity 0.6s var(--ease-out) 0.15s;
}
.market-illustration.is-active .market-line { transform: rotate(var(--ang, 0deg)) scaleX(1); opacity: 0.55; }
.market-illustration .dot {
  position: absolute; width: 32px; height: 32px; margin: -16px; border-radius: 50%;
  background: var(--color-paper); border: 1px solid var(--color-line);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center; color: var(--color-muted);
  transition: transform 1.1s var(--ease-out), opacity 1.1s var(--ease-out), box-shadow 0.3s;
  z-index: 2;
}
.market-illustration .dot svg { width: 15px; height: 15px; }
.market-illustration .dot.candidate {
  width: 44px; height: 44px; margin: -22px; background: var(--color-accent-ink); color: var(--color-paper);
  border: none; box-shadow: 0 0 0 0 rgba(46,107,79,0.45); z-index: 3;
}
.market-illustration .dot.candidate svg { width: 20px; height: 20px; }
.market-illustration.is-active .dot.candidate { animation: candidate-pulse 2.2s ease-out 1.2s infinite; }
.market-illustration.is-active .dot.employer { transform: translate(var(--tx, 0), var(--ty, 0)); }
@keyframes candidate-pulse {
  0% { box-shadow: 0 0 0 0 rgba(46,107,79,0.45); }
  70% { box-shadow: 0 0 0 16px rgba(46,107,79,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,107,79,0); }
}
.market-illustration .label {
  position: absolute; font-size: 0.68rem; font-weight: 700; color: var(--color-paper);
  background: var(--color-ink); border-radius: 999px; padding: 0.15rem 0.6rem; white-space: nowrap; z-index: 3;
}

/* 2) DIAGNOSE — "Signal-Radar" */
.radar-illustration {
  background: radial-gradient(circle at 50% 50%, #16261F 0%, #0E1712 72%, #0A100C 100%);
  border-color: #1E2E26;
}
.radar-illustration .radar-face {
  position: absolute; inset: 10%; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center,
      transparent 0, transparent calc(24% - 1px),
      rgba(143,216,176,0.16) calc(24% - 1px), rgba(143,216,176,0.16) 24%);
  border: 1px solid rgba(143,216,176,0.22);
}
.radar-illustration .radar-face::before, .radar-illustration .radar-face::after {
  content: ""; position: absolute; background: rgba(143,216,176,0.16);
}
.radar-illustration .radar-face::before { left: 0; right: 0; top: 50%; height: 1px; }
.radar-illustration .radar-face::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.radar-illustration .radar-sweep {
  position: absolute; inset: 10%; border-radius: 50%; overflow: hidden;
}
.radar-illustration .radar-sweep::before {
  content: ""; position: absolute; inset: -2%;
  background: conic-gradient(from 0deg, rgba(143,216,176,0.5), transparent 22deg, transparent 360deg);
  animation: radar-spin 4.5s linear infinite; animation-play-state: paused;
}
.radar-illustration.is-active .radar-sweep::before { animation-play-state: running; }
@keyframes radar-spin { to { transform: rotate(360deg); } }
.radar-illustration .radar-center {
  position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%;
  background: var(--color-accent); box-shadow: 0 0 10px 2px rgba(143,216,176,0.7); z-index: 2;
}
.radar-illustration .radar-dot {
  position: absolute; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--color-accent);
  box-shadow: 0 0 8px 1px rgba(143,216,176,0.8);
  opacity: 0; transform: scale(0.4); z-index: 2;
  animation: radar-pulse 4.5s var(--ease-out) infinite; animation-delay: var(--delay, 0s); animation-play-state: paused;
}
.radar-illustration.is-active .radar-dot { animation-play-state: running; }
.radar-illustration .radar-tag {
  position: absolute; font-size: 0.68rem; font-weight: 600; background: rgba(10,16,12,0.9);
  color: #E3F5EA; border: 1px solid rgba(143,216,176,0.3); border-radius: 999px; padding: 0.15rem 0.55rem;
  white-space: nowrap; opacity: 0; z-index: 3;
  animation: radar-tag-fade 4.5s var(--ease-out) infinite; animation-delay: var(--delay, 0s); animation-play-state: paused;
}
.radar-illustration.is-active .radar-tag { animation-play-state: running; }
@keyframes radar-pulse { 0% { opacity: 0; transform: scale(0.4);} 8% { opacity: 1; transform: scale(1);} 40% { opacity: 1; } 100% { opacity: 0.35; transform: scale(1); } }
@keyframes radar-tag-fade { 0% { opacity: 0; } 10% { opacity: 1; } 35% { opacity: 1; } 48% { opacity: 0; } 100% { opacity: 0; } }

/* 3) MECHANISMUS Schritt 2 — "Trichter" */
.funnel-illustration { background: linear-gradient(180deg, #F3F9F5, var(--color-paper-tint)); }
.funnel-illustration .funnel-shape {
  position: absolute; left: 50%; top: 6%; width: 92%; height: 88%; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(143,216,176,0.16), rgba(143,216,176,0.05));
  border: 1px solid rgba(46,107,79,0.18); border-top: none;
  clip-path: polygon(2% 0%, 98% 0%, 58% 62%, 58% 100%, 42% 100%, 42% 62%);
}
.funnel-illustration .funnel-tag {
  position: absolute; font-size: 0.68rem; font-weight: 700; color: var(--color-accent-ink);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.funnel-illustration .particle {
  position: absolute; top: -6%; width: 9px; height: 9px; border-radius: 50%;
  background: #AFB6B1; box-shadow: 0 0 0 3px rgba(175,182,177,0.18);
  animation: funnel-fall 3.2s linear infinite;
  animation-play-state: paused;
}
.funnel-illustration.is-active .particle { animation-play-state: running; }
.funnel-illustration .particle.signal {
  background: var(--color-accent-ink); box-shadow: 0 0 0 5px rgba(46,107,79,0.22), 0 0 10px 2px rgba(46,107,79,0.35);
}
@keyframes funnel-fall {
  0% { top: -6%; opacity: 0; }
  8% { opacity: 1; }
  48% { top: 46%; }
  52% { top: 46%; }
  100% { top: 104%; opacity: 1; }
}

/* 4) MECHANISMUS Schritt 3 — "KI-Such-Demo" */
.ai-demo { max-width: 420px; margin-inline: auto; }
.ai-demo .bubble { border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
  font-size: 0.92rem; opacity: 0; transform: translateY(6px); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
.ai-demo .bubble.is-visible { opacity: 1; transform: translateY(0); }
.ai-demo .bubble--q { background: var(--color-paper-tint); border: 1px solid var(--color-line); margin-left: auto; max-width: 85%; }
.ai-demo .bubble--a { background: var(--color-ink); color: var(--color-paper); max-width: 92%; }
.ai-demo .bubble--a .firm-name { color: var(--color-accent); font-weight: 700; }
.ai-demo .caret { display: inline-block; width: 2px; height: 1em; background: currentColor; vertical-align: -0.15em; animation: caret-blink 0.9s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }

/* 5) "Bewerber-Postfach" — bewusst im vertrauten Mailclient-Look (Blau, Ordnerleiste),
      ohne Microsoft-Logo/-Markenname, um keine Marke zu imitieren */
.inbox {
  --outlook-blue: #0F6CBD; --outlook-blue-dark: #0A4C87;
  border-radius: var(--radius-lg); border: 1px solid var(--color-line); background: var(--color-paper);
  overflow: hidden; box-shadow: var(--shadow-md);
}
.inbox__titlebar {
  padding: var(--space-3) var(--space-4); background: var(--outlook-blue); color: var(--color-paper);
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
}
.inbox__body { display: grid; grid-template-columns: 132px 1fr; min-height: 280px; }
.inbox__sidebar { background: #F3F8FC; border-right: 1px solid #DCE9F5; padding: var(--space-3) 0; }
.inbox__folder {
  display: flex; align-items: center; gap: 6px; padding: 0.5rem var(--space-3);
  font-size: 0.78rem; color: #2B3B47; white-space: nowrap;
}
.inbox__folder svg { width: 14px; height: 14px; flex: none; }
.inbox__folder--active {
  background: #DCEBFA; color: var(--outlook-blue-dark); font-weight: 700; border-radius: 0 999px 999px 0;
  margin-right: var(--space-2);
}
.inbox__folder-count {
  margin-left: auto; background: var(--outlook-blue); color: var(--color-paper); font-size: 0.68rem; font-weight: 700;
  border-radius: 999px; padding: 0 0.4rem; min-width: 16px; text-align: center;
}
.inbox__list { list-style: none; margin: 0; padding: var(--space-2); display: flex; flex-direction: column; gap: 2px; }
.inbox__row {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius);
  border-bottom: 1px solid var(--color-paper-tint);
  animation: inbox-in 0.5s var(--ease-out);
}
@keyframes inbox-in { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.inbox__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--outlook-blue); color: var(--color-paper);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.72rem; flex: none; }
.inbox__meta { flex: 1; min-width: 0; }
.inbox__meta .name { font-weight: 700; font-size: 0.85rem; color: #1B2B36; }
.inbox__meta .subject { font-size: 0.78rem; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox__qualified {
  flex: none; font-size: 0.68rem; font-weight: 700; color: var(--color-accent-ink); background: var(--color-accent-soft);
  border-radius: 4px; padding: 0.15rem 0.45rem; opacity: 0; transform: scale(0.8);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.inbox__row.is-qualified .inbox__qualified { opacity: 1; transform: scale(1); }
@media (max-width: 480px) { .inbox__body { grid-template-columns: 100px 1fr; } .inbox__folder { font-size: 0.7rem; padding: 0.5rem var(--space-2); } }


/* 7) MECHANISMUS Schritt 1 — "Markt-Scan" (replaces the old plain placeholder box) */
.mapscan-illustration {
  background: radial-gradient(circle at 30% 20%, #16261F 0%, #0E1712 70%, #0A100C 100%);
  border-color: #1E2E26;
}
.mapscan-illustration .scan-grid {
  position: absolute; inset: 14% 10%; display: grid;
  grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(4, 1fr); gap: 9%;
}
.mapscan-illustration .scan-cell { position: relative; border-radius: 3px; background: rgba(143,216,176,0.09); }
.mapscan-illustration .scan-cell.hit {
  background: rgba(143,216,176,0.09);
  animation: cell-hit 4s var(--ease-out) infinite; animation-delay: var(--delay, 0s); animation-play-state: paused;
}
.mapscan-illustration.is-active .scan-cell.hit { animation-play-state: running; }
@keyframes cell-hit {
  0% { background: rgba(143,216,176,0.09); box-shadow: none; }
  8% { background: var(--color-accent); box-shadow: 0 0 10px 1px rgba(143,216,176,0.7); }
  40% { background: var(--color-accent); box-shadow: 0 0 10px 1px rgba(143,216,176,0.5); }
  60% { background: rgba(143,216,176,0.28); box-shadow: none; }
  100% { background: rgba(143,216,176,0.28); box-shadow: none; }
}
.mapscan-illustration .scan-beam {
  position: absolute; left: 10%; right: 10%; height: 18%; top: -25%;
  background: linear-gradient(180deg, transparent, rgba(143,216,176,0.3), transparent);
  animation: scan-move 4s linear infinite; animation-play-state: paused;
}
.mapscan-illustration.is-active .scan-beam { animation-play-state: running; }
@keyframes scan-move { from { top: -25%; } to { top: 100%; } }
.mapscan-illustration .mapscan-caption {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  font-size: 0.68rem; font-weight: 600; color: #A9E4C3; background: rgba(10,16,12,0.75);
  border: 1px solid rgba(143,216,176,0.25); border-radius: 999px; padding: 0.2rem 0.7rem; white-space: nowrap;
}

/* 8) DAS ERGEBNIS — "Kandidaten-Reise" (replaces the old plain progress bars) */
.journey-illustration { aspect-ratio: unset; padding: var(--space-7) var(--space-5) var(--space-6); }
.journey-zones { display: flex; margin-bottom: var(--space-7); }
.journey-zones span {
  flex: 1; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-muted); text-align: center;
}
.journey-track-wrap { position: relative; }
.journey-track { position: relative; height: 3px; background: var(--color-line); border-radius: 999px; }
.journey-track::before, .journey-track::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-line);
}
.journey-track::before { left: 33.33%; }
.journey-track::after { left: 66.66%; }
.journey-candidate {
  position: absolute; top: 50%; left: 4%; width: 34px; height: 34px; margin-top: -17px; margin-left: -17px;
  border-radius: 50%; background: var(--color-paper); border: 2px solid var(--color-ink); color: var(--color-ink);
  display: flex; align-items: center; justify-content: center; z-index: 3;
  animation: journey-move 8s var(--ease-out) infinite; animation-play-state: paused;
}
.journey-candidate svg { width: 16px; height: 16px; }
.journey-illustration.is-active .journey-candidate { animation-play-state: running; }
@keyframes journey-move {
  0% { left: 4%; opacity: 0; border-color: var(--color-ink); box-shadow: none; }
  3% { opacity: 1; }
  45% { left: 90%; border-color: var(--color-ink); box-shadow: none; }
  52% { border-color: var(--color-accent-ink); box-shadow: 0 0 0 4px var(--color-accent-soft); }
  92% { left: 90%; opacity: 1; border-color: var(--color-accent-ink); box-shadow: 0 0 0 4px var(--color-accent-soft); }
  97% { left: 90%; opacity: 0; border-color: var(--color-accent-ink); box-shadow: 0 0 0 4px var(--color-accent-soft); }
  100% { left: 4%; opacity: 0; border-color: var(--color-ink); box-shadow: none; }
}
.journey-badge {
  position: absolute; top: 50%; display: flex; align-items: center; gap: 4px;
  font-size: 0.68rem; font-weight: 700; padding: 0.3rem 0.6rem; border-radius: 999px; white-space: nowrap;
  opacity: 0; animation-duration: 8s; animation-timing-function: var(--ease-out); animation-iteration-count: infinite;
  animation-play-state: paused;
}
.journey-illustration.is-active .journey-badge { animation-play-state: running; }
.journey-badge--us {
  left: 38%; background: var(--color-accent-ink); color: var(--color-paper);
  transform: translate(-50%, -56px); animation-name: journey-badge-us;
}
.journey-badge--others {
  left: 84%; background: var(--color-paper); color: var(--color-muted); border: 1px solid var(--color-line);
  transform: translate(-50%, 26px); animation-name: journey-badge-others;
}
@keyframes journey-badge-us {
  0%, 18% { opacity: 0; transform: translate(-50%, -56px); }
  24% { opacity: 1; transform: translate(-50%, -30px); }
  92% { opacity: 1; transform: translate(-50%, -30px); }
  97%, 100% { opacity: 0; transform: translate(-50%, -56px); }
}
@keyframes journey-badge-others {
  0%, 42% { opacity: 0; transform: translate(-50%, 26px); }
  48% { opacity: 1; transform: translate(-50%, 30px); }
  92% { opacity: 1; transform: translate(-50%, 30px); }
  97%, 100% { opacity: 0; transform: translate(-50%, 26px); }
}
.journey-badge--others .avatars { display: flex; }
.journey-badge--others .avatars span {
  width: 14px; height: 14px; border-radius: 50%; background: #C7CBC8; border: 1.5px solid var(--color-paper);
  margin-left: -5px;
}
.journey-badge--others .avatars span:first-child { margin-left: 0; }

/* Count-up target */
[data-countup] { font-variant-numeric: tabular-nums; }