/*!
 * scene-card.css — hotspot pins + shared info card (pano-room / scene-pan).
 * Themed via avenue tokens with standalone fallbacks, per kit convention.
 */

/* ---------- pins ---------- */
.spot{
  position:absolute; display:flex; align-items:center; gap:8px;
  transform:translate(-50%,-100%);
  text-decoration:none; cursor:pointer; z-index:5;
  min-width:44px; min-height:44px; padding:6px;
  -webkit-tap-highlight-color:transparent;
}
.spot__dot{
  width:16px; height:16px; border-radius:50%; flex:0 0 auto;
  background:var(--surface,#fff);
  border:2px solid var(--accent,#4A5A43);
  box-shadow:0 0 0 4px rgba(247,245,241,.35), 0 4px 14px rgba(25,24,23,.35);
}
.spot::before{ /* pulse ring */
  content:""; position:absolute; left:6px; top:6px; width:28px; height:28px;
  margin:0; border-radius:50%;
  border:1px solid rgba(247,245,241,.85);
  animation:spot-pulse 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes spot-pulse{
  0%{transform:scale(.55);opacity:.9}
  70%{transform:scale(1.25);opacity:0}
  100%{transform:scale(1.25);opacity:0}
}
.spot__label{
  font-family:var(--sans);
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; background:rgba(25,24,23,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  padding:6px 10px; border-radius:2px; white-space:nowrap;
  opacity:0; transform:translateX(-4px); transition:opacity .25s,transform .25s;
}
.spot:hover .spot__label,.spot:focus-visible .spot__label{opacity:1;transform:none}
.spot:focus-visible{outline:2px solid var(--gold,#A98B4F);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion: reduce){
  .spot::before{animation:none;opacity:0}
  .spot__label{opacity:1;transform:none} /* labels always readable, never stuck hidden */
}
@media (pointer: coarse){ .spot__label{opacity:1;transform:none} }

/* ---------- card ---------- */
.scard{
  position:fixed; z-index:220; width:min(320px,calc(100vw - 24px));
  background:var(--surface,#fff); color:var(--ink,#191817);
  border:1px solid var(--ink,#191817); border-radius:2px;
  padding:18px 18px 20px; box-shadow:0 24px 60px rgba(25,24,23,.32);
}
.scard__caret{
  position:absolute; left:-7px; top:28px; width:12px; height:12px;
  background:var(--surface,#fff); border-left:1px solid var(--ink,#191817);
  border-bottom:1px solid var(--ink,#191817); transform:rotate(45deg);
}
.scard.is-flip .scard__caret{left:auto;right:-7px;transform:rotate(225deg)}
.scard__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.scard__title{
  font-family:var(--serif); font-size:22px; line-height:1.1;
}
.scard__close{
  background:none;border:0;font-size:26px;line-height:1;cursor:pointer;
  color:var(--ink-soft,#5E5A54);padding:0 0 0 6px;
}
.scard__close:hover{color:var(--ink,#191817)}
.scard__note{margin:10px 0 12px;font-size:14px;line-height:1.55;color:var(--ink-soft,#5E5A54)}
.scard__chip{
  display:inline-block;font-family:var(--sans);font-size:10px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:2px;
}
.scard__chip--concept{color:var(--gold,#A98B4F);border:1px solid var(--gold,#A98B4F)}
.scard__chip--floor{color:#fff;background:var(--accent,#4A5A43);border:1px solid var(--accent,#4A5A43)}
.scard__cta{
  display:block;margin-top:14px;font-family:var(--sans);
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink,#191817);text-decoration:none;
  border-bottom:2px solid var(--accent,#4A5A43);padding-bottom:4px;width:fit-content;
}
.scard__cta:hover{color:var(--accent,#4A5A43)}

/* mobile bottom sheet */
.scard.is-sheet{
  left:0 !important; right:0 !important; top:auto !important; bottom:0;
  width:auto; border-left:0; border-right:0; border-bottom:0;
  border-radius:10px 10px 0 0; padding:20px 22px calc(22px + env(safe-area-inset-bottom));
  animation:scard-up .28s cubic-bezier(.22,1,.36,1);
}
.scard.is-sheet .scard__caret{display:none}
@keyframes scard-up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.scard.is-sheet{animation:none}}
.scard-scrim{position:fixed;inset:0;z-index:210;background:rgba(25,24,23,.4)}