/* Pointers and callouts, shared by the viewer (index.html) and the AR page (ar.html). */
:root { --orange: #f28a1e; --ink: #2d2f33; --ink2: #55585e; }
.pointer { position: absolute; left: calc(var(--size, 34px) / -2); top: calc(var(--size, 34px) / -2); width: var(--size, 34px); height: var(--size, 34px); padding: 0; border: 2.5px solid var(--orange); border-radius: 50%;
  background: rgba(255, 255, 255, .22); cursor: pointer; pointer-events: auto; display: grid; place-items: center; transition: opacity .35s ease, box-shadow .15s; will-change: transform; }
.pointer .dot { width: 38%; height: 38%; border-radius: 50%; background: var(--orange); }
.pointer.behind { opacity: 0; pointer-events: none; }
.pointer:hover, .pointer:focus-visible, .pointer.active { opacity: 1; box-shadow: 0 0 0 5px rgba(242, 138, 30, .22); background: rgba(255, 255, 255, .5); outline: none; }
#leader { width: 100%; height: 100%; }
#leader polyline { fill: none; stroke: var(--orange); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
#leader.opening polyline { animation: draw .24s ease-out both; }
#leader.closing { opacity: 0; transition: opacity .15s; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
#callout { position: fixed; left: 0; top: 0; width: max-content; max-width: min(360px, 80vw); padding: 8px 13px 10px; border-radius: 6px; background: rgba(247, 248, 249, .58); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 10px 28px rgba(30, 32, 36, .14), 0 1px 3px rgba(30, 32, 36, .08); direction: ltr; text-align: left; color: var(--ink); pointer-events: none; will-change: transform;
 }
#callout h2 { margin: 0 0 5px; font-size: 22px; line-height: 1.15; font-weight: 700; letter-spacing: -.1px; }
#callout .rule { height: 2.5px; background: var(--orange); margin: 0 -13px 6px; transform-origin: right center; }
#callout.right .rule { transform-origin: left center; }
/* Opening: the leader draws first, then the card rises into place and the underline runs out to the leader. */
#callout.opening { animation: card-in .34s cubic-bezier(.2, .8, .25, 1) .12s both; transform-origin: bottom right; }
#callout.right.opening { transform-origin: bottom left; }
#callout.opening .rule { animation: rule-in .32s cubic-bezier(.3, .7, .2, 1) .26s both; }
#callout.opening h2, #callout.opening .body { animation: text-in .3s ease-out .3s both; }
#callout.closing { opacity: 0; scale: .97; translate: 0 6px; transition: opacity .15s ease-in, scale .15s ease-in, translate .15s ease-in; }
@keyframes card-in { from { opacity: 0; scale: .9; translate: 0 12px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes text-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { #callout.opening, #callout.opening .rule, #callout.opening h2, #callout.opening .body, #leader.opening polyline { animation: none; } }
#callout p { margin: 0; font-size: 17px; line-height: 1.32; color: var(--ink2); letter-spacing: .2px; }
#callout h3 { margin: 6px 0 0; font-size: 15px; font-weight: 700; color: var(--ink); }
#callout h3:first-child { margin-top: 0; }