.rainbow-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(440px, 78svh, 740px);
  background: var(--paper);
  color: var(--ink);
}

.rainbow-footer-copy {
  position: relative;
  margin-inline: clamp(28px, 4.2vw, 76px);
  padding-top: clamp(112px, 9vw, 152px);
  color: var(--muted);
  font: 400 clamp(20px, 1.6vw, 28px)/1.6 var(--font-sans);
  letter-spacing: -.01em;
}

.rainbow-footer-copy p { margin: 0; }
.rainbow-footer-copy .name-swap { color: inherit; }

.rainbow-bands {
  position: absolute;
  z-index: -1;
  inset: clamp(140px, 14vw, 210px) -40px -44px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  filter: blur(clamp(14px, 2.1vw, 34px));
  pointer-events: none;
}

.rainbow-bands span {
  --peak: .69;
  height: 100%;
  background: linear-gradient(to bottom, #ed30dd00 6%, #ed30dd 26%, #e64432 39%, #ffe05d 54%, #dbe6ee 72%, #447cba 88%, #2654e3 95%);
  transform-origin: bottom;
  transform: scaleY(var(--peak));
}

.rainbow-bands span:is(:nth-child(2), :nth-child(6)) { --peak: .80; }
.rainbow-bands span:is(:nth-child(3), :nth-child(5)) { --peak: .91; }
.rainbow-bands span:nth-child(4) { --peak: 1; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rainbow-footer { view-timeline-name: --footer-entry; }
    .rainbow-bands span {
      animation: rainbow-stretch linear both;
      animation-timeline: --footer-entry;
      animation-range: entry 0% entry 100%;
    }
  }
}

@keyframes rainbow-stretch {
  from { transform: scaleY(calc(var(--peak) * .38)); }
  to { transform: scaleY(var(--peak)); }
}

@media (max-width: 700px) {
  .rainbow-footer { min-height: 0; }
  .rainbow-bands { display: none; }
  .rainbow-footer-copy {
    margin-inline: var(--portfolio-gutter, 26px);
    padding-block: 28px max(76px, calc(52px + env(safe-area-inset-bottom)));
    font-size: 18px;
  }
  .rainbow-footer-copy :is(.name-strike, .name-short) { display: none; }
}