/* "Built for Intelligent Performance" stage. Implemented from the pixel spec, scoped under
   .perf (the spec's main.stage). The spec's html.entrance-active becomes .perf.entrance-active,
   added when the section scrolls into view. Cards scale as rigid 429x554 units via --u. */
.perf {
  --paper: #ececeb;
  --ink: #222222;
  --copy: #4a4a4a;
  --glass-line: rgba(255,255,255,.36);
  --card-ref-w: 429;
  --card-ref-h: 554;
  --card-radius: 17;
  --card-count: 3;
  --gap: clamp(8px, 1.5vw, 23px);
  --gutter: clamp(14px, 3.6vw, 54px);
  --content-max: calc(var(--card-count) * var(--card-ref-w) * 1px + (var(--card-count) - 1) * var(--gap));
  --pad-top: clamp(16px, 6vh, 60px);
  --pad-bottom: clamp(14px, 2.4vh, 38px);
  --masthead-gap: clamp(16px, 3vw, 40px);
  --cards-offset: clamp(12px, 5.4vh, 52px);

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 86svh;
  min-height: 560px;
  max-height: 850px;
  overflow: hidden;
  padding: var(--pad-top) var(--gutter) var(--pad-bottom);
  margin: 12px;
  border-radius: 28px;
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  background:
    linear-gradient(rgba(236,236,234,.10), rgba(236,236,234,.10)),
    url("https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/5c3ec08f-2dbf-4c0a-8588-f6106a789443.webp") center / cover no-repeat,
    #ececeb;
}
.perf button, .perf a { font: inherit; }
.perf * { box-sizing: border-box; }

.perf .stage-motion { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.perf .stage-motion--narrow { display: none; }
.perf .paper-texture { position: absolute; z-index: -1; inset: 0; display: none; }
.perf .filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.perf .masthead, .perf .cards { width: min(100%, var(--content-max)); margin-inline: auto; }

/* ---------- masthead ---------- */
.perf .masthead {
  position: relative; z-index: 2; flex: 0 0 auto;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0, clamp(260px, 32vw, 483px));
  gap: var(--masthead-gap); align-items: start;
}
.perf .headline {
  margin: 0; max-width: 100%; color: #202020;
  font-size: clamp(24px, min(3.1vw, 5.9vh), 47px);
  font-weight: 400; letter-spacing: .015em; line-height: 1.223;
}
.perf .headline__line { display: flex; flex-wrap: nowrap; align-items: center; white-space: pre; }
.perf .dot-word {
  display: inline-block; flex: 0 0 auto; width: 4.851em; height: .766em; margin-left: .319em;
  color: #ad314d; transform: translateY(.085em);
}
.perf .dot-svg { display: block; overflow: visible; color: inherit; }
.perf .intro {
  container-type: inline-size; width: 100%; margin: .34em 0 0; color: var(--copy);
  font-size: clamp(13px, min(1.36vw, 2.6vh), 20.6px);
  font-weight: 400; letter-spacing: -.017em; line-height: 1.62;
}
.perf .desktop-break { display: none; }
@container (min-width: 26.5em) { .perf .desktop-break { display: inline; } }

/* ---------- cards row ---------- */
.perf .cards {
  flex: 1 1 auto; container-type: size; display: flex; justify-content: space-between; align-items: center;
  gap: var(--gap); min-height: 0; margin-top: var(--cards-offset);
  --card-w: min(
    (100cqw - (var(--card-count) - 1) * var(--gap)) / var(--card-count),
    100cqh * var(--card-ref-w) / var(--card-ref-h),
    var(--card-ref-w) * 1px
  );
}
.perf .card {
  container-type: inline-size; position: relative; flex: 0 0 auto; overflow: hidden;
  width: var(--card-w); aspect-ratio: 429 / 554;
  border: 1px solid var(--glass-line);
  border-radius: calc(var(--card-w) * 17 / 429);
  background-origin: border-box; color: #fff;
  --u: calc(100cqw / 429);
  box-shadow: 0 2px 4px rgba(50,28,39,.30), inset 0 1px 0 rgba(255,255,255,.24);
  padding: 0;
}
.perf .card__media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.perf .card::before {
  content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: screen; pointer-events: none;
  background:
    linear-gradient(102deg, rgba(255,255,255,.10), transparent 28%, rgba(255,255,255,.08) 62%, transparent 88%),
    radial-gradient(ellipse 85% 34% at 54% 7%, rgba(255,255,255,.24), transparent 72%);
}
.perf .card__grain { position: absolute; z-index: 2; inset: -8%; width: 116%; height: 116%; opacity: .46; mix-blend-mode: soft-light; pointer-events: none; }

/* ---------- card 1: speed ---------- */
.perf .card--speed {
  background:
    radial-gradient(ellipse 34% 24% at 50% 2%, rgba(255,220,211,.10) 0%, transparent 76%),
    radial-gradient(ellipse 44% 34% at 106% 20%, rgba(255,222,211,.10) 0%, transparent 74%),
    radial-gradient(ellipse 40% 27% at 50% 82%, rgba(255,214,208,.08) 0%, transparent 74%),
    radial-gradient(ellipse 43% 31% at -7% 61%, rgba(127,31,53,.06) 0%, transparent 74%),
    radial-gradient(ellipse 47% 34% at 107% 82%, rgba(119,29,49,.07) 0%, transparent 74%),
    linear-gradient(180deg, rgba(255,246,241,.43) 0%, rgba(255,237,235,.19) 9%, transparent 22%),
    radial-gradient(ellipse 44% 34% at 50% 111%, rgba(55,0,20,.16) 0%, transparent 74%),
    radial-gradient(ellipse 105% 32% at 50% 80%, rgba(255,218,204,.20) 0%, rgba(255,205,196,.10) 48%, transparent 78%),
    radial-gradient(ellipse 55% 22% at -5% 39%, rgba(240,250,200,.15) 0%, transparent 76%),
    radial-gradient(ellipse 64% 49% at -8% 106%, rgba(255,222,199,.48) 0%, rgba(255,204,192,.25) 49%, transparent 78%),
    radial-gradient(ellipse 64% 49% at 108% 106%, rgba(255,222,199,.43) 0%, rgba(255,204,192,.22) 49%, transparent 78%),
    radial-gradient(ellipse 52% 54% at -8% 44%, rgba(255,216,207,.20) 0%, transparent 77%),
    radial-gradient(ellipse 68% 45% at -4% -3%, rgba(255,235,232,.73) 0%, rgba(255,226,226,.41) 46%, transparent 77%),
    radial-gradient(ellipse 70% 45% at 104% -4%, rgba(255,238,233,.78) 0%, rgba(255,226,226,.42) 48%, transparent 78%),
    radial-gradient(ellipse 93% 47% at 106% 58%, rgba(245,247,241,.73) 0%, rgba(246,231,229,.42) 48%, transparent 76%),
    radial-gradient(ellipse 74% 40% at -8% 73%, rgba(255,210,190,.48) 0%, rgba(255,194,181,.25) 48%, transparent 77%),
    radial-gradient(ellipse 77% 36% at 57% 58%, rgba(255,226,218,.30) 0%, rgba(255,206,207,.15) 50%, transparent 78%),
    radial-gradient(ellipse 54% 30% at 50% 17%, rgba(106,8,51,.22) 0%, transparent 78%),
    linear-gradient(180deg, #bd4468 0%, #ad355b 38%, #a63b50 72%, #8c1320 100%);
  background-origin: border-box;
}
.perf .card--speed::before {
  background:
    linear-gradient(103deg, rgba(255,255,255,.08), transparent 31%, rgba(255,255,255,.055) 63%, transparent 88%),
    radial-gradient(ellipse 92% 19% at 51% 0%, rgba(255,255,255,.08), transparent 78%);
}
.perf .card--speed .card__grain { opacity: .54; }
.perf .card--speed .card__title { top: 6.3%; color: #fff; font-size: calc(22.7 * var(--u)); }

.perf .gauge { position: absolute; z-index: 2; top: 27.63%; left: 10.5%; width: 79%; height: 59%; overflow: visible; }
.perf .gauge .tick { stroke: rgba(255,188,210,.34); }

.perf .metric--speed { top: 48.6%; }
.perf .metric--speed .dot-number { width: 31.2%; }
.perf .metric--speed .dot-svg { transform: translate(calc(4 * var(--u)), calc(2 * var(--u))) scale(.925, 1.018); transform-origin: left top; }
.perf .metric--speed .metric__unit { margin-left: 1%; font-size: calc(30.6 * var(--u)); transform: translateY(calc(5 * var(--u))); }
.perf .card--speed .caption { top: 64.75%; font-size: calc(20.33 * var(--u)); }
.perf .card--speed .learn-more { top: 83.9%; width: calc(111 * var(--u)); height: calc(44 * var(--u)); }

/* ---------- card 2: context ---------- */
.perf .card--context {
  background:
    radial-gradient(ellipse 118% 66% at 48% -8%, rgba(221,232,255,.065), transparent 74%),
    radial-gradient(ellipse 106% 52% at 48% 112%, rgba(255,155,139,.075), transparent 73%),
    radial-gradient(ellipse 82% 15% at 50% 29%, rgba(240,204,244,.24), transparent 81%),
    radial-gradient(ellipse 64% 18% at 50% 61%, rgba(239,177,208,.17), transparent 81%),
    radial-gradient(ellipse 43% 42% at -5% 30%, rgba(228,220,255,.53), transparent 78%),
    radial-gradient(ellipse 43% 42% at 105% 30%, rgba(245,200,210,.54), transparent 78%),
    radial-gradient(ellipse 70% 48% at 70% 110%, rgba(238,204,201,.62), transparent 77%),
    radial-gradient(ellipse 70% 23% at 78% 1%, rgba(251,208,226,.56), transparent 78%),
    radial-gradient(ellipse 78% 25% at 15% 8%, rgba(218,211,255,.54), transparent 79%),
    radial-gradient(ellipse 38% 31% at 80% 90%, rgba(230,190,191,.38), transparent 74%),
    radial-gradient(ellipse 45% 26% at 47% 78%, rgba(236,184,183,.45), transparent 73%),
    linear-gradient(164deg, #c9b5e1 0%, #ad80ca 29%, #9d4f72 64%, #793246 100%);
  background-origin: border-box;
}
.perf .card--context .card__title { font-size: calc(23 * var(--u)); line-height: 1.48; }
.perf .card--context .card__grain { opacity: .68; }
.perf .card--context::before {
  mix-blend-mode: multiply; opacity: .54;
  background:
    radial-gradient(ellipse 18% 23% at 20% 32%, rgba(103,41,148,.24), transparent 76%),
    radial-gradient(ellipse 20% 24% at 81% 30%, rgba(121,34,113,.22), transparent 76%),
    radial-gradient(ellipse 66% 9% at 50% 30%, rgba(103,33,125,.26), transparent 82%),
    radial-gradient(ellipse 68% 8% at 50% 69%, rgba(86,27,64,.23), transparent 83%),
    linear-gradient(103deg, rgba(255,255,255,.08), transparent 31%, rgba(255,255,255,.05) 63%, transparent 88%);
}
.perf .context-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.perf .context-backdrop {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 54%, rgba(0,0,0,.72) 58%, rgba(0,0,0,.18) 62%, transparent 65%);
  mask: linear-gradient(180deg, #000 0%, #000 54%, rgba(0,0,0,.72) 58%, rgba(0,0,0,.18) 62%, transparent 65%);
}
.perf .context-window {
  position: absolute; z-index: 3; top: 32.4%; left: 20.4%; width: 59%; height: 30.1%; overflow: hidden; border: none;
  border-radius: calc(10 * var(--u));
  background:
    linear-gradient(0deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.15) 45%, rgba(255,255,255,0) 80%),
    linear-gradient(270deg, rgba(213,62,152,.62) 0px, rgba(213,62,152,0) calc(5 * var(--u))),
    radial-gradient(ellipse 118% 70% at 60% 8%, rgba(255,203,252,.34), transparent 74%),
    linear-gradient(105deg, rgba(250,232,250,.72) 0%, rgba(238,120,214,.68) 51%, rgba(222,86,177,.82) 100%);
  box-shadow: 0 calc(13 * var(--u)) calc(25 * var(--u)) rgba(70,17,69,.31), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(calc(9 * var(--u))) saturate(1.08);
  backdrop-filter: blur(calc(9 * var(--u))) saturate(1.08);
}
.perf .context-window .panel-grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .24; mix-blend-mode: soft-light; }
.perf .window-lines { position: absolute; top: 9%; left: 6.7%; width: 87%; height: 24%; }
.perf .window-lines span { display: block; }
.perf .window-lines span:nth-child(1) { height: calc(6 * var(--u)); border-radius: calc(2.5 * var(--u)); background: rgba(255,255,255,.72); width: 29%; margin-bottom: calc(3 * var(--u)); }
.perf .window-lines span:nth-child(2) { width: 100%; height: calc(22 * var(--u)); border-radius: calc(6 * var(--u)); background: linear-gradient(90deg, rgba(255,240,253,.72), rgba(255,170,242,.75) 42%, rgba(255,108,235,.78)); }
.perf .window-lines span:nth-child(3) { width: 86%; height: calc(6 * var(--u)); border-radius: calc(2.5 * var(--u)); background: rgba(255,255,255,.72); margin-top: calc(3 * var(--u)); opacity: .64; }

.perf .metric--context { top: 48%; transform: translateX(2.1cqw); }
.perf .metric--context .dot-number { width: 30.5%; }
.perf .metric--context .dot-svg { transform: translate(calc(-1 * var(--u)), calc(-.5 * var(--u))) scale(.96, 1.02); transform-origin: center; }
.perf .card--context .caption { top: 65.72%; color: rgba(255,255,255,.84); font-size: calc(19.1 * var(--u)); letter-spacing: calc(-.28 * var(--u)); line-height: 1.38; }
.perf .card--context .learn-more { top: 83.9%; height: calc(44 * var(--u)); }

/* ---------- card 3: connections ---------- */
.perf .card--connections {
  background:
    radial-gradient(ellipse 54% 14% at 56% 0%, rgba(255,206,190,.16), transparent 76%),
    radial-gradient(ellipse 38% 24% at 102% 8%, rgba(255,190,164,.24), transparent 75%),
    radial-gradient(ellipse 28% 24% at -5% 66%, rgba(255,192,174,.30), transparent 74%),
    radial-gradient(ellipse 46% 30% at 104% 32%, rgba(255,146,52,.42), transparent 74%),
    radial-gradient(ellipse 80% 36% at 62% 57%, rgba(255,141,36,.62), transparent 72%),
    radial-gradient(ellipse 58% 30% at 6% 103%, rgba(199,49,45,.38), transparent 76%),
    radial-gradient(ellipse 60% 32% at 97% 101%, rgba(190,40,44,.42), transparent 76%),
    linear-gradient(177deg, #d84736 0%, #dd523c 24%, #e8703d 52%, #de5641 78%, #d34239 100%);
  background-origin: border-box;
}
.perf .card--connections .card__grain { opacity: .58; }
.perf .card--connections::before {
  background:
    linear-gradient(102deg, rgba(255,255,255,.07), transparent 30%, rgba(255,255,255,.05) 62%, transparent 88%),
    radial-gradient(ellipse 84% 26% at 54% 4%, rgba(255,255,255,.11), transparent 74%);
}
.perf .connections-map {
  position: absolute; z-index: 2; top: 21.7%; left: 0; width: 100%; height: 43%; opacity: .78;
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,.46) 67%, rgba(0,0,0,.15) 83%, transparent 96%);
  mask: linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,.46) 67%, rgba(0,0,0,.15) 83%, transparent 96%);
}
.perf .metric--connections { top: 48.5%; transform: translateX(2.1cqw); }
.perf .metric--connections .dot-number { width: 23%; }

/* ---------- shared card type / controls ---------- */
.perf .card__title {
  position: absolute; z-index: 4; top: 6.1%; left: 5%; width: 90%; margin: 0;
  color: rgba(255,255,255,.96); font-size: calc(22.95 * var(--u)); font-weight: 600; letter-spacing: 0; line-height: 1.48;
  text-align: center; text-shadow: 0 1px 1px rgba(72,28,48,.14);
}
.perf .metric {
  position: absolute; z-index: 5; left: 0; width: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  color: rgba(255,255,255,.97); filter: drop-shadow(0 1px 1px rgba(104,27,54,.08));
}
.perf .dot-number { display: block; flex: 0 0 auto; }
.perf .metric__unit {
  margin-left: 1.3%; font-size: calc(30.46 * var(--u)); font-weight: 400; line-height: 1; letter-spacing: calc(-.8 * var(--u));
}
.perf .caption {
  position: absolute; z-index: 5; top: 65.1%; left: 10%; width: 80%; margin: 0;
  color: rgba(255,255,255,.87); font-size: calc(19.95 * var(--u)); font-weight: 400; letter-spacing: calc(-.36 * var(--u)); line-height: 1.45;
  text-align: center; text-shadow: 0 1px 2px rgba(60,21,35,.16);
}
.perf .learn-more {
  position: absolute; z-index: 6; top: 83.75%; left: 50%; width: calc(111 * var(--u)); height: calc(45 * var(--u));
  transform: translateX(-50%); border: 0; border-radius: 999px; cursor: pointer;
  color: #2d2d2d; background: rgba(255,255,255,.97);
  box-shadow: 0 1px 0 rgba(255,255,255,.50) inset, 0 1px 3px rgba(58,25,39,.08);
  font-size: calc(14 * var(--u)); font-weight: 400; letter-spacing: calc(-.25 * var(--u));
  transition: transform .18s ease, box-shadow .18s ease;
}
.perf .learn-more:hover { transform: translateX(-50%) translateY(calc(-2 * var(--u))); box-shadow: 0 8px 20px rgba(58,25,39,.16); }
.perf .learn-more:focus-visible { outline: 3px solid rgba(255,255,255,.78); outline-offset: 3px; }

/* ---------- responsive ---------- */
@media (min-width: 768px) and (max-width: 1180px) and (max-aspect-ratio: 6/7) {
  .perf .cards {
    display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; align-content: center;
    --card-w: min((100cqw - var(--gap)) / 2, (100cqh - var(--gap)) / 2 * 429 / 554, 429px);
  }
  .perf .card:last-child { grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 767px) {
  .perf {
    height: auto; min-height: 100svh; max-height: none; overflow: visible; overflow-x: clip;
    background:
      linear-gradient(rgba(236,236,234,.08), rgba(236,236,234,.08)),
      url("https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/0f4926a4-e660-4df2-9195-2bfb3e341bdd.webp") center top / 100% 100% no-repeat,
      #e8e8e8;
  }
  .perf .stage-motion--wide { display: none; }
  .perf .stage-motion--narrow { display: block; }
  .perf .masthead { grid-template-columns: minmax(0,1fr); }
  .perf .desktop-break { display: none; }
  .perf .cards { container-type: inline-size; flex: 0 0 auto; flex-direction: column; align-items: center; --card-w: min(100cqw, 429px); }
  .perf .card { --entrance-delay: .40s !important; }
}
@media (prefers-reduced-motion: reduce) {
  .perf .stage-motion, .perf .card__media { display: none; }
}

/* ---------- entrance (one-shot) ---------- */
.perf.entrance-active .headline__line,
.perf.entrance-active .intro,
.perf.entrance-active .card,
.perf.entrance-active .card__title,
.perf.entrance-active .gauge,
.perf.entrance-active .context-window,
.perf.entrance-active .connections-map,
.perf.entrance-active .metric,
.perf.entrance-active .caption,
.perf.entrance-active .learn-more { will-change: opacity, translate, scale, clip-path, filter; }

/* Before the section is reached, keep the entrance's first frame so nothing pops. */
.perf.entrance-pending .headline__line, .perf.entrance-pending .intro, .perf.entrance-pending .card__title,
.perf.entrance-pending .gauge, .perf.entrance-pending .context-window, .perf.entrance-pending .connections-map,
.perf.entrance-pending .metric, .perf.entrance-pending .caption, .perf.entrance-pending .learn-more { opacity: 0; }
.perf.entrance-pending .card { opacity: .52; }

.perf.entrance-active .headline__line { animation: perf-headline-reveal .84s cubic-bezier(.16,1,.3,1) both; }
.perf.entrance-active .headline__line:nth-child(1) { animation-delay: .08s; }
.perf.entrance-active .headline__line:nth-child(2) { animation-delay: .17s; }
.perf.entrance-active .intro { animation: perf-support-reveal .72s cubic-bezier(.22,1,.36,1) .25s both; }
.perf .card { --entrance-delay: .46s; }
.perf .card:nth-child(2) { --entrance-delay: .58s; }
.perf .card:nth-child(3) { --entrance-delay: .70s; }
.perf.entrance-active .card { animation: perf-card-establish .76s cubic-bezier(.16,1,.3,1) var(--entrance-delay) both; }
.perf.entrance-active .card__title { animation: perf-card-title-reveal .62s cubic-bezier(.22,1,.36,1) calc(var(--entrance-delay) + .14s) both; }
.perf.entrance-active .gauge { animation: perf-gauge-resolve .82s cubic-bezier(.16,1,.3,1) calc(var(--entrance-delay) + .30s) both; }
.perf.entrance-active .context-window { animation: perf-panel-resolve .82s cubic-bezier(.16,1,.3,1) calc(var(--entrance-delay) + .30s) both; }
.perf.entrance-active .connections-map { animation: perf-network-resolve .82s cubic-bezier(.16,1,.3,1) calc(var(--entrance-delay) + .30s) both; }
.perf.entrance-active .metric { animation: perf-metric-resolve .66s cubic-bezier(.16,1,.3,1) calc(var(--entrance-delay) + .48s) both; }
.perf.entrance-active .caption { animation: perf-support-reveal .54s cubic-bezier(.22,1,.36,1) calc(var(--entrance-delay) + .64s) both; }
.perf.entrance-active .learn-more { animation: perf-control-settle .52s cubic-bezier(.16,1,.3,1) calc(var(--entrance-delay) + .80s) both; }

@keyframes perf-headline-reveal { from { opacity: 0; translate: 0 .52em; clip-path: inset(0 0 56% 0); } to { opacity: 1; translate: none; clip-path: inset(-8% -2% -8% -2%); } }
@keyframes perf-support-reveal { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: none; } }
@keyframes perf-card-establish { from { opacity: .52; translate: 0 10px; scale: .985; } to { opacity: 1; translate: none; scale: none; } }
@keyframes perf-card-title-reveal { from { opacity: 0; translate: 0 calc(8 * var(--u)); clip-path: inset(0 0 48% 0); } to { opacity: 1; translate: none; clip-path: inset(-8% -2% -8% -2%); } }
@keyframes perf-gauge-resolve { from { opacity: 0; translate: 0 calc(9 * var(--u)); scale: .972; clip-path: inset(0 7% 18% 7%); } to { opacity: 1; translate: none; scale: none; clip-path: inset(-3%); } }
@keyframes perf-panel-resolve { from { opacity: 0; translate: 0 calc(10 * var(--u)); scale: .972; clip-path: inset(8% 4% 8% 4%); } to { opacity: 1; translate: none; scale: none; clip-path: inset(-3%); } }
@keyframes perf-network-resolve { from { opacity: 0; translate: 0 calc(6 * var(--u)); clip-path: inset(45% 0 45% 0); } to { opacity: .78; translate: none; clip-path: inset(0); } }
@keyframes perf-metric-resolve { from { opacity: 0; translate: 0 calc(7 * var(--u)); scale: .985; filter: blur(2.5px); } to { opacity: 1; translate: none; scale: none; filter: none; } }
@keyframes perf-control-settle { from { opacity: 0; translate: 0 calc(6 * var(--u)); scale: .975; } to { opacity: 1; translate: none; scale: none; } }

@media (prefers-reduced-motion: reduce) {
  .perf.entrance-active *, .perf.entrance-active .card { animation: none !important; }
  .perf.entrance-pending * { opacity: 1 !important; }
  .perf * { transition-duration: .01ms !important; }
}