/* ==========================================================================
   Seed Scent · the planting stage (paired with planting.js)
   The photo frame in "How to plant it" becomes a small hands-on stage: tear
   the disc, press the pieces into soil, water them, give them sun.
   Colors only from tokens.css. The one extra tone is the jute of the pendant
   cord, which the site already uses (js/physics.js, js/chapters.js).

   Link this file in the head, after sections.css. The two rules on the photo
   (a square frame on narrow phones, a frame no taller than the screen on a
   phone held sideways) are plain CSS on the photo, so the frame has its final
   size before any script runs and nothing shifts when the stage arrives.
   Everything else is scoped to classes the script adds.
   ========================================================================== */

@media (max-width: 560px) {
  .steps-photo img { aspect-ratio: 1 / 1; }
}
/* a phone on its side: the frame is never taller than the screen under the nav, so the paper,
   the soil, the line of instruction and the button are all in view at once */
@media (orientation: landscape) and (max-height: 560px) {
  .steps-photo img { max-height: calc(100vh - var(--nav-h) - 24px); max-height: calc(100svh - var(--nav-h) - 24px); }
}

.plant-fig {
  --plant-jute: #b59a6b;
  -webkit-tap-highlight-color: transparent;
  /* a sloppy drag that starts just outside the frame selects nothing in it */
  user-select: none;
  -webkit-user-select: none;
}
/* the pointer maths assumes a flat frame: nothing may tilt it while the stage plays */
.plant-fig:not(.is-photo) { transform: none !important; }
.plant-fig img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* the stage covers the photo; the photo stays in the flow and keeps the frame's size */
.plant-stage {
  position: absolute;
  inset: 0;
  background: var(--paper-2);
  touch-action: pan-y pinch-zoom;      /* a vertical swipe always scrolls the page; two fingers still zoom it */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: default;
  transition: opacity .5s var(--ease-out-4);
}
/* the hand shows only over paper it can take hold of; a drag that starts in the sky still tears */
.plant-stage[data-stage="tear"].is-over { cursor: grab; }
.plant-stage[data-stage="tear"].is-held { cursor: grabbing; }
.plant-stage[data-stage="press"].is-over,
.plant-stage[data-stage="water"],
.plant-stage.is-waiting { cursor: pointer; }
.plant-canvas { display: block; width: 100%; height: 100%; }

/* done: after a beat the stage steps back and the photo underneath is the last frame.
   Pressed and held, the photo steps back again and the visitor's own sprouts are there. */
.plant-fig.is-photo .plant-stage { opacity: 0; pointer-events: none; transition-duration: 1.4s; }
.plant-fig.is-photo.was-peek .plant-stage { transition-duration: .45s; }
.plant-fig.is-photo.is-peek .plant-stage { opacity: 1; transition-duration: .25s; }

/* the one line of instruction: the site's kicker, set on the sky where the hand is not */
.plant-fig .plant-hint {
  position: absolute;
  left: 18px; top: 16px; right: 18px;
  color: var(--ink);
  pointer-events: none;
  transition: opacity .4s;
}
.plant-fig.is-done .plant-hint { opacity: 0; }
/* a phone on its side: the nav and its paper backing cover the top of the frame at most scroll
   positions, so the line goes to the bottom row, on the soil left of the button, in paper */
@media (orientation: landscape) and (max-height: 560px) {
  .plant-fig .plant-hint,
  .plant-fig.is-tight .plant-hint { top: auto; right: auto; left: 14px; bottom: 26px; color: var(--paper); }
}

/* the caption is the last line: it comes back with the sprouts and stays for the photo. Until then it
   is hidden from everyone, screen readers included. On the stage it is a solid paper chip. */
.plant-fig figcaption {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  white-space: nowrap;
  bottom: 16px;
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: opacity .6s, visibility 0s .6s;
}
.plant-fig.is-done figcaption { opacity: 1; visibility: visible; transition: opacity .6s; }
/* where the caption and the button do not fit side by side, the caption takes the top corner, where the line
   of instruction was (it is gone by then), so it never wraps into a fat pill and the bed stays free */
.plant-fig.is-stack figcaption { top: 14px; left: 14px; bottom: auto; max-width: calc(100% - 28px); white-space: normal; text-wrap: balance; }

/* the one control: its label is the action for the stage in play. A solid cream pill on the soil,
   opposite the caption, in the site's small pill type. */
.plant-fig .plant-btn {
  position: absolute;
  right: 16px; bottom: 14px;
  min-height: 36px;
  padding: 0 18px;
  justify-content: center;
  font-size: 12px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink-2) 40%, transparent);
  transition: background .25s, color .25s, box-shadow .25s;
}
@media (hover: hover) {
  .plant-fig .plant-btn:not([aria-disabled="true"]):hover { background: var(--paper-2); }
}
/* resting: just after a stage changes, or while the sun crosses by itself. It says so, in looks and to a
   screen reader, and a press does nothing. It stays a target so a press there never reaches the soil. */
.plant-fig .plant-btn[aria-disabled="true"] {
  opacity: 1;
  pointer-events: auto;
  cursor: default;
  background: transparent;
  color: color-mix(in srgb, var(--paper) 80%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--paper) 50%, transparent);
}
/* a ring that reads on cream sky, dark soil and the photo alike: cream inside, ink outside */
.plant-fig .plant-btn:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--ink);
}
.plant-fig .plant-btn[aria-disabled="true"]:focus-visible {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--paper) 50%, transparent), 0 0 0 6px var(--ink);
}
/* a fingertip gets a taller target, and the caption beside it sits on the same centre line */
@media (pointer: coarse) {
  .plant-fig .plant-btn { min-height: 44px; }
  .plant-fig figcaption { bottom: 20px; }
}

/* a small frame (two columns at laptop widths, and phones): the row comes in closer to the edges */
.plant-fig.is-tight .plant-hint { left: 14px; top: 13px; right: 14px; }
.plant-fig.is-tight .plant-btn { right: 12px; bottom: 12px; padding: 0 14px; }
.plant-fig.is-tight figcaption { left: 12px; bottom: 14px; }
.plant-fig.is-tight.is-stack figcaption { top: 11px; left: 11px; bottom: auto; max-width: calc(100% - 22px); }
@media (pointer: coarse) {
  .plant-fig.is-tight figcaption { bottom: 18px; }
  .plant-fig.is-tight.is-stack figcaption { bottom: auto; }
}

/* stage changes for screen readers */
.plant-live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   The steps follow along. A finished step gets a heavy ink rule in place of
   its fine moss one; the step in play gets the start of that rule and an ink
   number. The cue is the weight of the line as much as its colour.
   -------------------------------------------------------------------------- */
.steps li.plant-step { position: relative; }
.steps li.plant-step::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -3px;
  height: 3px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .8s var(--ease-out);
}
.steps li.plant-step[aria-current="step"]::before { transform: scaleX(.28); }
.steps li.plant-step.is-done::before { transform: scaleX(1); }
.steps li.plant-step .step-num { transition: color .4s; }
.steps li.plant-step[aria-current="step"] .step-num,
.steps li.plant-step.is-done .step-num { color: var(--ink); }

/* --------------------------------------------------------------------------
   Reduced motion: states change, nothing travels
   -------------------------------------------------------------------------- */
.plant-fig.is-reduced .plant-stage,
.plant-fig.is-reduced.is-photo .plant-stage,
.plant-fig.is-reduced .plant-hint,
.plant-fig.is-reduced figcaption,
.plant-fig.is-reduced .plant-btn { transition: none; }
body.reduced .steps li.plant-step::before,
body.reduced .steps li.plant-step .step-num { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .plant-stage, .plant-fig.is-photo .plant-stage, .plant-fig .plant-hint, .plant-fig figcaption, .plant-fig .plant-btn { transition: none; }
  .steps li.plant-step::before, .steps li.plant-step .step-num { transition: none; }
}