/* EasyInput scene motion: semantic state changes only; layout and reading order never move. */
.rewrite-key { display:inline-flex; align-items:center; gap:12px; min-width:0; }
.rewrite-footer { justify-content:center; gap:16px; }
.rewrite-key { justify-content:flex-start; flex:0 1 auto; }
.rewrite-key strong {
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:2px 7px;
  border:1px solid var(--line);
  border-radius:4px;
  transform-origin:center;
}
#scene-motion .surface-caret { opacity:0; animation:none; }

.scene-motion-enabled .scene-case {
  position:relative;
  transition:background-color .25s ease;
}
.scene-motion-enabled .scene-case::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s cubic-bezier(.22,.61,.36,1);
}
.scene-motion-enabled .scene-case.is-active { background:rgba(181,86,58,.028); }
.scene-motion-enabled .scene-case.is-active::before { transform:scaleX(1); }
.scene-motion-enabled .scene-case.is-active .scene-context,
.scene-motion-enabled .scene-case.is-active h4 { color:var(--accent); }
.scene-motion-enabled .scene-case.is-active .scene-surface { border-top-color:rgba(181,86,58,.35); }
.scene-motion-enabled .scene-case.is-active .surface-copy { border-color:rgba(181,86,58,.42); }
.scene-motion-enabled .scene-case.phase-listening .surface-copy { background:rgba(181,86,58,.025); color:var(--ink3); }
.scene-motion-enabled .scene-case.phase-processing .surface-copy { color:var(--ink3); }
.scene-motion-enabled .surface-caret { opacity:0; animation:none; }
.scene-motion-enabled #scene-motion .scene-case.phase-writing .surface-caret {
  opacity:1;
  animation:blink 1s steps(1) infinite;
}

.motion-wave {
  display:inline-grid;
  grid-auto-flow:column;
  align-items:center;
  gap:2px;
  height:10px;
  margin-right:1px;
}
.motion-wave i {
  width:2px;
  height:4px;
  border-radius:999px;
  background:currentColor;
  animation:sceneMotionWave .72s ease-in-out infinite alternate;
}
.motion-wave i:nth-child(2) { height:9px; animation-delay:-.38s; }
.motion-wave i:nth-child(3) { height:6px; animation-delay:-.18s; }
@keyframes sceneMotionWave { to { transform:scaleY(.38); opacity:.5; } }

.scene-motion-enabled .rewrite-feature .selected {
  background:linear-gradient(rgba(181,86,58,.15),rgba(181,86,58,.15)) no-repeat;
  background-size:0 100%;
}
.rewrite-feature .rewrite-command span { display:grid; gap:2px; }
.rewrite-feature .rewrite-command i { display:block; font-style:normal; }
.scene-motion-enabled .rewrite-feature .rewrite-command i { opacity:0; }
.scene-motion-enabled .rewrite-feature .rewrite-command::after { opacity:0; }
.scene-motion-enabled .rewrite-feature .rewrite-result { opacity:0; clip-path:inset(0 100% 0 0); }
.scene-motion-enabled .rewrite-feature.is-rewrite-playing .selected {
  animation:sceneMotionSelect .55s cubic-bezier(.22,.61,.36,1) .1s forwards;
}
.scene-motion-enabled .rewrite-feature.is-rewrite-playing .rewrite-key strong {
  animation:sceneMotionKey .3s ease .55s;
}
.scene-motion-enabled .rewrite-feature.is-rewrite-playing .rewrite-command i:first-child {
  animation:sceneMotionCommand .34s cubic-bezier(.22,.61,.36,1) .85s forwards;
}
.scene-motion-enabled .rewrite-feature.is-rewrite-playing .rewrite-command i:last-child {
  animation:sceneMotionCommand .34s cubic-bezier(.22,.61,.36,1) 1.18s forwards;
}
.scene-motion-enabled .rewrite-feature.is-rewrite-playing .rewrite-command::after {
  animation:sceneMotionArrow .7s ease 1.72s forwards;
}
.scene-motion-enabled .rewrite-feature.is-rewrite-playing .rewrite-result {
  animation:sceneMotionReplace .8s cubic-bezier(.22,.61,.36,1) 2.05s forwards;
}
@keyframes sceneMotionSelect { to { background-size:100% 100%; } }
@keyframes sceneMotionKey {
  50% { transform:translateY(2px); border-color:var(--accent); background:var(--accent); color:var(--bg); }
}
@keyframes sceneMotionCommand { to { opacity:1; } }
@keyframes sceneMotionArrow {
  from { opacity:0; transform:translateX(-5px); }
  to { opacity:1; transform:none; }
}
@keyframes sceneMotionReplace {
  from { opacity:.25; clip-path:inset(0 100% 0 0); }
  to { opacity:1; clip-path:inset(0 0 0 0); }
}

.scene-motion-paused .motion-wave i,
.scene-motion-paused .rewrite-feature * { animation-play-state:paused !important; }

@media (max-width:560px) {
  .rewrite-footer { align-items:center; justify-content:center; }
  .rewrite-key { align-items:center; flex-direction:column; gap:4px; text-align:center; }
}
@media (prefers-reduced-motion:reduce) {
  .scene-motion-enabled .rewrite-feature .selected {
    background-size:100% 100%;
    animation:none !important;
  }
  .scene-motion-enabled .rewrite-feature .rewrite-key strong,
  .scene-motion-enabled .rewrite-feature .rewrite-command i,
  .scene-motion-enabled .rewrite-feature .rewrite-command::after,
  .scene-motion-enabled .rewrite-feature .rewrite-result {
    opacity:1;
    clip-path:none;
    animation:none !important;
  }
}