/* ============================================================
   Kündigungsschutz – visuelle Grafiken
   • "Wer ist geschützt?"            (animierte Illustrationen)
   • "Kündigungsarten im Überblick"  (Icon-Badges pro Kachel)

   Wichtig: Einmal-Animationen werden über
   `.reveal.is-visible .xxx` getriggert, damit sie nicht
   bereits abgespielt sind, bevor die Karte im Viewport erscheint.
   ============================================================ */

/* ----------------------------------------------------------
   1) Wer ist geschützt — illustrationen
   ---------------------------------------------------------- */
.protect-illustration {
  position: relative;
  margin-bottom: 1.6rem;
  padding: 1rem 1.25rem;
  border-radius: 16px;
  background: linear-gradient(135deg,
              rgba(20, 33, 61, 0.04) 0%,
              rgba(212, 179, 106, 0.08) 100%);
  border: 1px solid rgba(20, 33, 61, 0.06);
  overflow: hidden;
  isolation: isolate;
}
.protect-illustration::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(212, 179, 106, 0.10), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(20, 33, 61, 0.06),  transparent 50%);
  z-index: -1;
  pointer-events: none;
}
.protect-illustration svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
}

/* Make the inner SVGs render at a comfortable larger aspect.
   We give the wrapper a min-height so the SVG scales up to fill it
   even on tall card layouts. */
.protect-illustration.timeline-gauge {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.protect-illustration.timeline-gauge svg {
  max-height: 320px;
  width: 100%;
}
.protect-illustration.orbital-cluster {
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.protect-illustration.orbital-cluster svg {
  max-height: 360px;
  width: 100%;
}

/* ---------- TIMELINE GAUGE (Karte 1) ---------- */

/* Bar starts collapsed left edge. Triggered when .reveal becomes visible. */
.timeline-gauge .pg-bar {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
}
.reveal.is-visible .timeline-gauge .pg-bar {
  animation: pg-fill 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}
@keyframes pg-fill {
  to { transform: scaleX(1); }
}

/* Marker pops in once the bar finishes. */
.timeline-gauge .pg-marker {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(0);
}
.reveal.is-visible .timeline-gauge .pg-marker {
  animation: pg-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.7s forwards;
}
@keyframes pg-pop {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

/* "11th employee" gold dot pulses always (infinite loop). */
.timeline-gauge .pg-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: pg-pulse 2.4s ease-in-out infinite;
}
@keyframes pg-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.35); opacity: 0.75; }
}

/* ----- Hover milestones along the bar ----- */
.timeline-gauge .gauge-mile {
  cursor: pointer;
}
.timeline-gauge .gauge-mile .gm-marker {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.timeline-gauge .gauge-mile:hover .gm-marker,
.timeline-gauge .gauge-mile:focus-within .gm-marker {
  transform: scale(1.18);
}
.timeline-gauge .gauge-mile .gm-glow {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s ease, transform 0.4s ease;
}
.timeline-gauge .gauge-mile:hover .gm-glow,
.timeline-gauge .gauge-mile:focus-within .gm-glow {
  opacity: 1;
  transform: scale(1);
}
.timeline-gauge .gm-label,
.timeline-gauge .gs-label,
.orbital-cluster .orb-label {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(0.85) translateY(-4px);
  transition: opacity 0.25s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.timeline-gauge .gm-label .gm-label-rect,
.timeline-gauge .gs-label .gm-label-rect {
  filter: drop-shadow(0 4px 10px rgba(20, 33, 61, 0.25));
}
.timeline-gauge .gauge-mile:hover .gm-label,
.timeline-gauge .gauge-mile:focus-within .gm-label,
.timeline-gauge .gauge-staff:hover .gs-label,
.timeline-gauge .gauge-staff:focus-within .gs-label {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Staff row hover */
.timeline-gauge .gauge-staff {
  cursor: pointer;
}
.timeline-gauge .gauge-staff:hover .gs-icons circle,
.timeline-gauge .gauge-staff:focus-within .gs-icons circle {
  fill: rgba(20, 33, 61, 0.75);
  transition: fill 0.3s ease;
}

/* Calendar icon at start — gentle tick animation */
.timeline-gauge .gauge-clock {
  transform-box: fill-box;
  transform-origin: center;
  animation: clock-tick 4s ease-in-out infinite;
}
@keyframes clock-tick {
  0%, 30%, 100% { transform: rotate(0deg); }
  35%           { transform: rotate(15deg); }
  40%           { transform: rotate(0deg); }
  45%           { transform: rotate(15deg); }
  50%           { transform: rotate(0deg); }
}

/* ---------- ORBITAL CLUSTER (Karte 2) ---------- */

/* Outer ring slowly rotates. Always animating. */
.orbital-cluster .orb-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: orb-rotate 38s linear infinite;
}
@keyframes orb-rotate {
  to { transform: rotate(360deg); }
}

/* Center shield "breathes". */
.orbital-cluster .orb-center {
  transform-box: fill-box;
  transform-origin: center;
  animation: orb-breathe 3.2s ease-in-out infinite;
}
@keyframes orb-breathe {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(212,179,106,0.0)); }
  50%      { transform: scale(1.04); filter: drop-shadow(0 0 8px rgba(212,179,106,0.45)); }
}

/* Each protected-group icon bobs gently, staggered via per-item custom props. */
.orbital-cluster .orb-icon {
  transform-box: fill-box;
  transform-origin: center;
  animation: orb-bob var(--orb-dur, 4s) ease-in-out var(--orb-delay, 0s) infinite;
}
@keyframes orb-bob {
  0%, 100% { transform: translateY(0)    scale(1);    }
  50%      { transform: translateY(-3px) scale(1.06); }
}

/* Hover label — fixed under/above each icon, hidden by default. */
.orbital-cluster .orb-item {
  cursor: pointer;
}
.orbital-cluster .orb-item .orb-icon .orb-ring-hover {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.orbital-cluster .orb-label .orb-label-rect {
  filter: drop-shadow(0 4px 10px rgba(20, 33, 61, 0.25));
}
.orbital-cluster .orb-item:hover .orb-label,
.orbital-cluster .orb-item:focus-within .orb-label {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.orbital-cluster .orb-item:hover .orb-icon .orb-ring-hover,
.orbital-cluster .orb-item:focus-within .orb-icon .orb-ring-hover {
  opacity: 1;
}

/* Pause the bob on hover so the user can see the label clearly */
.orbital-cluster .orb-item:hover .orb-icon,
.orbital-cluster .orb-item:focus-within .orb-icon {
  animation-play-state: paused;
}

/* Make sure cards reveal at least once even on systems where IntersectionObserver
   fires after the animation would otherwise have started. */

/* ----------------------------------------------------------
   2) Kündigungsarten — icon badges
   ---------------------------------------------------------- */
.service-tile {
  position: relative;
  overflow: hidden;
}

.kuendigung-icon {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  background: linear-gradient(135deg,
              rgba(20, 33, 61, 0.06)   0%,
              rgba(212, 179, 106, 0.16) 100%);
  border: 1px solid rgba(212, 179, 106, 0.25);
  color: #14213D;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.55s ease,
              border-color 0.4s ease,
              color 0.4s ease;
  z-index: 1;
}
.kuendigung-icon::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(212,179,106,0.4), rgba(20,33,61,0.2));
  filter: blur(12px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.5s ease;
}
.kuendigung-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.service-tile:hover .kuendigung-icon,
.service-tile:focus-within .kuendigung-icon {
  transform: translateY(-2px) rotate(-3deg);
  background: linear-gradient(135deg, #14213D 0%, #1f3258 100%);
  border-color: transparent;
  color: #D4B36A;
}
.service-tile:hover .kuendigung-icon::before,
.service-tile:focus-within .kuendigung-icon::before {
  opacity: 0.7;
}
.service-tile:hover .kuendigung-icon svg,
.service-tile:focus-within .kuendigung-icon svg {
  transform: scale(1.08) rotate(6deg);
}

/* Per-icon idle micro-animations */
.kuendigung-icon[data-variant="lightning"] svg {
  transform-box: fill-box; transform-origin: center;
  animation: ki-flash 4.8s ease-in-out infinite;
}
@keyframes ki-flash {
  0%, 92%, 100% { opacity: 1;   transform: rotate(0);                  }
  94%           { opacity: 0.4; transform: rotate(-8deg) scale(1.04);  }
  96%           { opacity: 1;   transform: rotate(2deg)  scale(1.04);  }
}
.kuendigung-icon[data-variant="heartbeat"] svg {
  transform-box: fill-box; transform-origin: center;
  animation: ki-beat 1.8s ease-in-out infinite;
}
@keyframes ki-beat {
  0%, 60%, 100% { transform: scale(1);    }
  30%           { transform: scale(1.08); }
}
.kuendigung-icon[data-variant="warning"] svg {
  transform-box: fill-box; transform-origin: center;
  animation: ki-wobble 4s ease-in-out infinite;
}
@keyframes ki-wobble {
  0%, 80%, 100% { transform: rotate(0);     }
  86%           { transform: rotate(-4deg); }
  92%           { transform: rotate(4deg);  }
}
.kuendigung-icon[data-variant="swap"] svg {
  transform-box: fill-box; transform-origin: center;
  animation: ki-swap 5s ease-in-out infinite;
}
@keyframes ki-swap {
  0%, 45%, 100% { transform: translateX(0);      }
  50%           { transform: translateX(-1.5px); }
  55%           { transform: translateX(1.5px);  }
}
.kuendigung-icon[data-variant="handshake"] svg {
  transform-box: fill-box; transform-origin: center;
  animation: ki-shake 4.5s ease-in-out infinite;
}
@keyframes ki-shake {
  0%, 80%, 100% { transform: translateY(0);                       }
  85%           { transform: translateY(-1.5px) rotate(-2deg);    }
  90%           { transform: translateY(0)     rotate(2deg);      }
}
.kuendigung-icon[data-variant="building"] svg {
  transform-box: fill-box; transform-origin: center;
  animation: ki-fall 6s ease-in-out infinite;
}
@keyframes ki-fall {
  0%, 100% { transform: translateY(0);   }
  50%      { transform: translateY(2px); }
}

/* Decorative corner glow on hover */
.service-tile::after {
  content: "";
  position: absolute;
  top: -20%;
  right: -20%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(212, 179, 106, 0.18) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
  z-index: 0;
}
.service-tile:hover::after,
.service-tile:focus-within::after { opacity: 1; }
.service-tile > * { position: relative; z-index: 1; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .timeline-gauge .pg-bar,
  .timeline-gauge .pg-marker,
  .timeline-gauge .pg-pulse,
  .orbital-cluster .orb-ring,
  .orbital-cluster .orb-icon,
  .orbital-cluster .orb-center,
  .kuendigung-icon svg {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}