/* Generating: the one look for "something is being made here", shared by every frame that waits for media.
   A field of dots; a slow band of light crosses it and the dots it touches swell and glow, over soft blooms of light
   drifting underneath. When the result arrives the picture comes into focus from blurred.
   Pure CSS on the frame itself (its background, ::before and ::after), so a place adopts it by adding its selector
   to the three lists below. --gen-tint is the workspace's own colour, set by script when a workspace opens; without
   one the glow stays neutral. */
:root{--gen-dot:var(--text);--gen-rest:24%;--gen-lit:var(--text);--gen-halo:60%;--gen-tint:var(--text);--gen-step:13px;--gen-wave:4.4s}
/* Light mode: the wave lifts the dots to a soft grey, not to black. */
:root[data-theme="light"]{--gen-rest:16%;--gen-lit:color-mix(in srgb,var(--text) 34%,var(--raised));--gen-halo:26%}

.assist-gen-frame.is-rendering,
.cr-taking,
.gen-state.busy,
.fl-frame-sketch.is-drawing,
.reel-render-state.rendering,
.render-media:has(> .render-pending.is-rendering),
.lm-generating{
  position:relative;overflow:hidden;isolation:isolate;animation:none;
  background-color:var(--raised);
  background-image:radial-gradient(circle,color-mix(in srgb,var(--gen-dot) var(--gen-rest),transparent) 1.1px,transparent 1.7px);
  background-size:var(--gen-step) var(--gen-step);background-position:center;
}
/* The glow: three blooms, blurred, drifting on their own slow paths. */
.assist-gen-frame.is-rendering::before,
.cr-taking::before,
.gen-state.busy::before,
.fl-frame-sketch.is-drawing::before,
.reel-render-state.rendering::before,
.render-media:has(> .render-pending.is-rendering)::before,
.lm-generating::before{
  content:"";position:absolute;inset:-25%;z-index:-1;pointer-events:none;filter:blur(26px);
  background:
    radial-gradient(38% 38% at 28% 30%,color-mix(in srgb,var(--gen-tint) 42%,transparent),transparent 70%),
    radial-gradient(46% 46% at 74% 68%,color-mix(in srgb,var(--gen-dot) 22%,transparent),transparent 70%),
    radial-gradient(30% 30% at 46% 88%,color-mix(in srgb,var(--gen-tint) 32%,transparent),transparent 70%);
  animation:gen-drift 11s ease-in-out infinite alternate;
}
/* The wave: a brighter copy of the dots, seen only where the band of light is passing. */
.assist-gen-frame.is-rendering::after,
.cr-taking::after,
.gen-state.busy::after,
.fl-frame-sketch.is-drawing::after,
.reel-render-state.rendering::after,
.render-media:has(> .render-pending.is-rendering)::after,
.lm-generating::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-color:transparent;
  background-image:radial-gradient(circle,var(--gen-lit) 1.9px,transparent 2.5px);
  background-size:var(--gen-step) var(--gen-step);background-position:center;
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--gen-lit) var(--gen-halo),transparent)) drop-shadow(0 0 10px color-mix(in srgb,var(--gen-tint) 70%,transparent));
  -webkit-mask-image:linear-gradient(118deg,transparent 32%,#000 47%,#000 53%,transparent 68%);mask-image:linear-gradient(118deg,transparent 32%,#000 47%,#000 53%,transparent 68%);
  -webkit-mask-size:300% 300%;mask-size:300% 300%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:gen-wave var(--gen-wave) cubic-bezier(.45,.05,.3,1) infinite;
}
@keyframes gen-wave{from{-webkit-mask-position:100% 100%;mask-position:100% 100%}to{-webkit-mask-position:0% 0%;mask-position:0% 0%}}
@keyframes gen-drift{0%{transform:translate(-6%,-4%) scale(1)}50%{transform:translate(7%,5%) scale(1.12)}100%{transform:translate(-3%,8%) scale(.94)}}

/* The older sweeps these frames carried are retired. */
.assist-gen-frame.is-rendering .assist-gen-scan,.cr-taking>i{display:none}

/* The result arriving: it comes into focus from blurred, a little slower than before. */
.assist-gen-frame.is-revealing img,.assist-gen-frame.is-revealing video{animation:gen-focus 1.15s cubic-bezier(.2,.7,.2,1) both}
@keyframes gen-focus{from{opacity:0;filter:blur(26px) saturate(1.3);transform:scale(1.07)}45%{opacity:1}to{opacity:1;filter:none;transform:none}}

@media (prefers-reduced-motion:reduce){
  .assist-gen-frame.is-rendering::before,.cr-taking::before,
.gen-state.busy::before,.fl-frame-sketch.is-drawing::before,.reel-render-state.rendering::before,.render-media:has(> .render-pending.is-rendering)::before,.lm-generating::before{animation:none}
  .assist-gen-frame.is-rendering::after,.cr-taking::after,
.gen-state.busy::after,.fl-frame-sketch.is-drawing::after,.reel-render-state.rendering::after,.render-media:has(> .render-pending.is-rendering)::after,.lm-generating::after{animation:none;-webkit-mask-image:none;mask-image:none;opacity:.3}
  .assist-gen-frame.is-revealing img,.assist-gen-frame.is-revealing video{animation:none}
}

/* Reel and video renders in progress: the words stay readable over the field. */
.reel-render-state.rendering,.render-media:has(> .render-pending.is-rendering){color:var(--text)}
.render-media .render-pending.is-rendering{position:relative;z-index:1;font-size:13px}

/* A slide picture being made is an overlay on the slide's preview: it stays over the preview and lets it show through. */
.cr-taking{position:absolute;background-color:color-mix(in srgb,var(--panel) 55%,transparent)}
.cr-taking b{z-index:1}