/* =====================================================
   MMWP Motion Borders — Masked reveal for existing border
   Targets:
     - Bauen Image Widget: .elementor-widget-bauen-image .img::before
     - Elementor Image Widget (optional): .elementor-widget-image .elementor-image::before
   Behavior:
     - Reveals existing ::before border using CSS mask (no new border)
     - Progress driven by JS via:
         --mmwp-border-progress (0..1)
         --mmwp-border-progress-delayed (0..1)  (bottom/right delay)
   ===================================================== */

:root{
  --mmwp-border-progress: 1;            /* fallback = visible if JS doesn't run */
  --mmwp-border-progress-delayed: 1;    /* fallback */
  --mmwp-border-mask-thickness: 6px;    /* mask band thickness; does NOT change border thickness */
}

/* Helper: apply mask to the existing border pseudo element */
.mmwp-border-reveal-target::before{
  /* Respect theme border color/width (we're only masking visibility) */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  /* Four edge masks:
     - Top edge: left -> right (progress)
     - Left edge: top -> bottom (progress)
     - Bottom edge: right -> left (delayed)
     - Right edge: bottom -> top (delayed)
  */
  -webkit-mask-image:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0);
  mask-image:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0);

  -webkit-mask-size:
    calc(var(--mmwp-border-progress) * 100%) var(--mmwp-border-mask-thickness),
    var(--mmwp-border-mask-thickness) calc(var(--mmwp-border-progress) * 100%),
    calc(var(--mmwp-border-progress-delayed) * 100%) var(--mmwp-border-mask-thickness),
    var(--mmwp-border-mask-thickness) calc(var(--mmwp-border-progress-delayed) * 100%);
  mask-size:
    calc(var(--mmwp-border-progress) * 100%) var(--mmwp-border-mask-thickness),
    var(--mmwp-border-mask-thickness) calc(var(--mmwp-border-progress) * 100%),
    calc(var(--mmwp-border-progress-delayed) * 100%) var(--mmwp-border-mask-thickness),
    var(--mmwp-border-mask-thickness) calc(var(--mmwp-border-progress-delayed) * 100%);

  -webkit-mask-position:
    left top,
    left top,
    right bottom,
    right bottom;
  mask-position:
    left top,
    left top,
    right bottom,
    right bottom;

  -webkit-mask-composite: source-over, source-over, source-over, source-over;
  mask-composite: add, add, add, add;
}

/* Reduced motion: keep borders visible */
@media (prefers-reduced-motion: reduce){
  .mmwp-border-reveal-target::before{
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}