/* What changes (v1, Daniel 2026-11-07: "what do I learn from this", "I don't see any desktop", "we're helping people change systems").
   One pinned scene. Per system one line of how it was and how it is now, beside its real screens: the desk where the work
   is done, the phone where it is carried. Scroll moves from one system to the next. */
.chg{position:relative;height:calc(var(--n,6) * 46vh + 100vh)}
.chg-stick{position:sticky;top:0;height:100dvh;overflow:hidden}
.chg-glow{position:absolute;inset:0;background:radial-gradient(1000px 640px at 68% 56%,rgba(var(--ch,143,190,242),.16),transparent 66%);transition:background 1.2s ease}
.chg-in{position:relative;height:100%;max-width:1360px;margin:0 auto;padding:max(104px,13vh) 5vw 7vh;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:0 4.5vw;align-items:center}
.chg-txt{position:relative;align-self:center}
.chg-txt .k{margin:0 0 14px}
.chg-h{font-size:clamp(24px,2.1vw,32px);line-height:1.15;letter-spacing:-.015em;margin:0 0 30px;max-width:15em}
/* v2 (Daniel 11-07): the wheel of what we solve, the one in focus bright, the ones around it fading */
.chg-wheel{--row:clamp(44px,4.4vw,62px);position:relative;height:calc(var(--row) * 5);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 32%,#000 68%,transparent);mask-image:linear-gradient(180deg,transparent,#000 32%,#000 68%,transparent)}
.chg-names{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;top:calc(var(--row) * 2);transform:translateY(calc(var(--row) * var(--i,0) * -1));transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.chg-names li{height:var(--row);display:flex;align-items:center}
.chg-names button{all:unset;cursor:pointer;white-space:nowrap;font:600 clamp(24px,2.35vw,34px)/1 var(--serif);letter-spacing:-.03em;color:var(--ink);opacity:.08;transform-origin:left center;transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.chg-names button[data-d="0"]{opacity:1}.chg-names button[data-d="1"]{opacity:.26;transform:scale(.92)}.chg-names button[data-d="2"]{opacity:.1;transform:scale(.86)}
.chg-names button:hover{opacity:.6}.chg-names button[data-d="0"]:hover{opacity:1}
.chg-names button:focus-visible{outline:1px solid rgba(241,239,233,.4);outline-offset:6px;border-radius:8px}
.chg-line{font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:rgba(241,239,233,.72);margin:18px 0 0;max-width:22em;min-height:3em;opacity:0;transform:translateY(8px);filter:blur(4px)}
.chg-line.on{opacity:1;transform:none;filter:none;transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
.chg-bar{display:flex;gap:5px;margin-top:30px;max-width:260px}
.chg-bar i{flex:1;height:2px;border-radius:2px;background:rgba(241,239,233,.14);transition:background .5s}
.chg-bar i.on{background:rgba(var(--ch,143,190,242),.95)}

/* the devices */
.chg-dev{position:relative;height:100%;min-height:0;display:flex;align-items:center}
.chg-set{position:absolute;inset:0;display:flex;align-items:center;opacity:0;transform:translateY(26px) scale(.985);transition:opacity .9s var(--ease),transform 1.1s var(--ease);pointer-events:none}
.chg-set.on{opacity:1;transform:none}
.chg-set.out{opacity:0;transform:translateY(-22px) scale(.99)}
.chg-lap{position:relative;width:88%;margin-left:0}
.chg-lap .scr{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#0b0d12;
 box-shadow:0 0 0 1px rgba(241,239,233,.10),0 0 0 7px #111318,0 0 0 8px rgba(241,239,233,.08),0 40px 90px -30px rgba(0,0,0,.8)}
.chg-lap .scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.chg-lap .base{height:10px;margin:8px -5% 0;border-radius:0 0 14px 14px;background:linear-gradient(180deg,#1a1d23,#0c0e12);box-shadow:0 1px 0 rgba(241,239,233,.06) inset}
.chg-ph{position:absolute;right:0;bottom:8%;width:22%;aspect-ratio:390/844;border-radius:30px;overflow:hidden;background:#0b0d12;
 box-shadow:0 0 0 1px rgba(241,239,233,.12),0 0 0 6px #111318,0 0 0 7px rgba(241,239,233,.08),0 40px 80px -24px rgba(0,0,0,.85);
 transform:translateY(22px);transition:transform 1.3s var(--ease) .12s}
.chg-set.on .chg-ph{transform:none}
.chg-ph img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.chg-set.solo .chg-ph{position:relative;right:auto;bottom:auto;width:auto;height:84%;margin:0 auto}
.chg-set.solo .chg-obj{position:absolute;left:4%;bottom:6%;width:34%;aspect-ratio:1;border-radius:50%;overflow:hidden;opacity:.95}
.chg-obj img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:900px){
 .chg-in{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;padding:84px 22px calc(env(safe-area-inset-bottom) + 28px);gap:18px 0;align-items:start}
 .chg-txt .k{margin-bottom:12px}
 .chg{height:calc(var(--n,6) * 40vh + 100vh)}
 .chg-txt{order:2}.chg-dev{order:1}
 .chg-h{display:none}
 .chg-wheel{--row:40px;height:calc(var(--row) * 1);-webkit-mask-image:none;mask-image:none}
 .chg-names{top:0}.chg-names button{font-size:26px}.chg-names button:not([data-d="0"]){opacity:0}
 .chg-line{font-size:16px;margin-top:8px;min-height:3.1em}
 .chg-bar{margin-top:14px}
 .chg-dev{align-items:flex-start}
 .chg-set{align-items:flex-start;padding-top:6px}
 .chg-lap{width:92%}
 .chg-lap .scr{border-radius:8px;box-shadow:0 0 0 1px rgba(241,239,233,.10),0 0 0 4px #111318,0 0 0 5px rgba(241,239,233,.08),0 30px 60px -24px rgba(0,0,0,.8)}
 .chg-lap .base{height:6px;margin-top:5px}
 .chg-ph{width:31%;bottom:auto;top:30%;border-radius:20px;box-shadow:0 0 0 1px rgba(241,239,233,.12),0 0 0 4px #111318,0 0 0 5px rgba(241,239,233,.08),0 30px 60px -20px rgba(0,0,0,.85)}
 .chg-set.solo .chg-ph{height:auto;width:48%;top:auto}
}
@media (prefers-reduced-motion:reduce){ .chg-set,.chg-line,.chg-ph,.chg-names{transition:opacity .4s ease!important;transform:none!important;filter:none!important} }

/* Why now (v1, Daniel 2026-11-07): the sentence above, one line of light below that draws each shift in turn */
.shift{position:relative;height:150vh;display:block;min-height:0}   /* v2: the drawing plays by itself, a short hold is enough */
.sh-stick{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;align-items:center;padding:max(110px,14vh) 6vw 4vh;box-sizing:border-box;text-align:center}
.shift .pause-in{flex:none}
.shift .g{color:rgba(241,239,233,.42);transition:color .7s ease}
.shift .g.on{color:var(--ink)}
.shift canvas{flex:1;min-height:0;width:100%;max-width:1100px;display:block}
@media (max-width:700px){
 .sh-stick{padding:88px 24px calc(env(safe-area-inset-bottom) + 24px);text-align:left;align-items:stretch}
 .shift .pause-in>*{margin-left:0;margin-right:0}
 .shift h2{font-size:31px}
 .shift .pause-in p:not(.k){font-size:16px;margin-top:14px}
}