/* vko.media #make: the Tornado can tree, from right after the hero to the work list.
   The pin is a sticky full-screen 3D layer; the manifesto scrolls over it (cans start under the text),
   then a track gives the tree room to finish and turn. make-tree.js reads one progress value for all of it.
   The words sit on one line; each lights in turn, then all four together. */
.make { position: relative; }
.make-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: 0 var(--gutter); }
.make-canvas, .make-poster { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.make-poster { object-fit: contain; object-position: 28% 55%; padding: 9svh 0; transition: opacity 600ms var(--ease); }
/* the finished-tree poster only stands in where there is no live tree, and never behind the manifesto */
.make-poster { opacity: 0; }
.make.words:not(.gl) .make-poster, .make.no-gl.words .make-poster { opacity: 1; }

.make-copy { position: relative; z-index: 2; grid-column: 2; opacity: 0; transition: opacity 400ms var(--ease); }
.make.words .make-copy { opacity: 1; }
/* the manifesto and the track scroll over the pin */
.make-flow { position: relative; z-index: 3; margin-top: -100svh; pointer-events: none; }
.make-flow .manifesto { pointer-events: auto; }
.make-track { height: 365svh; }
/* desktop progress rail: one tick per finished tier, bottom up */
.make-rail { display: none; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .make-rail { position: absolute; left: var(--gutter); top: 50%; translate: 0 -50%; z-index: 2; display: grid; gap: 7px; opacity: 0; transition: opacity 400ms var(--ease); }
  .make.words .make-rail { opacity: 1; }
  .make-rail i { display: block; width: 14px; height: 2px; border-radius: 1px; background: rgb(13 13 13 / .14); transition: background-color 300ms var(--ease), width 300ms var(--ease); }
  .make-rail i.on { width: 22px; background: var(--ink); }
  :root[data-theme="dark"] .make-rail i { background: rgb(242 242 242 / .18); }
  :root[data-theme="dark"] .make-rail i.on { background: var(--ink); }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .make-rail i { background: rgb(242 242 242 / .18); }
  :root:not([data-theme="light"]) .make-rail i.on { background: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .make-rail { display: none !important; } }
.make-words { list-style: none; margin: 0; padding: 0; display: flex; gap: .28em; white-space: nowrap; font-size: clamp(36px, 3.9vw, 64px); }
.make-words li { margin: 0; }
.make-words b { display: block; font-size: 1em; line-height: 1; font-weight: 500; letter-spacing: -.06em; color: rgb(13 13 13 / .14); transition: color 300ms var(--ease); }
.make-words li.on b, .make.all .make-words b { color: var(--ink); }

.make-next { margin: 0; padding: 8px var(--gutter) 0; }
.make-next a { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

@media (max-width: 760px) {
  /* the tree owns the top of the screen, the word line sits under it */
  .make-pin { grid-template-columns: 1fr; align-items: end; padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 20px)); }
  .make-copy { grid-column: 1; }
  .make-poster { object-position: 50% 30%; padding: 7svh 0 16svh; }
  .make-words { font-size: clamp(26px, 8.2vw, 40px); gap: .24em; }
  .make-next a { font-size: 16px; }
}

/* reduced motion: no pin, the poster and all four words stand still */
@media (prefers-reduced-motion: reduce) {
  .make { display: flex; flex-direction: column; }
  .make-flow { margin-top: 0; order: -1; }
  .make-track { display: none; }
  .make-copy { opacity: 1; }
  .make-pin { position: relative; height: auto; min-height: 0; padding-top: 64px; padding-bottom: 64px; }
  .make-poster { position: relative; grid-column: 1; grid-row: 1; height: 70svh; padding: 0; object-position: 50% 50%; }
  .make-copy { grid-column: 2; grid-row: 1; }
  .make-canvas { display: none; }
  .make-poster { opacity: 1; }
  .make-words b { color: var(--ink); }
  @media (max-width: 760px) {
    .make-poster { height: 60svh; }
    .make-copy { grid-column: 1; grid-row: 2; padding-top: 20px; }
  }
}

/* dark: dimmer unlit words */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .make-words b { color: rgb(242 242 242 / .16); }
  :root:not([data-theme="light"]) .make-words li.on b, :root:not([data-theme="light"]) .make.all .make-words b { color: var(--ink); }
}
:root[data-theme="dark"] .make-words b { color: rgb(242 242 242 / .16); }
:root[data-theme="dark"] .make-words li.on b, :root[data-theme="dark"] .make.all .make-words b { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  :root .make-words b { color: var(--ink); }
}