/* ===== v11 ===== */
/* hero photo hover like "Вместе — интереснее"; glass caption stays still */
.hero-art .compass{transition:translate .7s var(--ease),transform 1.1s var(--ease)}
.hero-art:hover .compass{transform:scale(1.06)}
.hero-art:hover .glass-caption{translate:none}

/* phone: photo viewer + reactions */
.phone-chat{position:relative}
.phone-message>img{cursor:zoom-in}
.ph-photo{position:absolute;inset:0;z-index:7;background:#081220f0;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s;cursor:zoom-out}
.ph-photo.open{opacity:1;visibility:visible;transition:opacity .35s ease}
.ph-photo img{max-width:92%;max-height:72%;border-radius:14px;object-fit:contain;box-shadow:0 20px 50px #0008}
.ph-photo-x{position:absolute;top:36px;right:14px;width:28px;height:28px;border-radius:50%;background:#ffffff26;color:#fff;font-size:18px;line-height:1;display:grid;place-items:center;transition:background-color .3s}
.ph-photo-x:hover{background:#ffffff45}
.rx-bar{position:absolute;z-index:6;display:flex;gap:1px;padding:3px 5px;background:#fff;border-radius:999px;box-shadow:0 10px 26px #1d3a5a38,0 0 0 1px #e3ebf0;opacity:0;scale:.8;pointer-events:none;transform-origin:50% 100%;transition:opacity .2s,scale .35s var(--spring)}
.rx-bar.show{opacity:1;scale:1;pointer-events:auto}
.rx-bar button{width:26px;height:26px;border-radius:50%;background:none;font-size:15px;line-height:1;display:grid;place-items:center;transition:transform .3s var(--spring),background-color .2s}
.rx-bar button:hover{transform:scale(1.35) translateY(-2px)}
.rx-bar button.on{background:#e6edff}
.rx-row{display:flex;margin-top:5px}
.phone-message.user .rx-row{justify-content:flex-end}
.rx{display:inline-flex;align-items:center;gap:3px;font-size:9px;line-height:1;background:#eaf0fb;color:#3b4d5c;border-radius:999px;padding:3px 7px 3px 5px}
.rx i{font-style:normal;font-size:11px}
.phone-message.user .rx{background:#ffffff33;color:#fff}
.rx-burst{position:absolute;z-index:4;font-size:46px;line-height:1;translate:-50% -50%;pointer-events:none;animation:rxburst .9s ease-out forwards}
@keyframes rxburst{0%{scale:.3;opacity:0}25%{scale:1.3;opacity:1}100%{scale:1.6;opacity:0;translate:-50% -140%}}