/* Round 37 · the Particles hero, live. Carried over from the sketch (concepts/v20/particles-hero.css) to the real site, 2026-10-25.
   The preset runs across the whole card, like the video did, under the same dark shade on the left; the
   engine slides it to the right of the words (ParticleConfig.heroLook). Its picture sits underneath from the
   first paint, and the engine fades its own canvas in over it. The two sliders are the Shaders hero's. */
.ptero { position: absolute; inset: 0; overflow: hidden; background: #000; }
.ptero picture, .ptero img, .ptero canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ptero img { object-fit: cover; object-position: center; }
/* less motion: the piece stays out of sight until it has reached its picture's moment and stopped there */
.ptero.is-held canvas { opacity: 0 !important; }

/* the two sliders: bottom right, as on Shaders (one of them below 900px wide, as there) */
.sctl[hidden] { display: none; }
/* the two sliders are in the card from the start but see-through until the piece is drawing (particles-hero.js) */
.band--particles .sctl--pt { transition: opacity .45s ease-out; }
.band--particles .sctl--pt.is-wait { opacity: 0; pointer-events: none; }
.pt-live .band--particles .sctl { top: auto; bottom: 24px; right: 24px; width: 232px; gap: 8px; }
.pt-live .band--particles .sctl--pt .sctl__val { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
  .pt-live .band--particles .band__shade {
    background: linear-gradient(to right, rgba(5, 4, 4, 0.95) 0%, rgba(5, 4, 4, 0.8) 46%, rgba(5, 4, 4, 0) 88%);
  }
}
@media (max-width: 640px) {
  /* words first, the piece underneath them */
  /* a little more room than the other cards: dust drawn at half the count reads fainter than a picture */
  .pt-live .band--particles, html[data-layout] .pt-live .band--particles { padding-bottom: 300px; }
  .ptero {
    top: auto; height: 340px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
  }
  .pt-live .band--particles .band__shade {
    background: linear-gradient(to bottom, rgba(5, 4, 4, 0.96) 0%, rgba(5, 4, 4, 0.96) calc(100% - 330px), rgba(5, 4, 4, 0) calc(100% - 190px));
  }
  .pt-live .band--particles .sctl { bottom: 14px; right: 14px; }
}