/* The homepage's staggered editorial film windows, composed around the real phone. */
.wallet-hero { position: relative; }
.wallet-film {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 22px;
  width: 56%;
  height: min(84svh, 850px);
  transform: translateY(-46%);
  pointer-events: none;
}
.wallet-film-tile {
  position: absolute;
  overflow: hidden;
  border-radius: 3px;
  background: #ebeae7 center / cover no-repeat;
}
.wallet-film-glass { left: 0; top: 0; width: 52%; height: 29%; background-image: url('media/collage-glass.jpg'); }
.wallet-film-material { right: 0; top: 20%; width: 34%; height: 45%; background-image: url('media/collage-material.jpg'); }
.wallet-film-city { left: 0; top: 57%; width: 40%; height: 31%; background-image: url('media/collage-city.jpg'); }
.wallet-film-structure { right: 3%; bottom: 0; width: 39%; height: 24%; background-image: url('media/collage-structure.jpg'); }
.wallet-film-tile video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.wallet-film-tile[data-state="loading"] video,
.wallet-film-tile[data-state="error"] video,
.wallet-film-tile[data-state="blocked"] video,
.wallet-film-tile[data-state="static"] video { opacity: 0; }
.wallet-film-toggle {
  position: absolute;
  z-index: 4;
  right: 30px;
  bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px;
  color: #666;
  font-size: 11px;
}
.wallet-film-toggle::before { content: ''; width: 6px; height: 9px; border-inline: 1.5px solid currentColor; }
.wallet-film-toggle[aria-pressed="true"]::before { width: 0; height: 0; border: 5px solid transparent; border-left: 7px solid currentColor; border-right: 0; }
.wallet-film-toggle:hover { color: #111; }
body:has(dialog[open]) .wallet-film-toggle { visibility: hidden; }
@media (max-width: 700px) {
  .wallet-phone-scene { width: 90%; }
  .wallet-film { right: 0; width: 55%; height: min(70svh, 610px); transform: translateY(-44%); }
  .wallet-film-glass { left: 4%; top: 0; width: 87%; height: 22%; }
  .wallet-film-material { right: 0; top: 28%; width: 39%; height: 37%; }
  .wallet-film-city { left: 0; top: 69%; width: 66%; height: 21%; }
  .wallet-film-structure { right: 0; bottom: 0; width: 27%; height: 22%; }
  .wallet-film-toggle { right: 12px; bottom: 12px; font-size: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  .wallet-film-tile video { transition: opacity .25s ease; }
}