/* Local generation placeholder. The image surface follows the editor canvas
   token in both themes, while the border and stars use a quiet accent trail.
   Keep the existing artwork geometry and inherit the project's font. */
.generation-canvas-pending.has-generation-motion {
  padding: 0;
  border: 0;
  overflow: hidden;
  isolation: isolate;
  background: none;
}
.generation-motion {
  --motion-surface: var(--canvas-bg, var(--field, #f4f4f5));
  --motion-line: color-mix(in srgb, var(--border-strong, #d4d4d8) 78%, var(--card, #fff) 22%);
  --motion-text: var(--text, #09090b);
  --motion-muted: var(--muted-strong, #52525b);
  --motion-core: color-mix(in srgb, var(--text, #09090b) 76%, var(--accent, #a16207) 24%);
  --motion-blue: color-mix(in srgb, var(--border-strong, #d4d4d8) 76%, var(--text, #09090b) 24%);
  --motion-purple: color-mix(in srgb, var(--border-strong, #d4d4d8) 66%, var(--accent, #a16207) 34%);
  --motion-pink: color-mix(in srgb, var(--border-strong, #d4d4d8) 70%, var(--accent, #a16207) 30%);
  --motion-peach: color-mix(in srgb, var(--accent, #a16207) 62%, var(--card, #fff) 38%);
  --motion-cyan: color-mix(in srgb, var(--border-strong, #d4d4d8) 84%, var(--card, #fff) 16%);
  --motion-beam-tail: color-mix(in srgb, var(--accent, #a16207) 15%, transparent);
  --motion-halo: color-mix(in srgb, var(--accent-soft, #fef3c7) 52%, transparent);
  --motion-core-shadow: color-mix(in srgb, var(--accent, #a16207) 24%, transparent);
  --motion-star-1-rgb: 63, 65, 73;
  --motion-star-2-rgb: 92, 94, 103;
  --motion-star-3-rgb: 132, 107, 61;
  --motion-star-4-rgb: 78, 82, 94;
  --motion-background-star-rgb: 83, 85, 94;
  --motion-glow-rgb: 161, 98, 7;
  --motion-copy-gap: 59px;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: var(--motion-line);
  pointer-events: none;
}
html[data-theme="dark"] .generation-motion {
  --motion-surface: var(--canvas-bg, var(--card-soft, #202023));
  --motion-line: color-mix(in srgb, var(--border, #303034) 86%, var(--text, #fafafa) 14%);
  --motion-text: var(--text, #fafafa);
  --motion-muted: var(--muted-strong, #d4d4d8);
  --motion-core: color-mix(in srgb, var(--text, #fafafa) 82%, var(--accent, #d4a94f) 18%);
  --motion-blue: color-mix(in srgb, var(--border-strong, #52525b) 82%, var(--text, #fafafa) 18%);
  --motion-purple: color-mix(in srgb, var(--border-strong, #52525b) 70%, var(--accent, #d4a94f) 30%);
  --motion-pink: color-mix(in srgb, var(--border-strong, #52525b) 76%, var(--accent, #d4a94f) 24%);
  --motion-peach: color-mix(in srgb, var(--accent, #d4a94f) 52%, var(--text, #fafafa) 48%);
  --motion-cyan: color-mix(in srgb, var(--border-strong, #52525b) 74%, var(--text, #fafafa) 26%);
  --motion-beam-tail: color-mix(in srgb, var(--accent, #d4a94f) 18%, transparent);
  --motion-halo: color-mix(in srgb, var(--accent-soft, #2a2216) 68%, transparent);
  --motion-core-shadow: color-mix(in srgb, var(--accent, #d4a94f) 28%, transparent);
  --motion-star-1-rgb: 172, 174, 184;
  --motion-star-2-rgb: 196, 190, 173;
  --motion-star-3-rgb: 214, 183, 113;
  --motion-star-4-rgb: 150, 154, 166;
  --motion-background-star-rgb: 154, 157, 168;
  --motion-glow-rgb: 212, 169, 79;
}
.generation-motion-rim { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.generation-motion-rim::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: var(--motion-orbit-size, 1450px); height: var(--motion-orbit-size, 1450px);
  margin: calc(var(--motion-orbit-size, 1450px) / -2);
  background: conic-gradient(from 0deg, transparent 0deg 208deg, var(--motion-beam-tail) 223deg, var(--motion-blue) 244deg, var(--motion-purple) 266deg, var(--motion-pink) 282deg, var(--motion-peach) 294deg, var(--motion-cyan) 305deg, transparent 310deg);
  animation: generation-motion-border 7.8s linear infinite;
}
.generation-motion-surface {
  position: absolute;
  inset: calc(1.5px * var(--canvas-inverse-scale, 1));
  overflow: hidden;
  background: var(--motion-surface);
}
.generation-motion-surface::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 43%, var(--motion-halo), transparent 55%); }
.generation-motion canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.generation-motion-nucleus {
  position: absolute; left: 50%; top: 43%;
  width: 24px; height: 24px; margin: -12px;
  transform: scale(var(--canvas-inverse-scale, 1));
  color: var(--motion-core);
  filter: drop-shadow(0 0 8px var(--motion-core-shadow));
}
.generation-motion-nucleus svg { display: block; width: 100%; height: 100%; animation: generation-motion-breathe 3.8s ease-in-out infinite; }
.generation-motion-status {
  position: absolute; top: calc(43% + var(--motion-copy-gap) * var(--canvas-inverse-scale, 1)); left: 50%;
  width: 230px; margin-left: -115px; text-align: center;
  transform: scale(var(--canvas-inverse-scale, 1)); transform-origin: center top;
}
.generation-motion .generation-motion-status strong { display: block; color: var(--motion-text); font-size: 14px; font-weight: 500; letter-spacing: .045em; }
.generation-motion .generation-motion-status small { display: block; color: var(--motion-muted); font-size: 11px; line-height: 1.6; margin-top: 9px; }
.generation-motion.is-compact { --motion-copy-gap: 32px; }
.generation-motion.is-tiny { --motion-copy-gap: 18px; }
.generation-motion.is-tiny .generation-motion-status strong { font-size: 11px; }
.generation-motion.is-tiny .generation-motion-status small { display: none; }
.generation-motion.is-short .generation-motion-nucleus { display: none; }
.generation-motion.is-short .generation-motion-status { top: 50%; transform: scale(var(--canvas-inverse-scale, 1)) translateY(-50%); }
.generation-motion.is-paused .generation-motion-rim::before,
.generation-motion.is-paused .generation-motion-nucleus svg { animation-play-state: paused; }
@keyframes generation-motion-border { to { transform: rotate(360deg); } }
@keyframes generation-motion-breathe { 50% { opacity: .6; transform: scale(.85); } }
@media (prefers-reduced-motion: reduce) {
  .generation-motion *, .generation-motion *::before, .generation-motion *::after { animation: none !important; transition: none !important; }
}