/* NK test additions on top of the Codrops demo's base.css */

/* match Fold's scene colour (#e9e6df) so there is no seam around the canvas */
body {
	--color-bg: #e9e6df;
	--nk-hero-gap: 8vh; /* space between the cloth and the list */
}

/* Fill the empty space above the list (the menu's top padding) edge to edge.
   It lives inside .menu so it scrolls away with the list. */
.nk-hero {
	position: relative;
	width: 100vw;                              /* .menu is 90vw and starts at x = 0 */
	height: calc(var(--nk-menu-top) - var(--nk-hero-gap));
	margin-top: calc(-1 * var(--nk-menu-top)); /* sit in the padding, not below it */
	margin-bottom: var(--nk-hero-gap);         /* the gap; the list stays at --nk-menu-top */
	text-align: left;
}

/* Only the demo's dot cursor: hide the system arrow/hand (mouse and trackpad only;
   touch devices are unaffected). The iframe gets the same rule from rapid/hero.html. */
@media (any-pointer: fine) {
	html, body, a, a *, .menu__item-text, .frame__button, iframe { cursor: none !important; }
	.cursor { z-index: 2000; }  /* above the header frame (1000) and the cloth */
}

.nk-hero iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Phones/tablets (below the demo's 53em breakpoint) */
@media screen and (max-width: 53em) {
	/* no grey bar: see-through header that scrolls away with the page,
	   so it never sits on top of the list */
	.frame { background: transparent; position: absolute; }
	/* long names wrap onto a second line instead of being cut off at the right edge */
	.menu__item { padding-left: 1.5rem; }
	.menu__item-textinner { white-space: normal; }
}

/* Desktop too: a long name wraps onto a second line instead of being clipped by
   the reveal mask (.menu__item-text has overflow: hidden for the slide-up animation) */
.menu__item-text { min-width: 0; }
.menu__item-textinner { white-space: normal; }
@media screen and (min-width: 53em) {
	/* the desktop list is left-aligned; keep a wrapped name's second line with it */
	.menu__item-text { text-align: left; }
}

/* Touch screens: tapped project's images, centred on screen (see rapid/touch.js) */
.nk-touch-reveal {
	position: fixed;
	left: 50%;
	top: 50%;
	z-index: 1500;
	transform: translate(-50%, -50%) scale(0.96);
	background: center / contain no-repeat;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s, transform 0.2s;
}
.nk-touch-reveal.is-on {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
@media (hover: none) {
	.hover-reveal { display: none; }
	.menu__item.nk-active .menu__item-textinner { opacity: 0.35; }
}