/* abd-ground.css — grounds a product image on the floor (task 28, Cam picked
   the combo): a faint true reflection (the SAME image file flipped + squashed
   + b&w'd + masked out downward — zero extra download, GPU-composited) plus a
   soft contact shadow anchoring the feet.

   Usage:
     <div class="abd-figure is-combo">
       <img src="...">                                      main image
       <img class="abd-reflection" src="..." aria-hidden>   same src
       <div class="abd-contact-shadow"></div>
     </div>
   The wrapper is inline-block and sized by the main image, so it drops into
   any animated container and rides its transforms. Squash factor tunable via
   --refl-squash. */
.abd-figure{ position:relative; display:inline-block; --refl-squash:.45; }
.abd-figure > img:first-child{ display:block; position:relative; z-index:2; }
.abd-reflection{
  position:absolute;
  top:100%; left:0;
  width:100%;
  /* translate then flip-and-squash about the top edge: the duplicate's feet
     meet the figure's feet, extending squash×height downward */
  transform:translateY(calc(var(--refl-squash) * 100%)) scaleY(calc(-1 * var(--refl-squash)));
  transform-origin:top;
  /* hard black-and-white: fully desaturated, contrast pulled down so it
     reads as a neutral ghost, never a colour cast */
  filter:grayscale(1) contrast(.85) brightness(1.08) blur(1.5px);
  opacity:.36;
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.28) 12%, transparent 34%);
  mask-image:linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.28) 12%, transparent 34%);
  pointer-events:none;
}
.abd-contact-shadow{
  position:absolute;
  /* offset ~20px INTO the image: the ellipse sits up behind the feet
     (image paints above it), reading as the floor meeting the product */
  left:50%; bottom:12px;
  width:74%; height:15px;
  transform:translateX(-50%);
  /* pure neutral black — the brand ink (28,27,25) is a warm brown-black and
     was reading as a colour cast on the floor */
  background:radial-gradient(ellipse at center, rgba(0,0,0,.38) 0%, rgba(0,0,0,.17) 46%, transparent 72%);
  filter:blur(3px);
  pointer-events:none;
  z-index:1;
}
/* combo: both layers, each dialled back so they don't double up */
.abd-figure.is-combo .abd-reflection{ opacity:.26; }
.abd-figure.is-combo .abd-contact-shadow{ opacity:.85; }