/* ============================================================
   Brim Collection — 3D product objects
   Framework-agnostic. Works with plain HTML; brim-object.js
   upgrades it with pointer tilt, sheen and scroll parallax.
   ============================================================ */

.brim-obj {
  /* --- tuning knobs (override per instance) --- */
  --w: 320px;            /* rendered width */
  --aspect: 1;           /* from manifest.aspect  */
  --ground: 0.8;         /* from manifest.ground — contact-shadow width */
  --depth: 900px;        /* perspective distance  */
  --shade: 28 22 18;     /* shadow tint, r g b    */
  --lift: 0px;           /* hover/scroll lift     */
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --ease: cubic-bezier(.22,.61,.36,1);

  position: relative;
  display: inline-block;
  width: var(--w);
  max-width: 100%;
  aspect-ratio: var(--aspect);
  margin: 0;
  perspective: var(--depth);
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.brim-obj__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform:
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translate3d(0, calc(var(--lift) * -1), 0);
  transition: transform .5s var(--ease);
  will-change: transform;
}

.brim-obj img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* form shadow — this is what makes a cutout read as an object */
  filter: drop-shadow(0 calc(var(--w) * .04) calc(var(--w) * .05)
          rgb(var(--shade) / .20));
  transition: filter .5s var(--ease);
}

/* low-quality placeholder while the real file decodes */
.brim-obj img[data-lqip] {
  background: var(--lqip) center / contain no-repeat;
}

/* --- contact shadow: grounds the object on the page --- */
.brim-obj__ground {
  position: absolute;
  left: 50%;
  bottom: -3%;
  z-index: -1;
  width: calc(var(--ground) * 96%);
  height: calc(var(--ground) * 13%);
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
              rgb(var(--shade) / .34) 0%,
              rgb(var(--shade) / .16) 45%,
              rgb(var(--shade) / 0) 72%);
  transition: scale .5s var(--ease), opacity .5s var(--ease);
  pointer-events: none;
}

/* --- specular sheen, clipped to the silhouette by the image's own alpha --- */
.brim-obj__sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: var(--sheen, 0);
  pointer-events: none;
  background: radial-gradient(40% 34% at var(--sheen-x, 50%) var(--sheen-y, 0%),
              rgb(255 255 255 / .60), transparent 70%);
  -webkit-mask-image: var(--mask);
          mask-image: var(--mask);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
          mask-mode: alpha;
  transition: opacity .4s var(--ease);
}

/* ---------- modifiers ---------- */

/* idle drift — use on hero / decorative placements only */
.brim-obj--float .brim-obj__stage { animation: brim-float var(--float-dur, 7s) ease-in-out infinite; }
.brim-obj--float .brim-obj__ground { animation: brim-float-ground var(--float-dur, 7s) ease-in-out infinite; }
@keyframes brim-float        { 0%,100% { translate: 0 0 }      50% { translate: 0 -2.2% } }
@keyframes brim-float-ground { 0%,100% { scale: 1; opacity: 1 } 50% { scale: .92; opacity: .78 } }

/* CSS-only hover tilt for when JS hasn't loaded / isn't wanted */
.brim-obj--hover:hover { --tilt-x: 5deg; --tilt-y: -8deg; --lift: 1.5%; }
.brim-obj--hover:hover .brim-obj__ground { scale: .93; opacity: .8; }
.brim-obj--hover:hover img { filter: drop-shadow(0 calc(var(--w) * .07) calc(var(--w) * .08) rgb(var(--shade) / .26)); }

/* flat: no shadow, no depth — for grids and thumbnails */
.brim-obj--flat img { filter: none; }
.brim-obj--flat .brim-obj__ground { display: none; }

/* text-wrap around the real silhouette (progressive; ignored where unsupported) */
.brim-obj--wrap { float: left; shape-outside: var(--mask-svg); shape-margin: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  .brim-obj__stage,
  .brim-obj__ground,
  .brim-obj img { transition: none !important; animation: none !important; }
  .brim-obj__sheen { display: none; }
}