/* Zeal Publishers — the B story stage ("Manuscript to Masterpiece"), lifted from concept B
 * (b- -> st-). One object, five states, driven by data-step on an ancestor: motion.js
 * [data-scrolly] on /how-it-works, [data-steps-auto] in the compact home band. */
/* ---------- Manuscript sheet (hero + stage) ---------- */
.st-sheet {
  position: relative; container-type: inline-size; overflow: hidden; border-radius: 2px;
  background: #FBF8F1; color: var(--z-charcoal); padding: 12% 11% 10%;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 30px 60px -30px rgba(0,0,0,.65);
}
.st-sheet--hero { aspect-ratio: 8.5 / 11; }
.st-sheet__chap { display: block; margin-bottom: 7cqw; text-align: center; font-family: var(--z-font-display); font-style: italic; font-size: 6cqw; line-height: 1.25; color: var(--z-green); }
.st-sheet__lines { display: block; }
.st-sheet__lines i { display: block; width: var(--w); height: 1.2cqw; margin-bottom: 2.6cqw; border-radius: .6cqw; background: rgba(40,40,40,.4); }

/* ---------- The story ---------- */
.st-story { padding-top: var(--z-section); background: var(--z-green-950); }
.st-story__head { text-align: center; display: grid; justify-items: center; gap: 1rem; }
.st-story__head h2 { font-size: var(--z-fs-3xl); }
.st-story__grid { position: relative; display: grid; grid-template-columns: 1fr; }
.st-story__stage { position: sticky; top: var(--z-header-h); z-index: 2; height: calc(100svh - var(--z-header-h)); align-self: start; display: grid; place-items: center; }
@media (min-width: 900px) {
  .st-story__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: clamp(2rem, 5vw, 6rem); padding-left: 2.5rem; }
  .st-story__stage { order: 2; }
  .st-steps { order: 1; }
}
.st-steps { list-style: none; padding: 0; }
.st-step { min-height: 88svh; display: flex; flex-direction: column; justify-content: center; padding-block: 3rem; transition: opacity var(--z-dur-3) var(--z-ease-out); }
.js .st-step { opacity: .26; }
.js .st-step.is-active { opacity: 1; }
.st-step__num { font-family: var(--z-font-display); font-size: clamp(3.75rem, 2.75rem + 4vw, 7rem); line-height: .9; color: transparent; -webkit-text-stroke: 1.2px rgba(239,154,16,.75); }
.st-step__stage { margin-top: 1.1rem; font-size: var(--z-fs-xs); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--z-amber); }
.st-step__title { margin-top: .5rem; font-size: var(--z-fs-2xl); font-weight: 500; color: var(--z-cream); }
.st-step__text { margin-top: 1rem; max-width: 33rem; font-size: var(--z-fs-md); line-height: 1.55; color: var(--z-green-200); }
.st-step__fact { display: inline-flex; align-items: center; gap: .55rem; width: fit-content; margin-top: 1.6rem; padding: .55rem 1.05rem .45rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--z-fs-sm); color: var(--z-cream); }
.st-step__fact svg { width: 1rem; height: 1rem; color: var(--z-amber); }
.st-rail { position: absolute; left: 0; top: 10svh; bottom: 10svh; width: 2px; background: var(--line); display: none; }
.st-rail i { display: block; height: 100%; background: var(--z-amber); transform: scaleY(var(--progress, 0)); transform-origin: top; }
@media (min-width: 900px) { .st-rail { display: block; } }
@media (max-width: 899px) {
  .st-story__stage { height: 46svh; background: linear-gradient(var(--z-green-950) 88%, rgba(2,29,19,0)); }
  .st-step { min-height: 72svh; justify-content: flex-start; padding-block: 1.5rem 2rem; }
  .st-step__num { font-size: 3.25rem; }
  .st-step__title { font-size: var(--z-fs-xl); }
  .st-step__text { font-size: var(--z-fs-base); }
}

/* ---------- Stage: one object, five states ---------- */
.st-scene {
  position: relative; container-type: size; aspect-ratio: 5 / 6; perspective: 1500px;
  width: min(660px, 100%, calc((100svh - var(--z-header-h) - 2rem) * .8333));
}
@media (max-width: 899px) { .st-scene { width: min(88%, calc((46svh - .5rem) * .8333)); } }
.st-scene__glow { position: absolute; left: 8cqw; right: 8cqw; top: 14cqw; height: 90cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(239,154,16,.18), rgba(239,154,16,0)); }
.st-scene__label { position: absolute; left: 0; right: 0; top: 4cqw; height: 4cqw; text-align: center; }
.st-scene__label span {
  position: absolute; left: 0; right: 0; opacity: 0; transform: translateY(1.5cqw);
  font-size: 2.6cqw; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--z-amber);
  transition: opacity var(--z-dur-3) var(--z-ease-out), transform var(--z-dur-3) var(--z-ease-out);
}
[data-step="0"] [data-for="0"], [data-step="1"] [data-for="1"], [data-step="2"] [data-for="2"],
[data-step="3"] [data-for="3"], [data-step="4"] [data-for="4"] { opacity: 1; transform: none; }

.st-book {
  position: absolute; left: 27cqw; top: 22cqw; width: 46cqw; height: 69cqw; transform-style: preserve-3d;
  transition: transform 1.25s var(--z-ease-out);
}
.st-book > * { position: absolute; }
.st-book .st-sheet { inset: 0; padding: 12% 11%; transition: transform 1s var(--z-ease-out), opacity .6s var(--z-ease-out); }
.st-sheet--1 { transform: translateZ(2.6cqw) rotate(-2deg); }
.st-sheet--2 { transform: translateZ(1.8cqw) translate(2cqw, 1cqw) rotate(3.5deg); background: #F5F0E4; }
.st-sheet--3 { transform: translateZ(1cqw) translate(-2.2cqw, 2cqw) rotate(-6deg); background: #EFE8D8; }

/* editor's marks: the one place the brand red appears */
.st-marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st-mark { fill: none; stroke: var(--z-red); stroke-width: .7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--z-ease-out); }
.st-mark--2 { transition-delay: .25s; } .st-mark--3 { transition-delay: .5s; } .st-mark--4 { transition-delay: .75s; } .st-mark--5 { transition-delay: .95s; }
.st-note { position: absolute; font-family: var(--z-font-display); font-style: italic; font-size: 5.4cqw; line-height: 1; color: var(--z-red-ink); opacity: 0; transform: translateY(2cqw) rotate(var(--r, -6deg)); transition: opacity .5s, transform .7s var(--z-ease-out); white-space: nowrap; }
.st-note--1 { right: 2cqw; top: 15cqw; --r: -7deg; transition-delay: .5s; }
.st-note--2 { left: 2cqw; top: 34cqw; --r: -4deg; transition-delay: .8s; }
.st-note--3 { left: 58cqw; top: 55cqw; --r: 5deg; transition-delay: 1.05s; }

.st-cover {
  inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2cqw; padding: 7cqw;
  text-align: center; color: var(--z-amber); border-radius: .5cqw 1.2cqw 1.2cqw .5cqw;
  background-color: var(--z-green);
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 4px), linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 8%, rgba(255,255,255,.07) 10%, rgba(255,255,255,0) 26%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  transform-origin: 0 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: translateZ(3cqw) rotateY(-150deg); opacity: 0;
  transition: transform 1.3s var(--z-ease-in-out), opacity .35s linear .15s;
}
.st-cover__frame { position: absolute; inset: 2.4cqw 2.4cqw 2.4cqw 3.4cqw; border: 1px solid rgba(239,154,16,.6); border-radius: .4cqw; }
.st-cover__kicker { font-size: 1.9cqw; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.st-cover__title { font-family: var(--z-font-display); font-size: 8cqw; font-weight: 500; line-height: .98; letter-spacing: -.02em; color: var(--z-cream); }
.st-cover__rule { width: 6cqw; height: 2px; background: var(--z-amber); }
.st-cover__author { font-family: var(--z-font-display); font-style: italic; font-size: 3cqw; color: var(--z-parchment); }
.st-cover__quill { position: absolute; bottom: 5cqw; width: 6cqw; height: auto; }
.st-spine {
  top: 0; bottom: 0; left: 20cqw; width: 6cqw; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 4cqw 0 3cqw; background: linear-gradient(90deg, #04301F, #0A5A3F 45%, #053A29); color: var(--z-amber);
  transform: rotateY(-90deg) translateZ(23cqw); opacity: 0; transition: opacity .5s; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.st-spine span { writing-mode: vertical-rl; font-family: var(--z-font-display); font-size: 2.4cqw; font-weight: 600; color: var(--z-cream); }
.st-spine b { font-size: 1.5cqw; letter-spacing: .2em; text-transform: uppercase; writing-mode: vertical-rl; font-weight: 600; }
.st-edges {
  top: .9cqw; bottom: .9cqw; left: 20cqw; width: 6cqw;
  background: repeating-linear-gradient(90deg, #F6EFE2 0 .35cqw, #DCCBB0 .35cqw .5cqw);
  transform: rotateY(90deg) translateZ(22.4cqw); opacity: 0; transition: opacity .5s; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}

/* Shelf (final state) */
.st-shelf { position: absolute; inset: 0; opacity: 0; transform: translateY(5cqw); transition: opacity .8s var(--z-ease-out), transform 1.1s var(--z-ease-out); }
.st-shelf__board { position: absolute; left: 2cqw; right: 2cqw; top: 103cqw; height: 2.6cqw; border-radius: .5cqw; background: linear-gradient(#0A5A3F, #053A29); box-shadow: 0 3cqw 5cqw -2cqw rgba(0,0,0,.7); }
.st-shelf__group { position: absolute; bottom: 17cqw; display: flex; align-items: flex-end; gap: .8cqw; }
.st-shelf__group--l { right: 66cqw; }
.st-shelf__group--r { left: 66cqw; }
.st-shelf__group i {
  display: block; width: var(--w); height: var(--h); border-radius: .5cqw .5cqw 0 0; background-color: var(--c);
  background-image: linear-gradient(90deg, rgba(0,0,0,.28), rgba(255,255,255,.14) 30%, rgba(0,0,0,.22)), linear-gradient(transparent 4cqw, rgba(239,154,16,.7) 4cqw, rgba(239,154,16,.7) 4.4cqw, transparent 4.4cqw);
}
.st-shelf__talker { position: absolute; top: 106.5cqw; left: 50%; transform: translateX(-50%) rotate(-2deg); padding: 1cqw 2.4cqw .8cqw; border-radius: .5cqw; background: var(--z-amber); color: var(--z-green-950); font-size: 2.3cqw; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 1.5cqw 3cqw -1cqw rgba(0,0,0,.5); }

/* ---- state 1: the edit ---- */
[data-step="1"] .st-sheet--1, [data-step="2"] .st-sheet--1 { transform: translateZ(2.6cqw); }
[data-step="1"] .st-sheet--2, [data-step="2"] .st-sheet--2 { transform: translateZ(1.8cqw) translate(.5cqw, .5cqw) rotate(.6deg); }
[data-step="1"] .st-sheet--3, [data-step="2"] .st-sheet--3 { transform: translateZ(1cqw) translate(-.4cqw, .9cqw) rotate(-.8deg); }
[data-step="1"] .st-mark, [data-step="2"] .st-mark { stroke-dashoffset: 0; }
[data-step="1"] .st-note, [data-step="2"] .st-note { opacity: 1; transform: rotate(var(--r)); }
/* ---- state 2: the cover closes over the pages ---- */
[data-step="2"] .st-cover, [data-step="3"] .st-cover, [data-step="4"] .st-cover { transform: translateZ(3cqw); opacity: 1; transition: transform 1.3s var(--z-ease-in-out), opacity .2s linear; }
[data-step="2"] .st-spine, [data-step="3"] .st-spine, [data-step="4"] .st-spine,
[data-step="2"] .st-edges, [data-step="3"] .st-edges, [data-step="4"] .st-edges { opacity: 1; }
/* ---- state 3: a printed, bound book ---- */
[data-step="3"] .st-book { transform: translateY(-1cqw) rotateX(7deg) rotateY(34deg) rotateZ(-2deg); }
[data-step="3"] .st-sheet, [data-step="4"] .st-sheet { opacity: 0; }
/* ---- state 4: face-out on the shelf ---- */
[data-step="4"] .st-book { transform: translateY(25cqw) scale(.62) rotateY(18deg); }
[data-step="4"] .st-shelf { opacity: 1; transform: none; transition-delay: .2s; }

/* Job 2 (/how-it-works on phones): a shorter stage so the active step's text stays in
   clear view between the stage and the mobile call bar. */
@media (max-width: 899px) {
  .st-story__stage { height: 40svh; }
  .st-story .st-scene { width: min(80%, calc((40svh - .5rem) * .8333)); }
  .st-step { min-height: 62svh; padding-block: 1rem 2rem; }
}