/* ==========================================================================
   Chapter 01 — Landing · Drift
   A wall of prints — one plane, every photograph uncropped at its own
   proportions — drifting slowly upward and a little to the right, wrapping
   endlessly (wall.js). The INESJ logo sits bottom left, above the wall, with
   the positioning line locked into it. The same wall + identity classes are
   reused by the Contact chapter.
   ========================================================================== */

.chapter--landing {
	height: 100vh;
	height: max(100svh, 34rem);
	isolation: isolate;
}

/* The wall -------------------------------------------------------------- */

.wall {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

/* Still composition — without JavaScript: a loose grid of prints. */
.wall__plane {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: 4vh var(--gutter);
	padding: calc(var(--header-h) + 2vh) var(--margin) 0;
}

.wall__cell {
	width: calc(62% + var(--s) * 30%);
	margin-top: calc(var(--j2) * 5vh);
	margin-left: calc(var(--j1) * (38% - var(--s) * 30%));
}

@media (min-width: 48em) {
	.wall__plane {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.wall__plane {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* With JavaScript the cells wait for wall.js, which sizes and places each
   print for the screen and moves them with transforms. */
html.js .wall:not(.is-laid) .wall__cell {
	visibility: hidden;
}

.wall.is-laid .wall__plane {
	display: block;
	padding: 0;
}

.wall.is-laid .wall__cell {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	will-change: transform;
}

/* Prints show first as their own colour, then develop in, one after another. */
.wall .frame__img {
	transition-delay: calc(var(--j1) * 0.9s);
}

/* Computers: what happens on the print under the pointer.
   Warm palette: a dot in the opposite colour of the photograph grows at its
   centre. Sky palette: no mark — the other prints sink into a drifting mist
   made of the page colour (a tileable fractal-noise mask, 500 px, drifting
   right one tile every 30 s), so only the print under the pointer stays
   clear. wall.js adds .is-mist-moving while the pointer is over the prints
   (it creates the mist layers) and .is-misty (it fades them in); leaving the
   prints fades the mist out, then removes the layers, so nothing drifts
   unseen. (1.6.4 tried lit clouds instead; Ines preferred this mist.) */
@media (hover: hover) and (pointer: fine) {
	.wall.is-laid .wall__cell {
		pointer-events: auto;
	}

	.wall__print .frame__media::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: clamp(44px, 5.5vw, 96px);
		aspect-ratio: 1;
		border-radius: 50%;
		background-color: var(--dot, var(--c-signal));
		transform: translate(-50%, -50%) scale(0);
		transition: transform 0.35s var(--ease-out);
	}

	.wall__cell:hover .frame__media::after {
		transform: translate(-50%, -50%) scale(1);
	}

	.palette-sky .wall__print .frame__media::after {
		display: none;
	}

	.palette-sky .wall.is-mist-moving .wall__print .frame__media::before {
		content: "";
		position: absolute;
		z-index: 1;
		top: 0;
		bottom: 0;
		left: -500px;
		width: calc(100% + 500px);
		background-color: var(--bg);
		-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='500'%20height='500'%3E%3Cfilter%20id='m'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.004'%20numOctaves='4'%20seed='11'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201.9%200%200%200%20-0.25'/%3E%3C/filter%3E%3Crect%20width='500'%20height='500'%20filter='url(%23m)'/%3E%3C/svg%3E") 0 0 / 500px 500px repeat;
		mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='500'%20height='500'%3E%3Cfilter%20id='m'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.004'%20numOctaves='4'%20seed='11'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201.9%200%200%200%20-0.25'/%3E%3C/filter%3E%3Crect%20width='500'%20height='500'%20filter='url(%23m)'/%3E%3C/svg%3E") 0 0 / 500px 500px repeat;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.6s var(--ease-out);
		animation: inesj-mist 30s linear infinite;
		animation-delay: calc(var(--j1, 0.5) * -30s);
	}

	.palette-sky .wall.is-misty .wall__cell:not(:hover) .frame__media::before {
		opacity: 1;
		transition-duration: 1.4s;
	}

	/* The mist alone can thin out over a whole print; a light fade keeps
	   every other print a step back. */
	.palette-sky .wall.is-laid .wall__cell {
		transition: opacity 0.6s var(--ease-out);
	}

	.palette-sky .wall.is-misty .wall__cell:not(:hover) {
		opacity: 0.75;
		transition-duration: 1.4s;
	}

	html.motion-off .wall .frame__media::before {
		animation-play-state: paused;
	}
}

@keyframes inesj-mist {
	to {
		transform: translate3d(500px, 0, 0);
	}
}

/* The logo: INESJ in the bottom left corner ------------------------------
   About 35 % of a desktop screen (--sig-w in tokens.css), half a page margin
   from the left edge (closer than the text columns, still clear of the
   edge); the bottom of the J touches the bottom edge of the screen. The positioning
   line fits the space that remains under I-N-E-S, beside the tail of the J:
   its first line starts just under the letters, its italic line ends on the
   bottom edge — on every screen size.
   Measured on Jost ExtraBold: the baseline sits at 0.747 em of the 0.8 em
   line box and the J reaches 0.243 em below it (0.19 em below the box).
   Measured on the line: Archivo's baseline at 0.83 of a 1 em line, cap height
   0.686 em; Newsreader Italic's baseline at 0.74, the tail of its f 0.2325 em
   below it. Prints drift freely behind the logo; a soft glow in the page
   colour hugs the line's letters so it stays legible over a dark print
   (invisible on the page itself — no box). */

.identity {
	--f: calc(var(--sig-w) / var(--wm-em));     /* the wordmark's font size */
	--g: max(6px, calc(var(--f) * 0.04));       /* gap under the letters */
	/* The line's font size: two lines (1.9685 × their size, cap height to the
	   italic f's tail) fill the J's depth (0.243 em) below the gap. */
	--d: max(11px, calc((var(--f) * 0.243 - var(--g)) / 1.9685));
	position: absolute;
	left: clamp(12px, 1.6vw, 28px);
	bottom: 0;
	z-index: 4;
	width: var(--sig-w);
	/* The block ends where the J ends. On the smallest phones the line can't
	   shrink below 11 px and needs a little more than the J's depth: the
	   block then rises just enough to keep the line's last letters on screen. */
	padding-bottom: max(calc(var(--f) * 0.19), calc(var(--g) + var(--d) * 1.9685 - var(--f) * 0.053));
}

.identity__mark {
	container-type: inline-size;
}

.wordmark {
	display: block;
	margin: 0 0 0 calc(var(--wm-lsb) * -1);
	font-family: var(--font-mark);
	font-size: calc(var(--sig-w) / var(--wm-em));
	font-size: calc(100cqw / var(--wm-em));
	font-weight: 800;
	line-height: 0.8;
	letter-spacing: -0.06em;  /* measured: the S and J stay 0.05 em apart */
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--fg);
}

/* Two lines, 1.05 × their size apart. Placed from the letters (the first
   line's capitals start --g under the wordmark's baseline), so the line can
   never ride up into the logo; at this size the italic f's tail ends on the
   bottom edge. */
.identity__role {
	position: absolute;
	left: 0;
	top: calc(var(--f) * 0.747 + var(--g) - var(--d) * 0.144);
	max-width: calc(var(--f) * 1.86);           /* clear of the J's hook (1.917 em) */
	margin: 0;
	font-size: var(--d);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.015em;
	text-shadow: 0 0 1px var(--bg), 0 0 0.18em var(--bg);
	text-shadow: 0 0 1px var(--bg), 0 0 0.18em var(--bg), 0 0 0.45em color-mix(in srgb, var(--bg) 75%, transparent);
}

.identity__role em {
	display: block;
	margin-top: calc(var(--d) * 0.14);
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.005em;
}