/* heyorb.ai, "How it works" in motion: the list stays in place while the page scrolls
   through it (story.js marks the step you are on). Wide screens: the three steps on the
   left with a star that travels down them, one phone on the right whose screen changes.
   Phones: the phone on top, the step's words under it, three dots. All of it only with
   motion on (.m), a screen tall enough and a browser that knows the small viewport height
   (svh: the pinned box must fit under a phone's address bar); otherwise the plain row in
   sections.css. */
@supports (height: 100svh) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (min-height: 620px) {
    .m .story { height: calc(100svh + 170vh); }
    .m .story-pin { position: sticky; top: var(--bar); height: calc(100svh - var(--bar)); display: grid; align-content: center; }
    .m .steps { --spw: clamp(236px, 33svh, 320px); position: relative; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 4.4svh, 48px); align-content: center; min-height: calc(var(--spw) * 2.2); padding: 0 calc(var(--spw) + clamp(48px, 12vw, 230px)) 0 46px; }
    .m .step { display: block; cursor: pointer; }
    .m .step .phone { --pw: var(--spw); position: absolute; right: clamp(16px, 9vw, 150px); top: 50%; translate: 0 -50%; margin: 0; }
    .m .step h3 { font-size: clamp(28px, 3vw, 40px); transition: color var(--ui) var(--ease); }
    .m .step p { max-width: 25em; font-size: var(--t-lead); transition: opacity var(--ui) var(--ease); }
    .m .step:not(.on) h3 { color: var(--ink-3); }
    .m .step:not(.on) p { opacity: .4; }
    /* the rail and the star on it: your thought, on its way */
    .m .steps::before { content: ""; position: absolute; left: 8px; top: var(--y0, 0px); width: 1px; height: calc(var(--y1, 0px) - var(--y0, 0px)); background: var(--line-hi); }
    .m .steps::after { content: ""; position: absolute; left: 4px; top: -4.5px; width: 9px; height: 9px; border-radius: 50%; background: #FFF6E2; box-shadow: 0 0 0 4px rgba(245, 216, 154, .14), 0 0 16px 5px rgba(245, 216, 154, .3); transform: translateY(var(--y, 0px)); transition: transform .9s var(--spring); }
    .m .steps-note { margin-top: clamp(20px, 4svh, 40px); padding-left: 46px; }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 899px) and (min-height: 560px) {
    .m .story { height: calc(100svh + 150svh); }
    .m .story-pin { position: sticky; top: var(--bar); height: calc(100svh - var(--bar)); display: grid; grid-template-rows: minmax(0, 1fr) auto auto; row-gap: 10px; padding-block: 4px 14px; }
    .m .steps { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-auto-columns: auto; gap: 0; margin-inline: 0; padding-inline: 0; overflow: visible; scroll-snap-type: none; }
    .m .step { grid-area: 1 / 1; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 14px; text-align: center; }
    /* story.js measures the words and gives the phone the height they leave (--mpw) */
    .m .step .phone { --pw: var(--mpw, min(62vw, 250px, calc((100svh - var(--bar) - 214px) * .46))); margin: 0; align-self: center; }
    .m .step-copy { justify-items: center; align-content: start; min-height: var(--copy-h, 136px); opacity: 0; transform: translateY(12px); transition: opacity var(--touch) var(--ease), transform var(--touch) var(--ease); }
    .m .step.on .step-copy { opacity: 1; transform: none; transition: opacity var(--ui) var(--ease) .12s, transform .8s var(--spring) .12s; }
    .m .step p { max-width: 21em; }
    .m .story-dots { display: flex; justify-content: center; gap: 12px; }
    .story-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-hi); transition: background-color var(--ui) var(--ease), transform var(--ui) var(--pop), box-shadow var(--ui) var(--ease); }
    .story-dots i.on { background: #FFF6E2; transform: scale(1.4); box-shadow: 0 0 0 3px rgba(245, 216, 154, .14), 0 0 12px 3px rgba(245, 216, 154, .3); }
    .m .steps-note { margin-top: 0; text-align: center; }
  }
  /* In both: the frame stays where it is and the next screen comes up out of its dark
     glass in a third of a second, never through the screen before, so two apps never show
     at once. The status bar must not move. */
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (min-height: 620px), (prefers-reduced-motion: no-preference) and (max-width: 899px) and (min-height: 560px) {
    .m .step .phone { opacity: 0; transition: opacity 0s linear .34s; }
    .m .step.on .phone { opacity: 1; z-index: 1; transition: none; }
    .m .step .screen img { opacity: 0; transition: opacity 0s linear .34s; }
    .m .step.on .screen img { opacity: 1; transition: opacity .32s var(--ease); }
  }
  /* A step you can click brightens under the mouse. */
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (min-height: 620px) and (hover: hover) {
    .m .step:not(.on):hover h3 { color: var(--ink-2); }
    .m .step:not(.on):hover p { opacity: .7; }
  }
}