/* bodymove.app: one page in Helvetica, very few words. White paper and ink, with one night section that opens out of
   the page as you reach it. Layout answers the page's own width (container queries on .s), so a phone and a narrow
   window lay out the same. Ported from the design canvas, claude.ai/artifact/GGTRUxW5AvgPeD2wvQZXSG. */
:root{color-scheme:light}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#fff}
.s{--s-ink:#0a0a0a;--s-line:#e6e6e9;
  --s-sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --s-gutter:clamp(20px,4cqw,48px);
  container-type:inline-size;min-height:100vh;display:flex;flex-direction:column;background:#fff;color:var(--s-ink);font-family:var(--s-sans);font-synthesis:none;-webkit-font-smoothing:antialiased;overflow-x:clip}
.s main{flex:1}
.s a{color:inherit}
.s ::selection{background:var(--s-ink);color:#fff}
.s-sec{padding:clamp(104px,11cqw,168px) var(--s-gutter);display:flex;flex-direction:column;align-items:center;text-align:center}
.s-bleed{width:calc(100% + 2 * var(--s-gutter));max-width:none;margin-inline:calc(-1 * var(--s-gutter))}
.s-rule{width:100%;max-width:1120px;margin-inline:auto;border-top:1px solid var(--s-line)}

/* Type: Helvetica, few words, headlines in Medium set tight; hierarchy from size and space */
.s-h1{margin:0;font-size:clamp(44px,5.4cqw,80px);line-height:1;font-weight:500;letter-spacing:-.045em;text-wrap:balance}
.s-h2{margin:0;max-width:14em;font-size:clamp(32px,3.6cqw,52px);line-height:1.06;font-weight:500;letter-spacing:-.035em;text-wrap:balance}
.s-lead{margin:20px 0 0;max-width:26em;font-size:clamp(18px,1.5cqw,22px);line-height:1.42;font-weight:400;letter-spacing:-.012em;text-wrap:balance}

/* Each section is a scroll timeline. As a section comes up into the window its headline comes into focus word by
   word, then the line under it. The timeline is the scroll position, never a clock, and every range ends before the
   section is fully in view, so a section on screen is always complete. --s-a is where in the section's entry its
   words begin. Browsers without scroll timelines show everything as it is. */
@keyframes s-focus{from{opacity:0;filter:blur(12px)}to{opacity:1;filter:none}}
@keyframes s-draw{from{transform:scaleX(0)}to{transform:none}}
.s-w{display:inline-block}
@supports (animation-timeline: view()){
  .s-sec{view-timeline:--s-sec block}
  .s-w{animation:s-focus linear both;animation-timeline:--s-sec;animation-range:entry calc(var(--s-a,20%) + var(--i,0) * 8%) entry calc(var(--s-a,20%) + 30% + var(--i,0) * 8%)}
  .s-in{animation:s-focus linear both;animation-timeline:--s-sec;animation-range:entry calc(var(--s-a,20%) + 26%) entry calc(var(--s-a,20%) + 58%)}
  .s-draw{animation:s-draw linear both;animation-timeline:--s-sec;animation-range:entry 0% entry 40%}
}
@media (prefers-reduced-motion:reduce){.s-w,.s-in,.s-draw{animation:none}}

/* The first screen */
/* The first screen is white paper with three things on it, high in the window: the mark in its tile, the line on two
   lines, what Bodymove is. It stops a little short of the window's foot, so the top of the night section shows
   below it. The three come into focus one after another as the page opens; as the screen scrolls away, they recede
   together. Nothing moves up or down. */
.hr{position:relative;min-height:clamp(600px,91svh,1000px);box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:56px var(--s-gutter) 128px;background:#fff;color:var(--s-ink);text-align:center;overflow:hidden}
.hr-c{display:flex;flex-direction:column;align-items:center;transform-origin:50% 50%}
.hr-icon{width:88px;height:88px;margin-bottom:clamp(40px,4.4cqw,64px);border-radius:21px;display:flex;align-items:center;justify-content:center;background:var(--s-ink);box-shadow:0 2px 6px rgba(10,10,20,.1)}
.hr-icon svg{display:block;width:52px;height:46px;fill:#fff}
.hr-t{margin:0;font-size:clamp(48px,7cqw,108px);line-height:.96;font-weight:500;letter-spacing:-.05em}
.hr-w{display:inline-block}
.hr-d{margin:clamp(28px,2.6cqw,38px) auto 0;font-size:clamp(18px,1.46cqw,22px);line-height:1.4;font-weight:400;letter-spacing:-.012em;text-wrap:balance}
.hr-w,.hr-d{transition:opacity 1s ease,filter 1.2s ease}
.js .hr-w,.js .hr-d{opacity:0;filter:blur(14px)}
.hr-icon{transition:opacity .9s ease,filter 1s ease,transform 1.1s cubic-bezier(.3,1.3,.4,1)}
.js .hr-icon{opacity:0;filter:blur(10px);transform:scale(.82)}
.hr[data-in="on"] .hr-icon{opacity:1;filter:blur(0);transform:none;transition-delay:.1s}
.hr[data-in="on"] .hr-w{opacity:1;filter:blur(0);transition-delay:calc(.45s + var(--i) * .18s)}
.hr[data-in="on"] .hr-d{opacity:1;filter:blur(0);transition-delay:1.25s}
@supports (animation-timeline: view()){
  @keyframes hr-leave{to{opacity:0;filter:blur(10px);transform:scale(.92)}}
  .hr{view-timeline:--hr block}
  .hr-c{animation:hr-leave linear both;animation-timeline:--hr;animation-range:exit 0% exit 75%}
}
@container (max-width:680px){.hr{min-height:clamp(520px,91svh,800px);padding:48px var(--s-gutter) 104px}.hr-icon{width:72px;height:72px;border-radius:17px;margin-bottom:36px}.hr-icon svg{width:42px;height:37px}}
@media (prefers-reduced-motion:reduce){.hr-w,.hr-d,.hr-icon{transition:none}.hr-c{animation:none}.js .hr-w,.js .hr-d,.js .hr-icon{opacity:1;filter:none;transform:none}}
/* The night section and its line of time */
/* The night section: one line of time across the whole width, today fixed where it is. Its heading is set like
   every other section heading on the page; the line of time sits close under it, with more night below. */
.tl{--ay:118px;--now:38%;--tw:min(220px,15cqw);--off:16px;--pi:4.5%;--pr:48px;position:relative;overflow:hidden;color:#fff;background:radial-gradient(120% 90% at 0% 0%,#0d0d16 0%,#060609 55%)}
.tl-body{display:flex;flex-direction:column;gap:clamp(36px,3.4cqw,52px);padding:clamp(104px,9.6cqw,144px) 0 clamp(136px,13.5cqw,200px)}
.tl-head{--s-a:22%;text-align:center;padding:0 var(--s-gutter)}
.tl-h{margin:0 auto;max-width:14em;font-size:clamp(32px,3.6cqw,52px);line-height:1.06;font-weight:500;letter-spacing:-.035em;text-wrap:balance}
.tl-lead{margin:20px auto 0;max-width:26em;font-size:clamp(18px,1.5cqw,22px);line-height:1.42;font-weight:400;letter-spacing:-.012em;text-wrap:balance}
.tl-axis{position:relative;height:176px;text-align:left}
.tl-glow{position:absolute;left:var(--now);top:var(--ay);width:56%;height:240px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(140,120,255,.13),rgba(140,120,255,0));pointer-events:none}
.tl-line{position:absolute;left:0;right:0;top:var(--ay);height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.3) 6%,rgba(255,255,255,.3) 94%,rgba(255,255,255,0))}

/* A change of scale is a zoom of time alone: ticks and steps close in on today, or open out from it. The words
   don't stretch; they leave first and come back once the line has settled. */
.tl-zoom{position:absolute;inset:0;opacity:0;transform-origin:var(--now) var(--ay);transition:transform 1.8s cubic-bezier(.65,0,.35,1),opacity 1.2s ease;pointer-events:none}
.tl-zoom[data-s="fine"]{transform:scaleX(.16)}
.tl-zoom[data-s="coarse"]{transform:scaleX(5)}
.tl-zoom[data-s="now"]{transform:none;opacity:1}
.tl-words{position:absolute;inset:0;opacity:0;transition:opacity .45s ease;pointer-events:none}
.tl-words[data-on="on"]{opacity:1;transition:opacity .9s ease 1.15s}
.tl-ticks{position:absolute;left:var(--a);right:calc(100% - var(--b));top:calc(var(--ay) + 1px);height:6px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 1px,transparent 1px calc(100% / var(--n)));border-right:1px solid rgba(255,255,255,.4)}
.tl-mark{position:absolute;left:var(--x);top:calc(var(--ay) - 12px);width:1px;height:24px;margin-left:-.5px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.6)}
.tl-lab{position:absolute;left:var(--x);top:calc(var(--ay) + 16px);transform:translateX(-50%);font-size:13px;line-height:18px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.tl-ev{position:absolute;left:calc(var(--x) + var(--off));bottom:calc(100% - var(--ay) + 26px);width:var(--tw);display:flex;flex-direction:column;gap:4px;text-align:left}
.tl-ev[data-side="r"]{left:auto;right:calc(100% - var(--x) + var(--off));text-align:right;align-items:flex-end}
.tl-ev b{font-size:13px;line-height:18px;font-weight:600;font-variant-numeric:tabular-nums}
.tl-ev span{font-size:clamp(16px,1.4cqw,20px);line-height:1.25;font-weight:400;letter-spacing:-.01em}
.tl-now{position:absolute;left:var(--now);top:calc(var(--ay) - 24px);width:1px;height:36px;margin-left:-.5px;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.75)}

/* Coming from the white page, the night opens out of it: a dark panel with round corners widens to the edges as the
   section comes up, and closes back into a panel as it leaves. The line of time draws out from today. */
@supports (animation-timeline: view()){
  @keyframes tl-open{
    entry 0%{clip-path:inset(0 var(--pi) round var(--pr))}
    entry 100%{clip-path:inset(0 0 round 0)}
    exit 0%{clip-path:inset(0 0 round 0)}
    exit 100%{clip-path:inset(0 var(--pi) round var(--pr))}
  }
  .tl{view-timeline:--s-sec block;animation:tl-open linear both;animation-timeline:--s-sec;animation-range:cover}
  .tl-line{transform-origin:var(--now) 50%;animation:s-draw linear both;animation-timeline:--s-sec;animation-range:entry 20% entry 75%}
}

@container (max-width:680px){
  .tl{--tw:88px;--off:12px;--pi:12px;--pr:28px}
  .tl-lab{font-size:11px}
  .tl-lab.alt,.tl-ev[data-ph="hide"],.tl-mark[data-ph="hide"]{display:none}
  .tl-ev span{font-size:14px}
  .tl-ev b{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.tl-zoom,.tl-words,.tl-words[data-on="on"]{transition:none}.tl,.tl-line{animation:none}}
/* The deck of goals */
/* Nine goals fanned like a hand of cards, overlapping. Every few seconds the fan moves on by one: the next card
   slides over the one in front with a little spring, the far ones fall back and fade. A pointer over it holds it. */
.dk{position:relative;height:470px;overflow-x:clip;touch-action:pan-y;outline:none}
.dk:focus-visible .dk-card[data-d="0"] .cd{outline:2px solid #0a0a0a;outline-offset:6px}
.dk-card:not([data-d="0"]){cursor:pointer}
.dk-card{position:absolute;left:50%;top:58px;width:300px;height:360px;margin-left:-150px;opacity:1;filter:drop-shadow(0 16px 28px rgba(10,10,30,.11));transition:transform 1.05s cubic-bezier(.3,1.22,.42,1),opacity .6s ease,filter .8s ease}
.dk-card[data-d="0"]{transform:translate(0,-10px);z-index:9;filter:drop-shadow(0 30px 46px rgba(10,10,30,.2))}
.dk-card[data-d="1"]{transform:translate(178px,10px) rotate(5deg) scale(.93);z-index:8}
.dk-card[data-d="-1"]{transform:translate(-178px,10px) rotate(-5deg) scale(.93);z-index:8}
.dk-card[data-d="2"]{transform:translate(332px,36px) rotate(10deg) scale(.86);z-index:7}
.dk-card[data-d="-2"]{transform:translate(-332px,36px) rotate(-10deg) scale(.86);z-index:7}
.dk-card[data-d="3"]{transform:translate(450px,70px) rotate(15deg) scale(.8);z-index:6;opacity:0}
.dk-card[data-d="-3"]{transform:translate(-450px,70px) rotate(-15deg) scale(.8);z-index:6;opacity:0}
.dk-card[data-d="4"]{transform:translate(520px,98px) rotate(19deg) scale(.74);z-index:5;opacity:0}
.dk-card[data-d="-4"]{transform:translate(-520px,98px) rotate(-19deg) scale(.74);z-index:5;opacity:0}
/* Until the deck is first seen it is one neat stack. When it comes into view it deals out into the fan, the near
   cards first, and only then starts to move on. */
.js .dk[data-deal="off"] .dk-card{transform:translate(0,-10px) rotate(var(--sr,0deg)) scale(.98)}
.dk[data-deal="off"] .dk-card[data-d="1"]{--sr:2deg}
.dk[data-deal="off"] .dk-card[data-d="-1"]{--sr:-2deg}
.dk[data-deal="off"] .dk-card[data-d="2"]{--sr:4deg}
.dk[data-deal="off"] .dk-card[data-d="-2"]{--sr:-4deg}
.dk[data-deal="on"] .dk-card[data-d="1"],.dk[data-deal="on"] .dk-card[data-d="-1"]{transition-delay:.06s}
.dk[data-deal="on"] .dk-card[data-d="2"],.dk[data-deal="on"] .dk-card[data-d="-2"]{transition-delay:.2s}
@container (max-width:720px){
  .dk{height:430px}
  .js .dk[data-deal="off"] .dk-card{transform:translate(0,-6px) rotate(var(--sr,0deg)) scale(.9)}
  .dk-card[data-d="0"]{transform:translate(0,-6px) scale(.92)}
  .dk-card[data-d="1"]{transform:translate(96px,12px) rotate(6deg) scale(.84)}
  .dk-card[data-d="-1"]{transform:translate(-96px,12px) rotate(-6deg) scale(.84)}
  .dk-card[data-d="2"]{transform:translate(170px,34px) rotate(11deg) scale(.78);opacity:0}
  .dk-card[data-d="-2"]{transform:translate(-170px,34px) rotate(-11deg) scale(.78);opacity:0}
}
@media (prefers-reduced-motion:reduce){.dk-card{transition:none}}
/* Privacy, terms and the missing page: one column of plain text under the mark, which leads home */
.page{box-sizing:border-box;width:100%;max-width:728px;margin:0 auto;padding:clamp(40px,6cqw,88px) var(--s-gutter) clamp(72px,9cqw,120px);font-size:17px;line-height:1.6;letter-spacing:-.005em;text-align:left}
.page .home{display:flex;width:44px;height:44px;margin-bottom:clamp(40px,5cqw,64px);border-radius:11px;align-items:center;justify-content:center;background:var(--s-ink);color:#fff;transition:opacity .2s ease-out}
.page .home:hover{opacity:.8}
.page .home svg{display:block;width:26px;height:23px}
.page h1{margin:0;font-size:clamp(40px,5cqw,64px);line-height:1;font-weight:500;letter-spacing:-.045em;text-wrap:balance}
.page .updated{margin:16px 0 40px;font-size:15px}
.page h2{margin:44px 0 12px;font-size:22px;line-height:1.25;font-weight:500;letter-spacing:-.02em}
.page p{margin:0 0 16px}
.page h1+p:not(.updated){margin-top:24px}
.page ul{margin:0 0 16px;padding-left:22px}
.page li+li{margin-top:8px}
.page strong{font-weight:500}
.page a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.page .home,.page .home:hover{text-decoration:none}

/* Only the copyright, centred */
.ft{display:flex;align-items:center;justify-content:center;height:96px;margin:0;font-size:13px;line-height:18px;letter-spacing:-.005em}