.ryze-flow-scene {
  --flow-clay: #c66f52;
  --flow-sun: #f2d253;
  --flow-sage: #a9c9bd;
  --flow-blue: #4e87b5;
  --flow-x: 0;
  --flow-y: 0;
  --flow-scroll: 0px;
  display: block;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.ryze-flow-scene[data-flow-scene="hero"] {
  position: absolute;
  z-index: 0;
  inset: 0;
}

.ryze-flow-scene[data-flow-scene="dashboard"] {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  opacity: .82;
}

body.ryze-flow-dashboard { isolation: isolate; }
body.ryze-flow-dashboard > .nav {
  position: sticky;
  z-index: 8;
}
body.ryze-flow-dashboard > main,
body.ryze-flow-dashboard > footer,
body.ryze-flow-dashboard > header,
body.ryze-flow-dashboard > .dashboard-tools,
body.ryze-flow-dashboard > .wellbeing-hidden,
body.ryze-flow-dashboard > .help-strip {
  position: relative;
  z-index: 1;
}

.ryze-flow-blobs,
.ryze-flow-dots,
.ryze-flow-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ryze-flow-blobs,
.ryze-flow-dots {
  transform: translate3d(calc(var(--flow-x) * 8px), calc(var(--flow-y) * 7px + var(--flow-scroll)), 0);
  will-change: transform;
}

.ryze-flow-blob {
  position: absolute;
  display: block;
  width: clamp(240px, 36vw, 580px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(clamp(50px, 7vw, 100px));
  opacity: .28;
  mix-blend-mode: multiply;
  animation: ryzeBlobMorph 31s ease-in-out infinite alternate;
}

.ryze-flow-blob--clay {
  left: -12%; top: 11%;
  background: radial-gradient(circle, color-mix(in srgb, var(--flow-clay) 32%, transparent), transparent 72%);
  animation-duration: 36s;
}
.ryze-flow-blob--sun {
  right: -11%; top: -15%;
  background: radial-gradient(circle, color-mix(in srgb, var(--flow-sun) 32%, transparent), transparent 72%);
  animation-duration: 30s; animation-delay: -9s;
}
.ryze-flow-blob--sage {
  right: 10%; bottom: -32%;
  background: radial-gradient(circle, color-mix(in srgb, var(--flow-sage) 36%, transparent), transparent 72%);
  animation-duration: 40s; animation-delay: -16s;
}
.ryze-flow-blob--warm {
  left: 38%; bottom: -34%; width: clamp(190px, 28vw, 430px);
  background: radial-gradient(circle, color-mix(in srgb, var(--flow-clay) 25%, transparent), transparent 73%);
  animation-duration: 33s; animation-delay: -5s;
}

@keyframes ryzeBlobMorph {
  0% { border-radius: 47% 53% 61% 39% / 45% 39% 61% 55%; scale: .94; }
  50% { border-radius: 61% 39% 44% 56% / 57% 49% 51% 43%; scale: 1.04; }
  100% { border-radius: 39% 61% 54% 46% / 42% 59% 41% 58%; scale: .98; }
}

.ryze-flow-lines {
  inset: -5% -16%;
  width: 132%; height: 110%;
  transform: translate3d(calc(var(--flow-x) * -6px), calc(var(--flow-y) * -5px + var(--flow-scroll) * .62), 0);
  will-change: transform;
}
.ryze-flow-lines path {
  fill: none;
  stroke: #172522;
  stroke-opacity: .075;
  stroke-width: 1.25;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.ryze-flow-lines path.heavy { stroke-width: 2.4; stroke-opacity: .06; }
.ryze-flow-lines path.clay-line { stroke: var(--flow-clay); stroke-opacity: .12; stroke-width: 1.55; }
.ryze-flow-lines .wave-a { animation: ryzeWaveA 29s ease-in-out infinite alternate; }
.ryze-flow-lines .wave-b { animation: ryzeWaveB 34s ease-in-out infinite alternate; }
.ryze-flow-lines .wave-c { animation: ryzeWaveA 25s ease-in-out -12s infinite alternate; }
.ryze-flow-lines .wave-d { animation: ryzeWaveB 31s ease-in-out -8s infinite alternate; }
@keyframes ryzeWaveA { from { transform: translateX(-2.8%); } to { transform: translateX(2.8%); } }
@keyframes ryzeWaveB { from { transform: translateX(2.2%); } to { transform: translateX(-2.2%); } }

.ryze-flow-dot {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--flow-sun);
  opacity: .65;
  animation: ryzeDotFloat 12s ease-in-out infinite;
}
.ryze-flow-dot:nth-child(1) { left: 13%; top: 28%; animation-delay: -3s; }
.ryze-flow-dot:nth-child(2) { left: 81%; top: 22%; width: 4px; height: 4px; background: var(--flow-blue); animation-duration: 15s; animation-delay: -7s; }
.ryze-flow-dot:nth-child(3) { left: 73%; top: 72%; width: 4px; height: 4px; background: var(--flow-sage); animation-duration: 13s; animation-delay: -9s; }
.ryze-flow-dot:nth-child(4) { left: 28%; top: 78%; background: var(--flow-blue); animation-duration: 16s; animation-delay: -5s; }
.ryze-flow-dot:nth-child(5) { left: 92%; top: 48%; width: 3px; height: 3px; animation-duration: 11s; animation-delay: -2s; }
.ryze-flow-dot:nth-child(6) { left: 8%; top: 61%; width: 3px; height: 3px; background: var(--flow-sage); animation-duration: 14s; animation-delay: -11s; }
@keyframes ryzeDotFloat {
  0%, 100% { translate: 0 7px; opacity: .32; }
  50% { translate: 2px -17px; opacity: .7; }
}

.ryze-flow-scene[data-flow-scene="dashboard"] .ryze-flow-blob {
  width: clamp(300px, 43vw, 700px);
  opacity: .12;
  filter: blur(clamp(70px, 10vw, 145px));
}
.ryze-flow-scene[data-flow-scene="dashboard"] .ryze-flow-blob--clay { left: -21%; top: 13%; }
.ryze-flow-scene[data-flow-scene="dashboard"] .ryze-flow-blob--sun { right: -23%; top: 7%; }
.ryze-flow-scene[data-flow-scene="dashboard"] .ryze-flow-blob--sage { right: -18%; bottom: -27%; }
.ryze-flow-scene[data-flow-scene="dashboard"] .ryze-flow-blob--warm { display: none; }
.ryze-flow-scene[data-flow-scene="dashboard"] .ryze-flow-lines {
  inset: -2% -22%; width: 144%; height: 106%;
}
.ryze-flow-scene[data-flow-scene="dashboard"] .ryze-flow-lines path { stroke-opacity: .037; }
.ryze-flow-scene[data-flow-scene="dashboard"] .ryze-flow-lines path.heavy { stroke-opacity: .028; }
.ryze-flow-scene[data-flow-scene="dashboard"] .ryze-flow-lines path.clay-line { stroke-opacity: .045; }
.ryze-flow-scene[data-flow-scene="dashboard"] .ryze-flow-dot { width: 4px; height: 4px; opacity: .34; }
.ryze-flow-scene[data-flow-scene="dashboard"][data-tone="wellbeing"] {
  --flow-clay: #91b8b2;
  --flow-sun: #a9c9bd;
  --flow-sage: #9bb9d2;
  --flow-blue: #739ec2;
}
.ryze-flow-scene[data-flow-scene="dashboard"][data-tone="study"] {
  --flow-clay: #c66f52;
  --flow-sun: #f2d253;
  --flow-sage: #c7b590;
  --flow-blue: #829b8c;
}

@media (max-width: 850px) {
  .ryze-flow-scene[data-flow-scene="hero"] .ryze-flow-blob { opacity: .24; }
  .ryze-flow-scene[data-flow-scene="hero"] .ryze-flow-lines { inset: -4% -22%; width: 144%; }
  .ryze-flow-scene[data-flow-scene="hero"] .ryze-flow-lines path { stroke-opacity: .06; }
  .ryze-flow-scene[data-flow-scene="hero"] .ryze-flow-lines path.clay-line { stroke-opacity: .09; }
  .ryze-flow-scene[data-flow-scene="dashboard"] .ryze-flow-blob--warm { display: none; }
}
@media (max-width: 680px) {
  .ryze-flow-scene[data-flow-scene="hero"] .ryze-flow-blob { width: 68vw; filter: blur(48px); opacity: .2; }
  .ryze-flow-scene[data-flow-scene="hero"] .ryze-flow-blob--warm,
  .ryze-flow-scene[data-flow-scene="hero"] .ryze-flow-dot:nth-child(n+4),
  .ryze-flow-scene[data-flow-scene="hero"] .ryze-flow-lines path:nth-child(n+5) { display: none; }
  .ryze-flow-scene[data-flow-scene="hero"] .ryze-flow-lines { inset: -5% -32%; width: 164%; }
  .ryze-flow-scene[data-flow-scene="hero"] .ryze-flow-lines path { stroke-opacity: .05; }
  .ryze-flow-scene[data-flow-scene="hero"] .ryze-flow-lines path.clay-line { stroke-opacity: .075; }
  .ryze-flow-scene[data-flow-scene="dashboard"] .ryze-flow-blob { width: 78vw; filter: blur(58px); opacity: .1; }
  .ryze-flow-scene[data-flow-scene="dashboard"] .ryze-flow-blob--clay { left: -39%; top: 18%; }
  .ryze-flow-scene[data-flow-scene="dashboard"] .ryze-flow-blob--sun { right: -40%; top: 7%; }
  .ryze-flow-scene[data-flow-scene="dashboard"] .ryze-flow-blob--sage { right: -35%; bottom: -18%; }
  .ryze-flow-scene[data-flow-scene="dashboard"] .ryze-flow-lines { inset: -5% -55%; width: 210%; }
  .ryze-flow-scene[data-flow-scene="dashboard"] .ryze-flow-lines path:nth-child(n+4) { display: none; }
  .ryze-flow-scene[data-flow-scene="dashboard"] .ryze-flow-dot:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ryze-flow-blob, .ryze-flow-lines path, .ryze-flow-dot { animation: none !important; }
  .ryze-flow-blobs, .ryze-flow-lines, .ryze-flow-dots { transform: none !important; will-change: auto; }
}