/* Equipment remains still; the racket strings fade only at the bottom. */
.hero {
  overflow: hidden;
  min-height: 700px;
}
.hero .hero-copy {
  padding-top: 50px;
  isolation: isolate;
}
.hero .racket-transition {
  position: absolute;
  left: 0;
  right: 0;
  top: 120px;
  height: 620px;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 39%,
    #000c 57%,
    #0003 77%,
    transparent 94%
  );
}
.hero .racket-image {
  width: max(100%, 1300px);
  max-width: none;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
/* Equipment sits behind the feature stage without masks or image cropping. */
.feature-scene {
  --paddle-width: max(1540px, 112vw);
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  overflow-y: visible;
  margin-top: -60px;
  padding-bottom: 112px;
}
.feature-scene .app-section {
  position: relative;
  z-index: 2;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 32px;
  padding: 54px 56px 58px;
}
.feature-scene .app-section::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -1px;
  border: 1px solid var(--line);
  border-radius: inherit;
  pointer-events: none;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 35%,
    #0002 48%,
    #000a 62%,
    #000 76%,
    #000 100%
  );
}
.feature-scene .section-intro,
.feature-scene .feature-ladder {
  position: relative;
  z-index: 1;
}
.feature-scene .section-intro {
  background: #fff;
  box-shadow: 0 0 42px 28px #fff;
}
.feature-scene .feature-copy {
  --copy-halo-inset: 28px;
  --copy-halo-blur: 18px;
  position: relative;
  isolation: isolate;
}
.feature-scene .feature-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(0px - var(--copy-halo-inset));
  border-radius: 36px;
  background: #fff;
  filter: blur(var(--copy-halo-blur));
  pointer-events: none;
}
.feature-scene .feature-panel {
  box-shadow: 0 0 36px 24px #fff;
}
.feature-scene .feature-tour {
  gap: 56px;
}
.feature-scene .paddle-transition {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: -112px;
  height: calc(var(--paddle-width) * 941 / 1672);
  margin: 0;
  overflow: visible;
  pointer-events: none;
}
.feature-scene .paddle-transition img {
  position: absolute;
  width: var(--paddle-width);
  max-width: none;
  left: calc(50% - var(--paddle-width) * 0.385);
  top: 0;
}
.feature-scene .feature-stage {
  z-index: 1;
}
@media (min-width: 760px) and (min-height: 680px) and (prefers-reduced-motion: no-preference) {
  .feature-scene:has(.feature-scroll-ready) {
    padding-bottom: 0;
  }
  .feature-scroll-ready .paddle-transition {
    --paddle-width: min(
      max(1540px, 112vw),
      130vw,
      calc((100svh - 64px) * 2.0072)
    );
    inset: 0;
    height: auto;
  }
  .feature-scroll-ready .paddle-transition img {
    /* Native page scroll brings the head up from the end of the runway.
       Its center meets the stage only after the final shrink completes. */
    top: calc(100% - 50svh - var(--paddle-width) * 0.27);
  }
}
@media (min-width: 1800px) {
  .hero {
    min-height: 780px;
  }
  .hero .racket-transition {
    top: 105px;
    height: 730px;
  }
}
@media (max-width: 1100px) {
  .hero {
    min-height: 640px;
  }
  .hero .hero-copy {
    padding-top: 45px;
  }
  .hero .racket-transition {
    top: 102px;
    height: 560px;
  }
  .feature-scene {
    --paddle-width: 1300px;
  }
  .feature-scene .app-section {
    padding: 42px 38px 46px;
    border-radius: 28px;
  }
  .feature-scene .feature-tour {
    gap: 35px;
  }
}
@media (max-width: 800px) {
  .feature-scene .section-intro {
    box-shadow: 0 0 30px 18px #fff;
  }
  .feature-scene .feature-copy {
    --copy-halo-inset: 20px;
    --copy-halo-blur: 14px;
  }
  .feature-scene .feature-panel {
    box-shadow: 0 0 28px 16px #fff;
  }
  .hero {
    min-height: 620px;
  }
  .hero .hero-copy {
    padding-top: 40px;
  }
  .hero .racket-image {
    width: 1120px;
  }
  .hero .racket-transition {
    top: 95px;
    height: 530px;
  }
  .feature-scene {
    --paddle-width: 1120px;
  }
  .feature-scene .app-section {
    padding: 34px 30px 37px;
    border-radius: 26px;
  }
  .feature-scene .feature-tour {
    gap: 26px;
  }
}
@media (max-width: 600px) {
  .feature-scene .section-intro {
    box-shadow: 0 0 24px 12px #fff;
  }
  .feature-scene .feature-copy {
    --copy-halo-inset: 18px;
    --copy-halo-blur: 12px;
  }
  .feature-scene .feature-panel {
    box-shadow: 0 0 22px 12px #fff;
  }
  .hero {
    min-height: 510px;
  }
  .hero .hero-copy {
    padding-top: 36px;
  }
  .hero .racket-image {
    width: 760px;
  }
  .hero .racket-transition {
    top: 81px;
    height: 420px;
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 42%,
      #000a 62%,
      #0001 78%,
      transparent 88%
    );
  }
  .feature-scene {
    --paddle-width: 130vw;
    margin-top: -24px;
  }
  .feature-scene .app-section {
    padding: 29px 20px 28px;
    border-radius: 24px;
  }
  .feature-scene .section-intro h2 {
    font-size: clamp(29px, 8.5vw, 37px);
    letter-spacing: -1.3px;
  }
  .feature-scene .feature-tour {
    gap: 24px;
  }
  .feature-scene .feature-panel {
    padding-inline: 13px;
  }
  .feature-scene .record-art {
    padding-inline: 13px;
  }
  .feature-scene .court-preview {
    margin-inline: -13px;
  }
  .feature-scene .sample-metrics {
    gap: 5px;
  }
  .feature-scene .social-preview,
  .feature-scene .plan-art {
    padding-inline: 14px;
  }
  .feature-scene .mini-avatar {
    width: 30px;
    height: 30px;
    font-size: 9px;
  }
  .feature-scene .social-row {
    gap: 8px;
  }
  .feature-scene .social-row strong {
    font-size: 11px;
  }
  .feature-scene .following {
    font-size: 8px;
  }
  .feature-scene .match-preview h3 {
    font-size: 20px;
  }
  .feature-scene .match-going {
    gap: 7px;
  }
  .feature-scene .match-going > span {
    font-size: 8px;
  }
}
@media (max-width: 360px) {
  .hero {
    min-height: 550px;
  }
  .hero .racket-transition {
    top: 131px;
  }
}