/* 3D depth and scroll motion. Only active with .m3d (set by motion.js, never under reduced motion). */
.hub-main, .booth-grid, .profile, .prof-grid, .mini-grid, .ig-highlights { perspective: 1100px; perspective-origin: 50% 30%; }
.post.card, .tpick, .booth-grid .card { box-shadow: 0 1px 2px rgba(10, 30, 60, .08), 0 14px 28px -14px rgba(10, 30, 60, .28), 0 30px 50px -30px rgba(21, 101, 216, .25); }
html[data-theme="dark"] .post.card, html[data-theme="dark"] .tpick, html[data-theme="dark"] .booth-grid .card { box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 34px -16px rgba(0, 0, 0, .8), 0 0 0 1px rgba(91, 152, 255, .08); }
.hl-ring, .ring.story-ring { box-shadow: 0 8px 16px -8px rgba(21, 101, 216, .45), inset 0 1px 0 rgba(255, 255, 255, .35); }
.m3d .m3d-item { opacity: 0; transform: translate3d(0, 44px, -90px) rotateX(14deg) scale(.95); transform-origin: 50% 100%; transition: opacity .6s ease, transform .75s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0ms); will-change: transform, opacity; }
.m3d .m3d-item.m3d-in { opacity: 1; transform: none; }
.m3d .m3d-item.m3d-in { will-change: auto; }
.m3d .m3d-item.m3d-now { transition: none; } /* reached by keyboard: in place at once, so the focus scroll lands on it */
.m3d .ig-highlights a.m3d-item, .m3d .prof-grid .tile.m3d-item, .m3d .mini-grid .hub-tile.m3d-item { transform: translate3d(0, 24px, -60px) rotateY(-14deg) scale(.9); transform-origin: 50% 50%; }
.m3d .ig-highlights a.m3d-item.m3d-in, .m3d .prof-grid .tile.m3d-item.m3d-in, .m3d .mini-grid .hub-tile.m3d-item.m3d-in { transform: none; }
.m3d .post-media { overflow: hidden; }
.m3d .post-media img { transform: translate3d(0, var(--py, 0px), 0) scale(1.12); will-change: transform; }
.m3d .booth-cover, .m3d .prof-cover { background-position: center calc(50% + var(--py, 0px)); }
.m3d .site-header { transition: box-shadow .25s; }
.m3d-tilt { transform: rotateX(var(--tx, 0)) rotateY(var(--ty, 0)) translateZ(6px) !important; transition: transform .12s ease-out !important; }
.m3d .reel-bubble .ring, .m3d .story-ring { transform: translateZ(0); transition: transform .2s; }
.m3d .reel-bubble:active .ring { transform: scale(.92) rotateY(12deg); }
@media (prefers-reduced-motion: reduce) {
  .m3d-item, .post-media img, .m3d-tilt { transform: none !important; opacity: 1 !important; transition: none !important; }
}