/* =========================================================================
   Instagram carousel viewer: shared slide stage, swipe track, nav, dots.
   Used by carousel/index.html (clean viewer) and carousel/phone/index.html
   (the phone page only restyles the chrome, never the slide/swipe logic).
   ========================================================================= */
.cstage {
  position: relative; width: min(90vw, 430px); aspect-ratio: 1080 / 1350; overflow: hidden;
  border-radius: 22px; background: var(--plum); touch-action: pan-y; user-select: none; -webkit-user-select: none;
  box-shadow: 0 34px 90px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 79, 168, .12);
}
.ctrack { display: flex; height: 100%; transition: transform .5s cubic-bezier(.66, 0, .2, 1); will-change: transform; }
.ctrack.no-anim { transition: none; }
.cslide { min-width: 100%; height: 100%; }
.cslide img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; pointer-events: none; }

.cnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 79, 168, .5);
  background: rgba(26, 16, 32, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; padding: 0;
  transition: background .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease); }
.cnav::before { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px;
  border-top: 2.5px solid #fff; border-right: 2.5px solid #fff; }
.cnav--prev { left: 12px; }
.cnav--prev::before { transform: translateX(2px) rotate(-135deg); }
.cnav--next { right: 12px; }
.cnav--next::before { transform: translateX(-2px) rotate(45deg); }
.cnav:hover { background: rgba(209, 0, 111, .55); border-color: var(--accent-on-dark); }
.cnav[disabled] { opacity: 0; pointer-events: none; }

.cdots { display: flex; gap: 8px; }
.cdots button { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .25); transition: background .25s var(--ease), transform .25s var(--ease); }
.cdots button.is-on { background: var(--accent-on-dark); transform: scale(1.3); }

@media (prefers-reduced-motion: reduce) { .ctrack { transition: none; } }