/* ============================================================================
   WELL RUN · SIGNAL SYSTEM — SIGNAL CUTAWAY
   Image-cutaway module: one continuous photo revealed through a row of diagonal
   stadium "capsules" of varied length and offset (a frozen equalizer read). The
   capsules are cut by an SVG mask whose rects are rotated INSIDE the mask, so
   the photo stays upright while the bars lean. The gaps between capsules are
   transparent — whatever dark surface sits behind the element shows through.
   Built on Signal Core tokens in global.css.
   Apply:  <div class="wr-cutaway" data-cutaway="signal">
             <div class="wr-cutaway__img" style="background-image:url(...)"></div>
           </div>
   Optional second frame (.wr-cutaway__img--alt) + the --swap modifier cross-fade
   the whole image as one unit on a slow loop; hover holds the alternate frame.
   ============================================================================ */

.wr-cutaway {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Default arrangement = the five-capsule Signal read (the reference): equal
     width, small equal gaps; staggered lengths (1 · 1.2 · 1.2 · 1.3 · 1). */
  --wr-cut-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-155%20-134%201054%201054'%3E%3Cg%20transform='rotate(45%20372%20393)'%3E%3Crect%20x='40'%20y='120'%20width='127'%20height='508'%20rx='63'%20fill='white'/%3E%3Crect%20x='174'%20y='40'%20width='127'%20height='610'%20rx='63'%20fill='white'/%3E%3Crect%20x='308'%20y='180'%20width='127'%20height='610'%20rx='63'%20fill='white'/%3E%3Crect%20x='442'%20y='-5'%20width='127'%20height='660'%20rx='63'%20fill='white'/%3E%3Crect%20x='576'%20y='55'%20width='127'%20height='508'%20rx='63'%20fill='white'/%3E%3C/g%3E%3C/svg%3E");
}

/* The masked photo layer. background-position is overridable per instance. */
.wr-cutaway__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 44%;
  background-repeat: no-repeat;
  -webkit-mask: var(--wr-cut-mask) center / contain no-repeat;
          mask: var(--wr-cut-mask) center / contain no-repeat;
}

/* Second frame sits beneath the same mask, hidden until the swap. */
.wr-cutaway__img--alt { opacity: 0; }

/* ---- Arrangements (mask geometry only — same diagonal capsule language) ---- */

/* Each arrangement keeps the same logic: equal width, small equal gaps,
   staggered lengths (so the row is never flat), all leaning to the top-right. */

/* ---- Five capsules ---- */
/* Five B — scattered re-stagger of the reference lengths. */
.wr-cutaway[data-cutaway="five-b"] {
  --wr-cut-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-155%20-134%201054%201054'%3E%3Cg%20transform='rotate(45%20372%20393)'%3E%3Crect%20x='40'%20y='-5'%20width='127'%20height='660'%20rx='63'%20fill='white'/%3E%3Crect%20x='174'%20y='120'%20width='127'%20height='508'%20rx='63'%20fill='white'/%3E%3Crect%20x='308'%20y='175'%20width='127'%20height='508'%20rx='63'%20fill='white'/%3E%3Crect%20x='442'%20y='40'%20width='127'%20height='610'%20rx='63'%20fill='white'/%3E%3Crect%20x='576'%20y='180'%20width='127'%20height='610'%20rx='63'%20fill='white'/%3E%3C/g%3E%3C/svg%3E");
}
/* Five C — another scattered re-stagger. */
.wr-cutaway[data-cutaway="five-c"] {
  --wr-cut-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-140%20-97%201024%201024'%3E%3Cg%20transform='rotate(45%20372%20415)'%3E%3Crect%20x='40'%20y='180'%20width='127'%20height='610'%20rx='63'%20fill='white'/%3E%3Crect%20x='174'%20y='55'%20width='127'%20height='508'%20rx='63'%20fill='white'/%3E%3Crect%20x='308'%20y='40'%20width='127'%20height='660'%20rx='63'%20fill='white'/%3E%3Crect%20x='442'%20y='232'%20width='127'%20height='508'%20rx='63'%20fill='white'/%3E%3Crect%20x='576'%20y='120'%20width='127'%20height='610'%20rx='63'%20fill='white'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- Three capsules ---- */
/* Trio — scattered: highest in the middle, longest on the right reaching low. */
.wr-cutaway[data-cutaway="trio"] {
  --wr-cut-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-168%20-82%20970%20970'%3E%3Cg%20transform='rotate(45%20317%20403)'%3E%3Crect%20x='40'%20y='150'%20width='178'%20height='540'%20rx='89'%20fill='white'/%3E%3Crect%20x='228'%20y='10'%20width='178'%20height='620'%20rx='89'%20fill='white'/%3E%3Crect%20x='416'%20y='95'%20width='178'%20height='700'%20rx='89'%20fill='white'/%3E%3C/g%3E%3C/svg%3E");
}
/* Trio B — scattered: longest on the left, shorter dipped middle. */
.wr-cutaway[data-cutaway="trio-b"] {
  --wr-cut-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-138%20-75%20910%20910'%3E%3Cg%20transform='rotate(45%20317%20380)'%3E%3Crect%20x='40'%20y='30'%20width='178'%20height='700'%20rx='89'%20fill='white'/%3E%3Crect%20x='228'%20y='150'%20width='178'%20height='540'%20rx='89'%20fill='white'/%3E%3Crect%20x='416'%20y='80'%20width='178'%20height='640'%20rx='89'%20fill='white'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- Two capsules ---- */
/* Duo — shorter, higher left; longer, lower-starting right. */
.wr-cutaway[data-cutaway="duo"] {
  --wr-cut-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-153%20-79%20838%20838'%3E%3Cg%20transform='rotate(45%20266%20340)'%3E%3Crect%20x='40'%20y='110'%20width='220'%20height='560'%20rx='110'%20fill='white'/%3E%3Crect%20x='272'%20y='-10'%20width='220'%20height='700'%20rx='110'%20fill='white'/%3E%3C/g%3E%3C/svg%3E");
}
/* Duo B — longer left leading into a shorter, lower-starting right. */
.wr-cutaway[data-cutaway="duo-b"] {
  --wr-cut-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-167%20-73%20866%20866'%3E%3Cg%20transform='rotate(45%20266%20360)'%3E%3Crect%20x='40'%20y='-10'%20width='220'%20height='640'%20rx='110'%20fill='white'/%3E%3Crect%20x='272'%20y='130'%20width='220'%20height='600'%20rx='110'%20fill='white'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- Frame cross-fade (slow loop). Hover holds the alternate frame. ---- */
@media (prefers-reduced-motion: no-preference) {
  .wr-cutaway--swap.is-in .wr-cutaway__img--alt { animation: wrCutawaySwap 13s ease-in-out infinite; }
  .wr-cutaway--swap:hover .wr-cutaway__img--alt { animation: none; opacity: 1; }
}
@keyframes wrCutawaySwap {
  0%, 40% { opacity: 0; }
  52%, 90% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- Entrance: the cut rises and settles when scrolled into view. ---- */
@media (prefers-reduced-motion: no-preference) {
  .wr-cutaway.js-reveal {
    opacity: 0;
    transform: translateY(20px) scale(0.985);
    transition: opacity 0.9s var(--wr-ease-out, cubic-bezier(0.23,1,0.32,1)),
                transform 0.9s var(--wr-ease-out, cubic-bezier(0.23,1,0.32,1));
  }
  .wr-cutaway.js-reveal.is-in { opacity: 1; transform: none; }
}

/* ---- Live drift — each capsule becomes its own window over one fixed,
   registered photo and glides slowly along the diagonal on its own phase
   (a living equalizer). To stay smooth, the mask is STATIC and the motion is
   pure GPU transform: the masked bar window translates one way while the photo
   inside counter-translates the same amount, so the picture never moves — only
   the capsule does. (Animating mask-position re-rasterizes the mask each frame
   and shimmers; transforms don't.) Layers are built by signal-cutaway.js; the
   static __img is the no-JS / reduced-motion fallback. ---- */
.wr-cutaway--live.is-live .wr-cutaway__img { opacity: 0; }
.wr-cutaway__bar-fly {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}
/* Static per-wave re-seat layers (capsule slides along its diagonal; photo
   counter-translates to stay registered). Transitioned for a smooth re-seat. */
.wr-cutaway__bar-seat,
.wr-cutaway__bar-pane-seat {
  position: absolute;
  inset: 0;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.wr-cutaway__bar {
  position: absolute;
  inset: 0;
  /* No overflow:hidden — the mask is the only clip; a box clip would slice the
     capsule when the photo counter-translates. */
  -webkit-mask-image: var(--wr-bar-mask);
          mask-image: var(--wr-bar-mask);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  will-change: transform;
}
.wr-cutaway__bar-img {
  position: absolute;
  /* Oversized so the photo always covers the capsule despite the drift + re-seat
     translations — no bare box edge ever shows through the mask. */
  inset: -22%;
  background-size: cover;
  background-position: 50% 44%;
  background-repeat: no-repeat;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .wr-cutaway--live.is-in .wr-cutaway__bar {
    animation: wrCutawayBar var(--dur, 11s) ease-in-out var(--delay, 0s) infinite alternate;
  }
  .wr-cutaway--live.is-in .wr-cutaway__bar-img {
    animation: wrCutawayBarImg var(--dur, 11s) ease-in-out var(--delay, 0s) infinite alternate;
  }
}
/* Window drifts up-right along the capsule axis … */
@keyframes wrCutawayBar {
  from { transform: translate3d(calc(-1 * var(--amp, 11px)), var(--amp, 11px), 0); }
  to   { transform: translate3d(var(--amp, 11px), calc(-1 * var(--amp, 11px)), 0); }
}
/* … while the photo counter-drifts so it stays put (continuous across bars). */
@keyframes wrCutawayBarImg {
  from { transform: translate3d(var(--amp, 11px), calc(-1 * var(--amp, 11px)), 0); }
  to   { transform: translate3d(calc(-1 * var(--amp, 11px)), var(--amp, 11px), 0); }
}