/* Motions for still, unreleased frames. The drawing stays fixed; light travels inside
   its painted material and selected mechanical details move on their own. */
.frame-live > .fl-material {
  inset: 0;
  overflow: hidden;
  opacity: .55;
  mix-blend-mode: screen;
  -webkit-mask-image: var(--frame-art);
  mask-image: var(--frame-art);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.fl-material::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: conic-gradient(transparent 0 70%, #fff8 82%, transparent 94%);
  animation: df-light 9s linear infinite;
}
.frame-live[data-scene="loader"] .fl-material { opacity: .8; }
.frame-live[data-scene="loader"] .fl-material::after {
  background: conic-gradient(#6ffaff 0 22deg, #a7ffff88 35deg, transparent 90deg 360deg);
  animation-duration: 1.8s;
  animation-timing-function: steps(16);
}
.frame-live[data-scene="film"] .fl-material::after,
.frame-live[data-scene="signal"] .fl-material::after {
  background: repeating-conic-gradient(from 0deg, transparent 0 10deg, #ffe9aa 11deg 13deg, transparent 14deg 20deg);
  animation-duration: 5s;
  animation-timing-function: steps(24);
}
.frame-live[data-scene="signal"] .fl-material { opacity: .42; }
.frame-live[data-scene="signal"] .fl-material::after {
  background: repeating-conic-gradient(#ffe349 0 3deg, transparent 4deg 13deg);
  animation-duration: 7s;
  animation-timing-function: steps(32);
}
.frame-live[data-scene="holo"] .fl-material::after,
.frame-live[data-scene="prism"] .fl-material::after {
  background: conic-gradient(transparent 0 30%, #53eaff88 43%, #f19cffaa 49%, #ffe6a7aa 54%, transparent 65%);
  animation-duration: 12s;
}
.frame-live[data-scene="prism"] .fl-material { opacity: .85; }
.frame-live[data-scene="corona"] .fl-material::after {
  background: conic-gradient(transparent 0 34%, #ffae46aa 44%, #fff7b8 50%, #ff682fbb 56%, transparent 72%);
  animation-duration: 11s;
}
.frame-live[data-scene="saturn"] .fl-material::after {
  background: conic-gradient(transparent 0 40%, #c5dcff99 50%, #fff2cbaa 58%, transparent 70%);
  animation-duration: 18s;
}
.frame-live[data-scene="fungi"] .fl-material::after {
  background: conic-gradient(transparent 0 42%, #5df7ba66 49%, #fe7bfc99 56%, transparent 72%);
  animation-duration: 16s;
}
.frame-live[data-scene="canopy"] { --bloom: #c8ff8e; }
.frame-live[data-scene="canopy"] .fl-material::after {
  background: conic-gradient(transparent 0 40%, #e9ffa177 49%, #8acb8e55 57%, transparent 70%);
  animation-duration: 21s;
}
.frame-live[data-scene="aquarium"] .fl-material::after,
.frame-live[data-scene="rain"] .fl-material::after {
  background: conic-gradient(transparent 0 35%, #80eaff55 43%, #eaffffbb 50%, #53baf888 57%, transparent 69%);
  animation-duration: 13s;
}
.frame-live[data-scene="polaroid"] .fl-material::after {
  background: conic-gradient(transparent 0 42%, #fff6eacc 48%, #ffd9e2aa 52%, transparent 63%);
  animation-duration: 17s;
  animation-timing-function: steps(16);
}
.frame-live[data-scene="cassette"] .fl-material::after,
.frame-live[data-scene="clock"] .fl-material::after {
  background: conic-gradient(transparent 0 39%, #ffcf8688 47%, #fff2d1aa 51%, transparent 62%);
  animation-duration: 14s;
}
.frame-live[data-scene="astral"] .fl-material::after {
  background: conic-gradient(transparent 0 36%, #96d6ff99 45%, #ffe2ffaa 54%, #8e91ff88 60%, transparent 72%);
  animation-duration: 15s;
}
.frame-live[data-scene="hive"] .fl-material::after {
  background: conic-gradient(transparent 0 36%, #ffcb5699 44%, #a783ffbb 50%, #7ef9ff88 57%, transparent 69%);
  animation-duration: 13s;
}
.frame-live > .fl-art-part { pointer-events: none; }
.frame-live > .fl-art-gear,
.frame-live > .fl-art-reel,
.frame-live > .fl-art-pendulum {
  inset: 0;
  background-image: var(--frame-art);
  background-size: contain;
  background-position: center;
  -webkit-mask-image: radial-gradient(circle at var(--x) var(--y), #000 0 calc(var(--r) - 1%), transparent var(--r));
  mask-image: radial-gradient(circle at var(--x) var(--y), #000 0 calc(var(--r) - 1%), transparent var(--r));
  transform-origin: var(--x) var(--y);
  animation: df-turn 9s linear infinite;
}
.frame-live > .fl-art-reel { animation-duration: 4.5s; }
.frame-live > .fl-art-pendulum { animation: df-swing 2.8s ease-in-out infinite; }
.frame-live > .fl-art-bloom,
.frame-live > .fl-art-bubble,
.frame-live > .fl-art-drop,
.frame-live > .fl-art-expose {
  inset: auto;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  width: 13%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
}
.frame-live > .fl-art-bloom {
  background: radial-gradient(circle, #fff 0 7%, var(--bloom, #8affd4) 25%, transparent 70%);
  animation: df-bloom 3.4s ease-in-out infinite;
}
.frame-live[data-scene="hive"] { --bloom: #ffc65c; }
.frame-live > .fl-art-bubble {
  width: 7%;
  border: 1px solid #d8faffbb;
  background: radial-gradient(circle at 27% 24%, #fff 0 8%, #a7eaff55 25%, #8dd8ff22 70%);
  box-shadow: inset -1px -1px 2px #77bfff88;
  animation: df-float 4.1s ease-out infinite;
}
.frame-live[data-scene="astral"] > .fl-art-bubble {
  border-color: #f1d8ff;
  background: radial-gradient(circle at 27% 24%, #fff 0 8%, #ffc8f077 25%, #a586ff33 70%);
}
.frame-live > .fl-art-drop {
  width: 4%;
  aspect-ratio: .72;
  border-radius: 70% 0 70% 70%;
  rotate: -45deg;
  background: linear-gradient(135deg, #fff, #74ddff 62%, #278dc9);
  animation: df-drop 3.3s ease-in infinite;
}
.frame-live > .fl-art-expose {
  width: 14%;
  background: radial-gradient(circle, #fff9e4 0 6%, #fff8 22%, transparent 70%);
  animation: df-expose 5s steps(1) infinite;
}
.frame-live > .fl-art-orbit {
  inset: 10%;
  border-radius: 50%;
  background: none;
  animation: df-turn 12s linear infinite;
}
.frame-live > .fl-art-orbit:nth-last-child(2) { inset: 18%; animation-duration: 17s; animation-direction: reverse; }
.fl-art-orbit::after {
  content: "";
  position: absolute;
  top: -2%;
  left: 48%;
  width: 9%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 28% 28%, #fff9de, #dbb77b 55%, #93745a);
  box-shadow: 0 0 4px #fff5d999;
}
@keyframes df-light { to { transform: rotate(1turn); } }
@keyframes df-turn { to { transform: rotate(1turn); } }
@keyframes df-swing { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes df-bloom { 0%, 100% { opacity: .08; transform: scale(.75); } 45% { opacity: .9; transform: scale(1.15); } }
@keyframes df-float { 0% { opacity: 0; transform: translateY(7px) scale(.6); } 22% { opacity: .9; } 100% { opacity: 0; transform: translateY(-25px) scale(1.1); } }
@keyframes df-drop { 0% { opacity: 0; transform: translate(0, 0) scale(.7); } 18% { opacity: .9; } 100% { opacity: 0; transform: translate(4px, 28px) scale(.85); } }
@keyframes df-expose { 0%, 74%, 100% { opacity: 0; } 75%, 78% { opacity: .9; } 79%, 81% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .frame-live > .fl-material, .frame-live > .fl-art-part { display: none; }
}
:root.perf-noshimmer .frame-live > .fl-material,
:root.perf-noshimmer .frame-live > .fl-art-part,
:root.perf-noseat .frame-live > .fl-material,
:root.perf-noseat .frame-live > .fl-art-part { display: none; }