/* noteriks.photo — motion layer. Load after style.css. Scoped to html.motion (set by motion.js) so the page is unchanged if the script fails. */

/* 01 Intro — each word in its own mask; keeps text-wrap:balance */
.motion .statement .mw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.motion .statement .mwi{display:inline-block;will-change:transform}

/* 02 Rows — the others recede to muted (#6B665E, 5.3:1). Shipped thread kept. */
.motion .row .t{transition:color .35s var(--enter),transform .15s var(--enter)}
.motion #rows:has(.row:hover) .row:not(:hover) .t,
.motion #rows:has(.row:focus-visible) .row:not(:focus-visible) .t{color:var(--muted);transition-delay:40ms}

/* Press feedback */
.motion .row .d{transition:transform .15s var(--enter)}
.motion .row:active .t,.motion .row:active .d{transform:translateY(1px)}
.motion .row:active .thread{height:2px}
.motion .link{transition:text-decoration-color .2s,opacity .12s}
.motion .link:active{opacity:.55}
.motion .toggle button{transition:background .3s,color .3s,transform .15s var(--enter)}
.motion .toggle button:active{transform:scale(.97)}
.motion #modal .round{transition:background .2s,color .2s,border-color .2s,transform .18s var(--enter)}
.motion #modal .round:active,.motion #modal .round.m-kp{transform:scale(.92)}
.motion #modal .round.m-kp{background:var(--ink);color:var(--surface);border-color:var(--ink)}

/* 03 Leave — the index unweaves into the chosen row (420 ms) */
.m-leaving .id,.m-leaving .statement,.m-leaving .rule,.m-leaving figure.art{opacity:0!important;transition:opacity .3s var(--enter)!important}
.m-leaving .row:not(.m-chosen){opacity:0!important;transform:translateY(4px)!important;transition:opacity .28s var(--enter),transform .32s var(--enter)}
.m-leaving .row.m-chosen .thread{width:100%;transform:scaleX(1);transition:transform .3s var(--enter),width .3s var(--enter)}
.m-leaving .row.m-chosen .arrow{color:var(--woad);transform:translateX(.75rem);transition:transform .4s var(--enter),color .2s}
.m-leaving .row.m-chosen .n{color:var(--woad)}
.m-leaving .toggle{opacity:0!important;transition:opacity .2s}

/* 06 Modal — close mirrors open; desktop: the cloth itself travels, the dialog only fades */
#modal.m-closing{pointer-events:none}
#modal.m-closing .scrim{animation:mFadeOut .32s ease forwards}
@media (max-width:1079px){#modal.m-closing .dialog{animation:mSheetOut .38s cubic-bezier(.4,0,.6,1) forwards}}
@media (min-width:1080px){
  .motion:not(.reduced) #modal .dialog{animation:mDialogFade .36s ease both}
  .motion:not(.reduced) #modal.m-closing .dialog{animation:mFadeOut .26s ease forwards}
}
.m-fly{position:fixed;z-index:70;pointer-events:none;margin:0;filter:drop-shadow(0 .75rem 1.125rem rgba(40,30,20,.14));will-change:transform}
.cloth.m-away{opacity:0}

/* 07 Keys — hint appears only after the second mouse click on ← → */
.motion #modal .steps{position:relative}
.m-kbd{position:absolute;left:0;top:100%;margin:.375rem 0 0;display:inline-flex;align-items:center;gap:.375rem;color:var(--muted);white-space:nowrap;opacity:0;transform:translateX(-4px);transition:opacity .4s var(--enter),transform .5s var(--enter)}
.m-kbd.on{opacity:1;transform:none}
.m-kbd kbd{font:inherit;font-size:.75rem;line-height:1;min-width:1.375rem;height:1.375rem;display:inline-flex;align-items:center;justify-content:center;padding:0 .25rem;border:1px solid var(--rule);border-bottom-width:2px;border-radius:.3125rem;color:var(--ink)}
@media (max-width:1079px),(pointer:coarse){.m-kbd{display:none}}

/* 08 Swipe — the toggle's ink pill rides the track */
.motion .toggle .m-pill{position:absolute;top:4px;left:0;height:44px;border-radius:999px;background:var(--ink);will-change:transform,width}
.motion .toggle:has(.m-pill) button{position:relative;z-index:1;background:transparent!important}

@keyframes mFadeOut{to{opacity:0}}
@keyframes mDialogFade{from{opacity:0}to{opacity:1}}
@keyframes mSheetOut{to{transform:translateY(100%)}}