/* tilt-artwork.css -- a physical light/shadow reaction driven by the
   phone's tilt sensors (desktop: mouse position as a fallback). See
   tilt-artwork.js. Applied to real, visible artwork photography: the
   detail page's process/close-up crops (.dcrop img) and the Diary's
   "seen in the wild" sightings (.diary-item img) -- see script.js.
   Deliberately NOT applied to the work-index thumbnails (.row-thumb
   img): those already have their own hand-tuned desktop pointer-tilt
   hover effect (see the "thumb-tilt" rules below), and a second,
   independently-driven transform on the same <img> would fight it
   rather than complement it. #dHero (the detail page's duplicate hero
   image) is permanently display:none by design, so it was never a
   legitimate target either.

   By design the artwork itself only rotates a fraction of a degree --
   the shadow is what should visibly react, so it reads as a real object
   under a moving light rather than a parallax gimmick. */
.tilt-artwork{
  transform:
    perspective(1200px)
    rotateX(var(--tilt-rotate-x, 0deg))
    rotateY(var(--tilt-rotate-y, 0deg));
  filter:
    drop-shadow(
      var(--tilt-shadow-x, 8px)
      var(--tilt-shadow-y, 12px)
      18px
      rgba(0,0,0,.28)
    );
  will-change:transform, filter;
}

.tilt-enable-prompt{
  position:fixed;
  left:50%;bottom:max(22px, env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%);
  z-index:500;
  background:#0A0A0A;color:#fff;
  border:none;border-radius:2px;
  font:12px/1 -apple-system,Helvetica,Arial,sans-serif;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:13px 18px;
  cursor:pointer;
  box-shadow:0 6px 24px rgba(0,0,0,.22);
  animation:tiltPromptIn .3s cubic-bezier(.22,1,.36,1);
}
.tilt-enable-prompt:active{opacity:0.8;}
@keyframes tiltPromptIn{
  from{opacity:0;transform:translateX(-50%) translateY(10px);}
  to{opacity:1;transform:translateX(-50%) translateY(0);}
}

@media (prefers-reduced-motion: reduce){
  .tilt-artwork{
    transform:none !important;
    filter:
      drop-shadow(8px 12px 18px rgba(0,0,0,.28))
      !important;
  }
  .tilt-enable-prompt{display:none;}
}