* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
}
@font-face {
  font-family: "myriadPro";
  src: url("/public/MyriadPro/MyriadPro-Bold.otf") format("truetype");
}
a {
  text-decoration: none;
  color: inherit;
}
a:hover{
    color:inherit;
}
[button] {
  border: none;
  color: inherit;
  cursor: pointer;
  background: #c231a6;
  color: white;
  font-size: 1.875rem;
  border-radius: 12.5rem;
  transition: all 0.4s;
    display: flex;
  align-items: center;
  justify-content: center;
}
[button]:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.4);
}
:root {
  font-size: clamp(10px, 0.83333vw, 16px);
}
.lrPadding {
  padding-left: 16.375rem;
  padding-right: 16.375rem;
}
h1 {
  font-size: 4rem;
  font-weight: bold;
  color: #371c6c;
}
@media (max-width:767px){
  h1 {
    font-size: 3.125rem;
  }
}
/**swiper*/
.swiper-button-prev,
.swiper-button-next {
  color: #371c6c !important;

  position: relative !important;
  inset: 0 !important;
  width: 5rem !important;
  height: 2.6rem !important;
  border-radius: 3.75rem;
  border: 2px solid #371c6c;
}
.swiper-button-prev::after {
  content: "<";
  transform: scaley(0.5);
  font-size: 2.5rem !important;
}
.swiper-button-next::after {
  content: ">";
  font-size: 2.5rem !important;
  transform: scaley(0.5);
}
.swiper-scrollbar {
  background: white !important;
}
.swiper-scrollbar-drag {
  background: #371c6c !important;
}

input,
textarea {
  border: none;
  outline: none;
  padding: 1.25rem;
  font-size: 1.5625rem;
}
:is(input, textarea)::placeholder {
  color: #371c6c;
  font-size: 1.5625rem;
}

.theBox:before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  padding: 3px;
  box-sizing: border-box;
   -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: source-out;   /* Webkit 的值 */
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  clip-path: polygon(
    0% 0%,
    30% 0%,
    30% 4px,
    70% 4px,
    70% 0%,
    100% 0%,
    100% 100%,
    0% 100%
  );
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0%,
    transparent 10%,
    #ffa800 50%,
    transparent 50%,
    transparent 60%,
    #ffa800 100%
  );

  animation: spin 3s linear infinite;
  /* filter: 
    drop-shadow(0 0 4px #ffa800)
    drop-shadow(0 0 8px #ff8c00)
    drop-shadow(0 0 16px #ff6600); */
}

@keyframes spin {
  0% {
    --angle: 0deg;
  }
  30% {
    --angle: 60deg;
  }

  50% {
    --angle: 90deg;
  }
  100% {
    --angle: 180deg;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
@counter-style pad-2 {
  system: extends decimal;
  pad: 2 "0";
}
@counter-style pad-3 {
  system: extends decimal;
  pad: 3 "0";
}
@counter-style pad-4 {
  system: extends decimal;
  pad: 4 "0";
}
@counter-style pad-5 {
  system: extends decimal;
  pad: 5 "0";
}
[counter] {
  --num: 0;
  transition: --num 2s ease-in-out;
  counter-reset: num var(--num);
  font-family: "myriadPro";
}
[counter]:before {
  content: counter(num, var(--pad));
  line-height: 1;
}

[animate-enter] {
  opacity: 0.2;
  transform: translateY(-20%);
  animation: text-animate 1s ease-in-out forwards paused;
}
@keyframes text-animate {
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
[animate-enter-img] {
  opacity: 0.2;
  transform: translatex(-20%);
  animation: img-animate 1s ease-in-out forwards paused;
}
@keyframes img-animate {
  to {
    opacity: 1;
    transform: translatex(0%);
  }
}

/* 产品 */
/* 父容器 */
.product {
  display: flex;
  gap: 10px; /* gap-10 对应 10px，如果是 2.5rem 则改为 40px */
  justify-content: center;
  flex-wrap: wrap;
  line-height: 1;
}

/* 子元素 <a> */
.product > a {
  width: 45%;
  padding: 20px 0; /* py-20: 上下20px，注意这里没有左右padding */
  aspect-ratio: 421 / 630;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: white;
  padding: 1.25rem;
  border-radius: 18px;
  cursor: pointer;
  text-decoration: none; /* 清除默认下划线 */
  z-index: 1;
}
.product > a:before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
      to top,
      white 10%,
      #a1a1a5 30%,
      white 50%
    )
    border-box; /* #fff/4 */
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  /* ✅ WebKit 浏览器 (Chrome, Safari, Edge) */
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: 2px;
  border-radius: 1.5rem;
}
.product >a:after{
  content:'';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.08);
  z-index: -1;
   filter: 
    blur(2px)           /* 微模糊 */
    contrast(0.9)       /* 降低对比度 */
    brightness(2)     /* 提亮 */
    saturate(1.2);      /* 增加饱和度 */
}
/* hover 状态 */
.product > a:hover {
  background: repeating-linear-gradient(
    -45deg,
    rgba(252, 252, 252, 0.6) 0%,
    rgba(252, 252, 252, 0.45) 10%,
    rgba(252, 252, 252, 0.45) 20%,
    rgba(252, 252, 252, 0.6) 30%
  );
  color: #422875;
}
.product > a:hover span:first-of-type {
  text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
}

/* 桌面端媒体查询 (md: 通常 768px) */
@media (min-width: 768px) {
  .product {
    flex-wrap: nowrap;
  }

  .product > a {
    width: 25%;
    flex-grow: 1;
  }
}

/* top */
.back-to-top {
  position: fixed;
  bottom: 2.5rem;
  right: 2.5rem;
  width: 4.375rem;
  height: 5rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
  border: none;
  outline: none;
  backdrop-filter: blur(5px);
  color: white;
  font-family: Arial, sans-serif;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: rgba(102, 126, 234, 0.8);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

/* 三角形 */
.back-to-top .triangle {
  width: 0;
  height: 0;
  border-left: .625rem solid transparent;
  border-right: .625rem solid transparent;
  border-bottom: .875rem solid white;
}

/* Top 文字 */
.back-to-top .text {
  font-size: .875rem;
  font-weight: bold;
  letter-spacing: 1px;
}