/* ==========================================================================
   ProWare Motion – Styles des eigenständigen Animationsmoduls
   WordPress-Ziel: Plugin „proware-motion“ (zusammen mit motion.js)

   Klassen-API (in Elementor Free unter „Erweitert → CSS-Klassen“ setzbar):
     pw-reveal [pw-reveal--left|--right|--scale|--blur]   Einblenden beim Scrollen
     pw-delay-1 … pw-delay-6                                Verzögerung in Stufen
     pw-stagger                                             Kinder nacheinander einblenden
     pw-tilt                                                3D-Neigung + Lichtreflex (nur Maus/Trackpad)
     pw-draw                                                SVG-Linien zeichnen sich beim Einblenden
     pw-steps                                               Prozesslinie füllt sich beim Einblenden
     pw-traces                                              SVG mit Leiterbahnen (.pw-trace) und Lichtimpulsen (.pw-pulse)
     pw-fan                                                 Lüfterrad: Anlauf + Auslauf, Reaktion auf Hover
     pw-seq pw-seq-1 … pw-seq-6                             Hero-Sequenz beim Seitenaufbau (CSS-only)
     pw-explode                                             Hardware-Ebenen fächern beim Scrollen auf (Stufe 2)

   Grundsatz: Ohne JavaScript oder bei „Bewegung reduzieren“ sind alle Inhalte sofort sichtbar.
   Versteckt wird nur, wenn motion.js aktiv ist (html.pw-motion).
   ========================================================================== */

/* --- Einblenden beim Scrollen --- */
.pw-motion .pw-reveal {
  opacity: 0;
  transform: translate3d(0, var(--pw-reveal-distance), 0);
  transition:
    opacity var(--pw-dur-4) var(--pw-ease-out),
    transform var(--pw-dur-4) var(--pw-ease-out),
    filter var(--pw-dur-4) var(--pw-ease-out);
  transition-delay: calc(var(--pw-delay, 0) * 110ms);
}
.pw-motion .pw-reveal--left { transform: translate3d(calc(var(--pw-reveal-distance) * -1.4), 0, 0); }
.pw-motion .pw-reveal--right { transform: translate3d(calc(var(--pw-reveal-distance) * 1.4), 0, 0); }
.pw-motion .pw-reveal--scale { transform: scale(0.94); }
.pw-motion .pw-reveal--blur { filter: blur(10px); }
.pw-motion .pw-reveal.is-in { opacity: 1; transform: none; filter: none; }

.pw-delay-1 { --pw-delay: 1; }
.pw-delay-2 { --pw-delay: 2; }
.pw-delay-3 { --pw-delay: 3; }
.pw-delay-4 { --pw-delay: 4; }
.pw-delay-5 { --pw-delay: 5; }
.pw-delay-6 { --pw-delay: 6; }

.pw-motion .pw-stagger > * {
  opacity: 0;
  transform: translate3d(0, calc(var(--pw-reveal-distance) * 0.7), 0);
  transition: opacity var(--pw-dur-3) var(--pw-ease-out), transform var(--pw-dur-3) var(--pw-ease-out);
  transition-delay: calc(var(--i, 0) * var(--pw-stagger) + 80ms);
}
.pw-motion .pw-stagger.is-in > * { opacity: 1; transform: none; }

/* --- SVG-Linien zeichnen --- */
.pw-draw path,
.pw-draw line,
.pw-draw polyline,
.pw-draw rect,
.pw-draw circle { stroke-dasharray: 1; }
.pw-motion .pw-draw path,
.pw-motion .pw-draw line,
.pw-motion .pw-draw polyline,
.pw-motion .pw-draw rect,
.pw-motion .pw-draw circle {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s var(--pw-ease-in-out);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.pw-motion .pw-draw.is-in path,
.pw-motion .pw-draw.is-in line,
.pw-motion .pw-draw.is-in polyline,
.pw-motion .pw-draw.is-in rect,
.pw-motion .pw-draw.is-in circle { stroke-dashoffset: 0; }

/* --- Leiterbahnen und Lichtimpulse --- */
.pw-traces { color: var(--pw-neon); pointer-events: none; }
.pw-trace {
  fill: none;
  stroke: rgb(var(--pw-neon-rgb) / 0.16);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pw-trace--dim { stroke: rgb(255 255 255 / 0.07); }
.pw-via { fill: var(--pw-bg-0); stroke: rgb(var(--pw-neon-rgb) / 0.4); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.pw-pulse {
  fill: none;
  stroke: var(--pw-neon-hi);
  stroke-width: 2.25;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 7 93;
  stroke-dashoffset: 100;
  opacity: 0;
  animation: pw-pulse var(--dur, 3.4s) var(--pw-ease-in-out) var(--delay, 0s) infinite;
}
@keyframes pw-pulse {
  0% { stroke-dashoffset: 100; opacity: 0; }
  8% { opacity: 1; }
  82% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.pw-traces.is-paused .pw-pulse { animation-play-state: paused; }

/* --- Hero-Sequenz beim Seitenaufbau (reines CSS, kein Blockieren bei JS-Fehlern) --- */
@media (prefers-reduced-motion: no-preference) {
  .pw-seq { animation: pw-seq-in 900ms var(--pw-ease-out) both; animation-delay: var(--seq, 0ms); }
  .pw-seq--fade { animation-name: pw-seq-fade; }
  .pw-seq--blur { animation-name: pw-seq-blur; animation-duration: 1100ms; }
  .pw-seq-1 { --seq: 0ms; }
  .pw-seq-2 { --seq: 180ms; }
  .pw-seq-3 { --seq: 420ms; }
  .pw-seq-4 { --seq: 620ms; }
  .pw-seq-5 { --seq: 900ms; }
  .pw-seq-6 { --seq: 1150ms; }

  .pw-hero__traces .pw-trace { stroke-dasharray: 100; stroke-dashoffset: 100; animation: pw-trace-draw 1.4s var(--pw-ease-in-out) forwards; animation-delay: calc(200ms + var(--i, 0) * 60ms); }
  .pw-hero__traces .pw-pulse { animation-delay: calc(1.6s + var(--delay, 0s)); }
  .pw-housing__ring { animation: pw-hit 1.2s var(--pw-ease-out) 1.3s both; }
}
@keyframes pw-seq-in { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes pw-seq-fade { from { opacity: 0; } to { opacity: 1; } }
/* ohne filter: Filter-Animationen über CSS-Masken werden in Chromium teils nicht gezeichnet */
@keyframes pw-seq-blur { from { opacity: 0; transform: scale(1.06); letter-spacing: 0.02em; } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes pw-trace-draw { to { stroke-dashoffset: 0; } }
@keyframes pw-hit {
  0% { stroke: rgb(var(--pw-neon-rgb) / 0.25); filter: none; }
  25% { stroke: var(--pw-neon-hi); filter: drop-shadow(0 0 14px var(--pw-neon)); }
  100% { stroke: rgb(var(--pw-neon-rgb) / 0.45); filter: drop-shadow(0 0 4px rgb(var(--pw-neon-rgb) / 0.5)); }
}

/* Überschrift: Zeilen gleiten aus einer Maske */
.pw-split-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.pw-split-line > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .pw-split-line > span { animation: pw-line-up 1s var(--pw-ease-out) both; animation-delay: calc(var(--seq, 420ms) + var(--line, 0) * 110ms); }
}
@keyframes pw-line-up { from { transform: translate3d(0, 105%, 0); } to { transform: none; } }

/* --- Lüfter-Gehäuse (Hero-Hardwarevisualisierung) --- */
.pw-housing { position: relative; width: 100%; aspect-ratio: 1; }
.pw-housing svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pw-housing__frame { fill: rgb(255 255 255 / 0.015); stroke: var(--pw-line-strong); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.pw-housing__ring { fill: none; stroke: rgb(var(--pw-neon-rgb) / 0.45); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pw-housing__ring-2 { fill: none; stroke: rgb(255 255 255 / 0.06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pw-housing__screw { fill: var(--pw-bg-0); stroke: var(--pw-line-strong); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.pw-housing__fan {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84%;
  aspect-ratio: 1;
  translate: -50% -50%;
  color: var(--pw-neon);
  filter: drop-shadow(0 0 18px rgb(var(--pw-neon-rgb) / 0.35));
}
.pw-housing__glow {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--pw-neon-rgb) / 0.22), transparent 65%);
  filter: blur(10px);
  animation: pw-breathe 6s ease-in-out infinite;
}
@keyframes pw-breathe { 50% { opacity: 0.55; transform: scale(0.94); } }

/* --- Lüfterrad-Zustände --- */
.pw-fan.is-spinning .pw-fan__rotor { filter: drop-shadow(0 0 8px rgb(var(--pw-neon-rgb) / 0.6)); }
.pw-fan__rotor { transition: filter var(--pw-dur-3); }

/* --- Diagnose-Scan (Reparatur-Hero) --- */
.pw-scan { position: relative; overflow: hidden; }
.pw-scan__line {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pw-neon-hi), transparent);
  box-shadow: 0 0 18px 4px rgb(var(--pw-neon-rgb) / 0.35);
  animation: pw-scan 4.2s var(--pw-ease-in-out) infinite;
}
@keyframes pw-scan { 0%, 100% { top: 12%; opacity: 0; } 10%, 90% { opacity: 1; } 50% { top: 86%; } }
.pw-scan.is-paused .pw-scan__line { animation-play-state: paused; }

/* --- Netzwerk-Knoten (Firmen-IT-Hero) --- */
.pw-node { fill: var(--pw-bg-0); stroke: rgb(var(--pw-neon-rgb) / 0.55); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.pw-node--core { stroke: var(--pw-neon); fill: rgb(var(--pw-neon-rgb) / 0.08); }
.pw-node-label { fill: var(--pw-text-3); font: 500 11px var(--pw-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  .pw-node--blink { animation: pw-node-blink 3.6s ease-in-out infinite; animation-delay: var(--delay, 0s); }
}
@keyframes pw-node-blink { 50% { stroke: var(--pw-neon-hi); fill: rgb(var(--pw-neon-rgb) / 0.18); } }

/* --- Hardware-Explosionsansicht (Entwicklungsstufe 2, vorbereitet) --- */
.pw-explode { --p: 0; position: relative; perspective: 1400px; }
.pw-explode__stage {
  position: relative;
  aspect-ratio: 1 / 0.9;
  transform-style: preserve-3d;
  transform: rotateX(56deg) rotateZ(-38deg);
}
.pw-explode__layer {
  position: absolute;
  inset: 12%;
  border-radius: 18px;
  transform: translateZ(calc(var(--z) * (24px + var(--p) * 95px)));
  transition: transform 120ms linear;
}
.pw-explode__layer svg { width: 100%; height: 100%; }
.pw-explode__caption {
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: 12px;
  font: 500 10px/1 var(--pw-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pw-neon);
  white-space: nowrap;
  opacity: var(--p);
}

/* --- Bewegung reduzieren: alles sofort sichtbar, keine Dauerschleifen --- */
@media (prefers-reduced-motion: reduce) {
  .pw-pulse,
  .pw-scan__line,
  .pw-housing__glow,
  .pw-location__dot { animation: none !important; }
  .pw-pulse { display: none; }
  .pw-card::before { animation: none !important; }
  .pw-explode__layer { transition: none; }
}