/* Achieve Motion
   Functional styles only. Backgrounds, colors, type, spacing and borders are
   all set in Cornerstone. Anything marked as a default uses :where(), which
   has zero specificity, so a value set in Cornerstone always wins. */

/* Pills: the script adds .is-active to the current pill.
   Style that state in Cornerstone with $el.is-active { ... } */
:where(.ach-pill) { cursor: pointer; }

/* Progress: the script sets the bar's width. Give it a height and color in Cornerstone. */
:where(.ach-progress-bar) { width: 0; }

.ach-devices { position: relative; }

/* 3D devices: the canvas always fills its element.
   Defaults below give an empty element a size; override width and height in Cornerstone. */
:where(.ach-3d) { position: relative; width: min(560px, 40vw); height: min(760px, 86vh); }
:where(.ach-3d[data-device="laptop"]) { width: min(900px, 54vw); height: min(660px, 78vh); }
:where(.ach-3d[data-device="tablet"]) { width: min(620px, 44vw); height: min(760px, 86vh); }
:where(.ach-3d[data-device="tablet"][data-orientation="landscape"]) { width: min(860px, 54vw); height: min(640px, 76vh); }

.ach-3d > canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  touch-action: pan-y;
}
.ach-3d.ach-3d-ready > :not(canvas) { display: none; }
:where(.ach-3d > :not(canvas)) { position: absolute; inset: 10% 20%; }
:where(.ach-3d > :not(canvas) img) { width: 100%; height: 100%; object-fit: contain; }

/* Desktop with motion: pinned sequence */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .ach-pin { height: 100vh; overflow: hidden; }
  .ach-pin > .x-row-inner { height: 100%; align-items: center; }
  .ach-devices { height: 100vh; }
  .ach-device { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .ach-chapters { position: relative; }
  .ach-chapter { position: absolute; top: 0; left: 0; right: 0; }
  .ach-stage.ach-js .ach-device,
  .ach-stage.ach-js .ach-chapter { visibility: hidden; opacity: 0; }
}

/* Tablet, mobile and reduced motion: no pinning, devices become a swipeable row */
@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
  .ach-pills, .ach-progress { display: none; }
  .ach-devices {
    display: flex;
    align-items: center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .ach-device { flex: 0 0 auto; scroll-snap-align: center; }
  :where(.ach-3d) { width: 80vw; max-width: 460px; height: 600px; }
  :where(.ach-3d[data-device="laptop"]),
  :where(.ach-3d[data-device="tablet"][data-orientation="landscape"]) { width: 88vw; max-width: 760px; height: 62vw; max-height: 520px; }
  :where(.ach-3d[data-device="tablet"]) { width: 80vw; max-width: 520px; height: 600px; }
}