/* Original WattleAssess illustrations. Decorative motion can always be paused. */
.learning-scene {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: #352c32;
  contain: layout style;
}
.learning-scene .scene-ink { fill: #352c32; }
.learning-scene .scene-shadow { fill: #352c32; opacity: .09; }
.learning-scene .scene-sage { fill: #9ead8c; }
.learning-scene .scene-skin { fill: #cfa58a; }
.learning-scene .scene-paper { fill: #fffdf8; }
.learning-scene .scene-coral { fill: #db8c72; }
.learning-scene .scene-lime { fill: #e8bb62; }
.learning-scene .scene-sky { fill: #d6c1cd; }
.learning-scene .scene-forest { fill: #613d52; }
.learning-scene .scene-outline {
  stroke: #352c32;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.learning-scene .scene-line {
  fill: none;
  stroke: #352c32;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.learning-scene .scene-limb { stroke-width: 2.8; }
.learning-scene .scene-leaf-line {
  fill: none;
  stroke: #fffdf8;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.learning-scene .scene-grid {
  fill: none;
  stroke: #613d52;
  stroke-width: .7;
  opacity: .04;
}
.learning-scene .scene-faint { opacity: .4; }
/* Exposed strokes stay visible on dark surfaces; ink on coloured shapes stays dark. */
html[data-theme="dark"] .learning-scene .scene-open-line,
html[data-theme="dark"] .learning-scene .scene-limb {
  stroke: #e9dce3;
}
html[data-theme="dark"] .learning-scene .scene-grid {
  stroke: #e9dce3;
}
.learning-scene .scene-trail-shadow {
  fill: none;
  stroke: #f0e6eb;
  stroke-width: 22;
  stroke-linecap: round;
}
.learning-scene .scene-bob,
.learning-scene .scene-bob-delayed,
.learning-scene .scene-wiggle,
.learning-scene .scene-grow {
  transform-box: fill-box;
  transform-origin: center;
}
.learning-scene .scene-bob { animation: wattleassess-bob 8.8s ease-in-out infinite; }
.learning-scene .scene-bob-delayed { animation: wattleassess-bob 10.3s ease-in-out -2.4s infinite; }
.learning-scene .scene-wiggle { animation: wattleassess-wiggle 11.7s ease-in-out -1.8s infinite; }
.learning-scene .scene-grow {
  transform-origin: center bottom;
  animation: wattleassess-grow 9.3s ease-in-out -.8s infinite;
}
.learning-scene .scene-dash {
  stroke-dasharray: 5 8;
  animation: wattleassess-dash 28s linear infinite;
}
@keyframes wattleassess-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes wattleassess-wiggle {
  0%, 35%, 100% { transform: rotate(0deg); }
  45% { transform: rotate(-2deg); }
  55% { transform: rotate(1.5deg); }
  65% { transform: rotate(0deg); }
}
@keyframes wattleassess-grow {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}
@keyframes wattleassess-dash {
  to { stroke-dashoffset: -104; }
}
html[data-motion="paused"] .learning-scene *,
html[data-motion="paused"] .learning-scene *::before,
html[data-motion="paused"] .learning-scene *::after {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  .learning-scene *,
  .learning-scene *::before,
  .learning-scene *::after {
    animation: none !important;
    transition: none !important;
  }
}