/* ═══════════════════════════════════════════════════════════════════════════
   Essig Elektro — Motion System (client-specific)

   Die vier Dateien des Design-Systems (keyframes, reveals, reduced-motion,
   motion-additions) wurden hier frueher per @import geladen. Seit 28.09.2026
   listet sie stattdessen `essig_enqueue_assets()` in functions.php — mit
   Versionsangabe, weil der Hostinger-CDN unversionierte URLs aus dem Cache
   ausliefert (siehe Begruendung dort). Die Reihenfolge bleibt gleich; die
   Dateien werden direkt VOR dieser Datei eingebunden.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   Essig Elektro — Specific Element Animations
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero badge ─────────────────────────────────────────────────────── */

.c-hero__badge {
  animation: essig-float-once 0.5s 0.7s var(--motion-ease-out) both;
}

/* ── Canvas arrival ─────────────────────────────────────────────────── */

.c-hero__canvas {
  animation: essig-canvas-arrive 0.8s 0s var(--motion-ease-smooth) both;
}

/* ── Kicker-Marke ───────────────────────────────────────────────────── */

/* Seit 27.09.2026 ein "+" statt eines Strichs. Die alte Animation
   essig-draw-line zieht per scaleX in die Breite — bei einem Plus wuerde
   das die Figur verzerren. Jetzt ein Einblenden mit leichter Vergroesserung. */
.c-hero__kicker-line,
.c-page-header__kicker-line,
.c-region-map__kicker-line {
  transform-origin: center;
  animation: essig-kicker-plus 0.45s 0.15s var(--motion-ease-out) both;
}

/* ── Process step sequence ──────────────────────────────────────────── */

.c-process-steps.essig-sequence.is-visible .c-process-step:nth-child(1) .c-process-step__number { animation: essig-number-reveal 0.5s 0.05s var(--motion-ease-out) both; }
.c-process-steps.essig-sequence.is-visible .c-process-step:nth-child(2) .c-process-step__number { animation: essig-number-reveal 0.5s 0.18s var(--motion-ease-out) both; }
.c-process-steps.essig-sequence.is-visible .c-process-step:nth-child(3) .c-process-step__number { animation: essig-number-reveal 0.5s 0.31s var(--motion-ease-out) both; }

.c-process-steps.essig-sequence.is-visible .c-process-step:nth-child(1)::before { animation: essig-dot-pulse 0.5s 0.05s var(--motion-ease-out) both; }
.c-process-steps.essig-sequence.is-visible .c-process-step:nth-child(2)::before { animation: essig-dot-pulse 0.5s 0.18s var(--motion-ease-out) both; }
.c-process-steps.essig-sequence.is-visible .c-process-step:nth-child(3)::before { animation: essig-dot-pulse 0.5s 0.31s var(--motion-ease-out) both; }

/* ── Service grid numbers — sequential bounce on scroll ─────────────── */

.essig-animate.is-visible .c-services-grid .c-service-cell:nth-child(1) .c-service-cell__number { animation: essig-number-reveal 0.5s 0.05s var(--motion-ease-out) both; }
.essig-animate.is-visible .c-services-grid .c-service-cell:nth-child(2) .c-service-cell__number { animation: essig-number-reveal 0.5s 0.12s var(--motion-ease-out) both; }
.essig-animate.is-visible .c-services-grid .c-service-cell:nth-child(3) .c-service-cell__number { animation: essig-number-reveal 0.5s 0.19s var(--motion-ease-out) both; }
.essig-animate.is-visible .c-services-grid .c-service-cell:nth-child(4) .c-service-cell__number { animation: essig-number-reveal 0.5s 0.26s var(--motion-ease-out) both; }
.essig-animate.is-visible .c-services-grid .c-service-cell:nth-child(5) .c-service-cell__number { animation: essig-number-reveal 0.5s 0.33s var(--motion-ease-out) both; }

/* ═══════════════════════════════════════════════════════════════════════════
   Essig Elektro — Hover Interactions
   ═══════════════════════════════════════════════════════════════════════════ */

/* Process steps */
.c-process-step {
  transition: border-color var(--motion-duration-base) var(--motion-ease-out);
}
.c-process-step:hover {
  border-color: var(--color-orange-500);
}

/* Footer CTA buttons */
.c-footer-cta .c-btn {
  transition: transform var(--motion-duration-base) var(--motion-ease-spring),
              background-color var(--motion-duration-fast);
}
.c-footer-cta .c-btn:hover {
  transform: translateX(4px);
}

/* CTA banner buttons */
.c-cta-banner .c-btn {
  transition: transform var(--motion-duration-base) var(--motion-ease-spring),
              background-color var(--motion-duration-fast);
}
.c-cta-banner .c-btn:hover {
  transform: translateX(4px);
}

/* Certification cards */
.c-cert-card {
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out),
              border-color var(--motion-duration-fast) var(--motion-ease-out);
}
.c-cert-card:hover {
  background-color: var(--color-surface-muted);
}

/* Value cards */
.c-value-card {
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out);
}
.c-value-card:hover {
  background-color: var(--color-surface-muted);
}

/* Team cards */
.c-team-card {
  transition: transform var(--motion-duration-base) var(--motion-ease-out),
              box-shadow var(--motion-duration-base) var(--motion-ease-out);
}
.c-team-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-2);
}

/* Feature highlights */
.c-feature-highlight {
  transition: background-color var(--motion-duration-base) var(--motion-ease-out),
              transform var(--motion-duration-base) var(--motion-ease-out);
}
.c-feature-highlight:hover {
  background-color: var(--color-surface-muted);
  transform: translateY(-1px);
}

/* Contact items */
.c-contact-item {
  transition: border-color var(--motion-duration-fast) var(--motion-ease-out),
              box-shadow var(--motion-duration-fast) var(--motion-ease-out);
}
.c-contact-item:hover {
  border-color: var(--color-orange-300);
  box-shadow: var(--elevation-1);
}

/* Job cards */
.c-job-card__action {
  transition: transform var(--motion-duration-base) var(--motion-ease-spring);
}
.c-job-card__action:hover {
  transform: translateX(4px);
}

/* Job benefits */
.c-jobs-benefit {
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out);
}
.c-jobs-benefit:hover {
  background-color: var(--color-surface-muted);
}

/* Unified icon hover scale */
.c-service-cell__icon,
.c-value-card__icon,
.c-cert-card__icon,
.c-contact-item__icon,
.c-jobs-benefit__icon,
.c-jobs-empty__icon {
  transition: transform var(--motion-duration-fast) var(--motion-ease-spring);
}

.c-service-cell:hover .c-service-cell__icon,
.c-value-card:hover .c-value-card__icon,
.c-cert-card:hover .c-cert-card__icon,
.c-contact-item:hover .c-contact-item__icon,
.c-jobs-benefit:hover .c-jobs-benefit__icon,
.c-jobs-empty:hover .c-jobs-empty__icon {
  transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Essig Elektro — Reduced Motion (client-specific elements)
   Framework classes are handled by design-system/motion/reduced-motion.css
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .c-hero__badge,
  .c-hero__kicker-line,
  .c-page-header__kicker-line,
  .c-region-map__kicker-line,
  .c-hero__canvas {
    animation: none;
    opacity: 1;
  }

  .c-hero__canvas {
    clip-path: none;
  }

  .essig-sequence .c-process-step__number,
  .essig-sequence .c-process-step::before,
  .essig-animate.is-visible .c-services-grid .c-service-cell__number {
    animation: none;
  }

  .c-service-cell__icon,
  .c-value-card__icon,
  .c-cert-card__icon,
  .c-contact-item__icon,
  .c-jobs-benefit__icon,
  .c-jobs-empty__icon {
    transition: none;
  }

  .c-service-cell:hover .c-service-cell__icon,
  .c-value-card:hover .c-value-card__icon,
  .c-cert-card:hover .c-cert-card__icon,
  .c-contact-item:hover .c-contact-item__icon,
  .c-jobs-benefit:hover .c-jobs-benefit__icon,
  .c-jobs-empty:hover .c-jobs-empty__icon {
    transform: none;
  }

  .c-cta-banner .c-btn:hover,
  .c-footer-cta .c-btn:hover,
  .c-team-card:hover,
  .c-service-cell:hover,
  .c-job-card:hover,
  .c-job-card__action:hover {
    transform: none;
  }
}