/* ============================================================
   Effects Component - Glow, Lift, Card Image Zoom & Gradient Text
   ============================================================
   Shared interaction layer for linked cards and reusable glow utilities.
   Values stay in variables.css:
   --glow, --glow-speed, --glow-ease, --card-lift, --card-img-zoom-*,
   --gradient-text-*.
   ============================================================ */

/* ── Verlaufs-Text ────────────────────────────────────────────
   Der Text selbst maskiert einen Farbverlauf (background-clip:text). Die vier
   Zeilen, die den Effekt AUSMACHEN, stehen ab jetzt genau HIER — vorher lagen
   sie doppelt in gallery.css (Kategorie-Titel) und main.css (.number-figure).

   Der Verlauf ist ein Parameter (--text-gradient), kein Teil der Technik: die
   beiden Konsumenten führen bewusst UNTERSCHIEDLICHE Verläufe (roter Akzent vs.
   Navy). Default = Marken-Akzent. Werte: variables.css --gradient-text-*.

   `color` bleibt in den Konsumenten stehen: fällt background-clip aus (alte
   Engines, Print ohne Hintergrund-Druck), rendert der Text in Volltonfarbe
   statt unsichtbar zu werden.

   Neuer Konsument? Klasse `u-text-gradient` ins Markup — oder den Selektor hier
   ergänzen, wenn die Komponente ihre Klasse schon mitbringt (Muster wie .u-glow). */
.u-text-gradient,
.rubric__title,
.number-figure {
  background: var(--text-gradient, var(--gradient-text-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Kennzahlen führen den Navy-Verlauf (Fläche), nicht den roten Akzent. */
.number-figure {
  --text-gradient: var(--gradient-text-primary);
}

/* Global transition consumers */
:is(
  .service-card,
  .machinery-card,
  .job-card,
  .branchen-card,
  .contact-sidebar-panel,
  .contact-quick-panel,
  .contact-form-wrap,
  .contact-map-section,
  .contact-person-card,
  .application-form-wrap,
  .legal-download-box
) {
  transition:
    transform var(--transition-base),
    box-shadow var(--glow-speed) var(--glow-ease),
    border-color var(--glow-speed) var(--glow-ease),
    background-color var(--glow-speed) var(--glow-ease);
}

/* Pseudo-halo hosts with visible overflow */
.u-glow,
.service-card,
.branchen-card {
  position: relative;
  isolation: isolate;
}

.u-glow::after,
.service-card:has(a.service-card-link[href]:not(.service-card-link--disabled))::after,
.branchen-card:has(a[href])::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--glow);
  opacity: 0;
  transition: opacity var(--glow-speed) var(--glow-ease);
  pointer-events: none;
}

.u-glow:is(:hover, :focus-within)::after,
.service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)):is(:hover, :focus-within)::after,
.branchen-card:has(a[href]):is(:hover, :focus-within)::after {
  opacity: 1;
}

/* Keep hovered cards above neighbors so the halo is not clipped visually. */
.u-glow:is(:hover, :focus-within),
.service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)):is(:hover, :focus-within),
.branchen-card:has(a[href]):is(:hover, :focus-within) {
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .u-glow::after,
  .service-card::after,
  .branchen-card::after {
    transition: none;
  }
}

/* Shared card image zoom */
.service-card-img img,
.job-card-media img,
.machinery-card-img img,
.story-card-img {
  transition: transform var(--card-img-zoom-speed) var(--card-img-zoom-ease);
}

.service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)):is(:hover, :focus-within) .service-card-img img,
.job-card:is(:hover, :focus-within) .job-card-media img,
.machinery-card:has(a[href]):is(:hover, :focus-within) .machinery-card-img img,
.story-card:is(:hover, :focus-visible) .story-card-img {
  transform: translateZ(0) scale(var(--card-img-zoom));
}

@media (prefers-reduced-motion: reduce) {
  .service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)):is(:hover, :focus-within) .service-card-img img,
  .job-card:is(:hover, :focus-within) .job-card-media img,
  .machinery-card:has(a[href]):is(:hover, :focus-within) .machinery-card-img img,
  .story-card:is(:hover, :focus-visible) .story-card-img {
    transform: none;
  }
}

/* Reusable interactive link card for new components */
.u-card {
  position: relative;
  isolation: isolate;
}

.u-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--glow);
  opacity: 0;
  transition: opacity var(--glow-speed) var(--glow-ease);
  pointer-events: none;
}

.u-card [data-card-img] {
  transition: transform var(--card-img-zoom-speed) var(--card-img-zoom-ease);
}

.u-card:is(:hover, :focus-within)::after {
  opacity: 1;
}

.u-card:is(:hover, :focus-within) {
  z-index: 1;
}

.u-card:is(:hover, :focus-within) [data-card-img] {
  transform: translateZ(0) scale(var(--card-img-zoom));
}

.u-card:focus-within {
  transform: var(--card-lift);
}

@media (hover: hover) {
  .u-card:hover {
    transform: var(--card-lift);
  }
}

@media (prefers-reduced-motion: reduce) {
  .u-card::after {
    transition: none;
  }

  .u-card:is(:hover, :focus-within),
  .u-card:is(:hover, :focus-within) [data-card-img] {
    transform: none;
  }
}

/* Keyboard focus lift, available even on non-hover pointers */
:is(
  .job-card,
  .machinery-card:has(a[href]),
  .branchen-card:has(a[href])
):focus-within {
  transform: var(--card-lift);
}

.service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)):focus-within {
  transform: var(--card-lift);
}

@media (hover: hover) {
  .service-card:has(a.service-card-link[href]:not(.service-card-link--disabled))::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background: var(--glow-layer-card);
    transition: opacity var(--glow-speed) var(--glow-ease);
  }

  .service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)) > :not(a.service-card-link):not(.card-stretched-link) {
    position: relative;
    z-index: 1;
  }

  .service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)):is(:hover, :focus-within)::before {
    opacity: var(--glow-layer-opacity);
  }

  :is(
    .job-card,
    .machinery-card:has(a[href]),
    .branchen-card:has(a[href])
  ):is(:hover, :focus-within) {
    transform: var(--card-lift);
  }

  .service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)):is(:hover, :focus-within) {
    transform: var(--card-lift);
    border-color: var(--card-border-hover);
  }

  :is(
    .job-card,
    .contact-person-card,
    .legal-download-box,
    .contact-sidebar-panel,
    .contact-quick-panel,
    .contact-map-section
  ):has(a[href]:is(:hover, :focus-visible)) {
    border-color: color-mix(in srgb, var(--color-accent) 26%, var(--color-border));
    box-shadow: var(--card-shadow-hover-soft), var(--glow-focus-ring);
  }

  .job-card:is(:hover, :focus-within) {
    border-color: var(--card-border-hover-dark);
    box-shadow: var(--card-shadow-hover-dark), var(--glow);
  }

  .machinery-card:has(a[href]):is(:hover, :focus-within) {
    box-shadow: var(--card-shadow-hover), var(--glow);
  }

  .dark-section .service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)):is(:hover, :focus-within) {
    border-color: var(--card-border-hover-dark);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .service-card,
    .machinery-card,
    .job-card,
    .branchen-card,
    .contact-sidebar-panel,
    .contact-quick-panel,
    .contact-form-wrap,
    .contact-map-section,
    .contact-person-card,
    .legal-download-box,
    .application-form-wrap,
    .form-input,
    .form-checkbox,
    .form-upload-zone
  ) {
    transition-duration: 1ms;
  }

  :is(
    .service-card,
    .machinery-card,
    .job-card,
    .branchen-card,
    .contact-person-card,
    .legal-download-box,
    .form-checkbox,
    .form-upload-zone
  ):is(:hover, :focus-within) {
    transform: none;
  }
}