/* ============================================================
   DripBack Hexagon-Hero-Objekt (W1, 2026-07-04)
   ------------------------------------------------------------
   Favicon-Motiv (Wabenstruktur, rgba(43,111,255)-Stroke) in den
   Seitenkörper übersetzt: langsam rotierendes Drahtgitter-Hexagon
   mit subtilem radialem Akzent-Glow im Dark-Hero.
   Design-DNA §3a5 — Hexagon als Struktur-Objekt, nie Deko-Tapete.
   Alle Animationen transform-only (Compositor) und komplett
   deaktiviert bei prefers-reduced-motion.
   ============================================================ */

.imm-hexagon {
  position: absolute;
  left: clamp(16px, 7vw, 120px);
  top: 30%;
  z-index: 5; /* über Datacenter (z=4), unter Fog/Vignette (z=6/7), unter UI (z=10) */
  width: clamp(180px, 22vw, 340px);
  aspect-ratio: 1;
  pointer-events: none;
  perspective: 900px; /* gibt der Y-Rotation die 3D-Tiefe */
  animation: hexFloat 26s ease-in-out infinite alternate;
  will-change: transform;
}

/* Subtiler radialer Glow hinter dem Objekt — Akzent bei niedriger Opacity */
.imm-hexagon::before {
  content: "";
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(43,111,255,0.16) 0%,
              rgba(43,111,255,0.05) 45%,
              transparent 70%);
  filter: blur(6px);
  pointer-events: none;
}

.imm-hexagon .hex-svg {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  transform-style: preserve-3d;
  animation: hexSpin 34s linear infinite;
  will-change: transform;
}

/* Kanten-Glow: KEIN filter auf dem rotierenden Element — drop-shadow
   erzwingt Repaint pro Frame und ruckelt beim Scrollen. Der weiche
   ::before-Blur-Layer liefert den Glow, der Stroke bleibt filterfrei. */

/* Langsame 3D-Rotation um die Y-Achse — nur transform, kein Layout/Paint */
@keyframes hexSpin {
  from { transform: rotateX(12deg) rotateY(0turn); }
  to   { transform: rotateX(12deg) rotateY(1turn); }
}

/* Sanftes vertikales Floaten des gesamten Objekts inkl. Glow */
@keyframes hexFloat {
  from { transform: translateY(-8px); }
  to   { transform: translateY(10px); }
}

/* Tablet: HUD ist ausgeblendet, Content wird breiter — Hexagon kleiner und höher */
@media (max-width: 1024px) {
  .imm-hexagon {
    width: clamp(150px, 26vw, 220px);
    left: 4vw;
    top: 26%;
    opacity: 0.7;
  }
}

/* Mobil: als Halo hinter dem zentrierten Wordmark, deutlich zurückgenommen.
   Dünne Strokes bei halber Opacity hinter fettem 42px-Weiß — Kontrast bleibt AA. */
@media (max-width: 640px) {
  .imm-hexagon {
    width: 190px;
    left: calc(50% - 95px);
    top: 48px;
    opacity: 0.75;
  }
}

/* Reduced Motion: Rotation und Float komplett aus, statische Pose bleibt */
@media (prefers-reduced-motion: reduce) {
  .imm-hexagon,
  .imm-hexagon .hex-svg {
    animation: none !important;
  }
  .imm-hexagon .hex-svg {
    transform: rotateX(12deg);
  }
}