/* Интерактивные «знаки трав» на фото автора (контейнер фото с атрибутом data-signs). */
.sign-host{--dot:14px}

.sign-dot{position:absolute;z-index:4;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;opacity:0;transform:scale(.3);animation:dot-in .7s cubic-bezier(.2,.9,.3,1.3) forwards;
  animation-delay:calc(1.1s + var(--i,0) * .22s)}
.sign-dot::before{content:"";position:absolute;left:50%;top:50%;width:var(--dot);height:var(--dot);margin:calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);
  border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--green),0 4px 14px rgba(0,0,0,.35);transition:background .25s,transform .25s}
.sign-dot::after{content:"";position:absolute;left:50%;top:50%;width:var(--dot);height:var(--dot);margin:calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);
  border-radius:50%;border:2px solid #fff;animation:dot-ring 2.6s ease-out infinite;animation-delay:calc(1.8s + var(--i,0) * .4s);opacity:0}
.sign-dot:hover::before,.sign-dot:focus-visible::before,.sign-dot[aria-expanded="true"]::before{background:var(--green);transform:scale(1.25)}
.sign-dot[aria-expanded="true"]::after{animation:none}
.sign-dot:focus-visible{outline:2px solid #fff;outline-offset:-6px;border-radius:50%}
@keyframes dot-in{to{opacity:1;transform:scale(1)}}
@keyframes dot-ring{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(3.2)}}

.sign-card{position:absolute;z-index:6;width:min(290px,calc(100vw - 32px));padding:20px 22px 18px;border-radius:20px;background:var(--cream);
  color:#000;text-align:left;box-shadow:0 22px 50px -18px rgba(37,48,26,.55);opacity:0;visibility:hidden;transform:translateY(8px) scale(.97);
  transform-origin:var(--ox,50%) var(--oy,100%);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s;pointer-events:none}
.sign-card.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.sign-card__k{margin:0 0 4px;font-size:11px;line-height:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-dark)}
.sign-card h3{margin:0 0 10px;font:400 30px/1 var(--font-head);text-transform:uppercase}
.sign-card__sig{margin:0;font-size:15px;line-height:21px;font-weight:600}
.sign-card__sig span{color:var(--green-dark)}
.sign-card__note{margin:8px 0 0;font-size:14px;line-height:20px;color:var(--muted)}
.sign-card__more{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;color:var(--green-dark);text-decoration:none}
.sign-card__more:hover{text-decoration:underline}
.sign-card__x{position:absolute;right:10px;top:8px;width:30px;height:30px;border:0;border-radius:50%;background:none;font-size:22px;line-height:1;cursor:pointer;color:#555}

@media (max-width:800px){
  .sign-card{width:min(300px,calc(100vw - 28px))}
}
@media (prefers-reduced-motion:reduce){
  .sign-dot{animation:none;opacity:1;transform:none}
  .sign-dot::after{animation:none}
  .sign-card{transition:opacity .15s}
}


.sign-host{z-index:4}