/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./components/react-bits/ScrollStack.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
.scroll-stack-scroller {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 8px 0;
  scroll-behavior: smooth;
}

.scroll-stack-scroller.scroll-stack-progress {
  overflow: hidden;
}

.scroll-stack-scroller.scroll-stack-sequence {
  overflow: hidden;
  padding: 0;
}

.scroll-stack-inner {
  position: relative;
  min-height: 100%;
  padding: 40px 0 180px;
}

.scroll-stack-sequence .scroll-stack-inner {
  height: 100%;
  min-height: 100%;
  padding: 0;
}

.scroll-stack-card {
  width: min(520px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid var(--af-stack-border, var(--af-border-primary));
  background: var(--af-stack-bg, var(--af-bg-elevated));
  box-shadow: var(--af-stack-shadow, var(--af-shadow-md));
  color: var(--af-text-primary);
  transform-origin: top center;
}

.scroll-stack-sequence .scroll-stack-card {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
}

.scroll-stack-sequence .scroll-stack-end {
  display: none;
}

.scroll-stack-end {
  height: 60vh;
}

/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./components/effects/Shimmer.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
.shimmer-container {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.shimmer-effect {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    var(--shimmer-angle, 45deg),
    transparent 0%,
    transparent calc(50% - var(--shimmer-width, 30%) / 2),
    var(--shimmer-color, rgba(255, 255, 255, 0.3)) 50%,
    transparent calc(50% + var(--shimmer-width, 30%) / 2),
    transparent 100%
  );
  animation: shimmer-sweep var(--shimmer-duration, 3s) infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes shimmer-sweep {
  0% {
    transform: translateX(-100%) translateY(-100%);
  }
  100% {
    transform: translateX(100%) translateY(100%);
  }
}

/* 让子元素显示在shimmer之上 */
.shimmer-container > *:not(.shimmer-effect) {
  position: relative;
  z-index: 2;
}