/* ==========================================================================
   Direct Homes – Image hover (diagonal light sweep + soft zoom)
   Global classes, any page can use them.

   USAGE
     1) Image box hovered directly:
          <div class="dh-img-hover"><img src="…" alt="…"></div>

     2) Whole card hovered (sweep runs when the card is hovered):
          <article class="dh-img-hover-group">
            <a class="dh-img-hover"><img …></a> …
          </article>

     3) The box already uses its own ::after (e.g. a dark gradient)?
        Add --alt: the sweep then uses ::before instead.
          <a class="h2-city dh-img-hover dh-img-hover--alt"> …

   The box keeps its own position (absolute boxes stay absolute); it only
   becomes position:relative when it has none.
   ========================================================================== */

/* zero specificity: never overrides a component's own position/overflow */
:where(.dh-img-hover) {
  position: relative;
  overflow: hidden;
}

.dh-img-hover {
  isolation: isolate; /* the sweep stays inside this box, tags/badges stay on top */
}

/* the light band (rotated -45deg, grows from the centre) */
.dh-img-hover:not(.dh-img-hover--alt)::after,
.dh-img-hover--alt::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 200%;
  height: 0;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) rotate(-45deg);
  pointer-events: none;
}

.dh-img-hover:not(.dh-img-hover--alt):hover::after,
.dh-img-hover-group:hover .dh-img-hover:not(.dh-img-hover--alt)::after,
.dh-img-hover--alt:hover::before,
.dh-img-hover-group:hover .dh-img-hover--alt::before {
  height: 250%;
  background-color: transparent;
  transition: height 0.6s linear, background-color 0.6s linear;
}

/* soft zoom of the photo
   :where() = zero specificity, so a component's own photo transition
   (e.g. the 2-photo fade in property cards) is never overwritten */
:where(.dh-img-hover) img {
  transition: transform 1s ease;
}

:where(.dh-img-hover:hover, .dh-img-hover-group:hover .dh-img-hover) img {
  transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .dh-img-hover:not(.dh-img-hover--alt)::after,
  .dh-img-hover--alt::before {
    display: none;
  }

  :where(.dh-img-hover) img {
    transition: none;
  }
}