.hero-shell {
  position: relative;
}

/* The paint continues the hero's surface across the gallery boundary. */
.paint-edge {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 64px;
  fill: var(--ink);
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.paint-drip {
  transform-box: view-box;
  transform-origin: 50% 0;
  animation: paint-seep var(--flow-time, 2s) cubic-bezier(.18, .65, .28, 1) var(--flow-delay, 0s) both;
}

@keyframes paint-seep {
  from { transform: scaleY(.15); }
  to { transform: scaleY(1); }
}

.work {
  padding-top: 86px;
}

@media (min-width: 700px) {
  .paint-edge { height: 100px; }
  .work { padding-top: 120px; }
}

.paint-rain {
  position: fixed;
  inset: 0;
  z-index: 9;
  overflow: hidden;
  pointer-events: none;
}

.paint-drop {
  position: absolute;
  width: var(--drop-width);
  height: calc(var(--drop-width) * 1.6);
  background: var(--ink);
  border-radius: 48% 52% 50% 50% / 65% 65% 35% 35%;
  transform-origin: 50% 0;
  will-change: transform;
}

.paint-stream {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
}