/* PC 端「产品中心」页面专属样式，只被 products.html 引用 */

.product-hero {
  background-color: #fff;
  background-image: linear-gradient(#d8e2f1,#f6f6fd 8.75rem,#fbfaff 18.75rem,#f6f6fe 31.25rem,#e6ecfb 38.75rem,#f7faff 43.75rem,#e6edfb 48.75rem,#fff 55rem);
  height: 69.125rem;
  position: relative;
  overflow: hidden;
  --px: 0;
  --py: 0;
}

.product-hero__scene {
  width: 90rem;
  transform: translate3d(calc(var(--px) * -.625rem), calc(var(--py) * -.375rem), 0) scale(1.015);
  transform-origin: 50% 59.625rem;
  transition: transform .9s var(--site-ease);
  animation: scene-enter-78b5fb43 1.2s var(--site-ease) backwards;
  background-position: top;
  background-repeat: no-repeat;
  background-size: 90rem;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 45rem);
  background-image: url("../image/product-scene.png");
}

@media (width>=1441px) {
  .product-hero__scene {
    -webkit-mask-image: linear-gradient(90deg,#0000,#000 6.25rem 83.75rem,#0000);
    mask-image: linear-gradient(90deg,#0000,#000 6.25rem 83.75rem,#0000);
  }
}

@keyframes scene-enter-78b5fb43 {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
}

.product-hero__sheen {
  pointer-events: none;
  border-radius: 1.5rem;
  width: 67.25rem;
  height: 29.375rem;
  position: absolute;
  top: 10.875rem;
  left: 11.25rem;
  overflow: hidden;
}

.product-hero__sheen:after {
  content: "";
  width: 40%;
  animation: sheen-78b5fb43 1.1s var(--site-ease) .1s both;
  background: linear-gradient(105deg,#0000,#fff0 20%,#ffffff59 50%,#0000 80%);
  position: absolute;
  inset: 0 auto 0 0;
  transform: translate(-120%);
}

@keyframes sheen-78b5fb43 {
  to {
    transform: translate(300%);
  }
}

.product-hero__thumbs {
  z-index: 1;
  align-items: center;
  gap: 1.9375rem;
  height: 6.125rem;
  display: flex;
  position: absolute;
  top: 2.625rem;
  left: 50%;
  transform: translate(-50%);
}

.product-thumb {
  cursor: pointer;
  width: 4.375rem;
  height: 4.375rem;
  transition: width var(--site-duration) var(--site-ease), height var(--site-duration) var(--site-ease), padding var(--site-duration) var(--site-ease), background-color var(--site-duration) ease, border-color var(--site-duration) ease, transform var(--site-duration) var(--site-ease), box-shadow var(--site-duration) var(--site-ease);
  background-color: #0000;
  border: 1px dashed #0000;
  border-radius: 50%;
  padding: 0;
  overflow: hidden;
}

@media (hover:hover) {
  .product-thumb:not(.is-active):hover {
    box-shadow: 0 0 0 3px #ffffffe6, var(--site-shadow-md);
    transform: translateY(-2px);
  }
}

.product-thumb img {
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: block;
}

.product-thumb.is-active {
  background-color: #fff9;
  border-color: #b4c9ee;
  width: 6.125rem;
  height: 6.125rem;
  padding: .4375rem;
}

.product-hero__name {
  z-index: 1;
  color: #2e5aa6;
  text-align: center;
  letter-spacing: 2px;
  width: 18rem;
  height: 3.75rem;
  margin: 0;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 3.75rem;
  position: absolute;
  top: 57.75rem;
  left: 50%;
  transform: translate(-50%);
}

.product-hero__name span {
  animation: name-char-78b5fb43 .6s var(--site-ease) both;
  display: inline-block;
}

@keyframes name-char-78b5fb43 {
  0% {
    opacity: 0;
    transform: translateY(.75rem);
  }
}

.product-features {
  background-color: var(--site-fill);
  height: 67.25rem;
  padding-top: 7.5625rem;
}

.product-features__tags {
  --tag-step: 9.375rem;
  z-index: 1;
  gap: 2.75rem;
  width: max-content;
  margin: 0 auto;
  display: flex;
  position: relative;
}

.product-features__indicator {
  background-color: var(--site-primary);
  width: 6.625rem;
  height: 3rem;
  box-shadow: var(--site-shadow-primary);
  transform: translateX(calc(var(--index) * var(--tag-step)));
  transition: transform .45s var(--site-ease);
  border-radius: 1.5rem;
  position: absolute;
  top: 0;
  left: 0;
  --index: 0;
}

.product-features__tag {
  color: #333;
  text-align: center;
  cursor: pointer;
  width: 6.625rem;
  height: 3rem;
  box-shadow: var(--site-shadow-sm);
  transition: color var(--site-duration) ease, background-color var(--site-duration) ease, transform var(--site-duration) var(--site-ease);
  background-color: #fff;
  border: none;
  border-radius: 1.5rem;
  padding: 0;
  font-family: inherit;
  font-size: 1rem;
  line-height: 3rem;
  position: relative;
}

@media (hover:hover) {
  .product-features__tag:not(.is-active):hover {
    color: var(--site-primary);
    transform: translateY(-2px);
  }
}

.product-features__tag.is-active {
  color: #fff;
  box-shadow: none;
  background-color: #0000;
}

.product-features__tag:focus-visible {
  outline: 2px solid var(--ui-color-primary-light-5);
  outline-offset: 3px;
}

.product-frame {
  background-size: 100% 100%;
  width: 75rem;
  height: 54rem;
  margin-top: -1.125rem;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background-image: url("../image/product-frame-clean.png");
  --px: 0;
  --py: 0;
  --reveal-delay: 120ms;
}

.product-frame__watermark {
  color: #f4f6f8;
  text-align: center;
  letter-spacing: .5cqw;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  transform: translate3d(calc(var(--px) * .875rem), calc(var(--py) * .5rem), 0);
  transition: transform .8s var(--site-ease);
  font-size: 23.417cqw;
  font-weight: 900;
  line-height: 1;
  position: absolute;
  top: 19cqw;
  left: 0;
}

.product-frame__toy {
  width: 24.167cqw;
  height: 35.833cqw;
  transform: translate3d(calc(var(--px) * -1.125rem), calc(var(--py) * -.625rem), 0) rotate(calc(var(--px) * 3deg));
  transform-origin: 50% 0;
  transition: transform .6s var(--site-ease);
  animation: toy-hop-78b5fb43 .7s var(--site-ease) backwards;
  position: absolute;
  top: 13cqw;
  left: 35.917cqw;
}

.product-frame__toy img {
  filter: drop-shadow(0 1.125rem 1.5rem #50321e24);
  width: 100%;
  height: 100%;
  animation: 4.8s ease-in-out .7s infinite toy-float-78b5fb43;
  display: block;
}

@keyframes toy-hop-78b5fb43 {
  0% {
    opacity: 0;
    transform: translateY(1.5rem)scale(.96);
  }
}

@keyframes toy-float-78b5fb43 {
  0%,
  to {
    transform: translateY(0)rotate(0);
  }

  50% {
    transform: translateY(-.75rem)rotate(-1.5deg);
  }
}

.product-frame__shadow {
  pointer-events: none;
  background: radial-gradient(closest-side,#3c281929,#0000);
  width: 11.667cqw;
  height: 1.5cqw;
  animation: 4.8s ease-in-out .7s infinite shadow-breathe-78b5fb43;
  position: absolute;
  top: 48.833cqw;
  left: 43cqw;
}

@keyframes shadow-breathe-78b5fb43 {
  50% {
    opacity: .6;
    transform: scaleX(.82);
  }
}

.product-frame__caption {
  width: 100%;
  color: var(--site-text-regular);
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  display: flex;
  position: absolute;
  top: 52.917cqw;
  left: 0;
}

.product-frame__caption:before,
.product-frame__caption:after {
  content: "";
  background-color: #999;
  width: 1.25rem;
  height: 1px;
}

.caption-enter-active,
.caption-leave-active {
  transition: opacity .25s ease, transform .25s var(--site-ease);
}

.caption-enter-from {
  opacity: 0;
  transform: translateY(.5rem);
}

.caption-leave-to {
  opacity: 0;
}

.product-hero__name > span:nth-child(1) {
  animation-delay: 300ms;
}

.product-hero__name > span:nth-child(2) {
  animation-delay: 390ms;
}

.product-hero__name > span:nth-child(3) {
  animation-delay: 480ms;
}