.fy-process {
  background: var(--fy-charcoal);
  color: white;
}
.fy-process__track {
  background: oklch(1 0 0 / 0.05);
}
.fy-process__fill {
  background: linear-gradient(
    to bottom,
    color-mix(in oklch, var(--fy-gold) 30%, transparent),
    color-mix(in oklch, var(--fy-gold) 60%, transparent),
    var(--fy-gold)
  );
  transform-origin: top;
}
.fy-process__number {
  background: var(--fy-gold);
  color: var(--fy-charcoal);
}
.fy-process__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top right,
    color-mix(in oklch, var(--fy-gold) 10%, transparent),
    transparent 60%
  );
  mix-blend-mode: overlay;
}
.fy-process__cta {
  color: var(--fy-gold);
  border: 1px solid var(--fy-gold);
  transition:
    background-color 0.5s var(--fy-ease),
    color 0.5s var(--fy-ease);
}
.fy-process__cta:hover,
.fy-process__cta:focus-visible {
  background: var(--fy-gold);
  color: var(--fy-charcoal);
}

@keyframes fy-process-fill {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes fy-process-turn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes fy-process-drift {
  from {
    transform: translateY(2.5rem);
  }
  to {
    transform: translateY(-2.5rem);
  }
}
@keyframes fy-process-cta {
  to {
    background: var(--fy-gold);
    color: var(--fy-charcoal);
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fy-process__fill {
      animation: fy-process-fill linear both;
      animation-timeline: view(block);
      animation-range: cover;
    }
    .fy-process__star {
      animation: fy-process-turn linear both;
      animation-timeline: view(block);
      animation-range: cover;
    }
    .fy-process__drift {
      animation: fy-process-drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    .fy-process__cta {
      animation: fy-process-cta linear both;
      animation-timeline: view();
      animation-range: entry 60% entry 100%;
    }
  }
}