/* P2, the arch of whole stones (site-system.md 6.1 (d) item 4, R17 b). Generated by prototypes/tools/plates/stones.mjs.
   Put .stones on the box that holds the inline stones.svg. The built arch is the default (no class): the page is right with no script, under reduced motion, under
   Pause, on Save-Data and on a slow connection. The three states are classes on that box: .state-scattered, .state-ordered, .state-set.
   The arch assembles ONCE, when half of it is in view: the page marks the box data-draw-on="900" data-once="arch" data-draw-at="0.5", observer.js arms it
   (.is-armed) and adds .is-drawn once its picture is ready, and the stones move over two thirds of --draw (600 ms), then the setting-out and the pool over the last third
   (300 ms). Nothing follows the scroll and nothing runs again: every rule that starts it says :not(.is-done), so Pause and then Play restarts nothing.
   Only transform and opacity move, and every duration is --draw or a token. */
.stones { position: relative; }
.stones .p2-plate { display: block; width: 100%; height: auto; overflow: visible; }
.stones .p2-stone { transform-box: view-box; transform-origin: var(--p2-o); }
.stones .p2-setout { transform-box: view-box; transform-origin: 358px 380px; opacity: 0; }
.stones :is(.p2-pool, .p2-cast) { opacity: 1; }
.stones.state-scattered .p2-stone { transform: var(--p2-s); }
.stones.state-ordered .p2-stone { transform: var(--p2-r); }
.stones.state-set .p2-stone { transform: none; }
.stones:is(.state-scattered, .state-ordered) .p2-setout { opacity: 1; transform: scale(1.3970); }
.stones:is(.state-scattered, .state-ordered) :is(.p2-pool, .p2-cast) { opacity: 0; }
/* the Friday slot under the built arch, from 900 px: it shows only once the arch stands */
.stones .p2-friday { display: none; }
@media (min-width: 900px) {
  .stones .p2-friday { display: flex; position: absolute; left: 50%; bottom: 16.64%; transform: translateX(-50%); }
  .stones:is(.state-scattered, .state-ordered) .p2-friday { opacity: 0; visibility: hidden; }   /* hides at once: visibility never sits in a transition */
}
/* the phone plate keeps only its base hatch, so it never turns grey */
@media (max-width: 699px) { .stones .fine { display: none; } }

/* the entrance, once (R17 b): armed and waiting, then drawn. Without motion-ok, or paused, or done, none of this applies and the arch stands built. */
@media (prefers-reduced-motion: no-preference) {
  html.motion-ok:not(.motion-paused) .stones.is-armed:not(.is-drawn, .is-done) .p2-stone { transform: var(--p2-s); }
  html.motion-ok:not(.motion-paused) .stones.is-armed:not(.is-drawn, .is-done) .p2-setout { opacity: 1; transform: scale(1.3970); }
  html.motion-ok:not(.motion-paused) .stones.is-armed:not(.is-drawn, .is-done) :is(.p2-pool, .p2-cast, .p2-friday) { opacity: 0; }
  html.motion-ok:not(.motion-paused) .stones.is-armed:not(.is-drawn, .is-done) .p2-friday { visibility: hidden; }   /* the Friday button takes no focus until the arch stands */
  html.motion-ok:not(.motion-paused) .stones.is-drawn:not(.is-done) .p2-stone { animation: p2-assemble calc(var(--draw, 900ms) * 2 / 3) var(--ease) backwards; }
  html.motion-ok:not(.motion-paused) .stones.is-drawn:not(.is-done) .p2-setout { animation: p2-setout-out calc(var(--draw, 900ms) / 3) var(--ease) calc(var(--draw, 900ms) * 2 / 3) backwards; }
  html.motion-ok:not(.motion-paused) .stones.is-drawn:not(.is-done) :is(.p2-pool, .p2-cast, .p2-friday) { animation: p2-in calc(var(--draw, 900ms) / 3) var(--ease) calc(var(--draw, 900ms) * 2 / 3) backwards; }
}
@keyframes p2-assemble { from { transform: var(--p2-s); } 50% { transform: var(--p2-r); } }
@keyframes p2-setout-out { from { opacity: 1; transform: scale(1.3970); } }
@keyframes p2-in { from { opacity: 0; } }