/* ═══════════════════════════════════════════════════════════════════════
   LABS — BLURRED BOX WIPE REVEAL
   Prefix: lw- (labs-wipe)
   Scoped entirely to .archive-tile-extension. Zero global leakage.
   ═══════════════════════════════════════════════════════════════════════ */

/*
  TECHNIQUE — mask-position animation
  ─────────────────────────────────────────────────────────────────────
  CSS gradient strings cannot be interpolated by browsers. Instead we:

  1. Set mask-image to a gradient that is TWICE the element's width
     (mask-size: 200% 100%). The gradient is:
       left half  = solid black  (opaque  → reveals content)
       right half = black→transparent (the feathered wipe edge)

  2. Start: mask-position: 100% 0  → mask shifted fully right, so only
     the transparent half overlaps the element → content fully hidden.

  3. End:   mask-position: 0% 0    → mask shifted fully left, so the
     solid half covers the entire element → content fully revealed.

  The feather occupies ~15% of the element width (= 7.5% of the 200%
  mask width = 15% gradient stop spread within the right half).

  Because the marquee loop duplicates use -webkit-mask-image for the
  Safari overflow:hidden fix, we STACK two mask layers using commas:
     Layer 1 = wipe gradient (animated via mask-position)
     Layer 2 = radial-gradient white→black (the Safari overflow hack)
  mask-composite: add  → content shows where BOTH layers are opaque.
  ─────────────────────────────────────────────────────────────────────
*/

/* ── HIDDEN INITIAL STATE ──────────────────────────────────────────── */
/*
  .lw-pending: content hidden, mask positioned fully right.
  Applied by JS before the section is visible, preventing a flash.
*/
.archive-tile-extension.lw-pending {
  /* layer 1: wipe mask at start position (fully right = content hidden) */
  /* layer 2: Safari radial-gradient overflow-radius hack (preserved)   */
  -webkit-mask-image:
    linear-gradient(to right, black 85%, transparent 100%),
    -webkit-radial-gradient(white, black);
  -webkit-mask-size: 200% 100%, auto;
  -webkit-mask-position: 100% 0, 0 0;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-over;
  mask-image:
    linear-gradient(to right, black 85%, transparent 100%),
    radial-gradient(circle, white, black);
  mask-size: 200% 100%, auto;
  mask-position: 100% 0, 0 0;
  mask-repeat: no-repeat, no-repeat;
  mask-composite: add;
}

/* ── ANIMATION KEYFRAME ─────────────────────────────────────────────── */
/*
  Animate mask-position from 100% (hidden) to 0% (revealed).
  Only the position changes — the gradient string stays constant.
  Browsers can interpolate mask-position smoothly.
*/
@keyframes lw-wipe-move {
  from {
    -webkit-mask-position: 100% 0, 0 0;
    mask-position: 100% 0, 0 0;
  }
  to {
    -webkit-mask-position: 0% 0, 0 0;
    mask-position: 0% 0, 0 0;
  }
}

/* ── WIPING STATE ───────────────────────────────────────────────────── */
.archive-tile-extension.lw-wiping {
  -webkit-mask-image:
    linear-gradient(to right, black 85%, transparent 100%),
    -webkit-radial-gradient(white, black);
  -webkit-mask-size: 200% 100%, auto;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-over;
  mask-image:
    linear-gradient(to right, black 85%, transparent 100%),
    radial-gradient(circle, white, black);
  mask-size: 200% 100%, auto;
  mask-repeat: no-repeat, no-repeat;
  mask-composite: add;

  /* animation — delay is set per-element via --lw-delay custom property */
  animation: lw-wipe-move 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: var(--lw-delay, 0ms);
}

/* ── DONE STATE: mask cleared, original Safari hack restored ────────── */
.archive-tile-extension.lw-done {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  -webkit-mask-size: auto;
  -webkit-mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-image: none;
  animation: none;
}

/* ── INSTANT REVEAL (off-screen / loop clones / reduced motion) ─────── */
.archive-tile-extension.lw-instant {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  -webkit-mask-size: auto;
  -webkit-mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-image: none;
  animation: none;
}

/* ── REDUCED MOTION ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .archive-tile-extension.lw-pending,
  .archive-tile-extension.lw-wiping {
    -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
    -webkit-mask-size: auto !important;
    mask-image: none !important;
    animation: none !important;
  }
}