/* ============================================================
   АНІМАЦІЯ ПРОЦЕСУ ПАЙКИ (стикове зварювання ПЕ)
   Чистий SVG + CSS, без відео та зовнішніх файлів
   ============================================================ */

.weld-stage {
  position: relative;
  background: linear-gradient(160deg, #0d2338 0%, #143a55 55%, #0f2b3c 100%);
  border-radius: 18px;
  padding: 26px 22px 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(6,20,32,.34);
  margin: 26px 0;
}
.weld-stage::before {
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(520px 260px at 50% 42%, rgba(255,150,60,.13), transparent 70%),
    radial-gradient(360px 180px at 20% 80%, rgba(70,160,255,.10), transparent 70%);
  pointer-events:none;
}

.weld-title {
  position:relative; z-index:2;
  color:#fff; font-size:15.5px; font-weight:700;
  margin-bottom: 3px;
}
.weld-sub {
  position:relative; z-index:2;
  color:#8fb1c9; font-size:12.5px;
  margin-bottom: 14px;
}

.weld-svg {
  position:relative; z-index:2;
  width:100%; height:auto; display:block;
  overflow: visible;
}

/* --- труби --- */
.weld-pipe {
  fill: #2b3d4f;
  stroke: #16222d;
  stroke-width: 1.5;
}
.weld-pipe-face {
  fill: #3a5169;
}
.weld-pipe-shine {
  fill: rgba(255,255,255,.13);
}

/* левая труба: въезжает слева, приваривается */
.weld-left {
  animation: weldLeftMove 9s cubic-bezier(.45,0,.3,1) infinite;
}
@keyframes weldLeftMove {
  0%,  8%   { transform: translateX(-48px); }
  30%, 100% { transform: translateX(0); }
}

/* правая труба */
.weld-right {
  animation: weldRightMove 9s cubic-bezier(.45,0,.3,1) infinite;
}
@keyframes weldRightMove {
  0%,  8%   { transform: translateX(52px); }
  28%, 100% { transform: translateX(0); }
}

/* --- нагревательный диск (зеркало) --- */
.weld-heater {
  animation: heaterCycle 9s ease-in-out infinite;
  opacity: 1;
}
@keyframes heaterCycle {
  0%        { opacity: .85; }
  8%        { opacity: .85; }
  13%       { opacity: 1; }
  33%       { opacity: 1; }
  41%       { opacity: .25; }
  50%       { opacity: .85; }
  100%      { opacity: .85; }
}
.weld-heater-plate {
  fill: #4a5563;
  stroke: #7f8b9a;
  stroke-width: 1.5;
}
.weld-heater-hot {
  fill: #ff6a2a;
  animation: heaterGlow 9s ease-in-out infinite;
}
@keyframes heaterGlow {
  0%,  10%  { opacity: 0; }
  16%       { opacity: 1; fill: #ff8c42; }
  28%       { opacity: 1; fill: #ffd0a0; }
  34%       { opacity: .9; fill: #ff8c42; }
  40%, 100% { opacity: 0; }
}

/* --- искры --- */
.weld-spark {
  fill: #ffd08a;
  animation: sparkFly 9s ease-out infinite;
  opacity: 0;
}
.weld-spark.s1 { animation-delay: .05s; }
.weld-spark.s2 { animation-delay: .12s; }
.weld-spark.s3 { animation-delay: .18s; }
.weld-spark.s4 { animation-delay: .26s; }
.weld-spark.s5 { animation-delay: .34s; }
.weld-spark.s6 { animation-delay: .42s; }
@keyframes sparkFly {
  0%,  14%  { opacity: 0; transform: translate(0,0) scale(.4); }
  18%       { opacity: 1; }
  26%       { opacity: .9; transform: translate(var(--sx,10px), var(--sy,-22px)) scale(1); }
  38%, 100% { opacity: 0; transform: translate(calc(var(--sx,10px) * 2), calc(var(--sy,-22px) * 2.2)) scale(.3); }
}

/* --- валик шва (грат) --- */
.weld-bead {
  fill: #6b7f95;
  stroke: #8fa3b8;
  stroke-width: 1;
  opacity: 0;
  animation: beadGrow 9s ease-out infinite;
  transform-origin: center;
}
@keyframes beadGrow {
  0%,  46%  { opacity: 0; transform: scaleY(.1); }
  54%       { opacity: 1; transform: scaleY(1); }
  94%       { opacity: 1; transform: scaleY(1); }
  100%      { opacity: 0; transform: scaleY(.1); }
}

/* --- свечение шва --- */
.weld-glow {
  fill: #ff8c42;
  opacity: 0;
  animation: weldGlowPulse 9s ease-in-out infinite;
}
@keyframes weldGlowPulse {
  0%,  48%  { opacity: 0; }
  56%       { opacity: .55; }
  70%       { opacity: .18; }
  88%       { opacity: .30; }
  100%      { opacity: 0; }
}

/* --- подписи этапов --- */
.weld-labels {
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap: 8px; margin-top: 16px;
}
.weld-label {
  text-align:center;
  padding: 8px 6px;
  border-radius: 9px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
  font-size: 11px;
  color: #7f9ab0;
  transition: .3s;
  line-height: 1.35;
}
.weld-label b { display:block; color:#c3d8e8; font-size:11.5px; margin-bottom:2px; }

/* подсветка активного этапа (синхрон с анимацией 9s/4 = 2.25s) */
.weld-label:nth-child(1) { animation: labActive1 9s infinite; }
.weld-label:nth-child(2) { animation: labActive2 9s infinite; }
.weld-label:nth-child(3) { animation: labActive3 9s infinite; }
.weld-label:nth-child(4) { animation: labActive4 9s infinite; }
@keyframes labActive1 {
  0%,8%   { background: rgba(232,121,43,.22); border-color:#e8792b; color:#fff; }
  12%,100%{ background: rgba(255,255,255,.055); border-color:rgba(255,255,255,.09); color:#7f9ab0; }
}
@keyframes labActive2 {
  0%,8%    { background: rgba(255,255,255,.055); border-color:rgba(255,255,255,.09); }
  12%,34%  { background: rgba(232,121,43,.22); border-color:#e8792b; color:#fff; }
  38%,100% { background: rgba(255,255,255,.055); border-color:rgba(255,255,255,.09); color:#7f9ab0; }
}
@keyframes labActive3 {
  0%,36%   { background: rgba(255,255,255,.055); border-color:rgba(255,255,255,.09); }
  40%,62%  { background: rgba(232,121,43,.22); border-color:#e8792b; color:#fff; }
  66%,100% { background: rgba(255,255,255,.055); border-color:rgba(255,255,255,.09); color:#7f9ab0; }
}
@keyframes labActive4 {
  0%,64%   { background: rgba(255,255,255,.055); border-color:rgba(255,255,255,.09); }
  68%,96%  { background: rgba(46,158,79,.22); border-color:#2e9e4f; color:#fff; }
  100%     { background: rgba(255,255,255,.055); border-color:rgba(255,255,255,.09); color:#7f9ab0; }
}

/* --- плашка "PЕ100 SDR17" --- */
.weld-badge {
  position:absolute; top:18px; right:20px; z-index:3;
  background: rgba(232,121,43,.16);
  border: 1px solid rgba(232,121,43,.5);
  color:#ffd0a0;
  font-size:10.5px; font-weight:700;
  padding: 4px 11px; border-radius: 12px;
  letter-spacing:.4px;
}

/* --- пончик-таймер прогресса --- */
.weld-cycle {
  position:relative; z-index:3;
  margin-top:10px;
  font-size:10.5px; color:#6d8aa2;
  display:inline-flex; align-items:center; gap:6px;
}
.weld-cycle::before {
  content:"";
  width:6px; height:6px; border-radius:50%;
  background:#e8792b;
  animation: cyclePulse 1.8s ease-in-out infinite;
}
@keyframes cyclePulse {
  0%,100% { opacity:.35; transform:scale(.8); }
  50%     { opacity:1; transform:scale(1.2); }
}

/* ---------- адаптив ---------- */
@media (max-width: 720px) {
  .weld-stage { padding:20px 14px 14px; border-radius:14px; }
  .weld-labels { grid-template-columns:repeat(2,1fr); gap:6px; }
  .weld-label { font-size:10px; padding:7px 5px; }
  .weld-label b { font-size:10.5px; }
  .weld-badge { font-size:9px; padding:3px 8px; top:12px; right:12px; }
}

@media (prefers-reduced-motion: reduce) {
  .weld-left, .weld-right, .weld-heater, .weld-heater-hot,
  .weld-spark, .weld-bead, .weld-glow,
  .weld-label { animation: none !important; }
  .weld-bead { opacity: 1; transform: none; }
  .weld-heater { opacity: 0; }
  .weld-label:nth-child(2) { background: rgba(232,121,43,.22); border-color:#e8792b; }
}