/* Компонент стилизованных подписей атласа. Подключение и данные — templates/macros/atlas_callouts.html.
   Все размеры подписей в cqw: подписи масштабируются вместе с картинкой, как если бы были нарисованы на ней. */
.acall{position:relative;margin:0;container-type:inline-size;overflow:hidden;background:#121418;line-height:1.2;isolation:isolate}
.acall > img{display:block;width:100%;height:100%;object-fit:contain}
.acall-svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.acall-layer{position:absolute;inset:0;z-index:3;pointer-events:none;
  font-family:"InterDXA",Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

/* выноски: тонкая линия с градиентом от цвета зоны к светлому, точка на зоне и пульсирующий ореол */
.acall-leader{fill:none;stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transition:opacity .5s ease calc(var(--i, 0) * 70ms + 120ms),stroke-width .2s ease}
.acall-dot{stroke:rgba(8,12,20,.85);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0;
  transition:opacity .4s ease calc(var(--i, 0) * 70ms)}
.acall-halo{opacity:0;transform-box:fill-box;transform-origin:center}
.acall.is-ready .acall-leader{opacity:.85}
.acall.is-ready .acall-dot{opacity:1}
.acall.is-ready .acall-halo{animation:acall-pulse 3s ease-out calc(var(--i, 0) * 200ms + 600ms) infinite}
@keyframes acall-pulse{0%{opacity:.5;transform:scale(.35)}75%,100%{opacity:0;transform:scale(1.7)}}
.acall-g.is-hot .acall-leader{opacity:1;stroke-width:2.2}

/* плашки: тёмное стекло с размытием, цветная точка со свечением, подпись и вторая строка капителью */
.acall-chip{position:absolute;display:flex;align-items:center;gap:.55em;max-width:var(--mw, 23cqw);padding:.42em .85em .44em .62em;
  font-size:max(8px, 1.3cqw);white-space:nowrap;color:#f3f7fb;border-radius:.8em;pointer-events:auto;
  background:linear-gradient(135deg, rgba(24,32,46,.8), rgba(10,15,24,.66));
  -webkit-backdrop-filter:blur(9px) saturate(150%);backdrop-filter:blur(9px) saturate(150%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 .55em 1.5em -.7em rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(-50%);opacity:0;translate:0 .35em;
  transition:opacity .45s ease calc(var(--i, 0) * 70ms + 220ms),translate .45s ease calc(var(--i, 0) * 70ms + 220ms),
    border-color .2s ease,box-shadow .2s ease}
.acall.is-ready .acall-chip{opacity:1;translate:0 0}
.acall-chip > i{flex:none;width:.6em;height:.6em;border-radius:50%;background:var(--c);
  box-shadow:0 0 0 .2em color-mix(in srgb, var(--c) 30%, transparent),0 0 .9em color-mix(in srgb, var(--c) 80%, transparent)}
.acall-text{display:grid;gap:.16em;min-width:0}
.acall-text b{font-weight:650;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis}
.acall-text small{font-size:.76em;font-weight:450;letter-spacing:.01em;color:rgba(203,220,236,.72);
  overflow:hidden;text-overflow:ellipsis}
.acall-chip.is-hot{border-color:color-mix(in srgb, var(--c) 65%, white);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent),0 .6em 1.6em -.6em rgba(0,0,0,.75)}

/* заголовок, отметки сторон, легенда и примечание — в полях вокруг снимка */
.acall-title{position:absolute;left:2%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:.6em;
  font-size:max(8px, 1.22cqw);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#dce7f2}
.acall-title::before{content:"";width:1.6em;height:1px;background:linear-gradient(90deg, transparent, #7dd3fc)}
.acall-mark{position:absolute;transform:translate(-50%, -50%);font-size:max(8px, 1.2cqw);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fcd98a;text-shadow:0 1px .6em rgba(0,0,0,.7)}
.acall-mark.is-left{transform:translate(0, -50%)}
.acall-mark.is-right{transform:translate(-100%, -50%)}
.acall-legend{position:absolute;left:2%;right:2%;display:flex;flex-wrap:wrap;align-items:center;gap:.45em 1.2em;
  transform:translateY(-50%);font-size:max(8px, 1.12cqw);color:#b9c6d4}
.acall-legend span{display:inline-flex;align-items:center;gap:.45em}
.acall-legend i{width:.62em;height:.62em;border-radius:50%;background:var(--c);box-shadow:0 0 .6em color-mix(in srgb, var(--c) 60%, transparent)}
.acall-legend em{flex-basis:100%;font-style:normal;font-size:.86em;color:rgba(185,198,212,.62)}

/* узкая картинка (телефон, превью): плашки без стекла и второй строки — только название с точкой и тенью под текстом,
   иначе соседние подписи наезжают друг на друга */
@container (max-width: 480px){
  .acall-chip{gap:.42em;padding:0;font-size:max(7.5px, 1.3cqw);background:none;border:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.85)}
  .acall-chip.is-hot{box-shadow:none}
  .acall-text small, .acall-legend em{display:none}
  .acall-chip > i{width:.55em;height:.55em}
  .acall-title{letter-spacing:.02em}
}

@media (prefers-reduced-motion:reduce){
  .acall-leader, .acall-dot, .acall-chip{transition:none}
  .acall.is-ready .acall-halo{animation:none}
}
@media (forced-colors:active){
  .acall-chip{background:Canvas;color:CanvasText;border-color:CanvasText;-webkit-backdrop-filter:none;backdrop-filter:none}
}