/* Norte (Lab.) — the Lab page (/lab/). Loaded after home.css. Built from lab/lab.src.html. */
/* Lab: pieces grow out of the cursor and settle across the page; then they can be dragged and opened */
.nh-lab-field { position: absolute; inset: 0; z-index: 1; display: block; margin: 0; cursor: default; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* a layer of its own: the pieces never go over the site's texts */
.nh-lab-p {
	position: absolute; left: 0; top: 0; margin: 0; padding: 0; border: 0; overflow: hidden;
	will-change: transform; transform-origin: 50% 50%; pointer-events: none;
	transition: opacity .5s ease; opacity: 0;
}
.nh-lab-p.is-out { opacity: 1; pointer-events: auto; cursor: grab; }
.nh-lab-p.is-held { cursor: grabbing; }
.nh-lab-p.is-focus { cursor: zoom-out; }
.nh-lab-p .nh-m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.nh-lab-n {
	position: absolute; left: 0; top: 0; font-size: 10px; font-weight: 400; line-height: 1; white-space: nowrap;
	color: var(--fg); pointer-events: none; opacity: 0; transition: opacity .5s ease; will-change: transform;
}
.nh-lab-n.is-out { opacity: 1; }
.nh-lab-p.nh-lab-ghost, .nh-lab-n.nh-lab-ghost { opacity: 1; pointer-events: none; transition: opacity 1.4s ease; }
.nh-lab-p.nh-lab-ghost.is-gone, .nh-lab-n.nh-lab-ghost.is-gone { opacity: 0; }
/* the intro: thin grey lines, in the middle of the page, under the texts */
.nh-lab-intro { position: absolute; left: 50%; top: 50%; width: 300px; max-width: 72vw; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; color: #8c8c8c; opacity: 0; transition: opacity .9s ease; }
.nh-lab-intro.is-on { opacity: 1; }
.nh-lab-intro svg { display: block; width: 100%; height: auto; overflow: visible; }
.nh-lab-intro .s { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.nh-lab-intro .a { transform-box: fill-box; transform-origin: 50% 50%; }
.nh-lab-intro .pc { fill: var(--bg); } /* the pieces of the drawing cover the ones under them, as on the page */
.nh-lab-intro .cur { transform-box: fill-box; transform-origin: 0 0; }
.nh-lab-intro .cur path { fill: var(--bg); stroke: currentColor; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.nh-lab-intro text { fill: currentColor; font-size: 11px; font-weight: 400; }
/* the game */
.nh-lab-play { position: absolute; left: 50%; bottom: calc(64px + var(--vb, 0px)); transform: translateX(-50%); z-index: 3; margin: 0; padding: 7px 16px; background: var(--bg); border: 0; border-radius: 999px; font: inherit; font-weight: 600; color: var(--fg); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .6s ease, letter-spacing .4s ease; }
.nh-lab-play.is-on { opacity: 1; pointer-events: auto; }
.nh-lab-play.is-on:hover { opacity: .75; }
.nh-lab-play.is-morph { opacity: 0; letter-spacing: -0.4em; pointer-events: none; transition: opacity .3s ease, letter-spacing .3s ease; }
.nh-lab-pad, .nh-lab-ball { position: absolute; left: 0; top: 0; z-index: 1100; background: var(--fg); pointer-events: none; will-change: transform; }
.nh-lab-pad { border-radius: 3px; transition: width .5s cubic-bezier(.2,.7,.2,1), height .5s cubic-bezier(.2,.7,.2,1), opacity .4s ease; }
.nh-lab-ball { border-radius: 50%; transition: opacity .4s ease; }
.nh-lab-msg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; text-align: center; font-weight: 600; color: var(--fg); opacity: 0; pointer-events: none; transition: opacity .8s ease; }
.nh-lab-msg.is-on { opacity: 1; }
.nh-lab-msg-big { display: block; }
.nh-lab-msg-small { display: block; margin-top: 10px; font-weight: 400; opacity: .55; }
.nh-lab-fw { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; }
.nh-lab-smile { display: block; width: 24px; height: 24px; margin: 14px auto 0; overflow: visible; animation: nh-s-tilt 4.8s 2.4s ease-in-out infinite; }
.nh-s-disc { fill: var(--fg); }
.nh-s-feat * { fill: none; stroke: var(--bg); stroke-width: 1.3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.nh-s-face { transform-box: fill-box; transform-origin: 50% 50%; animation: nh-s-pop 1.2s .35s both; }
.nh-s-feat { transform-box: fill-box; transform-origin: 50% 50%; animation: nh-s-pop2 .7s 1.15s both; }
.nh-s-mouth { transform-box: fill-box; transform-origin: 50% 0; animation: nh-s-grin 2.4s 2.2s ease-in-out infinite alternate; }
.nh-s-eyes line { transform-box: fill-box; transform-origin: 50% 50%; animation: nh-s-blink 3.6s 2.8s infinite; }
@keyframes nh-s-pop { 0% { transform: scale(0); animation-timing-function: ease-out; } 12%, 32% { transform: scale(.2); animation-timing-function: cubic-bezier(.5,0,.6,1); }
	52% { transform: scale(1.18); animation-timing-function: ease-in-out; } 66% { transform: scale(.9); } 79% { transform: scale(1.05); } 90% { transform: scale(.98); } 100% { transform: scale(1); } }
@keyframes nh-s-pop2 { 0% { transform: scale(0); animation-timing-function: cubic-bezier(.5,0,.6,1); } 50% { transform: scale(1.25); animation-timing-function: ease-in-out; } 72% { transform: scale(.9); } 88% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes nh-s-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
@keyframes nh-s-grin { from { transform: scale(1, 1); } to { transform: scale(1.08, 1.4); } }
@keyframes nh-s-tilt { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@media (prefers-reduced-motion: reduce) { .nh-lab-smile, .nh-lab-smile * { animation: none !important; } }
.nh-lab.is-game .nh-lab-p { cursor: default; }
.nh-lab-stop { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; padding: 7px 16px; background: var(--bg); border: 0; border-radius: 999px; font: inherit; font-weight: 600; color: var(--fg); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.nh-lab.is-game .nh-lab-stop { opacity: 1; pointer-events: auto; }
.nh-lab.is-game .nh-lab-stop:hover { opacity: .75; }
.nh-lab .nh-copy { transition: opacity .4s ease; }
.nh-lab.is-game .nh-copy { opacity: 0; } /* while playing, Stop takes the copyright's place */
.nh-lab-ctl { display: flex; gap: 20px; pointer-events: auto; }
.nh-lab-ctl[hidden], .nh-hint[hidden] { display: none; }
.nh-lab-ctl button { padding: 0; background: none; border: 0; cursor: pointer; }
.nh-lab-ctl button:hover { opacity: .6; }
.nh-lab .nh-logo { pointer-events: none; }
.nh-lab .nh-logo svg * { pointer-events: visiblePainted; } /* only the letters are the link: the pieces under the logo can be taken */
.nh-lab-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
/* leaving for the home or the archive: what is on the page rises and fades, as when the home switches views */
.nh-lab.is-going .nh-lab-field, .nh-lab.is-going .nh-lab-intro, .nh-lab.is-going .nh-lab-play, .nh-lab.is-going .nh-lab-msg, .nh-lab.is-going .nh-lab-fw {
	translate: 0 -20vh; opacity: 0; pointer-events: none; transition: translate 1.45s cubic-bezier(.45, 0, .2, 1), opacity .95s cubic-bezier(.4, 0, .6, 1);
}