/* Card-stack hero (lazysite.io): two fans of screenshots dealt forward,
   each front card leaving slowly along an arc. Generated by make-stacks.py.
   Only transform and opacity animate. */
.ls-stacks { position: absolute; inset: 0; z-index: 0; isolation: isolate; overflow: hidden; pointer-events: none; }
.ls-stack { position: absolute; isolation: isolate; top: 80px; width: var(--card-w, 270px); aspect-ratio: 16 / 10; --dir: 1; --T: 36s; }
.ls-stack:nth-child(1) { left: 45%; z-index: 1; --dir: -1; --T: 36s; }
.ls-stack:nth-child(2) { left: 75%; top: 72px; z-index: 2; --T: 39s; }
.ls-card {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
  border-radius: 6px; border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.12);
  transform-origin: 50% 100%; opacity: 0; will-change: transform, opacity; backface-visibility: hidden;
  animation: ls-deal var(--T) infinite;
  animation-delay: calc(var(--T) * var(--i) / -12);
}
@keyframes ls-deal {
  0% { transform: translate3d(calc(var(--dir) * -90.0px), 36.0px, 0) rotate(calc(var(--dir) * -12.00deg)) scale(0.820); opacity: 0; z-index: 0; animation-timing-function: cubic-bezier(.35, 0, .3, 1); }
  6.667% { transform: translate3d(calc(var(--dir) * -75.0px), 30.0px, 0) rotate(calc(var(--dir) * -10.20deg)) scale(0.850); opacity: 1; z-index: 50; animation-timing-function: cubic-bezier(.35, 0, .3, 1); }
  8.333% { transform: translate3d(calc(var(--dir) * -75.0px), 30.0px, 0) rotate(calc(var(--dir) * -10.20deg)) scale(0.850); opacity: 1; z-index: 50; animation-timing-function: cubic-bezier(.35, 0, .3, 1); }
  15.000% { transform: translate3d(calc(var(--dir) * -60.0px), 24.0px, 0) rotate(calc(var(--dir) * -8.40deg)) scale(0.880); opacity: 1; z-index: 60; animation-timing-function: cubic-bezier(.35, 0, .3, 1); }
  16.667% { transform: translate3d(calc(var(--dir) * -60.0px), 24.0px, 0) rotate(calc(var(--dir) * -8.40deg)) scale(0.880); opacity: 1; z-index: 60; animation-timing-function: cubic-bezier(.35, 0, .3, 1); }
  23.333% { transform: translate3d(calc(var(--dir) * -45.0px), 18.0px, 0) rotate(calc(var(--dir) * -6.60deg)) scale(0.910); opacity: 1; z-index: 70; animation-timing-function: cubic-bezier(.35, 0, .3, 1); }
  25.000% { transform: translate3d(calc(var(--dir) * -45.0px), 18.0px, 0) rotate(calc(var(--dir) * -6.60deg)) scale(0.910); opacity: 1; z-index: 70; animation-timing-function: cubic-bezier(.35, 0, .3, 1); }
  31.667% { transform: translate3d(calc(var(--dir) * -30.0px), 12.0px, 0) rotate(calc(var(--dir) * -4.80deg)) scale(0.940); opacity: 1; z-index: 80; animation-timing-function: cubic-bezier(.35, 0, .3, 1); }
  33.333% { transform: translate3d(calc(var(--dir) * -30.0px), 12.0px, 0) rotate(calc(var(--dir) * -4.80deg)) scale(0.940); opacity: 1; z-index: 80; animation-timing-function: cubic-bezier(.35, 0, .3, 1); }
  40.000% { transform: translate3d(calc(var(--dir) * -15.0px), 6.0px, 0) rotate(calc(var(--dir) * -3.00deg)) scale(0.970); opacity: 1; z-index: 90; animation-timing-function: cubic-bezier(.35, 0, .3, 1); }
  41.667% { transform: translate3d(calc(var(--dir) * -15.0px), 6.0px, 0) rotate(calc(var(--dir) * -3.00deg)) scale(0.970); opacity: 1; z-index: 90; animation-timing-function: cubic-bezier(.35, 0, .3, 1); }
  48.333% { transform: translate3d(calc(var(--dir) * 0.0px), 0.0px, 0) rotate(calc(var(--dir) * -1.20deg)) scale(1.000); opacity: 1; z-index: 100; animation-timing-function: cubic-bezier(.35, 0, .3, 1); }
  50.000% { transform: translate3d(calc(var(--dir) * 0.0px), -0.0px, 0) rotate(calc(var(--dir) * -1.20deg)) scale(1.000); opacity: 1.00; z-index: 110; animation-timing-function: linear; }
  51.667% { transform: translate3d(calc(var(--dir) * 3.2px), -13.9px, 0) rotate(calc(var(--dir) * 1.20deg)) scale(1.012); opacity: 1.00; z-index: 110; animation-timing-function: linear; }
  53.333% { transform: translate3d(calc(var(--dir) * 12.7px), -27.4px, 0) rotate(calc(var(--dir) * 3.60deg)) scale(1.024); opacity: 1.00; z-index: 110; animation-timing-function: linear; }
  55.000% { transform: translate3d(calc(var(--dir) * 28.1px), -40.0px, 0) rotate(calc(var(--dir) * 6.00deg)) scale(1.032); opacity: 1.00; z-index: 110; animation-timing-function: linear; }
  56.667% { transform: translate3d(calc(var(--dir) * 49.1px), -51.4px, 0) rotate(calc(var(--dir) * 8.40deg)) scale(1.038); opacity: 1.00; z-index: 110; animation-timing-function: linear; }
  58.333% { transform: translate3d(calc(var(--dir) * 75.0px), -61.3px, 0) rotate(calc(var(--dir) * 10.80deg)) scale(1.040); opacity: 1.00; z-index: 110; animation-timing-function: linear; }
  60.000% { transform: translate3d(calc(var(--dir) * 105.0px), -69.3px, 0) rotate(calc(var(--dir) * 13.20deg)) scale(1.038); opacity: 1.00; z-index: 110; animation-timing-function: linear; }
  61.667% { transform: translate3d(calc(var(--dir) * 138.2px), -75.2px, 0) rotate(calc(var(--dir) * 15.60deg)) scale(1.032); opacity: 1.00; z-index: 110; animation-timing-function: linear; }
  63.333% { transform: translate3d(calc(var(--dir) * 173.5px), -78.8px, 0) rotate(calc(var(--dir) * 18.00deg)) scale(1.024); opacity: 0.71; z-index: 110; animation-timing-function: linear; }
  65.000% { transform: translate3d(calc(var(--dir) * 210.0px), -80.0px, 0) rotate(calc(var(--dir) * 20.40deg)) scale(1.012); opacity: 0.36; z-index: 110; animation-timing-function: linear; }
  66.667% { transform: translate3d(calc(var(--dir) * 246.5px), -78.8px, 0) rotate(calc(var(--dir) * 22.80deg)) scale(1.000); opacity: 0.00; z-index: 110; animation-timing-function: linear; }
  100% { transform: translate3d(calc(var(--dir) * -90.0px), 36.0px, 0) rotate(calc(var(--dir) * -12.00deg)) scale(0.820); opacity: 0; z-index: 0; }
}
/* the title and subtitle on a blurred panel, so light screenshots behind stay clear of the text */
.page-hero .page-hero-text {
  align-self: flex-start; max-width: 40rem; margin-left: -1.25rem; padding: 1rem 1.25rem 1.15rem;
  background: color-mix(in srgb, var(--surface, #fff) 50%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid color-mix(in srgb, var(--surface, #fff) 40%, transparent);
  border-radius: var(--radius, 4px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page-hero .page-hero-text { background: color-mix(in srgb, var(--surface, #fff) 92%, transparent); }
}
@media (max-width: 760px) {
  .page-hero .page-hero-text { margin-left: 0; }
  .ls-stack:nth-child(2) { display: none; }
  /* the left stack stays, on the left, fanning and leaving as it does on a wide screen */
  .ls-stack:nth-child(1) { left: 6%; top: 70px; --card-w: 230px; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-card { animation: none; }
  .ls-card:nth-child(1) { transform: translate3d(calc(var(--dir) * 0.0px), 0.0px, 0) rotate(calc(var(--dir) * -1.20deg)) scale(1.000); opacity: 1; z-index: 100; }
  .ls-card:nth-child(2) { transform: translate3d(calc(var(--dir) * -15.0px), 6.0px, 0) rotate(calc(var(--dir) * -3.00deg)) scale(0.970); opacity: 1; z-index: 90; }
  .ls-card:nth-child(3) { transform: translate3d(calc(var(--dir) * -30.0px), 12.0px, 0) rotate(calc(var(--dir) * -4.80deg)) scale(0.940); opacity: 1; z-index: 80; }
  .ls-card:nth-child(4) { transform: translate3d(calc(var(--dir) * -45.0px), 18.0px, 0) rotate(calc(var(--dir) * -6.60deg)) scale(0.910); opacity: 1; z-index: 70; }
  .ls-card:nth-child(5) { transform: translate3d(calc(var(--dir) * -60.0px), 24.0px, 0) rotate(calc(var(--dir) * -8.40deg)) scale(0.880); opacity: 1; z-index: 60; }
  .ls-card:nth-child(6) { transform: translate3d(calc(var(--dir) * -75.0px), 30.0px, 0) rotate(calc(var(--dir) * -10.20deg)) scale(0.850); opacity: 1; z-index: 50; }
  .ls-card:nth-child(7) { transform: translate3d(calc(var(--dir) * -75.0px), 30.0px, 0) rotate(calc(var(--dir) * -10.20deg)) scale(0.850); opacity: 0; z-index: 50; }
  .ls-card:nth-child(8) { transform: translate3d(calc(var(--dir) * -75.0px), 30.0px, 0) rotate(calc(var(--dir) * -10.20deg)) scale(0.850); opacity: 0; z-index: 50; }
  .ls-card:nth-child(9) { transform: translate3d(calc(var(--dir) * -75.0px), 30.0px, 0) rotate(calc(var(--dir) * -10.20deg)) scale(0.850); opacity: 0; z-index: 50; }
  .ls-card:nth-child(10) { transform: translate3d(calc(var(--dir) * -75.0px), 30.0px, 0) rotate(calc(var(--dir) * -10.20deg)) scale(0.850); opacity: 0; z-index: 50; }
  .ls-card:nth-child(11) { transform: translate3d(calc(var(--dir) * -75.0px), 30.0px, 0) rotate(calc(var(--dir) * -10.20deg)) scale(0.850); opacity: 0; z-index: 50; }
  .ls-card:nth-child(12) { transform: translate3d(calc(var(--dir) * -75.0px), 30.0px, 0) rotate(calc(var(--dir) * -10.20deg)) scale(0.850); opacity: 0; z-index: 50; }
}