/* ============================================================================
   Diploria — Screenshot Slideshow styles
   Brand tokens used: --teal #29B8B5, --paper-2 #F3EFE8, --ease-out.
   If your app already defines these, delete the :root block below.
   ========================================================================== */
:root {
  --teal: #29B8B5;
  --paper-2: #F3EFE8;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* media area — 16:10, fills whatever frame/card you place it in */
.dss { position: relative; }
.dss-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--paper-2); overflow: hidden; }
.dss-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transform: scale(1.015); transition: opacity .7s var(--ease-out), transform 1.1s var(--ease-out); }
.dss-stage > img.on { opacity: 1; transform: none; }

/* progress bar */
.dss-prog { position: absolute; top: 0; left: 0; height: 3px; width: 0; background: var(--teal); z-index: 4; }

/* dots */
.dss-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 4; padding: 6px 10px; border-radius: 99px; background: rgba(6,24,31,.42); backdrop-filter: blur(6px); }
.dss-dots button { width: 7px; height: 7px; padding: 0; border: none; border-radius: 99px; background: rgba(255,255,255,.45); cursor: pointer; transition: all .25s var(--ease-out); }
.dss-dots button.on { background: #fff; width: 20px; }

@media (prefers-reduced-motion: reduce) {
  .dss-stage > img { transition: opacity .2s linear; transform: none; }
}