/* The subject remains photographic; irregular alpha carries the wet paper edge. */
@supports (mask-image: url("img/photo-wash-edge.svg")) or (-webkit-mask-image: url("img/photo-wash-edge.svg")) {
  html body.is-entrance .home-story .home-chapter .home-chapter-visual img:where(:not(.home-tarot-mirror)) {
    --photo-paper-wash: url("img/photo-wash-edge.svg");
    -webkit-mask-image: var(--photo-paper-wash) !important;
    mask-image: var(--photo-paper-wash) !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-composite: source-in !important;
    mask-composite: intersect !important;
    mask-mode: alpha !important;
    clip-path: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }
  html body.is-entrance .home-story .home-chapter--intro .home-chapter-visual img {
    --photo-paper-wash: url("img/photo-wash-edge-b.svg"),
      linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 12%, #000 36%),
      linear-gradient(180deg, transparent 0%, transparent 8%, rgba(0,0,0,.12) 14%, rgba(0,0,0,.65) 22%, #000 32%);
    -webkit-mask-composite: source-in, source-in !important;
    mask-composite: intersect, intersect !important;
  }
  html body.is-entrance .home-story .home-chapter--workshops .home-chapter-visual img,
  html body.is-entrance .home-story .home-chapter--about .home-chapter-visual img {
    --photo-paper-wash: url("img/photo-wash-edge-b.svg");
  }
  html body.is-entrance .home-story .home-chapter--crystals .home-chapter-visual img {
    --photo-paper-wash: url("img/photo-wash-edge-crystals.svg");
  }
  html body.is-entrance .home-story .home-chapter--about .home-chapter-visual img {
    --photo-paper-wash: url("img/photo-wash-edge-b.svg"), linear-gradient(90deg, transparent, #000 23%, #000 91%, transparent);
  }
  html body.is-entrance .home-story .home-chapter .home-chapter-visual::after { content: none !important; }

  /* Crystals: cover keeps the bracelet (about 8-81% x, 13-92% y of the photo) inside the same box as its wash mask. */
  /* Width follows height at the photo's native 3:4, so the box, cover crop and wash mask are the whole image at every breakpoint. */
  html.is-watercolor-story body.is-entrance .home-story .home-chapter--crystals .home-chapter-visual img {
    object-fit: cover !important;
    object-position: 50% 50% !important;
    left: auto !important;
    right: var(--photo-right, 0) !important;
    width: auto !important;
    height: var(--photo-height, 90%) !important;
    max-width: none !important;
    aspect-ratio: 3 / 4;
  }

  /* Non-intro photos print on paper: lighter, less saturated, and bloom from their centre.
     --bloom (0 to 1) is set per chapter in home-story.js; --bloom-opacity is bloom^0.6. */
  html.is-watercolor-story body.is-entrance .home-story .home-chapter:not(.home-chapter--intro):not(.home-chapter--close) .home-chapter-visual {
    opacity: calc(var(--bloom-opacity, 1) * .88);
  }
  html.is-watercolor-story body.is-entrance .home-story .home-chapter:not(.home-chapter--intro):not(.home-chapter--close) .home-chapter-visual img:not(.home-tarot-mirror) {
    filter: saturate(.6) contrast(.9) brightness(1.05) !important;
    -webkit-mask-image: var(--photo-paper-wash), radial-gradient(circle farthest-corner at 50% 50%, #000 calc(18% + 102% * var(--bloom, 1)), transparent calc(42% + 102% * var(--bloom, 1))) !important;
    mask-image: var(--photo-paper-wash), radial-gradient(circle farthest-corner at 50% 50%, #000 calc(18% + 102% * var(--bloom, 1)), transparent calc(42% + 102% * var(--bloom, 1))) !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-composite: source-in !important;
    mask-composite: intersect !important;
  }
  /* Tarot sits on white paper, so multiply lets the photo print into it. Dark and coloured chapters keep normal blending. */
  html.is-watercolor-story body.is-entrance .home-story .home-chapter--tarot .home-chapter-visual {
    mix-blend-mode: multiply;
  }
}