/**
 * VOLTIGMA
 * Entwickler : Sven Helle
 * Webseite   : https://sven-helle.de
 * Projekt    : VOLTIGMA
 * Datei      : hero-tech-decoration.css
 * Version    : V3.0
 * Stand      : 26.09.2026
 *
 * Datei: public/assets/css/hero-tech-decoration.css
 * Aufgabe: Vollständig isolierte Elektrotechnik-Dekoration im vorhandenen Hero-Panel.
 * Weblink: sven-helle.de
 * Author: Sven Helle
 * Copyright: © 2026 Sven Helle
 */

/* Diese Datei verändert bewusst KEINE bestehende Layout-Klasse. */
.hh-tech-decoration{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  border-radius:inherit;
  opacity:.72;
}
.hh-tech-decoration svg{display:block;width:100%;height:100%;}
.hh-tech-decoration .hh-tech-traces{fill:none;stroke:rgba(62,216,241,.38);stroke-width:1.8;vector-effect:non-scaling-stroke;}
.hh-tech-decoration .hh-tech-traces circle{fill:#06293a;stroke:rgba(112,238,252,.72);stroke-width:1.6;}
.hh-tech-decoration .hh-tech-terminals{fill:rgba(7,37,52,.94);stroke:rgba(105,238,255,.72);stroke-width:2;vector-effect:non-scaling-stroke;}
.hh-tech-decoration .hh-tech-pulse{fill:none;stroke:#73efff;stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:.055 .945;filter:drop-shadow(0 0 4px rgba(50,225,255,.95));animation:hhTechSignal 5.5s linear infinite;}
.hh-tech-decoration .hh-tech-pulse-b{animation-delay:-2.75s;}
@keyframes hhTechSignal{to{stroke-dashoffset:-1;}}
@media(max-width:680px){.hh-tech-decoration{opacity:.40}.hh-tech-decoration .hh-tech-pulse{animation-duration:7s;}}
@media(prefers-reduced-motion:reduce){.hh-tech-decoration .hh-tech-pulse{animation:none;opacity:.45;}}

/* V4.6.24: Der problematische originale Hero-Pseudolayer bleibt deaktiviert.
   Die Tiefenwirkung wird ausschließlich innerhalb unserer isolierten Dekoration
   neu aufgebaut, damit kein leerer Balken entstehen kann. */
body:has(.start-page-v3) .hero-banner::before{
  content:none !important;
  display:none !important;
}

/* Vollflächige Glas-/3D-Tiefe innerhalb der bereits vorhandenen Hero-Fläche. */
.hh-tech-decoration::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:
    inset 0 1px 0 rgba(220,252,255,.22),
    inset 0 -18px 34px rgba(0,0,0,.26),
    inset 18px 0 34px rgba(34,220,245,.035),
    inset -18px 0 34px rgba(34,220,245,.035);
  background:
    linear-gradient(118deg,rgba(255,255,255,.075),transparent 22%,transparent 73%,rgba(92,235,255,.045)),
    radial-gradient(ellipse at 50% 0%,rgba(117,240,255,.075),transparent 55%);
}

/* Zweite, schmale Innenkante statt des früheren sichtbaren Balkens. */
.hh-tech-decoration::after{
  content:"";
  position:absolute;
  inset:7px;
  pointer-events:none;
  border:1px solid rgba(154,245,255,.20);
  border-radius:14px;
  box-shadow:0 0 12px rgba(39,222,246,.055), inset 0 0 16px rgba(46,226,248,.025);
}

/* V4.6.25: zusätzliche PCB-Details – ausschließlich innerhalb der isolierten SVG-Ebene. */
.hh-tech-decoration .hh-tech-vias circle{
  fill:rgba(5,25,34,.96);
  stroke:rgba(133,242,255,.82);
  stroke-width:1.5;
  vector-effect:non-scaling-stroke;
}
.hh-tech-decoration .hh-tech-pads rect{
  fill:rgba(71,222,239,.13);
  stroke:rgba(126,240,252,.62);
  stroke-width:1.35;
  vector-effect:non-scaling-stroke;
}
.hh-tech-decoration .hh-tech-labels{
  fill:rgba(145,239,250,.54);
  font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.1px;
}
@media(max-width:680px){
  .hh-tech-decoration .hh-tech-labels{opacity:.45;font-size:9px;}
  .hh-tech-decoration .hh-tech-pads{opacity:.72;}
}


/* V4.6.26: sichtbare Versorgungshinweise und schwebende Elektro-Atome. */
.hh-tech-decoration .hh-tech-label-24v,
.hh-tech-decoration .hh-tech-label-gnd{
  fill:rgba(168,247,255,.82);
  filter:drop-shadow(0 0 3px rgba(70,226,248,.38));
}
.hh-tech-decoration .hh-tech-atoms{
  fill:none;
  stroke:rgba(103,232,249,.40);
  stroke-width:1.15;
  vector-effect:non-scaling-stroke;
}
.hh-tech-decoration .hh-tech-atom{
  transform-box:fill-box;
  transform-origin:center;
  animation:hhTechAtomFloat 7s ease-in-out infinite;
}
.hh-tech-decoration .hh-tech-atom-b{animation-delay:-1.4s;opacity:.62;}
.hh-tech-decoration .hh-tech-atom-c{animation-delay:-2.8s;opacity:.82;}
.hh-tech-decoration .hh-tech-atom-d{animation-delay:-4.2s;opacity:.54;}
.hh-tech-decoration .hh-tech-atom-e{animation-delay:-5.6s;opacity:.68;}
.hh-tech-decoration .hh-tech-nucleus{
  fill:rgba(95,235,252,.88);
  stroke:none;
  filter:drop-shadow(0 0 4px rgba(54,225,248,.72));
}
.hh-tech-decoration .hh-tech-electron{
  fill:#a8f7ff;
  stroke:none;
  filter:drop-shadow(0 0 4px rgba(74,231,252,.90));
}
@keyframes hhTechAtomFloat{
  0%,100%{opacity:.58;}
  50%{opacity:.92;}
}
@media(max-width:680px){
  .hh-tech-decoration .hh-tech-atoms{opacity:.46;}
  .hh-tech-decoration .hh-tech-atom-b,
  .hh-tech-decoration .hh-tech-atom-d{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .hh-tech-decoration .hh-tech-atom{animation:none;}
}