/* =========================================================
   VERIFY CSS SYSTEM
   Datei: /assets/css/sections/hero-visual.css

   INHALT
   01) Hero-Visual Grundlayout
   02) Badge-Orbit
   03) Badge-Core / Badge-Image
   04) Orbit-Ringe
   05) Floating Chips
   06) Responsive (Hero-Visual only)

   HINWEIS
   Diese Datei enthält nur den visuellen Hero-Orbit mit Badge,
   Ringen und schwebenden Chips.
   Keine textliche Hero-Copy und keine Project-Page-Badge-Blöcke.
   ========================================================= */


/* =========================================================
   01) HERO-VISUAL GRUNDLAYOUT
   Rechte Hero-Spalte für Orbit / Badge-System
   ========================================================= */

.hero-visual{
  position:relative;
  min-height:560px;
  display:grid;
  place-items:center;
}


/* =========================================================
   02) BADGE-ORBIT
   Äußerer Orbit-Container mit Glow-Halo
   ========================================================= */

.verify-badge-orb{
  position:relative;
  width:min(540px, 100%);
  aspect-ratio:1 / 1;
  display:grid;
  place-items:center;
  isolation:isolate;
}

.verify-badge-orb::before{
  content:"";
  position:absolute;
  inset:12%;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(126,243,255,.16) 0%, rgba(126,243,255,.06) 35%, transparent 70%);
  filter:blur(10px);
  z-index:0;
}


/* =========================================================
   03) BADGE-CORE / BADGE-IMAGE
   Zentrale Badge-Fläche und eingebundenes Badge-Bild
   ========================================================= */

.verify-badge-core{
  position:relative;
  z-index:3;
  width:min(60%, 320px);
  aspect-ratio:1 / 1;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.24), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 24px 60px rgba(0,0,0,.26),
    0 0 42px rgba(255,215,106,.12);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.verify-badge-image{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:
    drop-shadow(0 10px 30px rgba(255,191,58,.25))
    drop-shadow(0 0 22px rgba(255,215,106,.18));
  animation:floatSeal 5.4s ease-in-out infinite;
}


/* =========================================================
   04) ORBIT-RINGE
   Umlaufbahnen für den futuristischen Display-Look
   ========================================================= */

.orbital-ring{
  position:absolute;
  inset:0;
  margin:auto;
  border-radius:50%;
  border:1px solid rgba(126,243,255,.18);
  box-shadow:
    inset 0 0 22px rgba(126,243,255,.05),
    0 0 12px rgba(126,243,255,.06);
}

.ring-a{
  width:72%;
  aspect-ratio:1 / 1;
  animation:spinSlow 18s linear infinite;
}

.ring-b{
  width:88%;
  aspect-ratio:1 / 1;
  border-style:dashed;
  border-color:rgba(255,255,255,.12);
  animation:spinReverse 24s linear infinite;
}

.ring-c{
  width:100%;
  aspect-ratio:1 / 1;
  opacity:.5;
  animation:spinSlow 32s linear infinite;
}


/* =========================================================
   05) FLOATING CHIPS
   Schwebende Status-Chips um das Badge
   ========================================================= */

.floating-chip{
  position:absolute;
  z-index:4;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.10);
  color:var(--text);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 12px 28px rgba(0,0,0,.18);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.chip-a{
  top:16%;
  right:8%;
  animation:floatChipA 6.8s ease-in-out infinite;
}

.chip-b{
  bottom:18%;
  left:6%;
  animation:floatChipB 7.6s ease-in-out infinite;
}

.chip-c{
  top:48%;
  left:-2%;
  animation:floatChipC 6.4s ease-in-out infinite;
}


/* =========================================================
   06) RESPONSIVE (HERO-VISUAL ONLY)
   Nur Orbit-/Badge-spezifische Breakpoints
   ========================================================= */

@media (max-width: 1160px){
  .hero-visual{
    min-height:460px;
  }
}

@media (max-width: 760px){
  .hero-visual{
    min-height:320px;
  }

  .verify-badge-orb{
    width:min(100%, 360px);
  }

  .floating-chip{
    font-size:.68rem;
    padding:8px 12px;
    letter-spacing:.12em;
  }

  .chip-c{
    left:2%;
    top:44%;
  }
}