/* A more visual, SideShift-inspired motion treatment for UGC Grow's three pillars. */
.scale{
  background:radial-gradient(ellipse 62% 55% at 50% 43%,#eef4ff 0%,#f9fbff 60%,#fff 100%);
}
.scale .section-intro h2{max-width:850px;margin-inline:auto}
.scale .section-intro p{max-width:760px;margin-inline:auto}
.scale .proof-stat{margin-top:31px}
.metric-grid{gap:23px;margin-top:37px}
.metric{
  min-height:421px;
  overflow:hidden;
  padding:27px 25px;
  border:1px solid #e9edf3;
  border-radius:23px;
  background:#fff;
  box-shadow:0 18px 42px #1c355d0c;
  transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s ease,border-color .38s ease;
}
.metric:hover{
  transform:translateY(-7px);
  border-color:#dce7f8;
  box-shadow:0 25px 52px #1c355d1a;
}
.metric-number{color:#202124;font-size:60px;font-weight:570;line-height:1;letter-spacing:-.07em}
.metric h3{max-width:none;margin-top:15px;color:#25272b;font-size:18px;font-weight:650;line-height:1.24}
.metric p{position:relative;z-index:1;max-width:35ch;margin-top:10px;color:#72767e;font-size:14px;line-height:1.52}

/* The bars rise together, then carry a soft travelling highlight. */
.metric .bar-art{
  left:24px;
  right:24px;
  bottom:0;
  width:auto;
  height:167px;
  display:flex;
  align-items:flex-end;
  gap:5px;
  background:none;
  clip-path:none;
  opacity:1;
}
.metric .bar-art span{
  position:relative;
  flex:1 1 0;
  min-width:0;
  height:var(--h);
  overflow:hidden;
  border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,#4386f7 0%,#6ca5fa 58%,#afd0ff 100%);
  transform-origin:bottom;
  transform:scaleY(.06);
  opacity:.4;
}
.metric.in-view .bar-art span{animation:metric-bar-rise .95s cubic-bezier(.18,.82,.22,1) var(--delay) both}
.bar-art span i{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(180deg,#ffffff00 0%,#ffffff5c 38%,#ffffff00 66%);
  background-size:100% 220%;
  animation:metric-bar-sheen 3.2s ease-in-out var(--wave-delay) infinite;
}
@keyframes metric-bar-rise{from{transform:scaleY(.06);opacity:.3}to{transform:scaleY(1);opacity:1}}
@keyframes metric-bar-sheen{0%,18%{background-position:0 100%}55%,100%{background-position:0 -100%}}

/* A clipped stream of real workflow steps, with the same pace as a live feed. */
.metric .payment-lines{
  left:24px;
  right:24px;
  bottom:0;
  height:194px;
  overflow:hidden;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 11%,#000 80%,transparent 100%);
}
.metric .payment-track{gap:8px;animation:metric-feed-scroll 15s linear infinite}
@keyframes metric-feed-scroll{to{transform:translateY(calc(-50% - 4px))}}
.metric .payment-lines span{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:46px;
  padding:8px 9px 8px 11px;
  border:1px solid #e8edf3;
  border-radius:10px;
  background:#fff;
  box-shadow:0 2px 7px #1523380b;
  color:#555b65;
  font-size:11.5px;
  font-weight:550;
  letter-spacing:-.018em;
  white-space:nowrap;
}
.metric .payment-lines em{
  flex:none;
  float:none;
  padding:6px 7px;
  border-radius:999px;
  background:#e7f9ed;
  box-shadow:0 2px 4px #174c2519;
  color:#219e4c;
  font-size:10.5px;
  font-style:normal;
  font-weight:650;
  line-height:1;
}

/* Platform rows continually fill and reset, like the tracking UI in the reference. */
.metric .tracked-lines{
  left:24px;
  right:24px;
  bottom:23px;
  display:grid;
  gap:9px;
}
.metric-learning .tracked-lines span::after{content:none}
.metric .tracked-lines .tracking-row{
  position:relative;
  display:grid;
  grid-template-columns:25px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-height:47px;
  padding:8px 9px 13px;
  border:1px solid #e6ebf3;
  border-radius:10px;
  background:#fff;
  box-shadow:0 2px 7px #1523380b;
}
.metric .tracking-icon{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:6px;
  color:#fff;
  font-size:17px;
  font-style:normal;
  font-weight:700;
  line-height:1;
}
.tracking-tiktok{background:#111218}
.tracking-instagram{background:linear-gradient(135deg,#7a40d4,#df42a6 53%,#ff964a)}
.tracking-next{background:#477dce}
.metric .tracked-lines .tracking-label{
  display:block;
  min-width:0;
  overflow:hidden;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  color:#61666f;
  font-size:11.5px;
  font-weight:550;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.metric .tracked-lines em{
  flex:none;
  float:none;
  color:#238f4b;
  font-size:10.5px;
  font-weight:650;
  white-space:nowrap;
}
.tracking-progress{
  position:absolute;
  left:42px;
  right:81px;
  bottom:7px;
  height:3px;
  overflow:hidden;
  border-radius:99px;
  background:#e8eef9;
}
.tracking-progress::after{
  content:"";
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:#78a7f7;
  transform-origin:left;
  animation:metric-track-fill 5.5s ease-in-out infinite;
}
.tracking-row:nth-child(2) .tracking-progress::after{animation-delay:-1.8s}
.tracking-row:nth-child(3) .tracking-progress::after{animation-delay:-3.6s}
@keyframes metric-track-fill{0%,8%{transform:scaleX(.18)}55%,78%{transform:scaleX(1)}100%{transform:scaleX(.18)}}

@media(max-width:800px){
  .metric-grid{max-width:600px;margin:36px auto 0}
  .metric{min-height:405px}
  .metric .bar-art{left:24px;right:24px;width:auto;height:160px}
}
@media(max-width:520px){
  .metric{min-height:404px;padding:25px 22px}
  .metric-number{font-size:56px}
  .metric h3{font-size:17px}
  .metric p{font-size:13.5px}
  .metric .bar-art,.metric .payment-lines,.metric .tracked-lines{left:21px;right:21px}
  .metric .bar-art{width:auto;height:148px}
  .metric .payment-lines span{font-size:10.5px}
  .metric .payment-lines em,.metric .tracked-lines em{font-size:10px}
}
@media(max-width:370px){
  .metric .payment-lines span{font-size:9.5px}
  .metric .tracking-icon{width:22px;height:22px}
  .metric .tracked-lines .tracking-label{font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){
  .metric,.metric .bar-art span{transition:none}
  .metric .bar-art span{transform:scaleY(1);opacity:1}
  .metric .payment-track,.bar-art span i,.tracking-progress::after{animation:none}
  .tracking-progress::after{transform:scaleX(.75)}
}