/* Falcon 6048's Performance section (product_scroll.blade.php): under the centred section
   title like every other section, the scaling story on the left and the IOPS chart on the
   right (product.partials.performance-chart). Sized on the Falcon type scale
   (falcon-type.css), loaded on the same page.

   The chart's text is sized in the drawing's own units through --perf-font, which each of
   its two drawings sets: 'wide' is shown from 600px up and renders at roughly its own size
   there, 'narrow' below 600px, so tick labels stay near 13-16px on every screen. */
#performance .perf-content {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.5fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: center; } /* no bottom padding: the section's shared 64px is the space under it */

/* ---- Copy ---- */
#performance .perf-title {
  margin: 0 0 20px;
  color: #1a2332;
  font-size: var(--type-subhead);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: 0; }
#performance .perf-description {
  margin: 0;
  color: #4a5560;
  font-size: var(--type-lead);
  line-height: var(--leading-lead); }
/* the multiple, set apart from the copy above it */
#performance .perf-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid #d5dbe1; }
  #performance .perf-metric-value {
    color: #0070a1;
    font-size: var(--type-display);
    font-weight: var(--weight-bold);
    line-height: 1; }
  #performance .perf-metric-label {
    color: #4a5560;
    font-size: var(--type-body);
    line-height: var(--leading-body); }

/* ---- Chart ---- */
#performance .perf-chart { position: relative; margin: 0; min-width: 0; }
#performance .perf-chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
#performance .perf-chart-svg--narrow { display: none; }
#performance .perf-grid { stroke: #d5dbe1; stroke-width: 1; }
#performance .perf-axis { stroke: #4a5560; stroke-width: 1.2; }
#performance .perf-tick,
#performance .perf-axis-title { fill: #4a5560; font-size: var(--perf-font); }
#performance .perf-axis-title { font-weight: var(--weight-semibold); }
#performance .perf-line { fill: none; stroke: #0070a1; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
/* white rims keep each marker distinct where it sits on the line */
#performance .perf-marker { fill: #0070a1; stroke: #fff; stroke-width: 2; }
#performance .perf-marker-ring { fill: none; stroke: #0070a1; stroke-width: 2; }
#performance .perf-value { fill: #1a2332; font-size: calc(var(--perf-font) * 1.1); font-weight: var(--weight-bold); }
#performance .perf-point--peak .perf-value { fill: #0070a1; font-size: calc(var(--perf-font) * 1.5); }
#performance .perf-footnote {
  margin: 14px 0 0;
  color: #4a5560;
  font-size: var(--type-ui);
  line-height: var(--leading-body); }

/* the data as a table for screen readers and search, hidden from view */
#performance .perf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0; }

/* Drawn once as it scrolls into view, left to right, each point showing as the line
   reaches it (product-performance.js adds the classes). Without the script, or with
   reduced motion, the finished chart is simply there. */
#performance .perf-chart.is-pending .perf-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
#performance .perf-chart.is-pending .perf-point { opacity: 0; }
#performance .perf-chart.is-drawn .perf-line { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .9s linear; }
#performance .perf-chart.is-drawn .perf-point { transition: opacity .2s ease-out calc(var(--perf-delay) * .9s); }

/* Below 1200px the chart beside the copy would shrink its text under 12px, so it takes the
   full width under the copy instead (the handoff puts chart readability before keeping two
   columns), at most 760px so its text does not swell; below 600px the narrow drawing
   takes over. */
@media (max-width: 1199px) {
  #performance .perf-content { grid-template-columns: 1fr; gap: 40px; }
  #performance .perf-chart { width: 100%; max-width: 760px; margin: 0 auto; } }
@media (max-width: 599px) {
  #performance .perf-chart-svg--wide { display: none; }
  #performance .perf-chart-svg--narrow { display: block; } }
@media (prefers-reduced-motion: reduce) {
  #performance .perf-chart .perf-line,
  #performance .perf-chart .perf-point { transition: none !important; } }