/* Things we've made, 3 Nov 2026: the live stacking cards on pure black, each with its own film behind the work.
   Behind each card a slow film sets the scene (a pharmacy at night, an answer being written, a hall set for dinner);
   the app itself rises into place over it as the card arrives. Loaded after quiet.css. */
:root .dark-site .pv-field--monpro,
:root .dark-site .pv-field--visitrove,
:root .dark-site .pv-field--studio { background: #000; }

.pv-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #000; }
/* The film is drawn solid and darkened by a flat layer of black in the shade above it (the last layer of .pv-bg::after),
   the same picture as the film at 74% over the black: a see-through film has to be blended into the page on every one
   of its frames, which made the stack stutter while it scrolled. */
.pv-bg video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 2.4s cubic-bezier(.19, 1, .22, 1); }
.pv-s.is-in .pv-bg video { transform: scale(1); }
/* the film falls away to black at the left and the foot, so the name and the screens sit on black */
.pv-bg::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .6) 24%, rgba(0, 0, 0, .12) 55%, rgba(0, 0, 0, .05) 100%),
  linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 38%),
  linear-gradient(rgba(0, 0, 0, .26), rgba(0, 0, 0, .26)); }
/* Ukason Studio's film sits at half strength */
.pv-s--studio .pv-bg::after { background:
  linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .6) 24%, rgba(0, 0, 0, .12) 55%, rgba(0, 0, 0, .05) 100%),
  linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 38%),
  linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)); }

/* the work rises into place as its card arrives, eased long and never bouncing */
.pv-s .pv-shot { z-index: 2; opacity: 0; transform: translate3d(0, 9%, 0) scale(.94); transform-origin: 50% 100%;
  transition: transform 1.4s cubic-bezier(.19, 1, .22, 1), opacity .9s cubic-bezier(.39, .575, .565, 1); }
.pv-s .pv-phone { z-index: 3; transition-delay: .18s; }
.pv-s.is-in .pv-shot { opacity: 1; transform: none; }
.pv-s .pv-shot { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 50px 90px -40px rgba(0, 0, 0, .9); }
.pv-s .pv-full::after { content: none; }

/* every app window sits whole inside its card, whatever the browser height: sizes come from the card (cq units), not the page width */
.pv-s-card { container-type: size; }
@media (min-width: 761px) {
  :root .dark-site .pv-s--monpro .pv-wide.pv-solo,
  :root .dark-site .pv-s--studio .pv-full.pv-shot { inset: auto; left: auto; right: 4cqw; top: 9cqh; width: min(61cqw, 118cqh); height: auto; border-radius: 8px; }
  :root .dark-site .pv-s--visitrove .pv-wide.pv-shot { left: auto; right: 11cqw; top: 8cqh; width: min(58cqw, 118cqh); border-radius: 8px; }
  :root .dark-site .pv-s--visitrove .pv-phone.pv-shot { left: auto; right: 4cqw; top: 17cqh; width: min(16.5cqw, 31cqh); }
}
@media (max-width: 760px) {
  .pv-bg::after, .pv-s--studio .pv-bg::after { background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .7) 45%, rgba(0, 0, 0, .2) 100%),
    linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)); }
  :root .dark-site .pv-s--monpro .pv-wide.pv-solo,
  :root .dark-site .pv-s--studio .pv-full.pv-shot,
  :root .dark-site .pv-s--visitrove .pv-wide.pv-shot { inset: auto; left: 5cqw; right: auto; top: 9cqh; width: 90cqw; height: auto; aspect-ratio: 16 / 10; border-radius: 8px; -webkit-mask: none; mask: none; }
  :root .dark-site .pv-s--visitrove .pv-phone.pv-shot { left: auto; right: 6cqw; top: 24cqh; width: min(30cqw, 15cqh); border-radius: 12px; }
}