/* ============================================================
   PAGE SCROLL CONTAINER
============================================================ */
body {
  overflow: hidden;
}

#page-scroll {
  height: 100vh;
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
  scrollbar-width: none;
}

#page-scroll::-webkit-scrollbar {
  display: none;
}

.page-section {
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  overflow: hidden;
}

/* ============================================================
   HOME — CAROUSEL
============================================================ */
.carousel-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  user-select: none;
}

.carousel-track {
  display: flex;
  height: 100vh;
  height: 100dvh;
  will-change: transform;
  cursor: grab;
}

.carousel-track.dragging {
  cursor: grabbing;
}

.carousel-slide {
  flex: 0 0 100vw;
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

.slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  transition: transform var(--duration-cinematic) var(--ease-standard);
  transform: scale(1.04);
}

.carousel-slide.active .slide-img {
  transform: scale(1.0);
}

/* ============================================================
   CAROUSEL ARROWS
============================================================ */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-sticky);
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.5rem;
  padding: var(--space-6) var(--space-4);
  opacity: 0.4;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.carousel-arrow:hover { opacity: 1; }

.carousel-prev { left: var(--space-4); }
.carousel-next { right: var(--space-4); }

@media (max-width: 768px) {
  .carousel-prev,
  .carousel-next {
    display: none;
  }
}

/* ============================================================
   SLIDE COUNTER
============================================================ */
.slide-counter {
  position: absolute;
  bottom: calc(var(--space-8) + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-wide);
  user-select: none;
}

.counter-sep { color: var(--text-disabled); }

@media (max-width: 768px) {
  .slide-counter {
    bottom: calc(var(--space-8) + 2.5rem + env(safe-area-inset-bottom));
  }
}

/* ============================================================
   SOCIAL LINKS z-index lift on home (over carousel)
============================================================ */
.social-links {
  z-index: var(--z-sticky);
}

/* ============================================================
   SCROLL HINT
============================================================ */
.scroll-hint {
  position: absolute;
  bottom: calc(var(--space-8) + env(safe-area-inset-bottom));
  right: var(--space-8);
  z-index: var(--z-sticky);
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-primary);
  transition: var(--transition-color);
  cursor: pointer;
  user-select: none;
}

.scroll-hint:hover { color: var(--text-secondary); }

/* ============================================================
   COLLECTIONS SECTION — embedded overrides
============================================================ */
#section-collections .collections-stage {
  height: 100%;
}

#section-collections {
  touch-action: pan-y;
}

#section-collections .collections-scroll {
  touch-action: pan-x pan-y;
}

/* ============================================================
   ABOUT SECTION — internal scroll
============================================================ */
#section-about {
  overflow: hidden;
}

.about-scroll-inner {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.about-scroll-inner::-webkit-scrollbar {
  display: none;
}