/* Shared by every page: lens pointer, menu that comes in item by item, screensaver */
/* Lens cursor: a watchmaker's loupe is the pointer across the page; the normal pointer only next to text and links */
.lc{position:fixed;left:0;top:0;z-index:7;pointer-events:none;display:none;opacity:0;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18))}
@media (hover:hover) and (pointer:fine){.lc{display:block}}
.cur{display:none!important}
html.lens-on,html.lens-on *{cursor:none!important}

/* Menu: the name and the items come in one after the other, 60 ms apart; the work pages the same when they open */
@media (prefers-reduced-motion:no-preference){
  .head>a,.head nav>*{animation:navin .5s cubic-bezier(.25,.46,.45,.94) both;animation-delay:calc(.5s + var(--i,0) * 60ms)}
  .sub.open a{animation:navin .35s cubic-bezier(.25,.46,.45,.94) both;animation-delay:calc(var(--i,0) * 50ms)}
}
@keyframes navin{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}

/* Screensaver: after a while with no input, a slow strip of the photos runs across a white screen,
   three words take turns under it. Any touch, key, scroll or mouse move brings the page back */
.ss{position:fixed;inset:0;z-index:20;background:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:28px;
  opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s linear .8s;overflow:hidden}
.ss.on{opacity:1;visibility:visible;transition:opacity .8s ease,visibility 0s}
.ss.out{transition:opacity .35s ease,visibility 0s linear .35s}
.ss-track{display:flex;gap:12px;width:max-content;will-change:transform}
.ss.on .ss-track{animation:ss-run var(--ss-dur,90s) linear infinite}
.ss-track img{height:min(36svh,320px);width:auto;display:block;flex:0 0 auto}
.ss-words{position:relative;height:18px;text-align:center;color:var(--muted)}
.ss-words span{position:absolute;left:0;right:0;opacity:0;transition:opacity .6s ease}
.ss-words span.now{opacity:1}
@keyframes ss-run{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ss.on .ss-track{animation:none}}

/* work: a drop-down under the word, opened by hovering on a computer and by a tap on a phone */
.wkw{position:relative;display:inline-block;pointer-events:auto}
.wkw .sub{position:absolute;left:0;top:100%;display:flex!important;flex-direction:column;gap:8px;padding-top:12px;min-width:max-content;
  opacity:0;visibility:hidden;translate:0 -4px;pointer-events:auto;transition:opacity .2s ease,translate .2s ease,visibility 0s linear .2s}
.wkw .sub.open{opacity:1;visibility:visible;translate:0 0;transition:opacity .2s ease,translate .2s ease,visibility 0s}
/* on white the list gets its own white ground, so photos scrolling under it never cross the words */
.head:not(.on-photo) .wkw .sub{background:var(--bg);padding:12px 14px 14px;margin-left:-14px}