/*
 * botany.tech — What we offer, the app walked on a phone  (offer.css)
 * ---------------------------------------------------------------------------
 * Linked after merge.css, whose OFFER rules draw the two dark plates. Here:
 * under each big title, four steps; the press after them; the phone beside
 * them walking the app (offer.js), with the step on screen lit in its words
 * alone (no bars, no fill) and the rest quiet. The fourth is the result, the
 * reason for the first three, and carries the citrine. On a phone it is one
 * centred column: the words, the phone, the four steps as a list, the press.
 *
 *   OS    .oc.os[data-video][data-walk] (--mirror: the phone on the left on
 *         a desktop) .os-steps (.is-static) .os-step (.is-now .is-result)
 *         .os-btn .os-n .os-t · .os-phone (.has-video) .ph-s .ph-dim .os-tap
 *         .os-video
 * ---------------------------------------------------------------------------
 */

/* ---------- the screen ---------- */
/* The app's own screens are phone.css .ph-s (one at a time, sheets rising
   under the scrim). A recording, once there is one, lies over them. */
/* The recordings are the app's screen under the status bar (390x790 of the
   phone's 390x844 points): they start below the frame's own 9:41 bar
   (phone.css .ph-sb, the top 54 points) and run to the foot. */
.os-video{position:absolute;left:0;right:0;bottom:0;top:calc(54 / 844 * 100%);z-index:4;display:none;width:100%;height:calc(790 / 844 * 100%);object-fit:cover;background:#FAFAF8}
.os-phone.has-video .os-video{display:block}
.os-phone.has-video .os-tap{display:none}
/* the press: a citrine dot that lands and gives, and a ring going out from
   it -- the finger, made visible, in the brand's one bright colour */
.os-tap{position:absolute;left:50%;top:50%;z-index:5;width:calc(30 * var(--u));height:calc(30 * var(--u));
  margin:calc(-15 * var(--u)) 0 0 calc(-15 * var(--u));pointer-events:none;opacity:0}
.os-tap::before,.os-tap i{content:'';position:absolute;inset:0;border-radius:50%}
.os-tap::before{background:var(--cit500);box-shadow:0 0 0 calc(1.5 * var(--u)) rgb(255 255 255/.9),0 calc(4 * var(--u)) calc(12 * var(--u)) rgb(16 15 15/.28)}
.os-tap i{border:calc(2.5 * var(--u)) solid var(--cit500);opacity:0}
.os-tap.is-on{animation:os-tap-dot .42s cubic-bezier(.3,.7,.4,1) both}
.os-tap.is-on i{animation:os-tap-ring .55s cubic-bezier(.2,.7,.3,1) .06s both}
@keyframes os-tap-dot{
  0%{opacity:0;transform:scale(1.5)}
  30%{opacity:1;transform:scale(.82)}
  60%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1)}
}
@keyframes os-tap-ring{
  0%{opacity:.9;transform:scale(.8)}
  100%{opacity:0;transform:scale(2.6)}
}

/* ---------- the steps ---------- */
.os-steps{list-style:none;margin:22px 0 0;padding:0;width:100%;max-width:440px;position:relative;z-index:1;border-bottom:1px solid rgb(241 242 234/.14)}
.os-step{border-top:1px solid rgb(241 242 234/.14)}
.os-btn{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);align-items:baseline;width:100%;padding:11px 0 12px;text-align:left;color:#F1F2EA;cursor:pointer}
.os-n{font-family:var(--mono);font-size:12px;line-height:18px;letter-spacing:.04em;color:rgb(241 242 234/.5);transition:color .3s var(--ease)}
.os-t{font-size:17px;line-height:22px;font-weight:500;letter-spacing:-.015em;color:rgb(241 242 234/.42);transition:color .3s var(--ease)}
/* on screen: lit; every other step stays quiet */
.os-step.is-now .os-t{color:#F1F2EA}
.os-step.is-now .os-n{color:#F1F2EA}
/* the fourth is what the other three were for */
.os-step.is-result .os-n{color:var(--cit500)}
.os-step.is-result.is-now .os-t{color:var(--cit500)}
@media (hover:hover) and (pointer:fine){.os-btn:hover .os-t{color:#F1F2EA}}
.os-btn:focus-visible{outline:2px solid var(--cit500);outline-offset:2px;border-radius:4px}
/* standing still (reduced motion): every step readable */
.os-steps.is-static .os-t{color:#F1F2EA}
.os-steps.is-static .os-step.is-result .os-t{color:var(--cit500)}
/* the press comes after the steps */
.os .oc-body .btn{margin-top:24px}

/* ---------- the phone, smaller than phone.css draws it ---------- */
/* The screen's width is also held to the window's height, so the whole
   phone (about 2.24 x the screen's width, frame included) and what stands
   with it stay in view: on a phone, the header, the season bar and the
   plate's title (~260px; the list of steps follows under the screen); on a
   desktop, the header, the season bar and the plate's own padding. */
.os .os-phone{--sw:clamp(150px,min(calc(100vw - 140px),calc((100svh - 260px) / 2.24)),188px)}
@media (min-width:640px){.os .os-phone{--sw:clamp(170px,calc((100svh - 280px) / 2.24),200px)}}
@media (min-width:900px){.os .os-phone{--sw:clamp(184px,calc((100svh - var(--sbar-h) - var(--hdr-h) - 120px) / 2.24),216px)}}

/* ---------- a phone: one centred column ---------- */
/* Wave 3: the label, the title, the screen, then all four steps as a list
   under it (each its number and its words, the one on screen lit, the rest
   quiet, no bars, no rules), then the press; every line centred, the
   section's own heading too. Standing still the list is the same, every
   step readable (.is-static). */
@media (max-width:899px){
  #offer .head{text-align:center;align-items:center;margin-inline:auto}
  .os{align-items:center;text-align:center}
  .os .oc-body{display:contents}
  .os .oc-body > .label{order:1;align-self:center}
  .os .oc-title{order:2}
  .os .os-phone{order:3;margin:20px auto 16px}
  .os .os-steps{order:4;margin-top:0;max-width:none;border-bottom:0}
  .os .os-step{border-top:0}
  .os .os-btn{display:flex;justify-content:center;align-items:baseline;gap:10px;padding:7px 0 8px;text-align:center}
  .os .os-n{flex:none}
  .os .oc-body .btn{order:5;align-self:center;margin-top:16px}
}

@media (min-width:640px){.os .os-t{font-size:18px;line-height:24px}}

/* ---------- a desktop: the words and steps, the phone beside them ---------- */
@media (min-width:900px){
  .os-steps{margin-top:28px}
  .os .os-t{font-size:20px;line-height:26px}
  .os-btn{grid-template-columns:44px minmax(0,1fr);padding:12px 0 13px}
  .os .oc-body .btn{margin-top:28px}
  /* the second plate turns round: phone left, words right */
  .oc.os--mirror{grid-template-columns:auto minmax(0,1fr);padding:40px 56px 40px clamp(48px,7vw,104px)}
  .oc.os--mirror .oc-body{order:2}
  .oc.os--mirror .os-phone{order:1}
}

@media (prefers-reduced-motion:reduce){
  .os-n,.os-t{transition:none}
  .os-tap{display:none}
}