assistant/renderer/companion.css

.companion-spark-mark { display: block; width: 50px; height: 42px; flex-shrink: 0; color: #386e97; stroke: none; }
.companion-spark-mark.is-small { width: 25px; height: 25px; }
.particle-companion {
  position: relative;
  width: 100%;
  height: var(--companion-height, 228px);
  min-height: 120px;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
  isolation: isolate;
}
.particle-companion-canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.conversation-particles {
  position: relative;
  display: block;
  width: min(100%, 380px);
  height: 124px;
  margin: 0 auto;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
  animation: companion-flow-enter .25s ease-out both;
}
.conversation-particles.is-compact { width: 58px; height: 44px; margin: 0; flex: 0 0 58px; }
.conversation-particles canvas { display: block; width: 100%; height: 100%; }

.motion-assembly { position: relative; min-width: 0; }
.motion-assembly-matrix { padding: 20px 18px; overflow: hidden; }
.motion-assembly-matrix[hidden] { display: none; }
.motion-assembly-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  width: min(100%, 270px);
  margin: 5px auto 16px;
  perspective: 340px;
  perspective-origin: 38% 42%;
  transform-style: preserve-3d;
  --wave-duration: 4.8s;
  --wave-easing: cubic-bezier(.32, .04, .2, 1);
}
.motion-assembly-tile {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transform: translateZ(0) rotateX(0deg) rotateY(0deg);
  animation: companion-tile-wave var(--wave-duration) var(--wave-easing) var(--wave-delay, 0ms) infinite both;
}
.motion-assembly-tile::before, .motion-assembly-tile::after {
  content: '';
  position: absolute;
  inset: 6.25%;
  pointer-events: none;
  border: .65px solid rgba(224, 237, 251, .95);
  background: linear-gradient(112deg, transparent 36%, rgba(205, 226, 249, .12) 43%, rgba(244, 250, 255, .96) 49%, rgba(155, 193, 233, .38) 52%, transparent 59%);
  background-size: 280% 100%;
  background-position: 150% 50%;
  box-shadow: 0 0 3px rgba(179, 209, 240, .32);
  opacity: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  animation: companion-tile-reflection var(--wave-duration) linear var(--wave-delay, 0ms) infinite both;
  animation-play-state: inherit;
}
.motion-assembly-tile::before { transform: translateZ(.8px); }
.motion-assembly-tile::after { transform: rotateY(180deg) translateZ(.8px); }
.motion-assembly-face {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: inherit;
  transform-box: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 0;
  box-shadow: none;
}
.motion-assembly-face polygon { fill: none; stroke: var(--wave-stroke); stroke-width: .65px; stroke-linejoin: round; }
.motion-assembly-face .motion-assembly-node { fill: var(--wave-stroke); stroke: none; }
.motion-assembly-front { --wave-stroke: #b4c6da; transform: translateZ(.5px); }
.motion-assembly-back { --wave-stroke: #789bbd; transform: rotateY(180deg) translateZ(.5px); }
.motion-assembly[data-revealing='true'] .motion-assembly-content { animation: companion-deliver .3s cubic-bezier(.2,.7,.2,1) both; }
.motion-assembly[data-playing='false'] .motion-assembly-tile,
.motion-assembly[data-playing='false'] .motion-assembly-tile::before,
.motion-assembly[data-playing='false'] .motion-assembly-tile::after { animation-play-state: paused; }

@keyframes companion-tile-wave {
  0%, 5% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg); }
  11% { transform: translate3d(0, -1px, 7px) rotateX(6deg) rotateY(42deg); }
  17% { transform: translate3d(0, -3px, 19px) rotateX(13deg) rotateY(100deg); }
  23% { transform: translate3d(0, -1px, 8px) rotateX(5deg) rotateY(157deg); }
  29%, 49% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(180deg); }
  55% { transform: translate3d(0, -1px, 7px) rotateX(-6deg) rotateY(222deg); }
  61% { transform: translate3d(0, -3px, 19px) rotateX(-13deg) rotateY(280deg); }
  67% { transform: translate3d(0, -1px, 8px) rotateX(-5deg) rotateY(337deg); }
  73%, 100% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(360deg); }
}
@keyframes companion-tile-reflection {
  0%, 5%, 29%, 49%, 73%, 100% { opacity: 0; background-position: 150% 50%; }
  9%, 53% { opacity: .35; background-position: 130% 50%; }
  13%, 57% { opacity: .95; background-position: 70% 50%; }
  19%, 63% { opacity: .85; background-position: 20% 50%; }
  25%, 69% { opacity: .22; background-position: -40% 50%; }
}
@keyframes companion-deliver {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes companion-flow-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
.conversation-particles[data-reduced-motion='true'] { animation: none; }
.motion-assembly[data-reduced-motion='true'] .motion-assembly-tile,
.motion-assembly[data-reduced-motion='true'] .motion-assembly-tile::before,
.motion-assembly[data-reduced-motion='true'] .motion-assembly-tile::after,
.motion-assembly[data-reduced-motion='true'] .motion-assembly-content { animation: none !important; transform: none; }
.motion-assembly[data-reduced-motion='true'] .motion-assembly-tile::before,
.motion-assembly[data-reduced-motion='true'] .motion-assembly-tile::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .conversation-particles { animation: none; }
  .motion-assembly-tile, .motion-assembly-tile::before, .motion-assembly-tile::after, .motion-assembly-content { animation: none !important; transform: none; }
  .motion-assembly-tile::before, .motion-assembly-tile::after { opacity: 0; }
}