/* Language hint: a bubble that points at the language switch (#langSeg) on the first visits, so a
 * viewer who reads another language sees at once that the page switches. Markup and behaviour
 * are the page script's (index.html, "Language hint"); this file is only how it looks.
 *
 * The script sets top / left, data-side and --tail:
 *   data-side="right"  beside the switch on its right, over the 3D view, tail on the left edge
 *                      (desktop, where the story column leaves room)
 *   data-side="left"   beside the switch on its left, tail on the right edge
 *   data-side="below"  under it, tail on the top edge (when beside it doesn't fit, or would cover
 *                      the desktop logo)
 *   --tail             where the tail sits along that edge, px from the bubble's top / left
 * Sizes are N * --u: the page's desktop type scale (--ui in css/app.css, 1px on phones and tablets,
 * growing with the window on desktop), or plain px if that variable is ever gone.
 * It sits over the UI layer (.ui is z-index 10) and under the tooltip (20) and the keys dialog (30).
 * Wide screens only: at 900px and under, where the switch sits in the bar over the 3D view, the
 * page script never shows it. */

.lang-hint {
  --u: var(--ui, 1px);
  --nx: 4px;               /* the nudge: toward the button */
  --ny: 0px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 15;
  display: flex;
  border-radius: calc(12 * var(--u));
  background: var(--brand);
  color: #04121a;
  box-shadow: 0 14px 30px -12px rgba(14, 169, 226, 0.9), 0 4px 12px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.lang-hint[data-side="right"] { --nx: -4px; }
.lang-hint[data-side="below"] { --nx: 0px; --ny: -4px; }
.lang-hint.is-in {
  opacity: 1;
  animation: lang-hint-in 0.32s var(--ease) both, lang-hint-nudge 2.8s ease-in-out 0.9s infinite;
}

/* The tail: a turned square in the bubble's colour, half outside the edge facing the button. */
.lang-hint::after {
  content: "";
  position: absolute;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  border-radius: 2px;
  background: inherit;
  transform: rotate(45deg);
  pointer-events: none;
}
.lang-hint[data-side="left"]::after { right: calc(-6 * var(--u)); top: calc(var(--tail, 50%) - 7 * var(--u)); }
.lang-hint[data-side="right"]::after { left: calc(-6 * var(--u)); top: calc(var(--tail, 50%) - 7 * var(--u)); }
.lang-hint[data-side="below"]::after { top: calc(-6 * var(--u)); left: calc(var(--tail, 50%) - 7 * var(--u)); }

/* The words: the other languages' names (each a button that switches, like the switch), and under
   them a small line in this page's language. */
.lang-hint-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(3 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(9 * var(--u)) calc(12 * var(--u));
  font-family: var(--sans);
}
.lang-hint-main { display: flex; gap: calc(6 * var(--u)); }
.lang-hint-pick {
  position: relative;
  margin: 0;
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border: 0;
  border-radius: calc(7 * var(--u));
  background: rgba(4, 18, 26, 0.14);
  color: inherit;
  font-family: var(--sans);
  font-size: calc(15 * var(--u));
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s;
}
.lang-hint-pick::before { content: ""; position: absolute; inset: -6px -3px; } /* 40px tall hit area */
.lang-hint-pick:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.lang-hint-sub { padding-left: calc(4 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 500; line-height: 1.3; white-space: nowrap; color: rgba(4, 18, 26, 0.78); }

/* Close: a small badge on the far corner, away from the language switch. */
.lang-hint-x {
  position: absolute;
  top: calc(-8 * var(--u));
  left: calc(-8 * var(--u));
  display: grid;
  place-items: center;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--brand);
  border-radius: 50%;
  background: #0d1422;
  color: var(--ink);
  cursor: pointer;
}
.lang-hint[data-side="right"] .lang-hint-x { left: auto; right: calc(-8 * var(--u)); }
.lang-hint-x::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; } /* hit area of 40px or more */
.lang-hint-x svg { width: calc(10 * var(--u)); height: calc(10 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* The switch it points at: a soft ring pulsing out while the bubble is up. */
.lang-seg.lang-hint-on {
  border-color: var(--brand);
  color: var(--brand-ink);
  animation: lang-hint-ring 1.8s ease-out 0.3s infinite;
}

@media (hover: hover) {
  .lang-hint-x:hover { background: #1b2638; }
  .lang-hint-pick:hover { background: rgba(4, 18, 26, 0.24); }
}

@keyframes lang-hint-in {
  from { opacity: 0; transform: translate(calc(var(--nx) * -3), calc(var(--ny) * -3)); }
  to { opacity: 1; transform: translate(0, 0); }
}
@keyframes lang-hint-nudge {
  0%, 50%, 100% { transform: translate(0, 0); }
  62%, 86% { transform: translate(var(--nx), var(--ny)); }
  74% { transform: translate(0, 0); }
}
@keyframes lang-hint-ring {
  0% { box-shadow: 0 0 0 0 rgba(14, 169, 226, 0.7); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(14, 169, 226, 0); }
}

/* Reduced motion: no slide, nudge or pulse (app.css already cuts animations short); the button
   keeps a still ring instead. */
@media (prefers-reduced-motion: reduce) {
  .lang-hint, .lang-hint.is-in { animation: none; transition: none; }
  .lang-seg.lang-hint-on { animation: none; box-shadow: 0 0 0 3px rgba(14, 169, 226, 0.5); }
}