/* About ending Bloom: the geometry and motion values mirror the passed 404 pilot. */
body[data-page="about"] .awards[data-awards] {
  isolation: isolate;
}

body[data-page="about"] .awards[data-awards] > :not(.about-ending-bloom-layer) {
  position: relative;
  z-index: 2;
}

body[data-page="about"] .site-footer[data-footer] {
  isolation: isolate;
  position: relative;
}

body[data-page="about"] .site-footer[data-footer] > :not(.about-footer-bloom-layer) {
  position: relative;
  z-index: 2;
}

body[data-page="home"] .site-footer[data-footer] {
  isolation: isolate;
  position: relative;
}

body[data-page="home"] .site-footer[data-footer] > :not(.home-footer-bloom-layer) {
  position: relative;
  z-index: 2;
}

.about-ending-bloom-layer {
  --404-bg: var(--ink);
  --404-bloom-lavender: #c9bdff;
  --404-bloom-peach: #ffc7b4;
  --404-bloom-blue: #7f9eff;
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}

.about-footer-bloom-layer {
  --404-bg: var(--peach);
  --404-bloom-ink: var(--ink);
}

.home-footer-bloom-layer {
  --404-bg: var(--peach);
  --404-bloom-ink: var(--ink);
}

.about-ending-bloom-layer .error-page__bloom {
  --404-bloom-color: var(--404-bloom-lavender);
  position: absolute;
  width: clamp(52px, 5.8vw, 84px);
  height: clamp(74px, 7.6vw, 112px);
  opacity: 0;
  transform: translate(-50%, -78%) scale(calc(0.24 * var(--bloom-scale, 1))) rotate(var(--bloom-tilt, 0deg));
  transform-origin: 50% 86%;
  transition: opacity 620ms ease, transform 760ms cubic-bezier(0.16, 1.45, 0.3, 1);
  will-change: opacity, transform;
}

.about-ending-bloom-layer .error-page__bloom[data-bloom-tone="peach"] { --404-bloom-color: var(--404-bloom-peach); }
.about-ending-bloom-layer .error-page__bloom[data-bloom-tone="blue"] { --404-bloom-color: var(--404-bloom-blue); }
.about-footer-bloom-layer .error-page__bloom[data-bloom-tone="black"] { --404-bloom-color: var(--404-bloom-ink); }
.home-footer-bloom-layer .error-page__bloom[data-bloom-tone="black"] { --404-bloom-color: var(--404-bloom-ink); }

.about-ending-bloom-layer .error-page__bloom-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.about-ending-bloom-layer .error-page__bloom-stem path,
.about-ending-bloom-layer .error-page__bloom-flower path,
.about-ending-bloom-layer .error-page__bloom-flower circle {
  vector-effect: non-scaling-stroke;
  stroke: var(--404-bloom-color);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.8;
}

.about-ending-bloom-layer .error-page__bloom-stem path {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.about-ending-bloom-layer .error-page__bloom-stem path:nth-child(2n) {
  opacity: 0.84;
}

.about-ending-bloom-layer .error-page__bloom-flower-shape {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.28);
  opacity: 0;
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1) 140ms, opacity 340ms ease 140ms;
}

.about-ending-bloom-layer .error-page__bloom-flower-shape > path:first-child {
  fill: var(--404-bg);
}

.about-ending-bloom-layer .error-page__bloom-flower-core {
  fill: var(--404-bloom-color);
}

.about-ending-bloom-layer .error-page__bloom-flower-detail {
  fill: none;
}

.about-ending-bloom-layer .error-page__bloom.is-grown {
  opacity: 0.82;
  transform: translate(-50%, -78%) scale(var(--bloom-scale, 1)) rotate(var(--bloom-tilt, 0deg));
}

.about-ending-bloom-layer .error-page__bloom.is-grown .error-page__bloom-stem path { stroke-dashoffset: 0; }
.about-ending-bloom-layer .error-page__bloom.is-grown .error-page__bloom-flower-shape { transform: scale(1); opacity: 1; }

.about-ending-bloom-layer .error-page__bloom.is-fading {
  opacity: 0;
  transform: translate(-50%, -78%) scale(calc(0.72 * var(--bloom-scale, 1))) rotate(var(--bloom-tilt, 0deg));
}

@media (max-width: 600px) {
  .about-ending-bloom-layer .error-page__bloom {
    width: 50px;
    height: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-ending-bloom-layer .error-page__bloom,
  .about-ending-bloom-layer .error-page__bloom-stem path,
  .about-ending-bloom-layer .error-page__bloom-flower-shape {
    transition: none;
    animation: none;
  }

  .about-ending-bloom-layer .error-page__bloom-stem path {
    stroke-dashoffset: 0;
  }

  .about-ending-bloom-layer .error-page__bloom-flower-shape {
    transform: scale(1);
    opacity: 1;
  }

  .about-ending-bloom-layer .error-page__bloom.is-grown {
    opacity: 0.7;
    transform: translate(-50%, -78%) scale(var(--bloom-scale, 1)) rotate(var(--bloom-tilt, 0deg));
  }
}