/* ============================================
   PATIENT ANALOG - MICROFLUIDIC MOTION SYSTEM
   GPU-Accelerated Fluid Flow Animations
   ============================================ */

:root {
  /* Microfluidic Colors */
  --mf-primary: rgba(0, 212, 255, 0.6);
  --mf-secondary: rgba(0, 255, 136, 0.5);
  --mf-accent: rgba(138, 43, 226, 0.4);
  --mf-cell: rgba(255, 107, 107, 0.7);
  --mf-plasma: rgba(255, 193, 7, 0.3);

  /* Flow Timing */
  --mf-flow-slow: 8s;
  --mf-flow-medium: 5s;
  --mf-flow-fast: 3s;
  --mf-pulse: 2s;
  --mf-cell-travel: 4s;
}

/* ============================================
   MICROFLUIDIC CHANNEL CONTAINER
   ============================================ */

.microfluidic-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0.4;
}

/* ============================================
   FLOWING CHANNEL ANIMATION
   Simulates fluid moving through microchannels
   ============================================ */

.mf-channel {
  position: absolute;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--mf-primary) 20%,
    var(--mf-secondary) 50%,
    var(--mf-primary) 80%,
    transparent 100%
  );
  background-size: 200% 100%;
  border-radius: 2px;
  will-change: background-position;
  animation: mf-flow var(--mf-flow-medium) linear infinite;
}

.mf-channel--horizontal {
  height: 2px;
  width: 100%;
}

.mf-channel--vertical {
  width: 2px;
  height: 100%;
}

.mf-channel--diagonal {
  height: 2px;
  width: 150%;
  transform-origin: left center;
}

/* Channel positions */
.mf-channel-1 { top: 15%; left: 0; animation-delay: 0s; }
.mf-channel-2 { top: 35%; left: 0; animation-delay: -1.5s; animation-duration: 6s; }
.mf-channel-3 { top: 55%; left: 0; animation-delay: -3s; }
.mf-channel-4 { top: 75%; left: 0; animation-delay: -2s; animation-duration: 7s; }
.mf-channel-5 { top: 90%; left: 0; animation-delay: -4s; animation-duration: 5s; }

/* Vertical channels */
.mf-channel-v1 { left: 10%; top: 0; animation: mf-flow-vertical var(--mf-flow-slow) linear infinite; }
.mf-channel-v2 { left: 30%; top: 0; animation: mf-flow-vertical 7s linear infinite; animation-delay: -2s; }
.mf-channel-v3 { left: 70%; top: 0; animation: mf-flow-vertical 6s linear infinite; animation-delay: -4s; }
.mf-channel-v4 { left: 90%; top: 0; animation: mf-flow-vertical var(--mf-flow-slow) linear infinite; animation-delay: -1s; }

/* ============================================
   CELL PARTICLES
   Floating cells moving through channels
   ============================================ */

.mf-cell {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    var(--mf-cell),
    rgba(255, 107, 107, 0.3)
  );
  box-shadow:
    0 0 10px var(--mf-cell),
    inset 0 0 3px rgba(255, 255, 255, 0.3);
  will-change: transform, opacity;
  animation: mf-cell-flow var(--mf-cell-travel) ease-in-out infinite;
}

.mf-cell--large {
  width: 12px;
  height: 12px;
}

.mf-cell--small {
  width: 5px;
  height: 5px;
}

/* Cell positions and timing */
.mf-cell-1 { top: 15%; animation-delay: 0s; }
.mf-cell-2 { top: 35%; animation-delay: -1s; animation-duration: 5s; }
.mf-cell-3 { top: 55%; animation-delay: -2s; animation-duration: 3.5s; }
.mf-cell-4 { top: 75%; animation-delay: -0.5s; animation-duration: 4.5s; }
.mf-cell-5 { top: 90%; animation-delay: -3s; }

/* ============================================
   ORGANOID CLUSTER
   Pulsing cell clusters
   ============================================ */

.mf-organoid {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%,
    rgba(0, 255, 136, 0.4),
    rgba(0, 212, 255, 0.2) 50%,
    transparent 70%
  );
  will-change: transform, opacity;
  animation: mf-organoid-pulse 4s ease-in-out infinite;
}

.mf-organoid--sm { width: 30px; height: 30px; }
.mf-organoid--md { width: 50px; height: 50px; }
.mf-organoid--lg { width: 80px; height: 80px; }

.mf-organoid-1 { top: 20%; left: 15%; animation-delay: 0s; }
.mf-organoid-2 { top: 60%; left: 80%; animation-delay: -1.5s; }
.mf-organoid-3 { top: 80%; left: 25%; animation-delay: -3s; }

/* ============================================
   JUNCTION NODES
   Connection points where channels meet
   ============================================ */

.mf-junction {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--mf-primary) 0%,
    rgba(0, 212, 255, 0.2) 50%,
    transparent 70%
  );
  will-change: transform, box-shadow;
  animation: mf-junction-pulse var(--mf-pulse) ease-in-out infinite;
}

.mf-junction-1 { top: 15%; left: 10%; }
.mf-junction-2 { top: 35%; left: 30%; animation-delay: -0.5s; }
.mf-junction-3 { top: 55%; left: 70%; animation-delay: -1s; }
.mf-junction-4 { top: 75%; left: 90%; animation-delay: -1.5s; }

/* ============================================
   PLASMA FLOW
   Background fluid movement
   ============================================ */

.mf-plasma-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse 80% 50% at 20% 30%, var(--mf-plasma), transparent),
    radial-gradient(ellipse 60% 40% at 80% 70%, rgba(0, 212, 255, 0.1), transparent);
  will-change: transform;
  animation: mf-plasma-drift 20s ease-in-out infinite alternate;
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

@keyframes mf-flow {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes mf-flow-vertical {
  0% {
    background-position: 0 200%;
  }
  100% {
    background-position: 0 -200%;
  }
}

@keyframes mf-cell-flow {
  0% {
    transform: translateX(-20px) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(calc(50vw - 20px)) scale(1.1) rotate(180deg);
  }
  90% {
    opacity: 1;
    transform: translateX(calc(100vw - 40px)) scale(1);
  }
  100% {
    transform: translateX(calc(100vw + 20px)) scale(0.8);
    opacity: 0;
  }
}

@keyframes mf-organoid-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.4;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
  }
  50% {
    transform: scale(1.15);
    opacity: 0.7;
    box-shadow: 0 0 40px rgba(0, 255, 136, 0.4), 0 0 60px rgba(0, 212, 255, 0.2);
  }
}

@keyframes mf-junction-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 10px var(--mf-primary);
  }
  50% {
    transform: scale(1.3);
    box-shadow: 0 0 25px var(--mf-primary), 0 0 40px rgba(0, 212, 255, 0.3);
  }
}

@keyframes mf-plasma-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(30px, 20px) scale(1.1);
  }
}

/* ============================================
   FLOW DIRECTION VARIANTS
   ============================================ */

.mf-flow-reverse {
  animation-direction: reverse;
}

.mf-flow-slow {
  animation-duration: var(--mf-flow-slow);
}

.mf-flow-fast {
  animation-duration: var(--mf-flow-fast);
}

/* ============================================
   INTERACTIVE ENHANCEMENTS
   Respond to scroll/mouse
   ============================================ */

.microfluidic-bg.mf-interactive:hover .mf-cell {
  animation-duration: 2s;
}

.microfluidic-bg.mf-interactive:hover .mf-channel {
  opacity: 0.8;
}

/* ============================================
   SECTION-SPECIFIC MICROFLUIDICS
   ============================================ */

.section-microfluidic {
  position: relative;
  overflow: hidden;
}

.section-microfluidic::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 212, 255, 0.05) 20%,
    rgba(0, 255, 136, 0.03) 50%,
    rgba(0, 212, 255, 0.05) 80%,
    transparent
  );
  background-size: 200% 100%;
  animation: mf-flow 10s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Card with microfluidic border */
.card-microfluidic {
  position: relative;
  border: 1px solid rgba(0, 212, 255, 0.2);
  overflow: hidden;
}

.card-microfluidic::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--mf-primary),
    var(--mf-secondary),
    var(--mf-primary),
    transparent
  );
  background-size: 200% 100%;
  animation: mf-flow 4s linear infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-microfluidic:hover::before {
  opacity: 1;
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .mf-channel,
  .mf-cell,
  .mf-organoid,
  .mf-junction,
  .mf-plasma-layer,
  .section-microfluidic::before,
  .card-microfluidic::before {
    animation: none !important;
  }

  .microfluidic-bg {
    opacity: 0.2;
  }
}

/* ============================================
   PERFORMANCE OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
  .microfluidic-bg {
    opacity: 0.2;
  }

  .mf-cell,
  .mf-organoid {
    display: none;
  }
}

/* Low-power mode detection */
@media (prefers-reduced-data: reduce) {
  .microfluidic-bg {
    display: none;
  }
}