/* image-trail: pointer image trail + hover-reveal list. Zyqor Components, MIT. */
.it{position:relative;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.it-img{position:absolute;width:var(--it-w,clamp(140px,16vw,240px));aspect-ratio:16/10;object-fit:cover;border-radius:6px;pointer-events:none;
  translate:-50% -50%;transform:translate3d(calc(var(--it-dx,0px) * -1),calc(var(--it-dy,0px) * -1),0) scale(.55) rotate(var(--it-rot,0deg));opacity:0;
  transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .35s ease}
.it-img.is-in{transform:translate3d(0,0,0) scale(1) rotate(var(--it-rot,0deg));opacity:1}
.it-img.is-out{transform:translate3d(0,40px,0) scale(.85) rotate(var(--it-rot,0deg));opacity:0;transition:transform .7s cubic-bezier(.65,0,.35,1),opacity .6s ease}
.it--static .it-still{display:block}
.it-still{display:none}
/* hover reveal */
.hr{position:relative;list-style:none;margin:0;padding:0;border-top:1px solid var(--line,rgb(0 0 0 / .15))}
.hr-row{border-bottom:1px solid var(--line,rgb(0 0 0 / .15));position:relative}
.hr-toggle{all:unset;box-sizing:border-box;display:grid;grid-template-columns:3.5ch minmax(0,1fr) auto;align-items:baseline;gap:18px;width:100%;padding:clamp(16px,2.4vw,26px) 4px;cursor:pointer}
.hr-toggle:focus-visible{outline:2px solid var(--acc,#D9573B);outline-offset:-2px}
.hr-n{font:400 12px/1 var(--mono,monospace);opacity:.6}
.hr-t{font:720 clamp(28px,4.6vw,64px)/1 var(--display,system-ui);letter-spacing:-.035em;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s}
.hr-m{font:400 12px/1.3 var(--mono,monospace);text-transform:uppercase;letter-spacing:.06em;opacity:.7;text-align:right}
.hr.is-hovering .hr-row:not(.is-hover) .hr-t{opacity:.3}
.hr-row.is-hover .hr-t{transform:translateX(14px)}
.hr-float{position:absolute;left:0;top:0;width:clamp(220px,24vw,340px);aspect-ratio:16/10;pointer-events:none;z-index:5;margin:calc(clamp(220px,24vw,340px) * -.3125) 0 0 24px;opacity:0;scale:.85;transition:opacity .3s,scale .45s cubic-bezier(.16,1,.3,1)}
.hr-float.is-on{opacity:1;scale:1}
.hr-float img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:6px;clip-path:inset(0 0 100% 0);transition:clip-path .55s cubic-bezier(.77,0,.18,1)}
.hr-float img.is-active{clip-path:inset(0 0 0 0)}
.hr-pane{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.16,1,.3,1)}
.hr-pane>*{overflow:hidden;min-height:0}
.hr-pane img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:6px;margin:0 0 18px}
.hr:not(.hr--inline) .hr-pane{display:none}
.hr-row.is-open .hr-pane{grid-template-rows:1fr}
.hr--inline .hr-float{display:none}
.hr-plus{width:22px;height:22px;transition:transform .4s cubic-bezier(.16,1,.3,1);display:none}
.hr--inline .hr-plus{display:block}
.hr-row.is-open .hr-plus{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.hr-pane,.hr-t,.hr-float img{transition:none}}
/* demo page only */
.it-area{height:clamp(420px,62vh,620px);border-radius:14px;background:var(--ink);color:var(--bg);display:grid;place-items:center;text-align:center;cursor:crosshair}
.it-area h2{font:780 clamp(44px,9vw,140px)/.9 var(--display);letter-spacing:-.045em;font-stretch:80%;margin:0;position:relative;z-index:0;pointer-events:none}
.it-area p{font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin:18px 0 0}
.it-still{width:min(420px,80%);margin:22px auto 0;border-radius:6px}
.hr-wrap{margin-top:clamp(48px,8vw,96px)}
.hr-wrap>.mono{color:var(--soft);margin:0 0 14px}
@media (max-width:640px){.hr-m{display:none}.hr-toggle{grid-template-columns:3ch minmax(0,1fr) auto}}