/* Local illustration styles only: page placement belongs to the page's own stylesheet. */
.story-art {
  width: min(100%, 240px);
  aspect-ratio: 1;
  pointer-events: none;
}
.story-art:empty { display: none; }
.story-art__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: #1d1d20;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.story-art__cream { fill: #f7f7f2; }
.story-art__green { fill: #009c43; }
.story-art__lime { fill: #94c865; }
.story-art__amber { fill: #f3c76b; }
.story-art__keyline {
  fill: #f7f7f2;
  stroke: #f7f7f2;
  stroke-width: 10;
}
.story-art__shadow { fill: #1d1d20; stroke: none; opacity: .13; }
.story-art__no-stroke { stroke: none; }
.story-art__shine { fill: none; stroke: #f7f7f2; }
.story-art__detail { fill: none; }
.story-art__face circle { fill: #1d1d20; stroke: none; }
.story-art__face path { fill: none; stroke-width: 3; }
.story-art__accent { stroke: #94c865; }
.story-art__stem-outline { stroke-width: 12; }
.story-art__stem-fill { stroke: #009c43; }

/* Pivots use SVG coordinates, keeping each moving part attached to its object. */
.story-art__motion {
  transform-box: view-box;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
.story-art__camera-turn {
  transform-origin: 120px 166px;
  animation-name: story-art-camera-turn;
  animation-duration: 9s;
}
.story-art__camera-lens {
  transform-origin: 125px 140px;
  animation-name: story-art-camera-lens;
  animation-duration: 6.8s;
}
.story-art__camera-reel-left,
.story-art__camera-reel-right {
  animation-name: story-art-camera-reel;
  animation-timing-function: linear;
}
.story-art__camera-reel-left { transform-origin: 81px 65px; animation-duration: 10s; }
.story-art__camera-reel-right { transform-origin: 139px 65px; animation-duration: 9.2s; }
.story-art__camera-glint {
  transform-origin: 197px 58px;
  animation-name: story-art-camera-glint;
  animation-duration: 8s;
}
.story-art__seed-rock {
  transform-origin: 119px 191px;
  animation-name: story-art-seed-rock;
  animation-duration: 8.6s;
}
.story-art__seed-accent {
  transform-origin: 120px 120px;
  animation-name: story-art-seed-accent;
  animation-duration: 9.4s;
}
.story-art__leaf-left {
  transform-origin: 120px 126px;
  animation-name: story-art-leaf-left;
  animation-duration: 7.4s;
}
.story-art__leaf-right {
  transform-origin: 123px 111px;
  animation-name: story-art-leaf-right;
  animation-duration: 8.8s;
}
.story-art__sprout-accent {
  transform-origin: 120px 120px;
  animation-name: story-art-sprout-accent;
  animation-duration: 9.6s;
}
.story-art.is-art-active .story-art__motion { animation-play-state: running; }
.nav-open .story-art .story-art__motion,
.intro-active .story-art .story-art__motion,
.intro-revealing .story-art .story-art__motion { animation-play-state: paused; }

@keyframes story-art-camera-turn {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  45% { transform: rotate(2deg) translateY(-2px); }
  72% { transform: rotate(1deg) translateY(-1px); }
}
@keyframes story-art-camera-reel {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}
@keyframes story-art-camera-lens {
  0%, 100% { transform: scale(1); }
  48% { transform: scale(1.045); }
}
@keyframes story-art-camera-glint {
  0%, 100% { transform: rotate(-8deg) scale(.9); }
  50% { transform: rotate(8deg) scale(1.08); }
}
@keyframes story-art-seed-rock {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  40% { transform: rotate(6deg) translateY(-2px); }
  70% { transform: rotate(2deg) translateY(-1px); }
}
@keyframes story-art-seed-accent {
  0%, 100% { transform: translateY(1px) rotate(-2deg); }
  50% { transform: translateY(-3px) rotate(2deg); }
}
@keyframes story-art-leaf-left {
  0%, 100% { transform: rotate(-5deg); }
  48% { transform: rotate(5deg); }
}
@keyframes story-art-leaf-right {
  0%, 100% { transform: rotate(3deg); }
  50% { transform: rotate(-6deg); }
}
@keyframes story-art-sprout-accent {
  0%, 100% { transform: translateY(2px); }
  50% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .story-art .story-art__motion { animation: none; transform: none; }
}