/* ---------- Screens showcase (v1.2.0) ----------
   A perspective rail of ten phones. The active one stands upright and
   forward; its neighbours are pushed back and rotated on the Y axis, so the
   row reads as depth rather than as a flat filmstrip.

   The whole thing is one horizontally scrollable rail with CSS scroll-snap:
   that is the same interaction on a desktop trackpad and on a phone, and it
   degrades to a plain scroller if a browser drops the 3D transforms. The
   active card is worked out from the scroll position, so keyboard, wheel,
   drag and the arrow buttons all drive the same state.

   Each phone carries a light twin. The toggle swaps every <img> src, which is
   the point of the section this release -- 1.2.0 is when the Android app got
   a light theme, so the site should be able to show it.                    */

.showcase {
  position: relative;
  /* Full-bleed: the rail needs to run past the container so the phones at
     the edges are cut off by the viewport rather than by a box. */
  padding-block: 8px 4px;
}

/* The blue pool the rail floats over. */
.showcase::before {
  content: ""; position: absolute; inset: -40px 0 60px; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 50% 45%, rgba(47, 107, 255, 0.20), transparent 70%),
    radial-gradient(ellipse 30% 40% at 12% 60%, rgba(62, 219, 200, 0.10), transparent 70%);
  filter: blur(6px);
}

/* ---- theme toggle ---- */
.sc-toolbar {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.sc-toggle {
  display: inline-flex; align-items: stretch;
  padding: 4px; gap: 4px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: rgba(10, 15, 38, 0.6);
  backdrop-filter: blur(8px);
}
.sc-toggle button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-2);
  font: inherit; font-size: 0.88rem; font-weight: 600;
  cursor: pointer; transition: background 200ms ease, color 200ms ease;
}
.sc-toggle button svg { width: 15px; height: 15px; }
.sc-toggle button[aria-pressed="true"] { background: var(--grad); color: #fff; }
.sc-toggle button:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; }

/* ---- the rail ---- */
.sc-rail-wrap { position: relative; }

.sc-rail {
  display: flex; gap: clamp(14px, 3.5vw, 40px);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  perspective: 1400px;
  perspective-origin: 50% 42%;
  /* Half a viewport of padding each side so the first and last card can
     still reach the middle of the screen when snapped. */
  padding: 28px max(calc(50% - 112px), 20px) 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sc-rail::-webkit-scrollbar { display: none; }

.sc-card {
  /* Sized so one phone plus its caption clears a laptop viewport -- a 1320x2868
     screenshot is very tall, and at 260px wide the caption fell below the fold. */
  flex: 0 0 auto; width: clamp(172px, 15.5vw, 224px);
  scroll-snap-align: center;
  transform-style: preserve-3d;
  /* Neighbours: pushed back, turned away, dimmed. JS sets --sc-dir to -1/1
     so the phones on the left and right lean toward the middle. */
  transform:
    translateZ(-220px)
    rotateY(calc(var(--sc-dir, 0) * -26deg))
    scale(0.9);
  opacity: 0.42;
  filter: saturate(0.75);
  transition:
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 500ms ease,
    filter 500ms ease;
}
.sc-card.is-active {
  transform: translateZ(0) rotateY(0deg) scale(1);
  opacity: 1;
  filter: none;
}

/* ---- the phone ---- */
.sc-phone {
  position: relative;
  border: 8px solid #182142; border-radius: 36px;
  background: #05091c;
  overflow: hidden;
  box-shadow:
    0 30px 70px rgba(4, 8, 30, 0.72),
    0 0 0 1px rgba(148, 168, 255, 0.16);
  transition: box-shadow 500ms ease;
}
.sc-card.is-active .sc-phone {
  box-shadow:
    0 44px 90px rgba(4, 8, 30, 0.8),
    0 0 0 1px rgba(91, 141, 247, 0.5),
    0 0 70px rgba(47, 107, 255, 0.3);
}
/* The notch. */
.sc-phone::after {
  content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 15px; border-radius: 999px; background: #05091c;
}
.sc-phone img {
  display: block; width: 100%; height: auto;
  /* Both twins are the same pixel size, so swapping src cannot reflow. */
  aspect-ratio: 1320 / 2868;
  transition: opacity 260ms ease;
}
.sc-phone.is-swapping img { opacity: 0; }

/* ---- caption ---- */
.sc-cap {
  margin: 14px 2px 0; text-align: center;
  opacity: 0.55; transition: opacity 500ms ease;
}
.sc-card.is-active .sc-cap { opacity: 1; }
.sc-cap b {
  display: block; color: var(--text);
  font-size: 0.95rem; font-weight: 700; margin-bottom: 3px; line-height: 1.35;
}
.sc-cap span {
  display: block; color: var(--text-2);
  font-size: 0.82rem; line-height: 1.45;
}

/* ---- arrows ---- */
.sc-nav {
  position: absolute; top: 42%; z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong);
  background: rgba(16, 23, 54, 0.82);
  backdrop-filter: blur(10px);
  color: var(--text); cursor: pointer;
  transition: transform 200ms ease, background 200ms ease, opacity 200ms ease;
}
.sc-nav:hover { transform: scale(1.08); background: var(--surface-2); }
.sc-nav:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 3px; }
.sc-nav[disabled] { opacity: 0.25; cursor: default; transform: none; }
.sc-nav svg { width: 18px; height: 18px; }
.sc-prev { left: max(calc(50% - 360px), 8px); }
.sc-next { right: max(calc(50% - 360px), 8px); }

/* ---- dots ---- */
.sc-dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 26px; flex-wrap: wrap;
}
.sc-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: var(--border-strong); cursor: pointer;
  transition: width 260ms ease, background 260ms ease;
}
.sc-dots button[aria-current="true"] { width: 26px; background: var(--blue-2); }
.sc-dots button:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 3px; }

/* ---- narrow screens ----
   The phones get smaller and the rotation shallower: a steep rotateY on a
   360px-wide screen turns the neighbours into slivers. */
@media (max-width: 720px) {
  .sc-rail { perspective: 900px; padding-top: 18px; }
  .sc-card {
    width: min(58vw, 210px);
    transform: translateZ(-150px) rotateY(calc(var(--sc-dir, 0) * -16deg)) scale(0.92);
  }
  .sc-rail { padding-inline: max(calc(50% - min(29vw, 105px)), 12px); }
  .sc-nav { display: none; }              /* swipe instead */
  .sc-cap span { font-size: 0.84rem; }
}

/* Respect the OS setting: no sliding, no 3D, just a plain readable row. */
@media (prefers-reduced-motion: reduce) {
  .sc-rail { scroll-behavior: auto; perspective: none; }
  .sc-card,
  .sc-card.is-active { transform: none; opacity: 1; filter: none; transition: none; }
  .sc-phone img { transition: none; }
}

/* RTL: the rail itself flips with `dir`, but the lean has to flip with it or
   the neighbours turn the wrong way. */
[dir="rtl"] .sc-card {
  transform:
    translateZ(-220px)
    rotateY(calc(var(--sc-dir, 0) * 26deg))
    scale(0.9);
}
[dir="rtl"] .sc-card.is-active { transform: translateZ(0) rotateY(0deg) scale(1); }
@media (max-width: 720px) {
  [dir="rtl"] .sc-card {
    transform: translateZ(-150px) rotateY(calc(var(--sc-dir, 0) * 16deg)) scale(0.92);
  }
}