/* One visual vocabulary for the website and studio presentation. */
.meaning-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.4em;
  height: 1.4em;
  color: var(--meaning-icon-ink, currentColor);
  line-height: 1;
  vertical-align: middle;
  pointer-events: none;
}
.meaning-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.meaning-icon.meaning-badge {
  width: 48px;
  height: 48px;
  padding: 11px;
  border: 1px solid var(--meaning-badge-border, #9bb99570);
  border-radius: 14px;
  background: var(--meaning-badge-bg, #e2efcd);
  color: var(--meaning-icon-ink, #134b35);
  box-shadow: inset 0 1px 0 #ffffff35, 0 5px 12px -8px #143b2c44;
}
.meaning-icon.meaning-tab-icon { width: 20px; height: 20px; }
.meaning-motif {
  position: absolute;
  width: 190px;
  height: 190px;
  right: 24px;
  top: 24px;
  display: block;
  opacity: var(--meaning-motif-opacity, .08);
  color: var(--meaning-motif-ink, currentColor);
  pointer-events: none;
  user-select: none;
}
.meaning-motif > svg { display: block; width: 100%; height: 100%; stroke-width: .85; }
.meaning-motif::before {
  content: '';
  position: absolute;
  inset: -16%;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .3;
}
.meaning-signal {
  transform-box: fill-box;
  transform-origin: center;
}
.meaning-dot { fill: currentColor; stroke: none; }
[data-meaning-motion='rise'] { --meaning-animation: meaningRise; }
[data-meaning-motion='bars'] { --meaning-animation: meaningBars; }
[data-meaning-motion='point'] { --meaning-animation: meaningPoint; }
[data-meaning-motion='flow'] { --meaning-animation: meaningFlow; }
[data-meaning-motion='scan'] { --meaning-animation: meaningScan; }
[data-meaning-motion='bridge'] { --meaning-animation: meaningBridge; }
[data-meaning-motion='confirm'] { --meaning-animation: meaningConfirm; }
[data-meaning-motion='draw'] { --meaning-animation: meaningDraw; }
[data-meaning-motion='bars'] .meaning-signal { transform-origin: center bottom; }
.meaning-motion-enabled :is(.meaning-icon, .meaning-motif).meaning-visible .meaning-signal {
  animation: var(--meaning-animation, meaningPulse) 5s ease-in-out infinite;
}
.meaning-motion-enabled .meaning-motif.meaning-visible .meaning-signal { animation-duration: 7s; }
@keyframes meaningPulse { 0%, 35%, 100% { opacity: .75; transform: scale(1); } 55%, 70% { opacity: 1; transform: scale(1.12); } }
@keyframes meaningRise { 0%, 25%, 100% { transform: translateY(1px); opacity: .7; } 55%, 75% { transform: translateY(-1.5px); opacity: 1; } }
@keyframes meaningBars { 0%, 20%, 100% { transform: scaleY(.65); opacity: .7; } 55%, 75% { transform: scaleY(1); opacity: 1; } }
@keyframes meaningPoint { 0%, 30%, 100% { transform: translate(-.6px, .6px); } 55%, 70% { transform: translate(.8px, -.8px); } }
@keyframes meaningFlow { 0%, 15% { transform: translateY(-1px); opacity: .6; } 65% { transform: translateY(3px); opacity: 1; } 85%, 100% { transform: translateY(-1px); opacity: .6; } }
@keyframes meaningScan { 0%, 25%, 100% { transform: translateX(-1px); opacity: .7; } 55%, 75% { transform: translateX(1px); opacity: 1; } }
@keyframes meaningBridge { 0%, 25%, 100% { transform: scaleX(.8); opacity: .65; } 50%, 75% { transform: scaleX(1); opacity: 1; } }
@keyframes meaningConfirm { 0%, 25%, 100% { transform: scale(.88); opacity: .65; } 50%, 75% { transform: scale(1); opacity: 1; } }
@keyframes meaningDraw { 0%, 25%, 100% { transform: translate(-1px, 1px); opacity: .7; } 50%, 75% { transform: translate(1px, -1px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .meaning-icon *, .meaning-motif * { animation: none !important; transition: none !important; }
}
@media print {
  .meaning-motif { display: none !important; }
  .meaning-icon * { animation: none !important; }
  .meaning-icon.meaning-badge { box-shadow: none; }
}