/* Gesture hint (engine/gesture-hint.js): how to turn, move and zoom the 3D view, one item per
 * gesture with a mouse or finger icon; an item turns into a tick once the viewer has done it.
 * Shared by the course page and the quote page; each page places the .gx element itself.
 * Mouse items show on a fine pointer, finger items on touch screens (pointer: coarse). */

.gx {
  --gx-mouse-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='1.5' width='8' height='13' rx='4'/%3E%3Cpath d='M4.3 6.4h7.4M8 1.8v4.6'/%3E%3Cpath d='M7.4 2.3v3.5H4.6v-.4a3.2 3.2 0 0 1 2.8-3.1z' fill='black' stroke='none'/%3E%3C/svg%3E");
  --gx-mouse-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='1.5' width='8' height='13' rx='4'/%3E%3Cpath d='M4.3 6.4h7.4M8 1.8v4.6'/%3E%3Cpath d='M8.6 2.3v3.5h2.8v-.4a3.2 3.2 0 0 0-2.8-3.1z' fill='black' stroke='none'/%3E%3C/svg%3E");
  --gx-mouse-wheel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='1.5' width='8' height='13' rx='4'/%3E%3Crect x='7.1' y='3.4' width='1.8' height='3.6' rx='.9' fill='black' stroke='none'/%3E%3C/svg%3E");
  --gx-touch-one: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='10.8' r='2.3' fill='black' stroke='none'/%3E%3Cpath d='M2.8 7.6a5.6 5.6 0 0 1 10.4 0'/%3E%3Cpath d='M13.6 5 13.2 7.7l-2.6-.6'/%3E%3C/svg%3E");
  --gx-touch-two: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='2' fill='black' stroke='none'/%3E%3Ccircle cx='11' cy='12' r='2' fill='black' stroke='none'/%3E%3Cpath d='M8 1.5v6.4M4.8 4.7h6.4M6.7 2.8 8 1.5l1.3 1.3M6.7 6.6 8 7.9l1.3-1.3M6.1 3.4 4.8 4.7 6.1 6M9.9 3.4l1.3 1.3L9.9 6'/%3E%3C/svg%3E");
  --gx-touch-pinch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='10' r='1.9' fill='black' stroke='none'/%3E%3Ccircle cx='10' cy='6' r='1.9' fill='black' stroke='none'/%3E%3Cpath d='M4 12 1.8 14.2M1.8 11.4v2.8h2.8M12 4l2.2-2.2M11.4 1.8h2.8v2.8'/%3E%3C/svg%3E");
  --gx-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 8.6 6.5 11.8 12.8 4.4' stroke-width='2'/%3E%3C/svg%3E");
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-3, #7c889a);
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.gx-mouse, .gx-touch { display: contents; }
.gx-touch { display: none; }
@media (pointer: coarse) {
  .gx-mouse { display: none; }
  .gx-touch { display: contents; }
}
.gx-i {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.gx-i::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--gx-icon) center / contain no-repeat;
  mask: var(--gx-icon) center / contain no-repeat;
}
.gx-i b { font-weight: 700; color: var(--ink-2, #aab4c3); transition: color 0.3s ease; }
.gx-mouse [data-g="rotate"] { --gx-icon: var(--gx-mouse-left); }
.gx-mouse [data-g="pan"] { --gx-icon: var(--gx-mouse-right); }
.gx-mouse [data-g="zoom"] { --gx-icon: var(--gx-mouse-wheel); }
.gx-touch [data-g="rotate"] { --gx-icon: var(--gx-touch-one); }
.gx-touch [data-g="pan"] { --gx-icon: var(--gx-touch-two); }
.gx-touch [data-g="zoom"] { --gx-icon: var(--gx-touch-pinch); }

/* Until learned: text a step brighter; moving the view (the gesture nobody guesses) in brand colour. */
.gx.coach { color: var(--ink-2, #aab4c3); }
.gx.coach .gx-i b { color: var(--ink, #eef2f7); }
.gx.coach [data-g="pan"]:not(.done),
.gx.coach [data-g="pan"]:not(.done) b { color: var(--brand-ink, #7fd6f6); }
.gx.coach [data-g="pan"]:not(.done)::before { animation: gx-nudge 2.4s ease-in-out infinite; }
@keyframes gx-nudge {
  0%, 55%, 100% { transform: translate(0, 0); }
  65% { transform: translate(-2px, 0); }
  75% { transform: translate(2px, 0); }
  85% { transform: translate(0, -2px); }
}
.gx-i.done, .gx-i.done b { color: var(--good, #4ade80); }
.gx-i.done::before { --gx-icon: var(--gx-tick); }
.gx.learned .gx-i.done, .gx.learned .gx-i.done b { color: inherit; }
.gx.learned .gx-i.done::before { --gx-icon: inherit; }
.gx.gx-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .gx.coach [data-g="pan"]:not(.done)::before { animation: none; }
}

/* Cursor on the 3D view (engine/orbit.js adds the classes): an open hand says "you can grab and
   turn this"; a closed hand while turning, the move cursor while moving. A page's own pointer
   cursor over a clickable part (inline style) still wins until a drag starts. */
.gx-canvas { cursor: grab; }
.gx-canvas.gx-turning { cursor: grabbing !important; }
.gx-canvas.gx-moving { cursor: move !important; }

/* The point the view turns around, shown while turning (engine/orbit.js places it). */
.gx-pivot {
  position: fixed;
  z-index: 30;
  left: -40px;
  top: -40px;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--brand, #0ea9e2), 0 1px 8px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.gx-pivot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #fff;
}
.gx-pivot.on { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .gx-pivot { transition: none; }
}