/* ============================================
   SippyClips - Floating Background Objects
   Drifting creative-agency doodles with mouse parallax
   ============================================ */

/* --- Container --- */
.zc-float-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* --- Individual floating object --- */
.zc-float-obj {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  transition: opacity 1s ease;
}

/* --- Drift keyframes (3 variants to avoid synchronized motion) --- */
@keyframes zcDrift1 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(14px, -20px) rotate(4deg); }
  40%  { transform: translate(-6px, -35px) rotate(-2deg); }
  60%  { transform: translate(18px, -18px) rotate(5deg); }
  80%  { transform: translate(-10px, -28px) rotate(-3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes zcDrift2 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(-18px, -12px) rotate(-5deg); }
  40%  { transform: translate(8px, -28px) rotate(3deg); }
  60%  { transform: translate(-14px, -8px) rotate(-4deg); }
  80%  { transform: translate(12px, -22px) rotate(2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes zcDrift3 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(10px, -25px) rotate(3deg); }
  40%  { transform: translate(-16px, -10px) rotate(-6deg); }
  60%  { transform: translate(6px, -32px) rotate(2deg); }
  80%  { transform: translate(-8px, -16px) rotate(-4deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* --- Reduced motion: keep objects visible but stop drift --- */
@media (prefers-reduced-motion: reduce) {
  .zc-float-obj {
    animation: none !important;
  }
  .zc-float-obj > div {
    animation: none !important;
  }
}

/* --- Dark mode --- */
[data-theme="dark"] .zc-float-canvas svg {
  stroke: rgba(168, 85, 247, 0.45);
}

/* --- Hide on small screens --- */
@media (max-width: 640px) {
  .zc-float-canvas {
    display: none;
  }
}