/* ==========================================================================
   simple-carousel.css: the hero screenshot slider on index.html.

   Five real app screens in one row. The active one sits in front at full
   size; its neighbours peek out at the sides, smaller and faded; the rest
   wait out of sight behind. Clicking a side screen, an arrow, a dot, the
   arrow keys or a swipe brings another to the front (simple-carousel.js).
   The caption under the stage names the active screen.

   Positions are set by ONE custom property per slide, --pos (-2..2, the
   distance from the active slide), written by the script. Everything else
   is derived from it here, so the geometry lives in one place.

   Without JS every slide but the first is hidden and the first shows as a
   plain screenshot, so the page still reads.

   The screenshots stay light in dark mode on purpose: they are pictures of
   the light app.
   ========================================================================== */

.sl-carousel {
  --ratio: 1.633; --w: min(72%, 1040px); position: relative; margin-top: 56px;
  /* Wider than the text column: centred on the viewport, up to 1400px. */
  width: min(calc(100vw - 32px), 1400px); margin-inline-start: calc(50% - min(50vw - 16px, 700px));
}

/* The stage reserves the height of the front slide. */
.sl-stage { position: relative; width: 100%; aspect-ratio: calc(var(--ratio) / 0.72); max-height: calc(1040px / var(--ratio)); }
@supports not (aspect-ratio: 1) { .sl-stage { height: 52vw; } }

.sl-slide {
  --pos: 0;
  --abs: max(var(--pos), calc(var(--pos) * -1));
  position: absolute; top: 0; left: 50%; width: var(--w); margin: 0;
  transform: translateX(calc(-50% + var(--pos) * 72%)) scale(calc(1 - var(--abs) * 0.2));
  transform-origin: 50% 0;
  opacity: calc(1 - var(--abs) * 0.55);
  z-index: calc(10 - var(--abs));
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
  cursor: pointer;
}
.sl-slide[data-active] { cursor: grab; }
/* Drag to scroll (simple-carousel.js): vertical swipes still scroll the
   page, the screens follow the pointer with no easing while held, and the
   browser's own image drag is off so it cannot steal the gesture. */
.sl-stage { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sl-slide img { -webkit-user-drag: none; }
.sl-carousel.is-dragging .sl-slide { transition: none; cursor: grabbing; }
/* Two away: out of sight behind the neighbours, still in the DOM so it
   slides in rather than popping. */
.sl-slide[data-far] { opacity: 0; pointer-events: none; }

.sl-slide img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; box-shadow: var(--ov-shadow);
}
/* Side screens recede: no hover lift, just a pointer and a quiet hint. */
.sl-slide:not([data-active]):hover { opacity: calc(1 - var(--abs) * 0.4); }
.sl-slide:focus-visible { outline: none; }
.sl-slide:focus-visible img { outline: 2px solid var(--violet); outline-offset: 4px; }

/* Without JS: the first slide is a plain screenshot, the rest hidden. */
html:not(.js-carousel) .sl-stage { aspect-ratio: auto; max-height: none; }
html:not(.js-carousel) .sl-slide { position: relative; left: auto; transform: none; margin: 0 auto; }
html:not(.js-carousel) .sl-slide + .sl-slide,
html:not(.js-carousel) .sl-nav { display: none; }

/* --- Caption + controls ---------------------------------------------- */
.sl-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.sl-arrow {
  width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer;
}
.sl-arrow:hover { background: var(--line-soft); color: var(--ink); }
.sl-arrow:focus-visible, .sl-dot:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.sl-arrow svg { width: 16px; height: 16px; }
.sl-arrow--prev svg { transform: scaleX(-1); }

.sl-caption { min-width: 0; max-width: 520px; text-align: center; }
.sl-caption b { display: block; font: 500 21px/1.25 var(--font-display); color: var(--ink); }
.sl-caption span { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-2); }

.sl-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.sl-dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; background: var(--line); cursor: pointer; }
.sl-dot[aria-current="true"] { background: var(--ink-3); }

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

/* Phones: the front screen takes almost the full width, neighbours peek. */
@media (max-width: 560px) {
  .sl-carousel { --w: 88%; margin-top: 40px; }
  .sl-stage { aspect-ratio: calc(var(--ratio) / 0.88); }
  .sl-slide { transform: translateX(calc(-50% + var(--pos) * 70%)) scale(calc(1 - var(--abs) * 0.18)); }
  .sl-slide img { border-radius: 8px; }
  .sl-nav { gap: 10px; }
  .sl-caption b { font-size: 18px; }
  .sl-caption span { font-size: 14px; }
}