/* runAtlas home, block "Talk to us" (the closing: the cloth, then your own desk): self-contained. Markup _build/home_blocks/closing.html,
   scripts assets/js/cloth.js + assets/js/home-closing.js; uses the shared .close-h/.ch-line/.ch-word/.giant/.mail/.lede roles from site.css.
   Moved out of site.css unchanged by L2 (r14). The .orb-glow rules are copied here and also stay in site.css (Contact uses them). */
.close{position:relative;background:var(--bg);height:calc(max(100svh,640px) + 55vh)}
.close-stage{position:sticky;top:0;height:max(100svh,640px);overflow:hidden;background:#0b120b}
.close-pic{position:absolute;left:50%;top:50%;width:max(100%,150svh);max-width:none;aspect-ratio:3 / 2;height:auto;transform:translate(-50%,-50%)}
.orb-glow{position:absolute;left:50%;top:50%;width:max(100%,150svh);aspect-ratio:3 / 2;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle at 51.6% 59.5%,rgba(255,250,240,.55) 0,rgba(255,236,220,.22) 5.5%,rgba(255,200,180,.06) 11%,transparent 16%);mix-blend-mode:screen;opacity:0;transition:opacity 1.6s var(--ease)}
.close.shown .orb-glow{opacity:1;animation:breathe 5.5s ease-in-out 1.6s infinite}
.cloth,.cloth-still{position:absolute;inset:0;width:100%;height:100%}
.cloth-still{background:#0b120b url(../img/silk_green.webp) 50% 0 / cover no-repeat;transition:transform 2.4s var(--ease-io),opacity 1s 1.6s;display:none}
.close.nogl .cloth-still{display:block}
.close.nogl.shown .cloth-still{transform:translateY(102%) rotate(2deg);opacity:0}
.close-stage::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,6,.42) 0,rgba(6,10,6,0) 44%,rgba(6,10,6,0) 70%,rgba(6,10,6,.55));pointer-events:none;z-index:1}
.close-copy{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;padding-top:clamp(92px,11svh,112px);padding-bottom:clamp(36px,6svh,64px)}
.close-act{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:clamp(20px,3svh,32px)} /* L2 r14f (client 247): the email field, the primary call to action, sits with the question, above the desk */
.close-act .mail{width:min(560px,100%)}
.close-act .lede{color:rgba(255,255,255,.92)}
/* L2 r14f: the desk sits a little lower so the field above it never touches the sphere (picture and glow move together) */
.close-pic,.orb-glow{transform:translate(-50%,-47%)}
@media (max-width:760px){
  .close{height:auto}
  /* zip 22 Oct (client: "orb should center in mobile and view"): the sphere is centred on the screen and sits whole under the
     field; home-closing.js measures and sets --close-dx/--close-dy, and on a screen too short for it at the picture's size
     --close-k scales the desk down until it fits. The wall's own green fills the stage behind the words where the picture then
     no longer reaches, the picture's top edge faded into it so there is no seam. */
  .close-stage{position:relative;height:max(100svh,680px);background:#5f6647}
  .close-pic{width:max(100%,190svh);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%);mask-image:linear-gradient(180deg,transparent 0,#000 9%)}
  .orb-glow{width:max(100%,190svh)}
  .close-pic,.orb-glow{transform:translate(calc(-50% + var(--close-dx,0px)),calc(-38% + var(--close-dy,0px))) scale(var(--close-k,1))}
}
@media (prefers-reduced-motion:reduce){
  .cloth-still{transition:none!important}
  .orb-glow{animation:none!important}
  .orb-glow{opacity:1}
}
/* L2 (client 250: "make it shout less"): the question is one heading at the h1 role, no giant word */
.close .close-h{display:block;font:var(--w-h1) var(--s-h1)/1.04 var(--f);width:min(12em,100%);margin:0 auto}
.close .close-h .ch-line,.close .close-h .ch-word{display:inline;margin:0;font:var(--w-h1) var(--s-h1)/1.04 var(--f);letter-spacing:-.038em;color:#fff}
/* L2 (client 250): only the orb and the plant remain. The orb glows like an energy ball resting on the desk; the plant drifts a few px.
   Layers share the picture's box (P1: orb centre 51.86% / 59.62%, radius 9.15% of the width; plant full frame). */
.close-layer{position:absolute;left:50%;top:50%;width:max(100%,150svh);aspect-ratio:3 / 2;transform:translate(-50%,-47%);pointer-events:none}
.close-plant{position:absolute;inset:0;width:100%;height:100%;animation:plantBob 7s ease-in-out infinite}
.orb-energy{position:absolute;left:51.86%;top:59.62%;width:18.3%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle at 46% 42%,rgba(255,253,244,.85) 0,rgba(255,240,214,.42) 30%,rgba(255,220,190,.12) 56%,transparent 70%);animation:orbPulse 4.8s ease-in-out infinite}
.orb-energy::before{content:'';position:absolute;inset:8%;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,250,235,0) 0deg,rgba(255,244,222,.55) 50deg,rgba(255,250,235,0) 120deg,rgba(255,236,210,.4) 200deg,rgba(255,250,235,0) 280deg,rgba(255,244,222,.5) 330deg,rgba(255,250,235,0) 360deg);
  filter:blur(6px);animation:orbSpin 9s linear infinite}
.orb-energy::after{content:'';position:absolute;left:50%;top:96%;width:190%;height:46%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,236,206,.42) 0,rgba(255,226,190,.14) 45%,transparent 72%);animation:orbPool 4.8s ease-in-out infinite}
@keyframes orbPulse{0%,100%{opacity:.78;transform:translate(-50%,-50%) scale(.97)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@keyframes orbPool{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes plantBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (max-width:760px){.close-layer{width:max(100%,190svh);transform:translate(calc(-50% + var(--close-dx,0px)),calc(-38% + var(--close-dy,0px))) scale(var(--close-k,1))}}
@media (prefers-reduced-motion:reduce){.close-plant,.orb-energy,.orb-energy::before,.orb-energy::after{animation:none}}
/* the words wait behind the cloth (client 17 Oct: "text behind curtain, not visible initially"): the question, its line and the field
   are hidden while the cloth hangs and fade in as it comes off (home-closing.js adds .shown 0.9 s after the cloth is let go, the words
   start 0.8 s later, when the desk shows; the
   fallback still cloth starts falling at .shown, so its words wait a little longer). Without script, or with reduced motion, they show. */
.js .close .close-copy{opacity:0;transition:opacity .8s var(--ease) .8s}
.js .close.nogl .close-copy{transition-delay:1.2s}
.js .close.shown .close-copy{opacity:1}
@media (prefers-reduced-motion:reduce){.js .close .close-copy{opacity:1;transition:none}}

/* zip 17 Oct: the words come in with the cloth; the desk sits lower so the orb never meets the field */
.js .close .close-copy{transition:opacity .7s var(--ease) .1s}
.js .close.nogl .close-copy{transition-delay:.4s}
@media (min-width:761px){.close-pic,.orb-glow{transform:translate(-50%,-40%)}}
@media (min-width:761px){.close-pic,.orb-glow{transform:translate(-50%,calc(-40% + var(--close-dy,0px)))}}
@media (min-width:761px){.close-layer{transform:translate(-50%,calc(-40% + var(--close-dy,0px)))}}

/* zip 22 Oct (client: "text appearing on top of curtain"): with WebGL the words now come in only when cloth.js reports the silk has
   left them (home-closing.js adds .shown then). Without it the still silk starts sliding at .shown, so the words wait until its top
   edge has passed below them (about half its 2.4 s slide). Reduced motion keeps its rule above: the words are simply there. */
.js .close.nogl .close-copy{transition-delay:1.3s}
@media (prefers-reduced-motion:reduce){.js .close.nogl .close-copy{transition-delay:0s}}