/* Alder "Four steps" figures (partials/_step-art-1..4.tpl.php).
   GENERATED by Nico's scene script (build-steps.py, 2026-10-14) together
   with the partials, so motion vectors match the geometry; edit there and
   regenerate, or hand-edit both sides consistently.
   Same projection and light as the moss-band badge (.al-badge): lighter top,
   mid left (y-facing), darker right (x-facing). No gradients, no filters.
   Default state = final frame. js/alder-steps.js adds .is-armed (parts at
   their start) and .is-playing (a once-through build, about 1s) when a card
   is first seen and whenever its step is picked. Reduced motion: never armed,
   and the block at the end forces the final state regardless. */
.al-sfig { display: block; width: 100%; }
.al-sfig__svg { display: block; width: 100%; height: auto; overflow: visible; }
.al-sfig .w, .al-sfig .ln, .al-sfig .lnk, .al-sfig .gl {
  fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.al-sfig .w   { stroke: rgba(14, 42, 27, .55); stroke-width: 1.1px; }
.al-sfig .ln  { stroke: rgba(14, 42, 27, .3); stroke-width: 1.3px; }
.al-sfig .lnk { stroke: rgba(14, 42, 27, .45); stroke-width: 1.3px; }
.al-sfig .gl  { stroke: rgba(250, 250, 248, .85); stroke-width: 1.6px; }
.al-sfig .sh  { fill: rgba(14, 42, 27, .13); stroke: none; }
/* sand plate */
.al-sfig .p-t { fill: #ECE3D4; }
.al-sfig .p-l { fill: #DCCFB8; }
.al-sfig .p-r { fill: #C9B79A; }
/* paper */
.al-sfig .c-t { fill: #FFFCF6; }
.al-sfig .c-l { fill: #EBE1D0; }
.al-sfig .c-r { fill: #D5C6AB; }
/* sage */
.al-sfig .s-t { fill: #A8DEB5; }
.al-sfig .s-l { fill: #86C998; }
.al-sfig .s-r { fill: #63B07A; }
/* brand */
.al-sfig .g-t { fill: var(--al-brand, #3D8850); }
.al-sfig .g-l { fill: #2E7041; }
.al-sfig .g-r { fill: #1F5A33; }
/* pill / ink (handle, phone) */
.al-sfig .k-t { fill: #1F5A33; }
.al-sfig .k-l { fill: var(--al-pill, #14532D); }
.al-sfig .k-r { fill: var(--al-ink, #0E2A1B); }
.al-sfig .s1-glass { opacity: .9; }

/* 1. Search: the lens sweeps the row (start over result 1, run to result 3,
   come back to settle on result 2), then result 2 lifts 11 units and its
   green faces fade in. */
.al-sfig--1 .s1-pick { transform: translateY(-11px); }
.al-sfig--1 .s1-psh { opacity: 1; }
.al-sfig--1 .s1-lsh { opacity: 0; }
.al-sfig--1.is-armed .s1-lens { opacity: 0; transform: translate(-45.9px, -26.5px); }
.al-sfig--1.is-armed .s1-lsh { opacity: 0; transform: translate(-45.9px, -26.5px); }
.al-sfig--1.is-armed .s1-pick { transform: none; }
.al-sfig--1.is-armed .s1-green,
.al-sfig--1.is-armed .s1-psh { opacity: 0; }
.al-sfig--1.is-playing .s1-lens { animation: al-s1-lens .78s both; }
.al-sfig--1.is-playing .s1-lsh  { animation: al-s1-lsh .78s both; }
.al-sfig--1.is-playing .s1-pick { animation: al-s1-pick .42s .68s cubic-bezier(.3, 0, 0, 1.4) both; }
.al-sfig--1.is-playing .s1-green { animation: al-s1-fade .26s .72s linear both; }
.al-sfig--1.is-playing .s1-psh  { animation: al-s1-fade .3s .68s linear both; }
@keyframes al-s1-lens {
  0%   { opacity: 0; transform: translate(-45.9px, -18.5px); animation-timing-function: cubic-bezier(.2, 0, 0, 1); }
  14%  { opacity: 1; transform: translate(-45.9px, -26.5px); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  58%  { transform: translate(45.9px, 26.5px); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  100% { opacity: 1; transform: none; }
}
@keyframes al-s1-lsh {
  0%   { opacity: 0; transform: translate(-45.9px, -26.5px); animation-timing-function: cubic-bezier(.2, 0, 0, 1); }
  14%  { opacity: 1; transform: translate(-45.9px, -26.5px); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  58%  { opacity: 1; transform: translate(45.9px, 26.5px); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  86%  { opacity: 1; }
  100% { opacity: 0; transform: none; }
}
@keyframes al-s1-pick { from { transform: none; } to { transform: translateY(-11px); } }
@keyframes al-s1-fade { from { opacity: 0; } to { opacity: 1; } }

/* 2. Filter: chips fall in one after another. The sand chip is caught on the
   top slab, the sage chip on the middle one; the brand chip falls through all
   three holes to the plate (it is painted under the slabs, so their front
   rims cover it on the way down), squashes on landing, and its shadow firms. */
.al-sfig--2 .s2-c1, .al-sfig--2 .s2-c2, .al-sfig--2 .s2-brand { transform-box: fill-box; transform-origin: 50% 100%; }
.al-sfig--2.is-armed .s2-c1 { opacity: 0; transform: translate(0px, -30px); }
.al-sfig--2.is-armed .s2-c2 { opacity: 0; transform: translate(0px, -40px); }
.al-sfig--2.is-armed .s2-brand { opacity: 0; transform: translate(0px, -108px); }
.al-sfig--2.is-armed .s2-bsh { opacity: 0; }
.al-sfig--2.is-playing .s2-c1 { animation: al-s2-c1 .5s both; }
.al-sfig--2.is-playing .s2-c2 { animation: al-s2-c2 .52s .14s both; }
.al-sfig--2.is-playing .s2-brand { animation: al-s2-brand .74s .3s both; }
.al-sfig--2.is-playing .s2-bsh { animation: al-s2-bsh .74s .3s both; }
@keyframes al-s2-c1 {
  0%   { opacity: 0; transform: translate(0px, -30px); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  20%  { opacity: 1; }
  62%  { transform: none; animation-timing-function: cubic-bezier(0, 0, .3, 1); }
  78%  { transform: translate(0px, -4px); animation-timing-function: cubic-bezier(.6, 0, 1, 1); }
  100% { opacity: 1; transform: none; }
}
@keyframes al-s2-c2 {
  0%   { opacity: 0; transform: translate(0px, -40px); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  18%  { opacity: 1; }
  64%  { transform: none; animation-timing-function: cubic-bezier(0, 0, .3, 1); }
  80%  { transform: translate(0px, -3px); animation-timing-function: cubic-bezier(.6, 0, 1, 1); }
  100% { opacity: 1; transform: none; }
}
@keyframes al-s2-brand {
  0%   { opacity: 0; transform: translate(0px, -108px); animation-timing-function: cubic-bezier(.45, 0, 1, .7); }
  12%  { opacity: 1; }
  72%  { transform: none; animation-timing-function: cubic-bezier(0, 0, .3, 1); }
  84%  { transform: scale(1.12, .84); animation-timing-function: cubic-bezier(.3, 0, .3, 1); }
  100% { opacity: 1; transform: none; }
}
@keyframes al-s2-bsh { 0%, 40% { opacity: 0; } 72%, 100% { opacity: 1; } }

/* 3. Ask: the question rises 28 units off the plate (its shadow thins as it
   climbs), then the three answers slide out from beneath it along y, staggered. */
.al-sfig--3.is-armed .s3-bub { opacity: 0; transform: translateY(28px); }
.al-sfig--3.is-armed .s3-bsh { opacity: 0; }
.al-sfig--3.is-armed .s3-a1 { opacity: 0; transform: translate(26px, -15px); }
.al-sfig--3.is-armed .s3-a2 { opacity: 0; transform: translate(43.3px, -25px); }
.al-sfig--3.is-armed .s3-a3 { opacity: 0; transform: translate(60.6px, -35px); }
.al-sfig--3.is-playing .s3-bub { animation: al-s3-bub .5s cubic-bezier(.2, 0, 0, 1) both; }
.al-sfig--3.is-playing .s3-bsh { animation: al-s3-bsh .5s both; }
.al-sfig--3.is-playing .s3-a1 { animation: al-s3-a1 .38s .36s cubic-bezier(.2, 0, 0, 1) both; }
.al-sfig--3.is-playing .s3-a2 { animation: al-s3-a2 .38s .5s cubic-bezier(.2, 0, 0, 1) both; }
.al-sfig--3.is-playing .s3-a3 { animation: al-s3-a3 .38s .64s cubic-bezier(.2, 0, 0, 1) both; }
@keyframes al-s3-bub {
  0%   { opacity: 0; transform: translateY(28px); }
  25%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes al-s3-bsh { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 1; } }
@keyframes al-s3-a1 { 0% { opacity: 0; transform: translate(26px, -15px); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes al-s3-a2 { 0% { opacity: 0; transform: translate(43.3px, -25px); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes al-s3-a3 { 0% { opacity: 0; transform: translate(60.6px, -35px); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }

/* 4. Reach out: the card lifts off the phone screen, arcs 94 units along x
   to the tray and drops in (the tray's front rim is painted over it); on
   arrival the flag swings up from flat and its sand cover fades to brand. */
.al-sfig--4 .s4-flag { transform-box: fill-box; transform-origin: 1.8px 2px; }
.al-sfig--4.is-armed .s4-card, .al-sfig--4.is-armed .s4-csh { opacity: 0; transform: translate(-81.4px, -52px); }
.al-sfig--4.is-armed .s4-flag { transform: rotate(90deg); }
.al-sfig--4 .s4-flagoff { opacity: 0; }
.al-sfig--4.is-armed .s4-flagoff { opacity: 1; }
.al-sfig--4.is-playing .s4-card { animation: al-s4-card .74s both; }
.al-sfig--4.is-playing .s4-csh  { animation: al-s4-csh .74s both; }
.al-sfig--4.is-playing .s4-flag { animation: al-s4-flag .36s .66s cubic-bezier(.3, 0, .2, 1.35) both; }
.al-sfig--4.is-playing .s4-flagoff { animation: al-s4-off .2s .78s linear both; }
@keyframes al-s4-card {
  0%   { opacity: 0; transform: translate(-81.4px, -52px); animation-timing-function: cubic-bezier(.2, 0, .4, 1); }
  16%  { opacity: 1; transform: translate(-74.9px, -64.2px); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  56%  { transform: translate(-30.9px, -51.9px); animation-timing-function: cubic-bezier(.4, 0, .9, .6); }
  86%  { transform: none; animation-timing-function: cubic-bezier(.2, 0, .2, 1); }
  93%  { transform: translate(0px, -2px); }
  100% { opacity: 1; transform: none; }
}
@keyframes al-s4-csh {
  0%   { opacity: 0; transform: translate(-81.4px, -47px); animation-timing-function: cubic-bezier(.2, 0, .4, 1); }
  16%  { opacity: .3; transform: translate(-74.9px, -43.2px); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  56%  { opacity: .3; transform: translate(-30.9px, -17.9px); animation-timing-function: cubic-bezier(.4, 0, .9, .6); }
  86%  { opacity: 1; transform: none; }
  100% { opacity: 1; transform: none; }
}
@keyframes al-s4-flag { from { transform: rotate(90deg); } to { transform: none; } }
@keyframes al-s4-off { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .al-sfig *, .al-sfig.is-armed * { animation: none !important; }
  .al-sfig--1 .s1-lens, .al-sfig--1 .s1-green, .al-sfig--1 .s1-psh,
  .al-sfig--2 .s2-c1, .al-sfig--2 .s2-c2, .al-sfig--2 .s2-brand, .al-sfig--2 .s2-bsh,
  .al-sfig--3 .s3-bub, .al-sfig--3 .s3-bsh, .al-sfig--3 .s3-a,
  .al-sfig--4 .s4-card, .al-sfig--4 .s4-csh { opacity: 1 !important; transform: none !important; }
  .al-sfig--1 .s1-pick { transform: translateY(-11px) !important; }
  .al-sfig--1 .s1-lsh, .al-sfig--4 .s4-flagoff { opacity: 0 !important; }
  .al-sfig--4 .s4-flag { transform: none !important; }
}