flowfi-network/app/globals.css

@import "tailwindcss";

@theme {
  /* Deep ocean palette — distinct from NoFi's harsh void */
  --color-deep: #050d1a;
  --color-ocean: #0c1e3a;
  --color-current: #0f2847;
  --color-surface: #143561;

  /* Flow accents */
  --color-flow: #2dd4bf;
  --color-flow-light: #5eead4;
  --color-glow: #a7f3d0;
  --color-anti-green: #e94560;

  /* Text colors — cooler than NoFi's beige */
  --color-foam: #e0f2f1;
  --color-mist: #94a3b8;

  /* Typography — sans-serif, not monospace */
  --font-family-sans: var(--font-outfit), "Outfit", system-ui, sans-serif;
  --font-family-caveat: var(--font-caveat), "Caveat", cursive;
}

/* ============================================
   FLOWING ANIMATIONS — organic, not mechanical
   ============================================ */

/* Gentle wave undulation */
@keyframes wave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(0.3deg); }
  75% { transform: translateY(3px) rotate(-0.3deg); }
}

/* Slow horizontal drift like a current */
@keyframes current {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(12px); }
}

/* Breathing scale — organic pulse */
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.015); opacity: 0.95; }
}

/* Soft glow pulse */
@keyframes glow-pulse {
  0%, 100% { opacity: 0.4; filter: blur(0px); }
  50% { opacity: 0.7; filter: blur(1px); }
}

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

/* Ripple expand */
@keyframes ripple {
  0% { transform: scale(0.95); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Rising bubbles */
@keyframes rise {
  0% { transform: translateY(0); opacity: 0.6; }
  100% { transform: translateY(-60px); opacity: 0; }
}

.animate-wave { animation: wave 6s ease-in-out infinite; }
.animate-current { animation: current 10s ease-in-out infinite; }
.animate-breathe { animation: breathe 6s ease-in-out infinite; }
.animate-glow-pulse { animation: glow-pulse 4s ease-in-out infinite; }
.animate-ripple { animation: ripple 0.8s ease-out forwards; }
.animate-flow-gradient {
  background-size: 200% 200%;
  animation: flow-gradient 8s ease-in-out infinite;
}

/* ============================================
   PIPE FLOW — core Sankey animation
   ============================================ */

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

.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);
}

/* ============================================
   FLOWING UNDERLINE — SVG wave, not scrawl
   ============================================ */

.flow-underline {
  position: relative;
  display: inline-block;
}
.flow-underline::after {
  content: '';
  position: absolute;
  left: -2%;
  bottom: -6px;
  width: 104%;
  height: 6px;
  background: linear-gradient(90deg, transparent, var(--color-flow), transparent);
  border-radius: 3px;
  opacity: 0.6;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8'%3E%3Cpath d='M0,4 Q15,0 30,4 Q45,8 60,4 Q75,0 90,4 Q105,8 120,4' fill='none' stroke='white' stroke-width='6'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8'%3E%3Cpath d='M0,4 Q15,0 30,4 Q45,8 60,4 Q75,0 90,4 Q105,8 120,4' fill='none' stroke='white' stroke-width='6'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
}

/* ============================================
   SECTION DIVIDERS — flowing wave transitions
   ============================================ */

.wave-divider {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.wave-divider svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 60px;
}

/* ============================================
   COMPONENT STYLES
   ============================================ */

/* Sandbox nodes — rounded, glowing */
.flow-node {
  border: 1.5px solid rgba(45, 212, 191, 0.2);
  border-radius: 16px;
  padding: 14px;
  background: rgba(12, 30, 58, 0.85);
  backdrop-filter: blur(8px);
  min-width: 120px;
  transition: all 0.4s ease;
  box-shadow: 0 0 20px rgba(45, 212, 191, 0.05);
}

.flow-node:hover {
  border-color: rgba(45, 212, 191, 0.5);
  box-shadow: 0 0 30px rgba(45, 212, 191, 0.15);
}

/* 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-deep) !important;
}

.react-flow__controls button {
  background-color: var(--color-ocean) !important;
  border-color: rgba(45, 212, 191, 0.15) !important;
  color: var(--color-foam) !important;
  fill: var(--color-foam) !important;
  border-radius: 8px !important;
}

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

.react-flow__minimap {
  background-color: var(--color-deep) !important;
  border-radius: 12px !important;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Selection color */
::selection {
  background: rgba(45, 212, 191, 0.3);
  color: var(--color-foam);
}