/* ===== how it works (opaque dark like the hero, so the room light never greys the scenes): four little scenes (the link in the group chat, everyone's faces, the film, their reaction).
   Computers: side by side on one line, one step always in the spotlight; hover or click a step to jump to it.
   Phones: one under another, number and words first, joined by a line that fills as you scroll. ===== */
.home .s-how{--ease:cubic-bezier(.16,1,.3,1);position:relative;background:#0f0c0b;color:#fff;padding:clamp(96px,9vw,136px) clamp(20px,4.4vw,64px) clamp(104px,10vw,152px)}
.home .s-how>h2{font-family:var(--fd);font-weight:400;font-size:clamp(36px,4.3vw,62px);line-height:1;letter-spacing:-.04em;text-align:center;margin:0}
.home .s-how h3{margin:0;font-size:18px;font-weight:700;line-height:1.3}
.home .s-how .cap p{margin:4px 0 0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.62);max-width:32ch}
.home .s-how .dot{position:relative;z-index:1;flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#0f0c0b;border:1px solid rgba(255,255,255,.3);font-size:14px;font-weight:700;transition:background .8s,color .8s,border-color .8s}
.home .s-how .dot.on{background:var(--volt,#EEFF3A);color:#0f0c0b;border-color:var(--volt,#EEFF3A)}
.home .s-how .face{display:inline-block;border-radius:50%;background-repeat:no-repeat;flex:none}

/* the scenes */
.home .s-how .sc{position:relative;display:flex;align-items:center;justify-content:center}
.home .s-how .sc-msg .msg{width:min(280px,100%);display:flex;flex-direction:column;gap:7px;font-size:13.5px;line-height:1.35}
.home .s-how .sc-msg .them{align-self:flex-start;background:#2a2624;border-radius:18px 18px 18px 4px;padding:8px 12px;max-width:88%}
.home .s-how .sc-msg .bub{align-self:flex-end;background:#0a84ff;color:#fff;border-radius:18px 18px 4px 18px;padding:9px 12px;max-width:86%}
.home .s-how .sc-msg .lp{align-self:flex-end;width:66%;border-radius:14px;overflow:hidden;background:#2a2624}
.home .s-how .sc-msg .lp i{display:block;position:relative;aspect-ratio:16/9;background:linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,.42)),url(img/disco-ball.jpg) center/cover}
/* the invite's own preview card (pb/hooks/og.go): the Toast lockup, the title, who's collecting */
.home .s-how .sc-msg .lp .og{position:absolute;left:6%;right:6%;bottom:9%;display:flex;flex-direction:column;gap:1px}
.home .s-how .sc-msg .lp .og em{display:flex;align-items:center;gap:2px;font-style:normal;font-family:var(--fd);font-size:7px}
.home .s-how .sc-msg .lp .og em svg{height:7px}
.home .s-how .sc-msg .lp .og b{padding:0;font-family:var(--fd);font-weight:400;font-size:16px;line-height:1.05}
.home .s-how .sc-msg .lp .og s{text-decoration:none;font-size:6px;color:rgba(255,255,255,.88)}
.home .s-how .sc-msg .lp b{display:block;padding:7px 10px 8px;font-size:12px;font-weight:700}
.home .s-how .sc-msg .lp b small{display:block;font-weight:500;color:rgba(255,255,255,.55)}
.home .s-how .sc-msg .msg>*{transition:opacity .8s ease,transform 1s var(--ease)}
.home .s-how .sc-msg .msg>.off{opacity:0;transform:translateY(12px) scale(.97)}
.home .s-how .sc-faces{align-self:stretch}
.home .s-how .sc-faces .grid{width:100%;display:grid;grid-template-columns:repeat(auto-fill,50px);grid-template-rows:repeat(2,50px);grid-auto-rows:0;justify-content:space-between;row-gap:12px;overflow:hidden}
.home .s-how .sc-faces .face{width:50px;height:50px;transition:transform .9s cubic-bezier(.3,1.35,.5,1),opacity .6s}
.home .s-how .sc-faces .face.off{transform:scale(.4);opacity:0}
.home .s-how .sc-film .mf,.home .s-how .sc-react .mf{width:min(300px,100%);aspect-ratio:16/9;border-radius:10px;overflow:hidden;position:relative;background:#1d1816;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.home .s-how .sc-film .ttl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:11%;gap:5px;font-size:22px;font-weight:500;letter-spacing:-.03em;line-height:1;background:url(img/disco-ball.jpg) center/cover;transition:opacity 1.2s ease}
.home .s-how .sc-film .ttl span{text-shadow:0 2px 18px rgba(0,0,0,.6)}
/* the film's own cover card: every word in the film is Satoshi, the date spaced out under the title */
.home .s-how .sc-film .ttl small{font-size:5.5px;letter-spacing:.375em;text-indent:.375em;color:rgba(255,255,255,.8);font-weight:500}
.home .s-how .sc-film .sh,.home .s-how .sc-react .sh{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease}
.home .s-how .sc-film .sh.on,.home .s-how .sc-react .sh.on{opacity:1}
.home .s-how .sc-film .nm,.home .s-how .sc-react .nm{position:absolute;left:10px;bottom:12px;font-size:11px;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.home .s-how .sc-film .nm small,.home .s-how .sc-react .nm small{display:block;font-weight:500;opacity:.8}
.home .s-how .sc-film .pg{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--volt,#EEFF3A);transform-origin:left;transform:scaleX(0)}
.home .s-how .sc-film .wave{position:absolute;right:10px;bottom:10px;display:flex;gap:2px;align-items:flex-end;height:14px;opacity:0;transition:opacity .8s}
.home .s-how .sc-film.playing .wave{opacity:1}
.home .s-how .sc-film .wave i{width:2px;background:var(--volt,#EEFF3A);border-radius:1px;animation:howwv 1.1s ease-in-out infinite alternate}
.home .s-how .sc-film .wave i:nth-child(2){animation-delay:-.35s}.home .s-how .sc-film .wave i:nth-child(3){animation-delay:-.7s}.home .s-how .sc-film .wave i:nth-child(4){animation-delay:-.2s}
@keyframes howwv{from{height:3px}to{height:14px}}
/* their reaction: their face in the corner of the film, the same rounded shape and light ring as the reaction below */
.home .s-how .sc-react .mf{overflow:visible}
.home .s-how .sc-react .sh{border-radius:10px}
.home .s-how .sc-react .pip{position:absolute;right:7%;bottom:10%;width:26%;aspect-ratio:3/4;border-radius:7px;background-size:cover;background-position:50% 30%;box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 10px 24px rgba(0,0,0,.45);transition:transform .9s cubic-bezier(.3,1.35,.5,1),opacity .5s}
.home .s-how .sc-react .pip.off{transform:scale(.5);opacity:0}
.home .s-how .sc-react .hts{position:absolute;right:16%;bottom:44%;width:0;height:0}
.home .s-how .sc-react .hts i{position:absolute;left:0;bottom:0;width:11px;height:10px;opacity:0;background:var(--volt,#EEFF3A);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.6 10.3 20C4.2 14.5.2 10.9.2 6.4.2 2.9 3 .1 6.5.1c2 0 3.9.9 5.5 2.4C13.6 1 15.5.1 17.5.1 21 .1 23.8 2.9 23.8 6.4c0 4.5-4 8.1-10.1 13.6Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.6 10.3 20C4.2 14.5.2 10.9.2 6.4.2 2.9 3 .1 6.5.1c2 0 3.9.9 5.5 2.4C13.6 1 15.5.1 17.5.1 21 .1 23.8 2.9 23.8 6.4c0 4.5-4 8.1-10.1 13.6Z'/%3E%3C/svg%3E") center/contain no-repeat}
.home .s-how .sc-react.love .hts i{animation:howup 2.6s ease-out forwards}
.home .s-how .sc-react.love .hts i:nth-child(2){left:-12px;animation-delay:.5s}
.home .s-how .sc-react.love .hts i:nth-child(3){left:8px;animation-delay:1s}
@keyframes howup{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translateY(-46px) scale(1)}}

/* computers */
.home .s-how .how-desk{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,44px);max-width:1240px;margin:clamp(48px,5vw,72px) auto 0}
.home .s-how .how-desk .col{cursor:pointer;transition:opacity 1.4s var(--ease),filter 1.4s var(--ease)}
.home .s-how .how-desk .col:not(.on){opacity:.26;filter:saturate(.3)}
.home .s-how .how-desk .col:not(.on):hover{opacity:.55;filter:saturate(.7)}
.home .s-how .how-desk .sc{height:290px}
.home .s-how .how-desk .cap{margin-top:28px}
.home .s-how .how-desk .dot{margin-bottom:22px}
.home .s-how .how-desk .rail{position:absolute;left:0;right:0;top:calc(290px + 28px + 15px);height:1px;background:rgba(255,255,255,.16)}
.home .s-how .how-desk .rail i{position:absolute;left:0;right:0;top:-.5px;height:2px;border-radius:1px;background:rgba(255,255,255,.4);transform-origin:left;transform:scaleX(0);transition:transform 1.6s var(--ease)}

/* phones */
.home .s-how .how-fol{position:relative;display:grid;gap:60px;margin-top:40px}
.home .s-how .how-fol .step{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px}
.home .s-how .how-fol .dot{margin-top:-3px}
.home .s-how .how-fol .body{transition:opacity 1.2s var(--ease),filter 1.2s var(--ease)}
.home .s-how .how-fol.focusing .step:not(.on) .body{opacity:.28;filter:saturate(.3)}
.home .s-how .how-fol .sc{margin-top:22px;justify-content:flex-start}
.home .s-how .how-fol .sc-film .mf,.home .s-how .how-fol .sc-react .mf,.home .s-how .how-fol .sc-msg .msg{width:100%;max-width:320px}
.home .s-how .how-fol .line{position:absolute;left:14.5px;width:1px;background:rgba(255,255,255,.18)}
.home .s-how .how-fol .line i{position:absolute;top:0;bottom:0;left:-.5px;width:2px;border-radius:1px;background:var(--volt,#EEFF3A);transform-origin:top;transform:scaleY(var(--f,0))}
@media (max-width:860px){
  .home .s-how{padding:88px 20px 96px}
  .home .s-how>h2{font-size:36px;text-align:left}
}
@media (prefers-reduced-motion:reduce){.home .s-how *{transition:none!important;animation:none!important}}