/* ============================================================
   eLogistix – Floating Shapes (Pakete)  |  floating-shapes.css
   ============================================================ */

.fs-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Äußerer Wrapper: Scroll-Parallax (Y) läuft hier per JS */
.fs {
  position: absolute;
  pointer-events: none;
  will-change: transform;
}

/* Innerer Wrapper: Float-Animation (X + Y + Rotation) läuft hier */
.fs-inner {
  display: block;
  will-change: transform, opacity;
  opacity: 0;
  animation-fill-mode: both;
}

/* ── Keyframes ── */

/* Diagonal: links-rechts UND hoch-runter mit Rotation */
@keyframes fs-drift-a {
  0%   { transform: translate(0px,    0px)  rotate(0deg);   }
  20%  { transform: translate(22px, -30px)  rotate(4deg);   }
  45%  { transform: translate(-18px, -48px) rotate(-3deg);  }
  70%  { transform: translate(-28px, -20px) rotate(6deg);   }
  100% { transform: translate(0px,    0px)  rotate(0deg);   }
}

@keyframes fs-drift-b {
  0%   { transform: translate(0px,   0px)   rotate(0deg);  }
  25%  { transform: translate(-24px, 32px)  rotate(-5deg); }
  55%  { transform: translate(20px,  44px)  rotate(3deg);  }
  80%  { transform: translate(30px,  18px)  rotate(-2deg); }
  100% { transform: translate(0px,   0px)   rotate(0deg);  }
}

/* Großer Ring: dreht sich UND driftet diagonal */
@keyframes fs-drift-ring {
  0%   { transform: translate(0px,   0px)   rotate(0deg);   }
  33%  { transform: translate(16px, -24px)  rotate(120deg); }
  66%  { transform: translate(-12px,-14px)  rotate(240deg); }
  100% { transform: translate(0px,   0px)   rotate(360deg); }
}

/* Quadrat: dreht sich mit seitlichem Drift */
@keyframes fs-drift-square {
  0%   { transform: translate(0px,  0px)  rotate(0deg);  }
  30%  { transform: translate(-20px, 26px) rotate(-8deg); }
  60%  { transform: translate(16px,  38px) rotate(4deg);  }
  100% { transform: translate(0px,  0px)  rotate(0deg);  }
}

/* Pulsieren mit Drift */
@keyframes fs-drift-pulse {
  0%   { transform: translate(0px,   0px)  scale(1);    }
  40%  { transform: translate(18px, -22px) scale(1.12); }
  70%  { transform: translate(-14px,-30px) scale(0.94); }
  100% { transform: translate(0px,   0px)  scale(1);    }
}

@keyframes fs-fadein {
  from { opacity: 0; }
  to   { opacity: var(--fs-op); }
}

/* ── Positionen ── */
.fs-ring-lg { top:5%;    right:3%; width: 148px; height: 158px; }
.fs-dot-sm { top:36%;   left:3%; width: 64px; height: 84px; }
.fs-square { bottom:10%;right:5%; width: 100px; height: 89px; }
.fs-dotgrid { top:12%;   left:1.5%; width: 50px; height: 56px; }
.fs-ring-sm { bottom:8%; left:12%; width: 104px; height: 122px; }

/* ── Float-Animationen ── */
.fs-ring-lg .fs-inner {
  --fs-op: 0.12;
  animation:
    fs-fadein     1.2s 0.2s ease-out forwards,
    fs-drift-ring 20s  1.4s linear   infinite;
}

.fs-dot-sm .fs-inner {
  --fs-op: 0.18;
  animation:
    fs-fadein  1s  0.5s ease-out    forwards,
    fs-drift-a 9s  1s   ease-in-out infinite;
}

.fs-square .fs-inner {
  --fs-op: 0.10;
  animation:
    fs-fadein       1s   0.8s ease-out    forwards,
    fs-drift-square 12s  1s   ease-in-out infinite;
}

.fs-dotgrid .fs-inner {
  --fs-op: 0.18;
  animation:
    fs-fadein  1s   1.0s ease-out    forwards,
    fs-drift-b 14s  1.2s ease-in-out infinite;
}

.fs-ring-sm .fs-inner {
  --fs-op: 0.12;
  animation:
    fs-fadein       1.2s 0.6s ease-out    forwards,
    fs-drift-pulse  10s  1s   ease-in-out infinite;
}

/* ── Light-Mode ── */
html.light .fs-ring-lg .fs-inner { --fs-op: 0.16; }
html.light .fs-dot-sm  .fs-inner { --fs-op: 0.22; }
html.light .fs-square  .fs-inner { --fs-op: 0.12; }
html.light .fs-dotgrid .fs-inner { --fs-op: 0.22; }
html.light .fs-ring-sm .fs-inner { --fs-op: 0.15; }

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .fs-inner { animation: none !important; opacity: 0 !important; }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .fs-layer { display: none; }
}