/* The maple is attached to the hero; its reveal repeats independently of scroll. */
.hero { isolation: isolate; }
.maple-track {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  --maple-cycle: 8s;
}
.maple-frame {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
}
.maple-outline {
  display: block;
  flex: 0 0 auto;
  width: clamp(780px, 77vw, 1180px);
  height: calc(100% - 24px);
  max-width: none;
  transform: translateX(10%);
  overflow: visible;
}
.maple-outline use {
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.maple-base { fill: none; stroke: #969696; stroke-width: 1.25; opacity: .24; }
.maple-colour {
  fill: #bf2837;
  fill-opacity: .012;
  stroke: #c62d3b;
  stroke-width: 1.6;
  stroke-opacity: .66;
  opacity: 1;
  animation: maple-ink var(--maple-cycle) linear infinite;
  animation-play-state: var(--maple-animation-state, running);
}
[data-maple-fill] {
  transform-box: view-box;
  transform-origin: 0 600px;
  animation: maple-rise var(--maple-cycle) cubic-bezier(.45,0,.3,1) infinite;
  animation-play-state: var(--maple-animation-state, running);
}
.hero.maple-paused { --maple-animation-state: paused; }
@keyframes maple-rise {
  0%, 5% { transform: scaleY(0); }
  60%, 100% { transform: scaleY(1); }
}
@keyframes maple-ink {
  0%, 5% { opacity: 0; }
  12%, 78% { opacity: 1; }
  94%, 100% { opacity: 0; }
}
@media (min-width: 1600px) {
  .maple-outline { width: 1180px; transform: translateX(4%); }
}
@media (max-width: 900px) {
  .maple-outline { width: 860px; transform: translateX(20%); }
  .maple-base { opacity: .2; }
  .maple-colour { stroke-opacity: .49; }
}
@media (max-width: 650px) {
  .maple-outline { width: 112vw; transform: translateX(10%); }
  .maple-base { stroke-width: 1; opacity: .23; }
  .maple-colour { stroke-width: 1.25; stroke-opacity: .51; fill-opacity: .008; }
}
@media (max-height: 650px) and (min-width: 901px) {
  .maple-outline { width: 760px; transform: translateX(7%); }
}
@media (prefers-reduced-motion: reduce) {
  [data-maple-fill] { animation: none; transform: none; }
  .maple-colour { animation: none; opacity: 1; clip-path: none; }
}