/* Images on hover — scaffolding for tests/hover.html.

   Ten treatments over the real "How we work" rows. Common rules across all of
   them: the frames are decorative (empty alt, never focusable), they are
   pointer-events:none so they can never swallow a click meant for the row, and
   every one is driven by transform and opacity only — these rows are tall and
   wide, and animating layout on hover across a full-bleed band janks. */

.hband { list-style: none; margin: 0; padding: 0; }
/* the row is the positioning context and, where an option needs it, the clip */
.hband .band { position: relative; }
.hband--clip .band { overflow: hidden; }
.hband .band__inner { position: relative; }

/* every frame shares one look: rounded, shadowed, and cropped to a consistent
   ratio so a trio never reads as three different kinds of picture */
.hband img {
  display: block;
  border-radius: var(--r-md, 16px);
  object-fit: cover;
  aspect-ratio: 4 / 3;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
  pointer-events: none;
}

/* ── 01 / 05 · single frame at the pointer ──────────────────────────────── */

.pop {
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  z-index: 3;
  opacity: 0;
  /* --mx/--my are written by script; the -50% centres the frame on the pointer */
  transform: translate3d(calc(var(--mx, 0px) - 50%), calc(var(--my, 0px) - 50%), 0)
             rotate(var(--tilt, 0deg)) scale(.92);
  transition: opacity .22s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.band:hover .pop { opacity: 1; transform:
  translate3d(calc(var(--mx, 0px) - 50%), calc(var(--my, 0px) - 50%), 0)
  rotate(var(--tilt, 0deg)) scale(1); }

/* 05 · the same frame, but snapping in past full size and easing back out. Fast
   in, slower out is what reads as a pop rather than a bounce. */
.pop--spring {
  width: 300px;
  transition: opacity .16s linear, transform .42s cubic-bezier(.2, 1.7, .3, 1);
}
.band:hover .pop--spring { transition: opacity .12s linear, transform .18s cubic-bezier(.2, 1.9, .3, 1); }

/* ── 02 · fan of three ──────────────────────────────────────────────────── */

.fan {
  position: absolute;
  top: 50%;
  left: 55%;
  z-index: 3;
  pointer-events: none;
}
.fan img {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--w, 220px);
  margin: 0;
  transform-origin: 20% 90%;
  /* all three start collapsed at one point, then spread to their own angle */
  transform: translate(-50%, -50%) rotate(0deg) scale(.5);
  opacity: 0;
  transition: opacity .2s var(--ease), transform .52s cubic-bezier(.2, 1.5, .3, 1);
}
.band:hover .fan img { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1); }
/* staggered so the hand spreads rather than snapping open all at once */
.fan img:nth-child(1) { transition-delay: 0ms, 0ms; }
.fan img:nth-child(2) { transition-delay: 50ms, 50ms; }
.fan img:nth-child(3) { transition-delay: 100ms, 100ms; }

/* ── 03 · peek from the edge ────────────────────────────────────────────── */

.peekimg {
  position: absolute;
  top: 50%;
  right: 0;
  width: 300px;
  z-index: 3;
  /* parked fully outside the row; the row's overflow:hidden is the mask */
  transform: translate(100%, -50%);
  transition: transform .5s var(--ease);
  pointer-events: none;
}
.band:hover .peekimg { transform: translate(12%, -50%); }

/* ── 04 · stack shuffle ─────────────────────────────────────────────────── */

.shuf {
  position: absolute;
  top: 50%;
  left: 58%;
  width: 260px;
  z-index: 3;
  pointer-events: none;
}
.shuf img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translate(-50%, -50%) scale(.94);
  opacity: 0;
  transition: opacity .22s var(--ease), transform .45s var(--ease);
}
.band:hover .shuf img { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(var(--sr, 0deg)); }
/* the card script.js flicks aside: pulled off the pile and tilted */
.band:hover .shuf img.is-off {
  transform: translate(-50%, -50%) translateX(46%) rotate(11deg) scale(.97);
  opacity: .96;
}

/* ── 06 · scattered trio ────────────────────────────────────────────────── */

.scatter { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.scatter img {
  position: absolute;
  left: var(--x, 50%);
  top: 50%;
  width: var(--w, 180px);
  /* --y offsets from the row's vertical centre so a trio can straddle the copy */
  transform: translate(-50%, calc(-50% + var(--y, 0%))) rotate(var(--r, 0deg)) scale(.88);
  opacity: 0;
  transition: opacity .24s var(--ease), transform .46s cubic-bezier(.2, 1.4, .3, 1);
  transition-delay: var(--d, 0ms);
}
.band:hover .scatter img {
  opacity: 1;
  transform: translate(-50%, calc(-50% + var(--y, 0%))) rotate(var(--r, 0deg)) scale(1);
}

/* ── 07 · wipe under the pointer ────────────────────────────────────────── */

.wipeimg {
  position: absolute;
  top: 50%;
  left: 58%;
  width: 320px;
  z-index: 3;
  transform: translate(-50%, -50%);
  /* the frame is always laid out; only the clip moves, so nothing scales or
     shifts and the reveal edge tracks the pointer exactly */
  clip-path: inset(0 100% 0 0);
  transition: clip-path .4s var(--ease);
  pointer-events: none;
}
.band:hover .wipeimg { clip-path: inset(0 var(--clip, 100%) 0 0); transition-duration: .12s; }

/* ── 08 · filmstrip up ──────────────────────────────────────────────────── */

.strip {
  position: absolute;
  right: var(--s-8);
  bottom: 0;
  display: flex;
  gap: var(--s-3);
  z-index: 3;
  pointer-events: none;
}
.strip img {
  width: 150px;
  /* below the row's bottom edge; the row clips, so they rise out of the rule */
  transform: translateY(110%);
  transition: transform .5s var(--ease);
  transition-delay: var(--d, 0ms);
}
.band:hover .strip img { transform: translateY(18%); }

/* ── 09 · magnetic pair ─────────────────────────────────────────────────── */

.magnet { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.magnet img {
  position: absolute;
  top: 50%;
  /* --side is -1 or 1: the two frames come from opposite ends of the row */
  left: calc(50% + var(--side, 1) * 42%);
  width: 220px;
  opacity: 0;
  /* --dx/--dy are written per frame by script, scaled by its own --lag, so one
     trails further behind the pointer than the other */
  transform: translate(-50%, -50%) translate3d(var(--dx, 0px), var(--dy, 0px), 0) scale(.9);
  transition: opacity .3s var(--ease), transform .9s cubic-bezier(.16, 1, .3, 1);
}
.band:hover .magnet img {
  opacity: 1;
  transform: translate(-50%, -50%) translate3d(var(--dx, 0px), var(--dy, 0px), 0) scale(1);
}

/* ── 10 · dealt from the number ─────────────────────────────────────────── */

.deal { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.deal img {
  position: absolute;
  /* the origin is the row's numeral, so the frames come out of something already
     on the page rather than out of nowhere */
  left: var(--pad, 48px);
  top: 50%;
  width: var(--w, 180px);
  opacity: 0;
  transform: translateY(-50%) translate3d(0, 0, 0) rotate(0deg) scale(.4);
  transition: opacity .2s var(--ease), transform .5s cubic-bezier(.2, 1.45, .3, 1);
  transition-delay: var(--d, 0ms);
}
.band:hover .deal img {
  opacity: 1;
  transform: translateY(-50%) translate3d(var(--tx, 300px), var(--ty, 0px), 0)
             rotate(var(--r, 0deg)) scale(1);
}

/* ── Off for anyone who has asked for less motion, and on touch ─────────── */

@media (prefers-reduced-motion: reduce) {
  .hband img { transition: none !important; }
  .pop, .fan img, .scatter img, .magnet img, .deal img { opacity: 0 !important; }
  .peekimg { transform: translate(100%, -50%) !important; }
  .strip img { transform: translateY(110%) !important; }
  .wipeimg { clip-path: inset(0 100% 0 0) !important; }
}
/* a hover that needs a pointer should not fire on a tap and then stick */
@media (hover: none) {
  .pop, .fan, .scatter, .magnet, .deal, .peekimg, .strip, .wipeimg, .shuf { display: none; }
}