/* Both images share one circle and one transform; no intersecting 3D planes. */
.storefront .hero-stage {
  transform-style: flat;
}
.hero-disc {
  position: relative;
  width: 96%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 35% 25%, #395793, #17274e 55%, #0c1734);
  border: 3px solid #c6af68;
  box-shadow:
    inset 0 0 30px #080d2a80,
    8px 10px 0 -3px #9f884c,
    12px 32px 45px -18px #10235177;
  transform: perspective(1100px) rotateY(-7deg) rotateX(3deg);
  transition: transform 0.4s ease-out;
  z-index: 1;
}
.disc-face {
  position: absolute;
  inset: 0;
  transition:
    opacity 0.65s ease,
    translate 0.8s cubic-bezier(0.2, 0.7, 0.25, 1);
}
.disc-racket {
  opacity: 1;
  translate: 0 0;
}
.disc-racket > img {
  position: absolute;
  top: 3%;
  left: 3%;
  width: 94%;
  height: 84%;
  object-fit: contain;
  filter: drop-shadow(10px 15px 8px #040a2299);
}
.disc-caption {
  position: absolute;
  bottom: 7%;
  left: 0;
  right: 0;
  text-align: center;
  color: #f5f0e4;
}
.disc-caption span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #dcc887;
}
.disc-caption strong {
  font-size: clamp(18px, 2vw, 28px);
  letter-spacing: -0.03em;
}
.disc-logo {
  opacity: 0;
  translate: 0 -12%;
  pointer-events: none;
}
.disc-logo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero-disc[data-show="logo"] .disc-logo {
  opacity: 1;
  translate: 0 0;
}
.hero-disc[data-show="logo"] .disc-racket {
  opacity: 0;
  translate: 0 -12%;
  pointer-events: none;
}
.showcase-controls {
  position: absolute;
  bottom: -38px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid #d0c6ad;
  border-radius: 30px;
  background: #f8f3e8;
  z-index: 4;
  white-space: nowrap;
}
.showcase-controls button {
  padding: 7px 13px;
  background: transparent;
  color: #17274e;
  border: 0;
  border-radius: 24px;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.showcase-controls button[aria-pressed="true"] {
  background: #17274e;
  color: #f5e8bb;
}
.showcase-controls button:hover {
  background: #e5dcc7;
  color: #17274e;
}
.showcase-controls #showcase-pause {
  font-size: 15px;
  min-width: 34px;
  border-left: 1px solid #d0c6ad;
  border-radius: 0 20px 20px 0;
}
@media (max-width: 800px) {
  .hero-disc {
    width: 90%;
  }
}
@media (max-width: 500px) {
  .hero-disc {
    width: 94%;
  }
  .disc-caption {
    bottom: 8%;
  }
  .showcase-controls {
    bottom: -36px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-disc,
  .disc-face {
    transition: none;
  }
}