/* Makateeb homepage: the drawn scenes under the hero (inc/landing_art_scenes.php draws them,
   landing-motion-scenes.js moves them with the driver in landing-motion.js). Same contract as landing-motion.css:
   - with no class this file draws the FINISHED still: no script, reduced motion and Save-Data see only that;
   - every rule that hides sits in @media (prefers-reduced-motion:no-preference), starts with html.lm-js and
     needs .lm-pre, a class only the script adds (to what it is about to animate) and removes, and :not(.lm-done)
     gives the still back;
   - only transform and opacity move on boxes; stroke-dashoffset, fill-opacity and opacity on SVG parts. */

/* ---------- layered drawings (pricing, finale): the first <svg> sizes the box, the others lie over it; every layer
   inherits the line work's paint */
.lm-stack{position:relative;display:inline-block;vertical-align:top;line-height:0;fill:none;stroke:#43303E;stroke-linecap:round;stroke-linejoin:round}
.lm-stack>svg:first-child{display:block;max-width:100%;height:auto}
.lm-stack>:not(:first-child),.lm-finale__carry>svg{position:absolute;inset:0;width:100%;height:100%}

/* ---------- the airmail thread: a lane down the page edge on wide screens, a stitch per section below 1000 px.
   The lane is one stretch per section, all at half the page gutter; the postmark sits in the top padding. */
.lm-sec{position:relative;--w:min(92px,calc((var(--mk-pad) - 4px)*2.08))}
.lm-lane{position:absolute;top:0;bottom:0;inset-inline-start:calc(var(--mk-pad)/2 - 2.5px);width:5px;overflow:hidden;pointer-events:none}
.lm-lane i,.lm-stitch b{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#B76E79 0 2.1px,transparent 2.1px 4.2px,#43303E 4.2px 6.4px,transparent 6.4px 8.5px)}
.lm-lane--first{top:calc(10px + var(--w)*.26)}
.lm-lane--last{bottom:auto;height:calc(10px + var(--w)*.26)}
.mk-guest-feature>.lm-lane{top:-20px;bottom:-32px}
/* the ring (about half the postmark's width) must fit the gutter; the postmark clears the first line of text by 5 px
   or more in every language (Arabic headings sit highest) */
.lm-pm{position:absolute;top:10px;inset-inline-start:calc(var(--mk-pad)/2 - var(--w)*.26);width:var(--w);pointer-events:none;z-index:1}
.lm-pm svg{display:block;width:100%;height:auto;transform-origin:26% 50%}
[dir=rtl] .lm-pm svg{transform-origin:74% 50%}
.mk-guest-feature .lm-pm{--lm-paper:#F4F2ED}
.mk-guest-feature>.lm-pm{top:13px}
.lm-stitch{display:none}
.lm-lane-tk{position:absolute;top:-18px;inset-inline-start:calc(var(--mk-pad)/2 - 12px);width:24px;pointer-events:none;z-index:2}
.lm-lane-tk svg{display:block;width:100%;height:auto}
@media (max-width:1000px){
  .lm-lane,.lm-lane-tk{display:none}
  .lm-sec{--w:84px}
  .lm-pm{top:14px;inset-inline-start:var(--mk-pad)}
  .lm-stitch{display:block;position:absolute;bottom:calc(100% - 2px);inset-inline-start:calc(26% - 2.5px);width:5px;height:16px;overflow:hidden}
  .mk-guest-feature{--w:70px}
  .mk-guest-feature>.lm-pm{top:5px}
  .mk-guest-feature .lm-stitch{display:none}
}
@media (max-width:700px){
  .lm-sec,.mk-guest-feature{--w:52px}
  .lm-pm{top:8px;inset-inline-start:6%}
  .lm-stitch{height:10px}
  .mk-guest-feature>.lm-pm{top:3px}
}

/* the first postmark is the postage mark on the pocket front (#examples is the hero envelope's pocket, H's band
   is its first child): under the V's seam, over the band, on the pocket's paper; the lane starts at it */
.lm-pocket-sec>.lm-pm{top:calc(var(--lm-v) + 8px);z-index:3;--lm-paper:#FAFAF7}
.lm-pocket-sec>.lm-pm .lm-stitch{display:none}
.lm-pocket-sec>.lm-lane{z-index:2}
.lm-pocket-sec>.lm-lane--first{top:calc(var(--lm-v) + 8px + var(--w)*.26)}
@media (max-width:700px){.lm-pocket-sec>.lm-pm{top:calc(var(--lm-v) + 6px)}}

/* ---------- the guest list: homes under the copy, marks in the pills, the flight layer */
.lm-homes-box{margin-top:28px;max-width:520px}
.lm-homes-box svg{display:block;width:100%;height:auto}
.mk-guest-status .lm-status-icon{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.3em;margin-block:-.2em;margin-inline:-.3em .2em}
/* a counter's digits are its only text; while it counts, its aria-hidden <i> draws the running figure over them */
.lm-num{position:relative;display:inline-block;text-align:end}
.lm-num__o{font-style:inherit}
.lm-num__o::after{position:absolute;inset:0;-webkit-text-fill-color:currentColor}
.lm-fly{position:absolute;inset:0;pointer-events:none;z-index:3}
.lm-tk{position:absolute;display:block}
.lm-tk svg{display:block;width:100%;height:auto}
@media (max-width:700px){.lm-homes-box{margin-top:22px}}

/* ---------- pricing: the drawing heads each card, in its flow */
.lm-svc{position:relative;width:120px;margin:-6px 0 2px;align-self:flex-start}
.lm-svc .lm-stack,.lm-svc .lm-stack>svg:first-child,.lm-fin .lm-stack,.lm-fin .lm-stack>svg:first-child{width:100%}
@media (max-width:700px){.lm-svc{width:104px;margin:-4px 0 2px}}
/* a ring that answers the press, and a glint across the brand seal: nothing of either in the still */
.lm-pulse,.lm-sglint{position:absolute;aspect-ratio:1;border-radius:50%;pointer-events:none}
.lm-pulse{box-sizing:border-box;border:1.5px solid #B76E79;opacity:0}
.lm-sglint{overflow:hidden}
.lm-sglint i{position:absolute;top:-25%;left:0;width:34%;height:150%;opacity:0;background:linear-gradient(90deg,#fff0,#fff4ec99 50%,#fff0);transform:translateX(-140%) rotate(18deg)}

/* ---------- steps: an icon before each step, and a thread through them (it draws as the list scrolls by:
   --lm-t, unset = 1 = drawn). Each icon sits on a patch of paper 3 px wider, so the thread stops short of all three
   alike (it would strike through the slim nib) */
.lm-steps{position:relative}
.lm-step{position:relative;z-index:1;display:inline-block;width:22px;height:22px;vertical-align:middle;margin-top:-3px;margin-inline-end:12px;background:#FAFAF7;box-shadow:0 0 0 3px #FAFAF7}
.lm-step svg{display:block;width:100%;height:100%}
.lm-steps::after{content:"";position:absolute;inset-inline-start:46.5px;top:36px;bottom:36px;width:1px;background:#B76E79;opacity:.55;transform-origin:50% 0;transform:scaleY(var(--lm-t,1));pointer-events:none}

/* ---------- the finale above the closing words; the dove flies in from the side, never widening the page */
.lm-fin{display:block;width:420px;max-width:100%;margin:0 auto 22px}
.mk-closing.lm-sec{overflow-x:clip}

/* ---------- motion states (script only). Nothing here can apply without html.lm-js, no-preference and .lm-pre. */
@media (prefers-reduced-motion:no-preference){
  html.lm-js .lm-pre:not(.lm-done){visibility:hidden}
  /* the bars stay in place (their rows must not move), only empty */
  html.lm-js .mk-guest-bar__seg.lm-pre:not(.lm-done){visibility:visible;animation:none;transform:scaleX(0)}
  /* words and figures are never hidden, only see-through, so readers and find in page keep them */
  html.lm-js .mk-guest-status.lm-pre:not(.lm-done){visibility:visible;opacity:0}
  html.lm-js .lm-num.lm-pre:not(.lm-done){visibility:visible;-webkit-text-fill-color:transparent}
  html.lm-js .lm-num.lm-pre:not(.lm-done)>.lm-num__o::after{content:attr(data-n)}
}
/* forced colours paint text whatever its fill: the counters just show their numbers */
@media (forced-colors:active){
  html.lm-js .lm-num.lm-pre:not(.lm-done){-webkit-text-fill-color:currentColor}
  .lm-num__o{display:none}
}