/* ══════════════════════════════════════════════════════════════════
   REACT BITS — SCROLL STACK COMPONENT STYLES
   Source: https://reactbits.dev/components/scroll-stack
   ══════════════════════════════════════════════════════════════════ */

.scroll-stack-scroller {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: visible;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: scroll-position;
}

/* Window scroll mode override (when useWindowScroll: true) */
.scroll-stack-scroller.use-window-scroll,
body .scroll-stack-scroller.use-window-scroll {
  height: auto;
  overflow: visible;
  overscroll-behavior: auto;
}

.scroll-stack-inner {
  padding: 4vh 1.5rem 40px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .scroll-stack-inner {
    padding: 6vh 3rem 40px;
  }
}

.scroll-stack-card-wrapper {
  position: relative;
}

.scroll-stack-card {
  position: sticky;
  top: calc(var(--stack-top, 92px) + var(--stack-offset, 0px));
  z-index: var(--card-z, 10);
  background: #0d0e16;
  transform-origin: top center;
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85);
  min-height: 20rem;
  height: auto;
  width: 100%;
  max-width: 980px;
  margin: 0 auto 70px;
  border-radius: 28px;
  box-sizing: border-box;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  opacity: 1 !important;
  transition: box-shadow 0.3s ease;
}

html[data-metallic-theme="light"] .scroll-stack-card {
  background: #ffffff;
  box-shadow: 0 16px 45px rgba(100, 116, 139, 0.18);
}

@media (max-width: 768px) {
  .scroll-stack-inner {
    padding: 1.5vh 0.5rem 24px;
  }
  .scroll-stack-card {
    top: calc(var(--stack-top, 78px) + var(--stack-offset, 0px));
    min-height: auto;
    margin: 0 auto 36px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  }
}

.scroll-stack-end {
  width: 100%;
  height: 1px;
}