/* Trovely — orbiting-photos globe (light/warm). Photos genuinely orbit the globe:
   they pass in FRONT (big, sharp, on top) on the near half and BEHIND (small, faint,
   occluded by the globe body) on the far half. Robust, parametric orbit, not tied to
   cobe internals (that was the old bug). Themeable per sketch. */

.orbit-stage{position:relative;aspect-ratio:1;overflow:visible;--globe-body:#fbf5ec}
/* opaque body disc sits BEHIND the canvas so far-side photos are cleanly hidden
   behind the globe (matches the page warmth via --globe-body, set per sketch). */
.orbit-disc{position:absolute;left:50%;top:50%;width:84%;height:84%;transform:translate(-50%,-50%);
  border-radius:50%;z-index:3;pointer-events:none;
  background:radial-gradient(circle at 50% 44%,var(--globe-body) 64%,transparent 80%)}
.orbit-globe{position:absolute;inset:0;width:100%;height:100%;z-index:5;cursor:grab;
  touch-action:none;opacity:0;transition:opacity 1.1s ease}
.orbit-globe.in{opacity:1}
.orbit-globe:active{cursor:grabbing}

/* photo card: sketches restyle freely. JS only sets left/top/transform/opacity/z. */
.orbit-photo{position:absolute;left:0;top:0;will-change:transform,opacity;
  background:#fff;padding:6px 6px 22px;border-radius:4px;
  box-shadow:0 10px 24px rgba(60,40,30,.18),0 2px 6px rgba(60,40,30,.10)}
.orbit-photo img{display:block;width:84px;height:84px;object-fit:cover;background:#eee}
.orbit-photo span{position:absolute;left:0;right:0;bottom:5px;text-align:center;
  font-family:'Caveat',cursive;font-size:15px;line-height:1;color:#5a4a42}

@media(max-width:640px){
  .orbit-photo img{width:60px;height:60px}
  .orbit-photo span{font-size:12px}
}