/* Landing page and Bulk Edit: demo art shared by both. The hero slider is in landing-hero.css. */

/* A transparency checkerboard, the universal sign for "the background is gone". */
.checker {
  --checker-a: oklch(0.968 0.007 247.896);
  --checker-b: oklch(0.929 0.013 255.508);
  background: repeating-conic-gradient(var(--checker-a) 0 25%, var(--checker-b) 0 50%) 0 0 / 16px 16px;
}

/* Bulk demo tiles: each walks from waiting to done (static/js/landing.js). */
.bulk-tile {
  transition: opacity 300ms ease, transform 300ms ease;
}
.bulk-tile[data-state="waiting"] {
  opacity: 0.45;
}
.bulk-tile[data-state="editing"] .bulk-scan {
  opacity: 1;
}
.bulk-scan {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--layer-mint) 45%, transparent) 50%, transparent);
  background-size: 100% 200%;
  transition: opacity 200ms ease;
}
@media (prefers-reduced-motion: no-preference) {
  .bulk-tile[data-state="editing"] .bulk-scan {
    animation: scan 900ms linear infinite;
  }
}
@keyframes scan {
  from {
    background-position: 0 100%;
  }
  to {
    background-position: 0 -100%;
  }
}
.bulk-tile [data-show] {
  display: none;
}
.bulk-tile[data-state="ready"] [data-show="ready"],
.bulk-tile[data-state="check"] [data-show="check"],
.bulk-tile[data-state="editing"] [data-show="editing"],
.bulk-tile[data-state="waiting"] [data-show="waiting"] {
  display: inline-flex;
}
.bulk-tile[data-state="ready"] .bulk-before,
.bulk-tile[data-state="check"] .bulk-before {
  opacity: 0;
}
.bulk-before {
  transition: opacity 400ms ease;
}