/*!
 * die Druckexperten – Mobile Prozess-/Zahnrad-Scroll-Reveal (Step-Karten)
 * -----------------------------------------------------------------------
 * Verbessert AUSSCHLIESSLICH die mobile/Tablet-Variante der
 * Prozessdarstellung (Originalteil/Zahnrad -> CAD -> 3D-Druck-Bauteil) auf
 * der Startseite. Das Desktop-Verhalten (gepinnte Scroll-Animation,
 * [data-testid="transform-scroll"], .lg:block) bleibt voellig unangetastet:
 * alle Regeln hier greifen nur unterhalb des lg-Breakpoints (<1024px) und
 * nur innerhalb der mobilen Sektion [data-testid="transform-stacked"].
 *
 * Kernidee (Variante 0.3.9, KEINE Sticky-Morph-Stage):
 *   - Die drei Stufen-Karten (Originalteil/Zahnrad -> CAD -> 3D-Druck-Bauteil)
 *     blenden beim Hereinscrollen NACHEINANDER ein (sequenzielles Scroll-Reveal,
 *     Opacity + sanftes Translate/Scale).
 *   - Eine schlanke vertikale Prozess-/Fortschrittslinie in der Mittelachse
 *     waechst mit dem Scrollfortschritt (33 % -> 66 % -> 100 %).
 *   - Die jeweils aktive Karte wird dezent (violetter Glow/Rahmen) hervorgehoben.
 *   - Das erste Bauteil (Zahnrad) dreht sich beim Erscheinen sanft ein, die
 *     CAD-Stufe pulst leicht.
 *
 * GPU-freundlich (nur opacity/transform), kein horizontaler Overflow,
 * respektiert prefers-reduced-motion. Das Zahnrad bleibt durchgehend nur ein
 * Beispiel fuer technische Bauteile (keine Spezialisierung).
 */

@media (max-width: 1023.98px) {
  /* Overflow-Schutz: nichts darf horizontal aus dem Viewport ragen.
   * clip (nicht hidden) verhindert horizontalen Overflow, ohne einen
   * Scroll-Container zu erzeugen. */
  [data-testid="transform-stacked"] {
    overflow-x: clip;
    position: relative;
  }
  [data-testid="transform-stacked"] * {
    max-width: 100%;
  }

  /* Dezenter technischer Hintergrund-Verlauf fuer den Prozessbereich. */
  [data-testid="transform-stacked"]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
      120% 60% at 50% 0%,
      hsl(268 76% 58% / 0.07),
      transparent 70%
    );
    z-index: 0;
  }
  [data-testid="transform-stacked"] > * {
    position: relative;
    z-index: 1;
  }

  /* -------------------------------------------------------------------
   * Karten-Liste: vertikale Prozesslinie liegt als LINKE Randschiene
   * AUSSERHALB des Bild-/Textbereichs.
   *
   * FIX 0.4.2: Bis 0.4.1 lag die Fortschrittslinie in der Mittelachse
   * (left: 50%) und lief dadurch – bei (teil-)transparenter Karten-
   * flaeche – sichtbar quer durch Zahnrad, Bild und Text (siehe mobile
   * Screenshots). Die Linie wird jetzt als schmale Schiene am linken
   * Rand gefuehrt und liegt garantiert nie ueber einem Bauteil-Visual
   * oder ueber Text. Zusaetzlich erhalten die Karten eine eigene, voll
   * deckende Flaeche (siehe .de-reveal-card unten), sodass selbst bei
   * kuenftigen Layoutaenderungen keine Linie durch eine Karte scheint.
   *
   * Padding schafft links Platz fuer die Schiene, ohne horizontalen
   * Overflow zu erzeugen (box-sizing der Karten bleibt erhalten).
   * ----------------------------------------------------------------- */
  .de-reveal-list {
    position: relative;
    /* Schiene sitzt in dieser linken Rinne, klar neben den Karten. */
    padding-left: 1.25rem;
  }
  /* Hintergrund-Schiene der Prozesslinie (volle Hoehe, sehr dezent). */
  .de-reveal-list::before {
    content: "";
    position: absolute;
    top: 0.75rem;
    bottom: 0.75rem;
    left: 0.375rem;
    width: 2px;
    background: hsl(268 76% 58% / 0.16);
    border-radius: 9999px;
    pointer-events: none;
    z-index: 0;
  }
  /* Mitwachsende Fortschrittslinie (Hoehe per JS via --de-progress). */
  .de-reveal-list::after {
    content: "";
    position: absolute;
    top: 0.75rem;
    left: 0.375rem;
    width: 2px;
    height: calc((100% - 1.5rem) * var(--de-progress, 0));
    background: linear-gradient(
      180deg,
      hsl(268 76% 58%),
      hsl(268 76% 70%)
    );
    border-radius: 9999px;
    box-shadow: 0 0 12px hsl(268 76% 58% / 0.45);
    transition: height 360ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 1;
  }
  /* Kleine Stufen-Marker auf der Schiene je Karte (dezent). */
  .de-reveal-card::before {
    content: "";
    position: absolute;
    left: calc(-0.875rem - 1px);
    top: 2.25rem;
    width: 9px;
    height: 9px;
    border-radius: 9999px;
    background: hsl(268 76% 58% / 0.35);
    box-shadow: 0 0 0 3px hsl(268 76% 58% / 0.12);
    transition: background 360ms ease, box-shadow 360ms ease;
    pointer-events: none;
    z-index: 3;
  }
  .de-reveal-card.is-revealed::before {
    background: hsl(268 76% 62%);
    box-shadow: 0 0 10px hsl(268 76% 58% / 0.6);
  }

  /* -------------------------------------------------------------------
   * Stufen-Karten: starten unsichtbar/leicht versetzt und enthuellen sich
   * beim Hereinscrollen nacheinander (sequenzielles Reveal).
   * ----------------------------------------------------------------- */
  .de-reveal-card {
    position: relative;
    z-index: 2;
    /* Eigene, voll deckende Kartenflaeche: selbst falls die Schiene je
     * wieder hinter einer Karte laege, scheint keine Linie durch das
     * Bauteil-Visual oder den Text. */
    background-color: hsl(240 16% 10%);
    opacity: 0;
    transform: translateY(24px) scale(0.985);
    transition:
      opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 360ms ease,
      border-color 360ms ease;
    will-change: opacity, transform;
  }
  .de-reveal-card.is-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* Aktive Karte (aktuelle Stufe) dezent hervorheben. */
  .de-reveal-card.is-active {
    border-color: hsl(268 76% 58% / 0.55) !important;
    box-shadow:
      0 0 0 1px hsl(268 76% 58% / 0.35),
      0 18px 40px -18px hsl(268 76% 58% / 0.55);
  }

  /* -------------------------------------------------------------------
   * Zahnrad/CAD-Bewegung beim Erscheinen.
   * Stufe 0 (Zahnrad): dreht sich sanft ein.
   * Stufe 1 (CAD): pulst leicht.
   * ----------------------------------------------------------------- */
  .de-reveal-card .aspect-square svg,
  .de-reveal-card svg {
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .de-reveal-card[data-stage="0"] svg {
    transform: rotate(-22deg);
  }
  .de-reveal-card[data-stage="0"].is-revealed svg {
    transform: rotate(0deg);
  }
  .de-reveal-card[data-stage="1"].is-active svg {
    animation: de-cad-pulse 2.4s ease-in-out infinite;
  }
  @keyframes de-cad-pulse {
    0%, 100% { transform: scale(1); opacity: 0.92; }
    50%      { transform: scale(1.035); opacity: 1; }
  }
}

/* ===================================================================
 * DESKTOP (>=1024px): Zahnrad-/Visual-Zentren der 3 Stufen exakt
 * deckungsgleich (Ausrichtungs-Haertung).
 * -------------------------------------------------------------------
 * FIX 0.4.2: Die gepinnte Desktop-Prozessanimation blendet die drei
 * Stufen (Originalteil-Zahnrad -> CAD/Massangaben -> fertiges Teil)
 * uebereinander ein. Alle drei Layer teilen sich denselben quadratischen
 * Stage-Container (relative aspect-square) und liegen als absolute
 * Layer (inset-[10%]) uebereinander. Damit die ZENTRALEN Bauteile
 * (Zahnradmitte) exakt deckungsgleich sitzen – und nicht nur die
 * Gesamtbilder mittig sind – wird hier sichergestellt, dass
 *   a) jeder Layer exakt denselben Kasten fuellt (inset 0 relativ zum
 *      gemeinsamen inset-[10%]-Wrapper), und
 *   b) jedes SVG die gleiche quadratische Zeichenflaeche mit zentriertem
 *      Ursprung nutzt (preserveAspectRatio: xMidYMid meet).
 * Das CAD-SVG traegt Massangaben (Bemassungslinien + "Ø104"), die
 * SICHTBAR bleiben; da alle drei SVGs dieselbe viewBox (0 0 120 120)
 * und dieselbe Zentrierung nutzen, liegt die Zahnradmitte jedes Layers
 * auf identischer Bildschirmkoordinate. Diese Regeln sind rein
 * defensiv (idempotent) und aendern das bestehende Scroll-/Opacity-
 * Verhalten des React-Bundles nicht.
 * =================================================================== */
@media (min-width: 1024px) {
  /* Gemeinsame Visual-Stage: fester quadratischer Rahmen (bleibt wie
   * vom Bundle vorgegeben, hier nur abgesichert). */
  [data-testid="transform-scroll"] .relative.aspect-square {
    position: relative;
  }
  /* Jeder absolute Layer fuellt exakt denselben Kasten – gleiche
   * Anchor-/Center-Position fuer die Zahnradmitte. */
  [data-testid="transform-scroll"] .relative.aspect-square > .absolute {
    display: block;
  }
  /* Alle Stufen-SVGs: identische, zentrierte Zeichenflaeche. Dadurch
   * faellt die Zahnradmitte jedes Layers auf denselben Punkt – auch das
   * CAD-Layer mit Massangaben (Massangaben bleiben sichtbar). */
  [data-testid="transform-scroll"] .relative.aspect-square svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  [data-testid="transform-scroll"] .relative.aspect-square svg:not([preserveAspectRatio]) {
    /* Fallback nur falls kein Attribut gesetzt ist; Standard ist ohnehin
     * xMidYMid meet, wir machen die zentrierte Ausrichtung explizit. */
  }
}

/* -------------------------------------------------------------------
 * Reduzierte Bewegung respektieren: Karten sofort sichtbar, keine
 * Bewegung/Animation; Prozesslinie ohne Transition.
 * ----------------------------------------------------------------- */
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  .de-reveal-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .de-reveal-card svg {
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .de-reveal-list::after {
    transition: none !important;
  }
}