/* Town 360 — DIRECTORY MOTION KIT (directory-enrich, Nov 6 2026)
 * The business surfaces get life, in the living-backgrounds pattern
 * language: motion = transform/opacity only, one star at a time (the
 * SELECTED pin bounces; the rest stay still), pause off-screen,
 * prefers-reduced-motion = everything static. Palette rides the Town
 * theme vars; badges sit on solid plates in both themes.
 * Files: css/dir-motion.css + js/dir-motion.js (observer-driven, no
 * render-path changes in face.js).
 */

/* ---------- map pins: hover life + selected bounce ---------- */
.pin-biz, .pin-logo { transition: scale .22s ease, box-shadow .22s ease; }
.pin-biz:hover, .pin-logo:hover { scale: 1.16; }
.dm-selected .pin-biz, .dm-selected .pin-logo {
  animation: dmBounce .72s cubic-bezier(.28,.84,.42,1) 1, dmRingPulse 1.5s ease-out .1s 2;
}
@keyframes dmBounce {
  0% { translate: 0 0; scale: 1; }
  30% { translate: 0 -13px; scale: 1.12; }
  55% { translate: 0 0; scale: .96; }
  75% { translate: 0 -6px; scale: 1.05; }
  100% { translate: 0 0; scale: 1; }
}
@keyframes dmRingPulse {
  0% { box-shadow: 0 3px 10px rgba(0,0,0,.5), 0 0 0 0 rgba(61,220,78,.55); }
  100% { box-shadow: 0 3px 10px rgba(0,0,0,.5), 0 0 0 17px rgba(61,220,78,0); }
}

/* ---------- floating bubbles on the business page header ---------- */
.dm-host { position: relative; }
.dm-bubbles {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  overflow: visible;
}
.dm-bubbles-top { height: 168px; inset: auto 0 auto 0; top: 34px; z-index: 3; }
.dm-bubble {
  position: absolute; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 6px 18px rgba(2,6,23,.35);
  animation: dmFloat 7s ease-in-out infinite;
  will-change: transform;
}
.dm-bubble img { width: 68%; height: 68%; object-fit: contain; display: block; }
.dm-bubble-cat {
  background: var(--green, #3DDC4E); color: #04150A;
  font-size: 17px; border-color: rgba(4,21,10,.25);
}
.dm-bubble-open {
  background: #0B6B22; color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
@keyframes dmFloat {
  0%, 100% { transform: translate(0, 0) rotate(-3deg); }
  33% { transform: translate(5px, -11px) rotate(3deg); }
  66% { transform: translate(-6px, -5px) rotate(-1deg); }
}

/* ---------- business page video slot ---------- */
.dm-video {
  position: relative; border-radius: 16px; overflow: hidden;
  margin: 10px 0 4px; aspect-ratio: 16 / 9; background: #0a0f0a;
  box-shadow: 0 8px 22px rgba(2,6,23,.35);
}
.dm-video video, .dm-video img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.dm-kenburns img { animation: dmKen 18s ease-in-out infinite alternate; will-change: transform; }
@keyframes dmKen {
  from { transform: scale(1.02) translate(0, 0); }
  to { transform: scale(1.14) translate(-1.5%, -2%); }
}
.dm-video-badge {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  background: rgba(4,21,10,.85); color: #EAF7EC;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 999px;
}
.dm-video-badge b { color: var(--green, #3DDC4E); }

/* ---------- pause + reduced motion (house law) ---------- */
.dm-paused .dm-bubble, .dm-paused.dm-kenburns img,
.dm-paused .dm-kenburns img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .pin-biz, .pin-logo { transition: none; }
  .dm-selected .pin-biz, .dm-selected .pin-logo,
  .dm-bubble, .dm-kenburns img { animation: none; }
}

/* Profile-completeness fix (Nov 7): on claimed business pages the floating
   bubbles anchor ABOVE the name row, over the cover band, so no bubble can
   ever park over the Follow pill in the header's right corner. */
.biz-head2 > .dm-bubbles { top: -76px; bottom: auto; height: 76px; }
.biz-head2 > .dm-bubbles .dm-bubble-open { top: -60px !important; }