/* Слой трёхмерного глобуса. Карточка страны своих стилей не заводит: она
   живёт на классах .gl-* из countries.css, чтобы два глобуса выглядели
   одинаково и правились в одном месте. */
.g3{position:absolute;inset:0}
.g3-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.g3-canvas:active{cursor:grabbing}

/* подписи стран: появляются у курсора и при приближении */
.g3-labels{position:absolute;inset:0;pointer-events:none}
.g3-label{
  position:absolute;left:0;top:0;transform:translate(-50%,-190%);
  padding:2px 8px;border-radius:99px;white-space:nowrap;
  font-family:var(--font-t);font-size:12px;font-weight:700;line-height:1.5;
  color:var(--ink);
  /* Плашка НЕПРОЗРАЧНА нарочно. Прежние 78% пропускали шар насквозь, и
     подпись читалась по-разному над облаком и над ночью: на forest ink-dim
     давал 2.80 над белым облаком при норме 4.5. Считано по крайним пикселям
     самой текстуры (в day-1k есть чистый белый и чистый чёрный), все восемь
     тем, node tools/globe-check.mjs. Слой краски поверх --bg-1 держит тон
     платформы и при этом не пускает шар в текст. */
  background:linear-gradient(var(--core),var(--core)),var(--bg-1,#0A0E1A);
  box-shadow:inset 0 0 0 1px var(--shell-line);
  opacity:0;transition:opacity .2s var(--ease)
}
.g3-label.on{color:var(--gold)}
/* На светлых темах золото на белой плашке даёт 3.43-3.99: подпись 12px это
   мелкий текст, ему нужно 4.5. Глубокое золото той же темы даёт 4.85-5.57. */
:is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .g3-label.on{color:var(--gold-deep)}
.g3-label.up{opacity:1}
@media (prefers-reduced-motion:reduce){.g3-label{transition:none}}

/* клавиатурный путь к странам: кнопки не видно, но она доступна табом */
.g3-keys{position:absolute;left:10px;top:10px;z-index:2;display:flex;flex-direction:column;gap:6px}
.g3-key{
  position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;background:transparent;color:inherit
}
:is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .g3-key:focus-visible{color:var(--gold-deep)}
.g3-key:focus-visible{
  position:static;width:auto;height:auto;clip-path:none;overflow:visible;
  min-height:36px;padding:0 14px;border-radius:99px;cursor:pointer;
  font-family:var(--font-t);font-size:.8125rem;font-weight:700;
  color:var(--gold);background:linear-gradient(var(--core),var(--core)),var(--bg-1,#0A0E1A);
  outline:2px solid var(--gold);outline-offset:2px
}

/* reduced-motion: полёт камеры заменён мягким проявлением */
@keyframes g3-in{from{opacity:.35}to{opacity:1}}
.g3.g3-in{animation:g3-in .45s var(--ease)}

/* ── волна 2: наведение, полёт, карта страны ──────────────────────────
   Всё, что здесь двигается, отвечает на действие человека: подпись на
   курсор, имя на нажатие, карта на прилёт. Ничего не мигает чаще трёх раз
   в секунду: самое частое здесь это пульс огонька раз в четыре секунды,
   он живёт в шейдере. */

/* подпись под курсором: имя, а под ним строка о том, где придётся говорить */
.g3-label{display:flex;flex-direction:column;gap:2px;align-items:center;max-width:min(58vw,260px);text-align:center}
.g3-label b{font-weight:700}
.g3-label i{display:none;white-space:normal;font-style:normal;font-weight:500;font-size:11px;line-height:1.35;color:var(--ink-dim)}
.g3-label.wide i{display:block}
.g3-label.wide{transform:translate(-50%,-118%);padding:6px 10px 7px}

/* затемнение шара на подлёте: живёт под картой и над холстом */
.g3-dark{
  position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 45%,rgba(6,8,7,.30),rgba(6,8,7,.72) 78%);
  transition:opacity .3s var(--ease)
}
.g3-dark.up{opacity:1;pointer-events:auto;cursor:zoom-out}

/* размытие холста на последних 300 мс полёта. Плотность пикселей на это
   время опускается до единицы: размытую картинку никто не разглядывает */
.g3-canvas{transition:filter .3s var(--ease)}
.g3-canvas.veil{filter:blur(9px) saturate(.82)}

/* карта страны: тот же Natural Earth, что и граница на шаре */
.g3-plate{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  padding:6% 6% 34%;pointer-events:none;
  opacity:0;transform:translateY(22px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)
}
.g3-plate.up{opacity:1;transform:none}
.g3-map{width:min(62%,320px);height:min(46%,260px)}
.g3-map-line{stroke:var(--gold);stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 0 14px color-mix(in oklab,var(--gold) 45%,transparent))}
.g3-plate-alt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* имя страны: выплывает крупно посреди шара и уезжает в шапку */
.g3-crown{
  position:absolute;left:0;right:0;top:12px;z-index:3;
  display:grid;place-items:center;pointer-events:none;
  opacity:0;transition:opacity .28s var(--ease)
}
.g3-crown.up{opacity:1}
.g3-crown b{
  font-family:var(--font-d);font-size:1.0625rem;font-weight:600;color:var(--ink);
  padding:6px 15px;border-radius:99px;white-space:nowrap;
  background:linear-gradient(var(--core),var(--core)),var(--bg-1,#0A0E1A);
  box-shadow:inset 0 0 0 1px var(--shell-line);
  transform-origin:50% 0;
  transform:translateY(var(--g3-rise,0px)) scale(var(--g3-zoom,1));
  transition:transform 1.1s cubic-bezier(.65,0,.35,1)
}
.g3-crown.set b{transition:none}

/* карточка страны стоит над картой, а не рядом с ней */
.co-globe .gl-card{z-index:4}

@media (max-width:820px){
  .g3-plate{padding:8% 5% 46%}
  .g3-map{width:min(72%,260px);height:min(34%,200px)}
  .g3-crown b{font-size:.9375rem}
}

@media (prefers-reduced-motion:reduce){
  .g3-canvas,.g3-dark,.g3-plate,.g3-crown,.g3-crown b{transition:none}
  .g3-canvas.veil{filter:blur(6px)}
}