/* L'idea: il modello, ridotto all'essenziale. A sinistra il progetto che si ferma; a destra il ciclo di /loop: anello sottile,
   quattro tacche, un punto Lime che gira e accende la parola su cui passa. Sotto, i tre principi. */
.lp-model{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-4)}
.lp-model__col.mk{display:flex}
.lp-model__col .lp-proj,.lp-model__col .lp-ring{margin:clamp(28px,3vw,44px) clamp(24px,3vw,40px)}
.lp-model__col .lp-proj{flex:1;align-self:stretch;min-height:120px;height:auto}
.lp-model__tag{font-size:var(--t-small);font-weight:500;color:var(--ink-soft)}
.lp-model__tag .m-slash{color:var(--forest)}
.lp-proj,.lp-ring{align-self:center}
/* progetto */
.lp-proj{position:relative;height:120px}
.lp-proj__line{position:absolute;left:0;top:50%;width:72%;border-top:1px solid var(--forest);transform-origin:left;transition:transform 1.4s var(--ease-reveal)}
.lp-proj__fade{position:absolute;left:72%;right:0;top:50%;border-top:1px dashed var(--line);transition:opacity .6s var(--ease-out) 1.6s}
.lp-proj__stop{position:absolute;left:var(--x);top:50%;transform:translate(-50%,-4px);display:grid;justify-items:center;gap:12px;font-size:var(--t-small);font-weight:500;color:var(--ink-soft);white-space:nowrap;transition:opacity .4s var(--ease-out) calc(var(--d) * .35s + .2s)}
.lp-proj__stop i{width:8px;height:8px;border-radius:50%;background:var(--forest)}
.lp-proj__stop--end{left:72%!important;color:var(--ink)}
.lp-proj__stop--end i{width:2px;height:22px;margin:-7px 0;border-radius:1px}
.lp-proj__paper{position:absolute;right:0;bottom:calc(50% + 12px);font-size:var(--t-small);color:var(--sage);text-align:right;max-width:13ch;line-height:1.3;transition:opacity .6s var(--ease-out) 1.8s}
.lp-model.pre:not(.in) .lp-proj__line{transform:scaleX(0)}
.lp-model.pre:not(.in) .lp-proj__fade,.lp-model.pre:not(.in) .lp-proj__stop,.lp-model.pre:not(.in) .lp-proj__paper{opacity:0}
/* ciclo */
.lp-ring{position:relative;width:min(calc(100% - 140px),280px);aspect-ratio:1;align-self:center}
.lp-ring__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lp-ring__svg circle{fill:none;stroke:var(--forest);stroke-width:.35}
.lp-ring__node{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.lp-ring__node i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--forest)}
.lp-ring__lab{position:absolute;left:0;top:14px;transform:translateX(-50%);font-size:var(--t-small);font-weight:500;color:var(--ink-soft);white-space:nowrap;animation:lp-lab 8s linear infinite;animation-delay:calc(var(--k) * 2s - .4s)}
.lp-ring__lab--up{top:auto;bottom:14px}
.lp-ring__lab--right{top:-.62em;left:16px;transform:none}
.lp-ring__lab--left{top:-.62em;left:auto;right:16px;transform:none}
@keyframes lp-lab{0%,12%{color:var(--ink)}20%,100%{color:var(--ink-soft)}}
.lp-ring__orbit{position:absolute;inset:14%;animation:lp-orbit 8s linear infinite}
.lp-ring__orbit i{position:absolute;left:50%;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1.5px var(--forest)}
@keyframes lp-orbit{to{transform:rotate(1turn)}}
/* tre principi */
.lp-model__foot{grid-column:1 / -1;list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5) var(--gutter)}
.lp-model__foot li{padding-top:var(--s-4);border-top:1px solid var(--hairline)}
.lp-model__foot h3{font-size:clamp(1.25rem,1.05rem + .5vw,1.5rem);letter-spacing:-.02em;line-height:1.2}
.lp-model__foot p{margin-top:var(--s-1);color:var(--ink-soft);text-wrap:pretty}
@media (prefers-reduced-motion:reduce){.lp-ring__orbit,.lp-ring__lab{animation:none}}
@media (max-width:900px){.lp-model{grid-template-columns:1fr;gap:var(--s-7)}.lp-model__foot{grid-template-columns:1fr;margin-top:0}}
@media (max-width:520px){.lp-ring{width:220px}}
/* telefono: "Starts again" e "Acts" sotto il loro punto, come le altre etichette, così restano dentro la scheda */
@media (max-width:520px){.lp-ring{width:200px}.lp-ring__lab--left,.lp-ring__lab--right{top:30px;left:0;right:auto;transform:translateX(-50%)}}