/* ==========================================================================
   human.css — "The Human System": motion & composition layer (after journal.css + cinema.css)
   ========================================================================== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.js .pre{visibility:hidden}

/* ---------- reveals: an ink-wipe along the reading line, not a fade-up ---------- */
.js [data-rv=u],.js [data-rv=o]{opacity:1;transform:none;clip-path:inset(-8px 100% -8px -8px)}
.js [data-rv=u].in,.js [data-rv=o].in{clip-path:inset(-8px -8px -8px -8px);transition:clip-path 1.05s var(--ease-io) var(--d,0ms)}

/* ---------- hero: ECG trace, a stage that rises, headline folded up from the floor ---------- */
.hero-line{position:relative}
.hero-ecg{position:absolute;left:0;right:0;top:calc(50% - 34px);width:100%;height:44px;overflow:visible;pointer-events:none}
.hero-ecg path{fill:none;stroke:var(--teal);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.js .hero-ecg path{animation:ecgdraw 2.4s var(--ease-io) .35s forwards}
@keyframes ecgdraw{to{stroke-dashoffset:0}}
html:not(.js) .hero-ecg path{stroke-dashoffset:0}

.hero-stage::before{animation:stagerise 1.25s var(--ease-out) .2s both}
@keyframes stagerise{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.gapword{animation:gapin 1.8s var(--ease-out) 1s both}
@keyframes gapin{from{opacity:0;scale:.94}to{opacity:1;scale:1}}

.hero .h1{perspective:1200px}
.hero .h1 .ln{overflow:visible}
.js .hero [data-rv=m] .ln>span{transform-origin:50% 100%;transform:translateY(46%) rotateX(-84deg);opacity:0}
.js .hero [data-rv=m].in .ln>span{transform:none;opacity:1;transition:transform 1.25s var(--ease-out) calc(var(--d,0ms) + var(--i,0) * 190ms),opacity .35s linear calc(var(--d,0ms) + var(--i,0) * 190ms)}

/* ---------- projects: four different objects, not four rows ---------- */
.work-head{margin-bottom:clamp(24px,4vw,64px)}
.works{display:flex;flex-direction:column;gap:clamp(110px,14vw,220px);margin-top:clamp(40px,6vw,96px)}
.wk{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,3vw,48px);align-items:center}
.wk-text{grid-column:1/6;display:flex;flex-direction:column;gap:clamp(18px,2vw,28px)}
.wk-art{grid-column:7/13;display:block}
.wk-meta{display:flex;gap:16px;font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wk-meta .cat{color:var(--teal)}
.wk-link{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,20px)}
.wk-ttl{font-size:clamp(34px,4.4vw,70px);line-height:1;margin:0}
.wk-desc{font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--ink-2);max-width:26em}
.wk-act{display:inline-flex;align-items:baseline;gap:10px;font:500 15px var(--sans);color:var(--terra-text)}
.wk-act small{font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wk-act .arr{display:inline-block;transition:transform .34s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.wk-link:hover .arr{transform:translateX(6px)}}

/* 01 — the membership field: 120+ active, 6+ paying (the only two figures claimed) */
.members .field{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:clamp(7px,1vw,15px)}
.members .field i{display:block;aspect-ratio:1;border-radius:50%;border:1px solid var(--rule);background:transparent}
.members .field i.p{border-color:var(--terra);background:var(--terra)}
.members .legend{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:clamp(20px,2.4vw,34px);font:400 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.members .legend span{display:inline-flex;align-items:center;gap:10px}
.members .legend i{width:11px;height:11px;border-radius:50%;border:1px solid var(--ink-2)}
.members .legend .lg-p{background:var(--terra);border-color:var(--terra)}
.js .wk-1:not(.in) .field i{transform:scale(.35);opacity:0}
.js .wk-1.in .field i{transition:transform .7s var(--ease-out) calc(var(--k) * 34ms),opacity .5s linear calc(var(--k) * 34ms)}
.js .wk-1:not(.in) .field i.p{background:transparent}
.js .wk-1.in .field i.p{transition:background-color .7s var(--ease-out) 1.9s,transform .7s var(--ease-out) calc(var(--k) * 34ms),opacity .5s linear calc(var(--k) * 34ms)}

/* 02 — the thesis, dealt onto a stack; fans open on hover or keyboard focus */
.sheets{position:relative;aspect-ratio:5/4;max-width:560px;justify-self:center;width:100%}
.sheet{position:absolute;left:50%;top:50%;width:52%;aspect-ratio:.72;margin:-36% 0 0 -26%;background:var(--paper);border:1px solid var(--rule);box-shadow:0 18px 30px -22px rgba(0,0,0,.45);transform-origin:50% 90%;transition:transform .9s var(--ease-out)}
.sheet.s3{transform:rotate(7deg) translate(14%,-2%)}
.sheet.s2{transform:rotate(-5deg) translate(-12%,1%)}
.sheet.s1{transform:none;padding:9% 8%;display:flex;flex-direction:column;gap:6%}
.sh-k{font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.sh-n{font:430 clamp(38px,5vw,76px)/.95 var(--serif);letter-spacing:-.03em;color:var(--ink)}
.sh-t{font:400 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--muted)}
.sh-l{margin-top:auto;display:flex;flex-direction:column;gap:7px}
.sh-l i{display:block;height:3px;background:var(--rule)}
.sh-l i:nth-child(2){width:88%}.sh-l i:nth-child(3){width:94%}.sh-l i:nth-child(4){width:52%}
.js .wk-2:not(.in) .sheet.s2,.js .wk-2:not(.in) .sheet.s3{transform:none}
.js .wk-2:not(.in) .sheet.s1{transform:translateY(8%)}
.js .wk-2.in .sheet.s2{transition-delay:.4s}.js .wk-2.in .sheet.s3{transition-delay:.55s}
@media (hover:hover) and (pointer:fine){
  .wk-2:hover .sheet.s2,.wk-2:has(.wk-link:focus-visible) .sheet.s2{transform:rotate(-12deg) translate(-44%,2%);transition-delay:0s}
  .wk-2:hover .sheet.s3,.wk-2:has(.wk-link:focus-visible) .sheet.s3{transform:rotate(12deg) translate(44%,-3%);transition-delay:0s}
}
.wk-2 .wk-art{grid-column:1/6}.wk-2 .wk-text{grid-column:7/13}

/* 03 — SafeSpace: three real screens of the prototype on a stage; step through them */
.wk-3{padding:clamp(64px,8vw,130px) 0}
.wk-3::before{content:"";position:absolute;z-index:-1;inset:0 calc(-1 * var(--edge)) 0 calc(-1 * (var(--gutter) - 52px));background:linear-gradient(180deg,var(--panel-a),var(--panel-b))}
.wk-3 .wk-text{display:contents}
.wk-3 .wk-meta,.wk-3 .wk-link{grid-column:1/6;padding-left:clamp(0px,2vw,32px)}
.wk-3 .wk-meta{align-self:end;grid-row:1}
.wk-3 .wk-link{grid-row:2;align-self:start;margin-top:clamp(16px,2vw,28px)}
.wk-3 .screens{display:contents}
.ss-tabs{grid-column:1/6;grid-row:3;align-self:start;display:flex;gap:6px 22px;flex-wrap:wrap;margin-top:clamp(28px,3vw,44px);padding-left:clamp(0px,2vw,32px)}
.ss-b{position:relative;cursor:pointer;background:none;border:0;font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:14px 0;min-height:44px;transition:color var(--d-ui) var(--ease-out)}
.ss-b::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease-out)}
.ss-b[aria-pressed=true]{color:var(--ink)}.ss-b[aria-pressed=true]::after{transform:scaleX(1)}
.ss-b:active{transform:scale(.97)}
.wk-3 .phone{grid-column:7/12;grid-row:1/span 4;justify-self:center;position:relative;width:min(296px,100%);aspect-ratio:296/658;filter:drop-shadow(0 38px 30px rgba(8,18,26,.34));transition:transform 1.3s var(--ease-out) .15s,opacity .5s linear .15s}
.phone .ph{border-radius:46px;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:translateY(5%) scale(.985);transition:opacity .35s var(--ease-out),transform .6s var(--ease-out)}
.phone[data-s="0"] .ph1,.phone[data-s="1"] .ph2,.phone[data-s="2"] .ph3{opacity:1;transform:none}
.js .wk-3:not(.in) .phone{transform:perspective(1100px) translateY(70px) rotateX(22deg) rotateY(-18deg);opacity:0}
@media (hover:hover) and (pointer:fine){.wk-3:hover .phone{transform:perspective(1100px) rotateY(-6deg) rotateX(2deg)}}

/* 04 — the tabs of "beyond health": real category names and counts */
.tabs{display:flex;flex-direction:column;max-width:520px}
.tab{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:clamp(16px,1.8vw,24px) 0;border-top:1px solid var(--ink);margin-left:calc(var(--t) * clamp(10px,2.4vw,36px));transition:margin-left .6s var(--ease-out),transform .6s var(--ease-out)}
.tab:last-child{border-bottom:1px solid var(--ink)}
.tab b{font:430 clamp(20px,2vw,30px)/1.1 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.tab small{font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.js .wk-4:not(.in) .tab{transform:translateX(40px);opacity:0}
.js .wk-4.in .tab{transition:margin-left .6s var(--ease-out),transform .9s var(--ease-out) calc(var(--t) * 110ms),opacity .5s linear calc(var(--t) * 110ms)}
@media (hover:hover) and (pointer:fine){.wk-4:hover .tab{margin-left:calc(var(--t) * clamp(10px,2.4vw,36px) * .25)}}

@media (max-width:900px){
  .wk{grid-template-columns:minmax(0,1fr);row-gap:clamp(28px,6vw,48px)}
  .wk-text,.wk-art,.wk-2 .wk-art,.wk-2 .wk-text{grid-column:1/-1}
  .wk-2 .wk-art{order:2}
  .wk-3{padding:56px 0 64px}
  .wk-3 .wk-meta,.wk-3 .wk-link,.ss-tabs{grid-column:1/-1;grid-row:auto;padding-left:0}
  .wk-3 .phone{grid-column:1/-1;grid-row:auto;order:5;width:min(250px,64vw)}
  .wk-3::before{inset:0 calc(-1 * var(--edge)) 0 calc(-1 * var(--gutter) + 52px)}
}

/* ---------- journey: the plate is a scene that unfolds from the milestone she walks to ---------- */
.journey .plate{will-change:clip-path}

/* ---------- closing: the gap closes with a heartbeat, then the action is offered ---------- */
.door-line .gl[data-rv=close].in .mid{animation:beat1 .9s var(--ease-out) 2.5s both}
@keyframes beat1{0%{transform:none}30%{transform:scale(1.9)}60%{transform:scale(1.1)}100%{transform:none}}
.js .cta-front{overflow:hidden}
.js .cta-row.in .cta-front::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);animation:sweep 1.2s var(--ease-io) 2.2s both;pointer-events:none}
@keyframes sweep{to{transform:translateX(120%)}}

@media (prefers-reduced-motion:reduce){
  .js [data-rv=u],.js [data-rv=o]{clip-path:none !important}
  .js .hero [data-rv=m] .ln>span{transform:none !important;opacity:1 !important;transition:none !important}
  .hero-ecg path{animation:none !important;stroke-dashoffset:0 !important}
  .hero-stage::before,.gapword,.door-line .gl .mid,.cta-front::after{animation:none !important}
  .js .wk-1 .field i,.js .wk-4 .tab,.js .wk-3 .phone,.sheet{transform:none !important;opacity:1 !important;transition:none !important}
  .js .wk-1 .field i.p{background:var(--terra) !important}
  .js .pre{visibility:visible}
  .phone .ph{transition:none}
}

/* selected work spans the full width; its heading becomes a quiet line above the compositions */
section.work{display:block}
section.work .work-head{position:static;flex-direction:row;align-items:baseline;gap:18px 40px;flex-wrap:wrap}

.wk-4,.wk-1,.wk-2{overflow-x:clip}
.wk-4{padding-block:2px}