/* =========================================================
   convi MEDIA – Interaktionssystem
   Wiederverwendbar für alle neuen Seiten. Nur transform und opacity werden animiert.
   Hover-Effekte nur auf Geräten mit echter Maus; Tastatur bekommt dieselben Zustände
   über :focus-visible / :focus-within. prefers-reduced-motion schaltet alles ab.
   Tokens:
     --mr-ease:   ruhige Ease-out-Kurve
     --mr-dur-s:  kurze Zustände (Hover/Fokus)
     --mr-dur-m:  Reveals
     --mr-rv-*:   Scroll-Reveals (Abschnitte / Karten), gemeinsam für Startseite und Leistungsseiten
========================================================= */

:root {
  --mr-ease: cubic-bezier(.2, .7, .2, 1);
  --mr-dur-s: 260ms;
  --mr-dur-m: 800ms; /* = --mr-rv-dur */
  --mr-rv-ease: cubic-bezier(.22, 1, .36, 1);
  --mr-rv-fade: cubic-bezier(.33, 0, .2, 1);
  --mr-rv-dur: 800ms;
  --mr-rv-shift: 14px;
  --mr-rv-dur-card: 650ms;
  --mr-rv-shift-card: 12px;
}

/* ---------- A. Karten (Leistungen, Probleme, Feature) ---------- */

.mr-hv2-card.e-con {
  isolation: isolate;
}

/* Licht unter der Karte: folgt auf Desktop leicht dem Mauszeiger (motion.js setzt --mx/--my) */
.mr-hv2-problem__card.e-con::after,
.mr-hv2-service.e-con::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 260px;
  height: 260px;
  margin: -130px 0 0 -130px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47,124,255,.22), rgba(124,60,255,.10) 55%, transparent);
  opacity: 0;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: opacity var(--mr-dur-s) ease;
  pointer-events: none;
}

.mr-hv2-problem__card.e-con,
.mr-hv2-service.e-con {
  --mx: 160px;
  --my: 0px;
  overflow: hidden;
}

/* Rahmen-Glow als eigene Ebene, damit nur opacity animiert wird */
.mr-hv2-problem__card.e-con::before,
.mr-hv2-service.e-con::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(143,182,255,.32), 0 18px 50px rgba(47,124,255,.14);
  opacity: 0;
  transition: opacity var(--mr-dur-s) ease;
  pointer-events: none;
}

.mr-hv2-card__icon .elementor-icon {
  transition: transform var(--mr-dur-s) var(--mr-ease);
}

@media (hover: hover) and (pointer: fine) {
  .mr-hv2-problem__card.e-con:hover,
  .mr-hv2-service.e-con:hover {
    transform: translateY(-4px);
  }

  .mr-hv2-problem__card.e-con:hover::after,
  .mr-hv2-service.e-con:hover::after,
  .mr-hv2-problem__card.e-con:hover::before,
  .mr-hv2-service.e-con:hover::before {
    opacity: 1;
  }

  .mr-hv2-card.e-con:hover .mr-hv2-card__icon .elementor-icon {
    transform: translateY(-2px) rotate(-4deg);
  }
}

/* Tastatur: gleicher Zustand, sobald ein Link in der Karte fokussiert ist */
.mr-hv2-service.e-con:has(a:focus-visible),
.mr-hv2-problem__card.e-con:has(a:focus-visible) {
  transform: translateY(-4px);
}

.mr-hv2-service.e-con:has(a:focus-visible)::before,
.mr-hv2-problem__card.e-con:has(a:focus-visible)::before {
  opacity: 1;
}

/* Kartenbewegung selbst (überschreibt die alte Hover-Regel auf Touch-Geräten) */
@media (hover: none), (pointer: coarse) {
  .mr-hv2-card.e-con:hover {
    transform: none;
  }
}

/* ---------- B. Referenzen / Projektkarten ---------- */

.mr-hv2-project__media.e-con {
  isolation: isolate;
}

.mr-hv2-project__img img {
  transform-origin: 50% 0;
  transition: transform .9s var(--mr-ease) !important;
}

/* Overlay mit Hinweis, rein dekorativ: dieselbe Information steht immer auch im Kartentext */
.mr-hv2-project__media.e-con::after {
  content: "Projekt live ansehen";
  position: absolute;
  z-index: 2;
  left: 16px;
  bottom: 16px;
  padding: 9px 14px;
  border-radius: 999px;
  padding-right: 36px;
  border: 1px solid rgba(255,255,255,.18);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") right 14px center / 13px no-repeat, rgba(7,11,22,.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font: 650 .85rem/1 "Inter", "Helvetica Neue", Arial, sans-serif;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--mr-dur-s) ease, transform var(--mr-dur-s) var(--mr-ease);
  pointer-events: none;
}

/* motion.js übernimmt die Kategorie der Karte (z. B. „Handwerk · Trittau") in den Hinweis */
.mr-hv2-project__media.e-con[data-mr-cat]::after {
  content: attr(data-mr-cat);
}

/* Klick auf das Bild öffnet dasselbe Ziel wie der Kartenlink (nur Maus; Tastatur nutzt den Link) */
.mr-hv2-project__media.is-linked {
  cursor: pointer;
}

.mr-hv2-project__media.e-con::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 45%, rgba(7,11,22,.55));
  opacity: 0;
  transition: opacity var(--mr-dur-s) ease;
  pointer-events: none;
}

.mr-hv2-project .mr-hv2-link .elementor-button-content-wrapper::after {
  transition: transform var(--mr-dur-s) var(--mr-ease);
}

@media (hover: hover) and (pointer: fine) {
  /* Screenshot gleitet leicht nach oben und zoomt dezent: wirkt wie ein Blick weiter in die Seite */
  .mr-hv2-project.e-con:hover .mr-hv2-project__img img {
    transform: scale(1.045) translateY(-2.5%);
  }

  .mr-hv2-project.e-con:hover .mr-hv2-project__media.e-con::after,
  .mr-hv2-project.e-con:hover .mr-hv2-project__media.e-con::before {
    opacity: 1;
    transform: none;
  }

  .mr-hv2-project.e-con:hover .mr-hv2-link .elementor-button-content-wrapper::after {
    transform: translate(2px, -2px);
  }
}

.mr-hv2-project.e-con:has(a:focus-visible) {
  border-color: rgba(143,182,255,.4);
}

.mr-hv2-project.e-con:has(a:focus-visible) .mr-hv2-project__img img {
  transform: scale(1.03);
}

/* ---------- C. Prozess: Linie zeichnet sich beim Scrollen, aktueller Schritt leuchtet ---------- */

/* motion.js setzt --tl-progress (0..1) und .is-live; ohne JS bleibt die Linie voll sichtbar */
.mr-hv2-timeline.is-live.e-con::after {
  transform: scaleX(var(--tl-progress, 0)) !important;
  transition: transform var(--mr-rv-dur) var(--mr-rv-ease) !important;
}

.mr-hv2-step__num .elementor-heading-title {
  transition: transform var(--mr-dur-s) var(--mr-ease);
}

.mr-hv2-timeline.is-live .mr-hv2-step .mr-hv2-step__num .elementor-heading-title {
  color: #8f9bb4;
}

.mr-hv2-timeline.is-live .mr-hv2-step.is-done .mr-hv2-step__num .elementor-heading-title {
  color: #fff;
}

.mr-hv2-timeline.is-live .mr-hv2-step.is-current .mr-hv2-step__num .elementor-heading-title {
  transform: scale(1.08);
  box-shadow: 0 0 0 8px var(--mr-bg), 0 0 0 9px rgba(143,182,255,.35), 0 12px 36px rgba(47,124,255,.45);
}

.mr-hv2-timeline.is-live .mr-hv2-step .mr-hv2-h3 .elementor-heading-title {
  transition: color var(--mr-dur-s) ease;
  color: #c9d3e8;
}

.mr-hv2-timeline.is-live .mr-hv2-step.is-done .mr-hv2-h3 .elementor-heading-title {
  color: #fff;
}

@media (max-width: 1024px) {
  .mr-hv2-timeline.is-live.e-con::after {
    transform: scaleY(var(--tl-progress, 0)) !important;
    transition: transform .15s linear !important;
  }
}

/* ---------- D. Section-Reveals (nur größere Blöcke, nur mit JS, nur unterhalb des Startbildschirms) ---------- */

.mr-rv {
  opacity: 0;
  transform: translate3d(0, var(--mr-rv-shift), 0);
  transition: opacity var(--mr-rv-dur) var(--mr-rv-fade), transform var(--mr-rv-dur) var(--mr-rv-ease);
  transition-delay: var(--rv-delay, 0ms);
}

/* Karten in Gruppen: etwas kürzer und kleiner, nacheinander (Stagger setzt motion.js).
   Höhere Spezifität nötig, weil Karten und Projektkarten eigene transition-Regeln haben
   (ohne opacity): sonst würden sie nur kurz „aufploppen". */
.mr-rv.mr-rv--card.e-con {
  --mr-rv-dur: var(--mr-rv-dur-card);
  --mr-rv-shift: var(--mr-rv-shift-card);
  opacity: 0;
  transform: translate3d(0, var(--mr-rv-shift), 0);
  transition: opacity var(--mr-rv-dur) var(--mr-rv-fade), transform var(--mr-rv-dur) var(--mr-rv-ease);
  transition-delay: var(--rv-delay, 0ms);
}

.mr-rv.mr-rv--card.e-con.is-in {
  opacity: 1;
  transform: none;
}

.mr-rv.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- E. Dezente Markenbewegung (nur Feature-Karte und Abschluss-CTA) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .mr-hv2-feature.e-con::before {
    animation: mrDrift 16s ease-in-out infinite alternate;
  }

  .mr-hv2-final__panel.e-con::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -40%;
    left: -20%;
    width: 60%;
    height: 120%;
    background: radial-gradient(closest-side, rgba(47,124,255,.16), transparent);
    animation: mrDrift 20s ease-in-out infinite alternate;
    pointer-events: none;
  }

  .mr-hv2-final__panel.e-con > * {
    position: relative;
    z-index: 1;
  }
}

@keyframes mrDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-60px, 40px, 0); }
}

/* ---------- Reduzierte Bewegung: alles statisch, alle Inhalte sichtbar ---------- */

@media (prefers-reduced-motion: reduce) {
  .mr-rv,
  .mr-rv.is-in,
  .mr-rv.mr-rv--card.e-con,
  .mr-rv.mr-rv--card.e-con.is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .mr-hv2-card.e-con,
  .mr-hv2-card.e-con:hover,
  .mr-hv2-project__img img,
  .mr-hv2-card__icon .elementor-icon,
  .mr-svc-icon svg {
    transform: none !important;
    transition: none !important;
  }

  .mr-hv2-timeline.is-live.e-con::after {
    transform: none !important;
  }

  .mr-hv2-project__media.e-con::after,
  .mr-hv2-project__media.e-con::before {
    transition: none !important;
  }
}