/* ===== Swiper cube / pagination tweaks ===== */

/* Soften Swiper's built-in cube shadows so they suit a clean white theme */
.mainCube .swiper-cube-shadow { opacity: 0.18; }

/* Cube slides must be opaque so particles behind the box stay hidden,
   and only show through the white margin around it. */
.mainCube > .swiper-wrapper > .swiper-slide {
  background: transparent;
  backface-visibility: hidden;
}

/* Horizontal sub-swiper dots — glass pill to match the buttons */
.sub-dots {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 14px -8px rgba(10, 10, 11, 0.25);
}
.sub-dots .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  margin: 0;
  background: var(--ink);
  opacity: 0.22;
  border-radius: 999px;
  transition: width 0.35s var(--ease), opacity 0.35s var(--ease), background 0.35s var(--ease);
}
.sub-dots .swiper-pagination-bullet-active {
  width: 20px;
  opacity: 1;
  background: var(--accent);
}

/* sub-swiper disabled arrow state — stay visible but dimmed */
.sub-prev.swiper-button-disabled,
.sub-next.swiper-button-disabled { opacity: 0.28; pointer-events: none; }

/* ===== Only the active cube face is clickable =====
   The cube leaves neighbour slides overlapping in 3D space, and the
   wrapper's own plane hit-tests in front of the active face's controls,
   so real clicks on e.g. the "01 · Software" arrows/dots get swallowed.
   Route pointer events only to the active slide: the wrapper and the
   inactive faces ignore them, so hits fall through to the live box.
   (Vertical drag still works — Swiper listens on the .mainCube
   container, which keeps its pointer events.) */
.mainCube > .swiper-wrapper { pointer-events: none; }
.mainCube > .swiper-wrapper > .swiper-slide { pointer-events: none; }
.mainCube > .swiper-wrapper > .swiper-slide-active { pointer-events: auto; }