.metrics-showcase {
  --metrics-viewport: 100vh;
  --metrics-stage-height: var(--metrics-viewport);
  position: relative;
  height: calc(var(--metrics-viewport) * 4.5);
  background: #050a14;
  isolation: isolate;
}

@supports (height: 100svh) {
  .metrics-showcase { --metrics-viewport: 100svh; }
}

.metrics-showcase__stage {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: var(--metrics-stage-height);
  overflow: hidden;
}

/* One shared landscape, with three paired messages in the same position. */
.metrics-scene {
  --scene-panel-width: min(76vw, calc(var(--metrics-viewport) * 1.1), 1527.8px);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.metrics-scene__canvas {
  position: absolute;
  inset: 0;
}

.metrics-scene__part {
  position: absolute;
  inset: 0;
  transform-origin: center;
}

.metrics-scene__glow { z-index: 0; }
.metrics-scene__panel-wrap { z-index: 1; opacity: 0; visibility: hidden; }
.metrics-scene__panel-wrap[data-scene-panel="1"] { opacity: 1; visibility: visible; }
.metrics-scene__landscape { z-index: 2; }

.metrics-scene__part img {
  position: absolute;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  object-fit: fill;
}

.metrics-scene__glow img {
  top: -10%;
  left: 0;
  mask-image: linear-gradient(to bottom, transparent 15%, #000 65%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 15%, #000 65%);
}

.metrics-scene__landscape img {
  bottom: 0;
  height: 74.2%;
}

.metrics-scene__panel {
  box-sizing: border-box;
  position: absolute;
  top: 25%;
  left: 50%;
  width: var(--scene-panel-width);
  aspect-ratio: 1527.8 / 1224.27;
  transform: translateX(-50%);
  padding: calc(var(--scene-panel-width) * .075) calc(var(--scene-panel-width) * .035);
  container-type: inline-size;
  background: linear-gradient(123.08deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .02) 50%, rgba(255, 255, 255, .06) 100%);
  border: 1.5px solid rgba(255, 255, 255, .28);
  border-radius: calc(var(--scene-panel-width) * .03973497);
  color: #fff;
  text-align: center;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

.metrics-scene__title {
  margin: 0;
  font-family: inherit;
  font-size: clamp(28px, 8.8cqi, 126px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  background-image: linear-gradient(100deg, #ff507f 3%, #ff806c 52%, #ffbd70 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.metrics-scene__title span { display: block; }

.metrics-scene__copy {
  max-width: 88%;
  margin: calc(var(--scene-panel-width) * .03) auto 0;
  color: #fff;
  font-family: inherit;
  font-size: clamp(16px, 3.2cqi, 44px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 2px 12px rgba(38, 12, 80, .4);
}

.metrics-scene__copy span { display: block; }
.metrics-scene__copy .metrics-scene__clause { display: inline-block; white-space: nowrap; }

.metrics-showcase[data-active] .metrics-scene__part {
  will-change: transform, opacity;
}

.metrics-showcase__description {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .metrics-scene { --scene-panel-width: calc(100vw - 40px); }
  /* Freeze the approved desktop composition on one 1440 × 1000 canvas.
     Both PNGs share its scale and origin instead of stretching to phone vh.
     The 384px floor only crops a little at the sides of very narrow screens. */
  .metrics-scene__canvas {
    inset: auto;
    top: 50%;
    left: 50%;
    width: max(100%, 384px);
    height: auto;
    aspect-ratio: 1440 / 1000;
    transform: translate(-50%, -50%);
  }
  /* Let the glass frame disappear behind the foreground, as on desktop. */
  .metrics-scene__panel-wrap {
    mask-image: linear-gradient(to bottom, #000 65%, transparent 92%);
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 92%);
  }
  .metrics-scene__panel { top: 0; }
  .metrics-scene__title { font-size: clamp(26px, 9.2cqi, 62px); }
  .metrics-scene__copy { font-size: clamp(16px, 3.7cqi, 24px); }
  .metrics-scene__landscape img {
    mask-image: linear-gradient(to bottom, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 94%, transparent 100%);
  }
}

@media (max-width: 479px) {
  .metrics-scene { --scene-panel-width: calc(100vw - 32px); }
  .metrics-scene__panel { padding-top: 14px; padding-bottom: 14px; }
  .metrics-scene__title { line-height: 1.25; }
  .metrics-scene__copy { max-width: 94%; margin-top: 12px; line-height: 1.4; }
}

@media (max-width: 359px) {
  .metrics-scene__panel-wrap[data-scene-panel="3"] .metrics-scene__copy span {
    display: inline;
    white-space: normal;
  }
}

/* Portrait phones keep the approved artwork scale. A longer pin gives the
   messages reading time; the following section's visible gap is independent. */
@media (max-width: 767px) and (orientation: portrait) {
  .metrics-showcase {
    --metrics-stage-height: calc(max(100vw, 384px) * .6944444444 + 48px);
    --metrics-pin-distance: clamp(420px, calc(var(--metrics-viewport) * .55), 600px);
    height: calc(var(--metrics-stage-height) + var(--metrics-pin-distance));
    background: transparent;
    overflow-anchor: none;
  }
  .metrics-showcase__stage {
    top: max(16px, env(safe-area-inset-top, 0px));
    background: #050a14;
  }
  .metrics-showcase + .services-section {
    overflow-anchor: none;
  }
  /* Content after the scene follows the pinned artwork via an inline `translate` set by
     metrics.js (compositor-only; never a margin, so scrolling never re-lays-out the page). */
}

@media (prefers-reduced-motion: reduce) {
  .metrics-showcase { height: auto; }
  .metrics-showcase__stage { position: relative; top: 0; display: block; height: auto; }
  .metrics-scene { position: relative; height: auto; }
  .metrics-scene__canvas {
    position: relative;
    inset: auto;
    display: grid;
    gap: 24px;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    transform: none;
    padding: 48px 16px 120px;
    box-sizing: border-box;
  }
  .metrics-scene__part { transform: none; opacity: 1; filter: none; visibility: visible; will-change: auto; }
  .metrics-scene__glow, .metrics-scene__landscape {
    inset: auto 0 0;
    height: auto;
    aspect-ratio: 1440 / 1000;
    opacity: .35;
    z-index: 0;
  }
  .metrics-scene__panel-wrap {
    position: relative;
    inset: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .metrics-scene__panel {
    position: relative;
    inset: auto;
    width: min(100%, 1000px);
    aspect-ratio: auto;
    margin: auto;
    padding: 32px 20px;
    transform: none;
  }
  .metrics-scene__title { font-size: clamp(24px, 7cqi, 72px); }
}