/* Frameshift — Performance showcase */
.perf { overflow: clip; isolation: isolate; }
.perf__bg { position: absolute; inset: -10% 0; z-index: -1; opacity: 0.28; }
.perf__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--c-bg), transparent 30%, transparent 70%, var(--c-bg)); }
html[data-fx='full'][data-parallax] .perf.scene--live .perf__bg { transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * -120px), 0); }
.perf__grid { list-style: none; padding: 0; display: grid; gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
@media (min-width: 990px) {
  .perf__grid:has(.perf__stat--hero) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .perf__stat--hero { grid-column: span 2; grid-row: span 2; }
  /* Close the gap when the stats after the hero tile don't fill the 2x2 block evenly */
  .perf__stat--hero ~ .perf__stat:last-child:nth-child(even) { grid-column: span 2; }
  .perf__stat--hero:is(:nth-last-child(2), :nth-last-child(3)) { grid-row: span 1; }
  .perf__stat--hero:nth-last-child(2) ~ .perf__stat { grid-column: span 2; }
}
.perf__stat { position: relative; display: grid; align-content: start; gap: 0.9rem; padding: clamp(1.25rem, 2.5vw, 2rem); background: var(--c-bg); overflow: hidden; transition: background var(--dur-2); }
.perf__stat::before { content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 40px; block-size: 2px; background: var(--c-accent); transition: inline-size var(--dur-3) var(--ease-out); }
.perf__stat:hover { background: var(--c-surface); }
.perf__stat:hover::before { inline-size: 100%; }
.perf__stat-top { display: flex; align-items: center; gap: 0.6rem; }
.perf__icon { display: grid; place-items: center; inline-size: 36px; block-size: 36px; color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-border); }
.perf__icon .icon { inline-size: 18px; block-size: 18px; }
.perf__value { display: flex; align-items: baseline; gap: 0.25rem; font-family: var(--font-heading); font-weight: var(--heading-weight); line-height: 0.9; font-size: clamp(2.6rem, 5vw, 4.5rem); letter-spacing: -0.02em; direction: ltr; justify-content: flex-start; }
[dir='rtl'] .perf__value { justify-content: flex-end; }
.perf__stat--hero .perf__value { font-size: clamp(4rem, 10vw, 9rem); }
.perf__affix { font-size: 0.4em; color: var(--c-muted); letter-spacing: 0; }
.perf__unit { color: var(--c-accent); }
.perf__meter { block-size: 4px; background: var(--c-border); position: relative; overflow: hidden; }
.perf__meter span { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--c-accent-rgb) / 0.4), var(--c-accent)); transform-origin: var(--origin, left); transform: scaleX(var(--meter)); box-shadow: var(--glow-shadow); }
[dir='rtl'] .perf__meter { --origin: right; }
[dir='rtl'] .perf__meter span { background: linear-gradient(270deg, rgb(var(--c-accent-rgb) / 0.4), var(--c-accent)); }
html[data-reveals]:is([data-fx='full'], [data-fx='reveal']) .perf__stat:not(.is-in) .perf__meter span { transform: scaleX(0); }
html[data-reveals]:is([data-fx='full'], [data-fx='reveal']) .perf__meter span { transition: transform 1.6s var(--ease-out) calc(0.3s + var(--i, 0) * 0.1s); }
.perf__desc { color: var(--c-muted); font-size: var(--small); max-inline-size: 40ch; }
.perf__foot { margin-block-start: auto; }
.perf__demo, .perf__footnote { margin-block-start: 1.5rem; font-size: var(--small); }