* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0a0a;
}

#art {
  display: block;
  width: 100%;
  height: 100%;
}

.layer-flow polyline {
  stroke-dasharray: 600 40;
  animation: flowPulse 15s linear infinite, flowSway 20s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.05s);
}

@keyframes flowSway {
  0%, 100% { translate: 0 0; }
  25%  { translate: calc(var(--dist, 0) * 30px)  calc(var(--dist, 0) * -20px); }
  50%  { translate: calc(var(--dist, 0) * -15px) calc(var(--dist, 0) * 30px); }
  75%  { translate: calc(var(--dist, 0) * -25px) calc(var(--dist, 0) * -12px); }
}

@keyframes flowPulse {
  to { stroke-dashoffset: -640; }
}

.layer-flow {
  will-change: filter;
}

/* Star twinkle — slow opacity pulse, staggered */
.layer-stars polygon {
  animation: twinkle 5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.12s);
}
@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.layer-stars {
  will-change: filter;
}

/* Bubble pulse — gentle opacity breathing, staggered per bubble */
.layer-bubbles polygon {
  animation: bubblePulse 7s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.37s);
}
@keyframes bubblePulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .layer-flow polyline,
  .layer-stars polygon,
  .layer-bubbles polygon {
    animation: none;
  }
}