/* ACED racket presentation — large scale + motion */

.racket-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  perspective: 1400px;
}

.racket-stage__glow {
  position: absolute;
  width: min(85%, 720px);
  height: min(55%, 420px);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(46, 204, 113, 0.28) 0%,
    rgba(46, 204, 113, 0.08) 45%,
    transparent 70%
  );
  pointer-events: none;
  animation: racket-glow-pulse 4.5s ease-in-out infinite;
}

.racket-stage__glow--secondary {
  width: min(70%, 560px);
  height: min(45%, 320px);
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.06) 0%,
    transparent 65%
  );
  animation-delay: -2s;
}

.racket-stage__glow--light {
  background: radial-gradient(
    ellipse at center,
    rgba(26, 127, 75, 0.12) 0%,
    transparent 70%
  );
}

@keyframes racket-glow-pulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.racket-stage__scroll {
  position: relative;
  z-index: 1;
  will-change: transform;
}

.racket-stage__float {
  position: relative;
  animation: racket-float-hero 6.5s ease-in-out infinite;
  will-change: transform;
}

.racket-stage__tilt {
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.12s ease-out;
  will-change: transform;
}

.racket-stage__img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Hero — dominant product */
.racket-stage--hero {
  min-height: min(68vh, 720px);
  margin-inline: auto;
}

.hero--cinematic .hero__visual {
  max-width: min(96vw, 960px);
  width: 100%;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.racket-stage__img--hero {
  max-width: min(92vw, 900px);
  max-height: min(72vh, 680px);
  filter: drop-shadow(0 50px 100px rgba(0, 0, 0, 0.55));
}

.hero--cinematic .hero__image {
  animation: none;
}

@keyframes racket-float-hero {
  0%, 100% {
    transform: translateY(0) rotate(-1.5deg);
  }
  33% {
    transform: translateY(-22px) rotate(1.2deg);
  }
  66% {
    transform: translateY(-10px) rotate(-0.8deg);
  }
}

.racket-stage--hero.is-entered .racket-stage__float {
  animation: racket-float-hero 6.5s ease-in-out infinite,
    racket-hero-enter 1.2s var(--ease-out) both;
}

@keyframes racket-hero-enter {
  from {
    opacity: 0;
    transform: translateY(48px) scale(0.88);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Story — large sticky racket */
.story-scroll__device-inner.racket-stage--story {
  width: min(100%, 560px);
  min-height: min(72vh, 680px);
  aspect-ratio: auto;
}

.story-scroll__device-inner > .racket-stage__float {
  position: relative;
  width: 100%;
  min-height: min(72vh, 680px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: racket-float-soft 7s ease-in-out infinite;
}

.story-scroll__device img {
  position: absolute;
  max-width: min(100%, 520px);
  max-height: min(72vh, 640px);
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.86) translateY(36px);
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.45));
  transition: none;
  pointer-events: none;
}

.story-scroll__device img.is-active {
  animation: racket-story-in 0.85s var(--ease-out) forwards,
    racket-float-soft 6s ease-in-out 0.85s infinite;
}

@keyframes racket-story-in {
  from {
    opacity: 0;
    transform: scale(0.82) translateY(48px) rotate(-3deg);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
  }
}

@keyframes racket-float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* Lineup — extra large */
.racket-stage--lineup {
  min-height: min(65vh, 620px);
  width: min(100%, 820px);
  margin-inline: auto;
}

.racket-stage--lineup .racket-stage__tilt {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lineup__stage .lineup__product-link {
  position: absolute;
  opacity: 0;
  transform: scale(0.82) translateY(40px);
  transition: none;
}

.lineup__stage .lineup__product-link.is-active {
  animation: racket-lineup-in 0.7s var(--ease-spring) forwards,
    racket-float-soft 5.5s ease-in-out 0.7s infinite;
}

.lineup__stage img {
  max-width: min(95%, 780px);
  max-height: min(62vh, 580px);
  width: auto;
  height: auto;
  filter: drop-shadow(0 32px 64px rgba(0, 0, 0, 0.12));
}

@keyframes racket-lineup-in {
  from {
    opacity: 0;
    transform: scale(0.78) translateY(50px);
  }
  60% {
    transform: scale(1.03) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Product cards — fallback for uncategorized items */
.card__media--shot {
  aspect-ratio: 5/6;
  min-height: 280px;
}

/* Detail page */
.detail__media-frame {
  min-height: min(55vh, 520px);
  padding: clamp(1.5rem, 4vw, 3rem);
}

.detail__media-frame img,
.racket-stage--detail .racket-stage__img {
  max-height: min(58vh, 560px);
  max-width: min(100%, 520px);
  filter: drop-shadow(0 28px 56px rgba(0, 0, 0, 0.1));
}

.racket-stage--detail .racket-stage__float {
  animation: racket-float-soft 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .racket-stage__float,
  .racket-stage__glow,
  .story-scroll__device img.is-active,
  .lineup__stage .lineup__product-link.is-active {
    animation: none !important;
  }

  .racket-stage__tilt {
    transition: none;
  }

  .story-scroll__device img.is-active,
  .lineup__stage .lineup__product-link.is-active {
    opacity: 1;
    transform: none;
  }
}