/* VERKINA home hero globe. Loaded only on the home page, after style.css. All classes start with vk-. */
.hero-visual { min-width: 0; }
.vk-stage-col {
  position: relative; width: 100%; max-width: 580px; min-width: 0; margin-inline: auto;
}
.vk-stage { position: relative; width: 100%; aspect-ratio: 1; }
.vk-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.vk-bubble {
  position: absolute; left: 0; top: 0; max-width: min(230px, 54%);
  padding: 9px 12px 10px; border-radius: 14px; color: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(5, 5, 25, 0.5);
  opacity: 0; translate: 0 6px; scale: 0.96; will-change: transform, opacity;
  transition: opacity 0.35s ease, translate 0.35s ease, scale 0.35s ease;
  pointer-events: none; z-index: 3;
}
.vk-bubble.on { opacity: 1; translate: none; scale: none; }
.vk-bubble.src { background: var(--navy3); border-color: rgba(124, 58, 237, 0.5); border-bottom-right-radius: 4px; }
.vk-bubble.dst { background: var(--navy2); border-color: rgba(0, 200, 150, 0.4); border-top-left-radius: 4px; }
.vk-bubble .tag { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mid); margin-bottom: 3px; }
.vk-bubble .txt { display: block; font-size: 0.95rem; line-height: 1.35; font-weight: 500; }
.vk-bubble.dst .txt { color: var(--green); }
.vk-bubble [lang="te"] { font-family: "Noto Sans Telugu", 'Outfit', sans-serif; }
.vk-bubble [lang="hi"] { font-family: "Noto Sans Devanagari", 'Outfit', sans-serif; }
.vk-bubble [lang="ta"] { font-family: "Noto Sans Tamil", 'Outfit', sans-serif; }
.vk-bubble [lang="bn"] { font-family: "Noto Sans Bengali", 'Outfit', sans-serif; }

.vk-caption { margin: 14px auto 0; min-height: 3.2em; max-width: 52ch; text-align: center; color: var(--mid); font-size: 0.92rem; line-height: 1.5; }
.vk-caption b { color: var(--white); font-weight: 600; }

.vk-fallback { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; }
.vk-stage.nogl canvas { display: none; }
.vk-stage.nogl .vk-fallback { display: flex; }
.vk-fallback .ball {
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #3a2f8f, var(--navy3) 62%, var(--navy));
  box-shadow: 0 0 80px rgba(124, 58, 237, 0.35);
}
.vk-stage.nogl .vk-bubble { position: relative; opacity: 1; transform: none; translate: none; scale: none; margin: 8px; }
.vk-stage.nogl { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: auto; min-height: 320px; }

@media (max-width: 768px) {
  .vk-stage-col { max-width: 440px; }
  .vk-bubble { max-width: min(176px, 52%); padding: 7px 10px 8px; }
  .vk-bubble .txt { font-size: 0.84rem; }
  .vk-bubble .tag { font-size: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .vk-bubble { transition: none; }
}