flowfi-network/app/globals.css

@import "tailwindcss";

@theme {
  --color-void: #0a0a0a;
  --color-nothing: #1a1a2e;
  --color-less: #16213e;
  --color-anti-green: #e94560;
  --color-flow-green: #2dd4bf;
  --color-zen: #f5f5dc;
  --color-sloth: #c3b091;

  --font-family-mono: "Courier New", monospace;
  --font-family-marker: var(--font-marker), "Permanent Marker", cursive;
  --font-family-caveat: var(--font-caveat), "Caveat", cursive;
}

/* Pipe flow animation — core effect */
@keyframes pipe-flow {
  0% { stroke-dashoffset: 24; }
  100% { stroke-dashoffset: 0; }
}

@keyframes pipe-flow-fast {
  0% { stroke-dashoffset: 24; }
  100% { stroke-dashoffset: 0; }
}

@keyframes pipe-flow-reverse {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 24; }
}

.animate-pipe-flow {
  stroke-dasharray: 8 4;
  animation: pipe-flow 1.5s linear infinite;
}

.animate-pipe-flow-fast {
  stroke-dasharray: 8 4;
  animation: pipe-flow 0.8s linear infinite;
}

.animate-pipe-flow-slow {
  stroke-dasharray: 8 4;
  animation: pipe-flow 2.5s linear infinite;
}

/* Particle travel along path */
@keyframes travel-path {
  0% { offset-distance: 0%; opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

.animate-particle {
  offset-rotate: 0deg;
  animation: travel-path var(--duration, 3s) linear infinite;
  animation-delay: var(--delay, 0s);
}

/* Water distortion */
@keyframes turbulence {
  0% { }
  50% { }
  100% { }
}

/* Scroll reveal */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Breathing / pulsing */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes slow-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

@keyframes drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(20px); }
}

@keyframes flow-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes float-up {
  0% { opacity: 0.6; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(-200px) rotate(10deg); }
}

.animate-breathe { animation: breathe 6s ease-in-out infinite; }
.animate-slow-pulse { animation: slow-pulse 8s ease-in-out infinite; }
.animate-drift { animation: drift 12s ease-in-out infinite; }
.animate-flow-gradient {
  background-size: 200% 200%;
  animation: flow-gradient 8s ease-in-out infinite;
}

/* Wobble rotations */
.wobble-1 { transform: rotate(-1.5deg); }
.wobble-2 { transform: rotate(0.8deg); }
.wobble-3 { transform: rotate(-0.5deg); }
.wobble-4 { transform: rotate(1.2deg); }

/* Scrawl underlines */
.scrawl-underline {
  position: relative;
  display: inline-block;
}
.scrawl-underline::after {
  content: '';
  position: absolute;
  left: -4%;
  bottom: -4px;
  width: 108%;
  height: 4px;
  background: var(--color-flow-green);
  transform: rotate(-0.5deg) scaleX(0.95);
  border-radius: 2px;
}

/* Sandbox node styles */
.flow-node {
  border: 2px solid rgba(245, 245, 220, 0.2);
  border-radius: 8px;
  padding: 12px;
  background: rgba(26, 26, 46, 0.9);
  backdrop-filter: blur(4px);
  min-width: 120px;
}

.flow-node:hover {
  border-color: var(--color-flow-green);
}

/* Disable feTurbulence on mobile for performance */
@media (max-width: 768px) {
  .water-distortion {
    filter: none !important;
  }
}

/* React Flow overrides */
.react-flow__background {
  background-color: var(--color-void) !important;
}

.react-flow__controls button {
  background-color: var(--color-nothing) !important;
  border-color: rgba(245, 245, 220, 0.1) !important;
  color: var(--color-zen) !important;
  fill: var(--color-zen) !important;
}

.react-flow__controls button:hover {
  background-color: var(--color-less) !important;
}

.react-flow__minimap {
  background-color: var(--color-void) !important;
}