/*
 * WHY SHE WAS NEVER FEATHERED, FOUND 15 OCTOBER 2026 AFTER TOO MANY GUESSES.
 *
 * Hers, three times: *they are too perfect. They are not feathered.* And she
 * was right every time. The fade ended at about 48 per cent of the box while
 * the photograph, on `object-fit: cover`, filled the box to 50 per cent — so
 * the last two per cent was a hard edge, and the eye reads a hard edge as an
 * oval with a rim no matter how soft the inside is.
 *
 * **The fade now reaches nothing AT the box edge, not before it**, over six
 * stops instead of four, starting at a quarter of the way out. There is no
 * boundary left to see: she dissolves into the ground.
 *
 * THE GIRLS, COMING AND GOING — the field girls.js lays on the real screen.
 * Her brief, 21 September 2026: six tenths of the page faces from the first
 * look, every girl very slowly growing, never touching, going gently, and the
 * next one arriving somewhere else. See assets/js/girls.js.
 */

.girls {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	filter: saturate(1.05) contrast(1.02);
}

/* The older table of places and the rim stay out of the way from the first paint, so their photographs never race the field's own; a page without a script, or one asking for less movement, keeps them (front-page.php). */
.moment .moment-faces,
.moment .moment-edge { display: none; }
@media (prefers-reduced-motion: reduce) {
	.moment .moment-faces,
	.moment .moment-edge { display: block; }
}

.girls .girl {
	position: absolute;
	width: var(--w, 120px);
	aspect-ratio: 3 / 4;
	--dx: 0px;
	--dy: 0px;
	transform: translate(calc(-50% + var(--dx)), calc(-42% + var(--dy))) scale(var(--s0, .96));
	transform-origin: 50% 42%;
	opacity: 0;
	overflow: hidden;
	will-change: opacity, transform;
	transition: opacity var(--in, 2.5s) ease, transform var(--grow, 40s) linear;
	/*
	 * HER WHOLE FACE, HER HAIR, AND SOME AIR AROUND HER — 15 October 2026.
	 *
	 * Hers: *I want their whole face. You have got to have a bit more of their
	 * hair, a little bit more of the surrounding of them.* The oval was 62 per
	 * cent and the photograph inside it was being zoomed to 1.6, so a full
	 * portrait arrived as an eye. **We were cropping her, not the camera.**
	 * The oval is wider now and holds its edge further out before it softens.
	 *
	 * AND I BROKE THE FEATHERING DOING IT — hers: *they are not supposed to be
	 * rectangles. They were all beautifully feathered on the outside and sort of
	 * more oval.* Right, and it was arithmetic. The fade has to FINISH INSIDE
	 * the box or the browser clips it square: the transparent stop lands at
	 * radius x last-stop of the box, and at 80% x 86% that is 69%, which is
	 * past the 50% edge. Her original 62% x 76% landed at 47% — just inside,
	 * which is why hers were soft. This is 70% x 68% = 47.6%: wider than hers,
	 * and the feather still completes before the edge.
	 */
	-webkit-mask-image: radial-gradient(ellipse var(--mw, 50%) var(--mh, 50%) at var(--mx, 50%) var(--my, 50%), #000 0%, #000 40%, rgba(0,0,0,.92) 56%, rgba(0,0,0,.66) 70%, rgba(0,0,0,.34) 84%, rgba(0,0,0,.10) 94%, transparent 100%);
	mask-image: radial-gradient(ellipse var(--mw, 50%) var(--mh, 50%) at var(--mx, 50%) var(--my, 50%), #000 0%, #000 40%, rgba(0,0,0,.92) 56%, rgba(0,0,0,.66) 70%, rgba(0,0,0,.34) 84%, rgba(0,0,0,.10) 94%, transparent 100%);
}

/* Up: she arrives, drifts a few pixels her own way, and her oval grows a little over her whole stay. */
.girls .girl.is-up {
	opacity: 1;
	transform: translate(calc(-50% + var(--dx)), calc(-42% + var(--dy))) scale(var(--s1, 1.24));
}

/* Going: gently, still drifting and growing the last little way as she goes. */
.girls .girl.is-going {
	opacity: 0;
	transition: opacity var(--out, 4s) ease-in, transform var(--grow, 40s) linear;
}

/* The zoom she sees: the photograph draws slowly closer inside its oval — more than half as large again by the time she goes. */
/*
 * HER WHOLE FACE, AND A TRUE DISSOLVE — both of them, 15 October 2026.
 *
 * Hers, more than once: *I want their whole face. You have got to have a bit
 * more of their hair, a little bit more of the surrounding of them* — and
 * separately *they are not feathered.* Every attempt gave her one or the
 * other, and here is why: with the photograph filling the frame edge to edge,
 * a fade that finishes inside the frame crops her hair, and a fade that
 * reaches the frame edge leaves a hard line, which the eye reads as an oval.
 *
 * **So the photograph is inset.** It sits at 76 per cent of the frame with
 * empty room all around it, and the mask dies in that empty room rather than
 * in her hair. The whole head is inside the solid part of the mask and there
 * is no edge anywhere for the eye to catch.
 *
 * And no inner zoom: the whole photograph, never a crop of it.
 *
 * ONE MORE TURN, AND THIS IS THE GEOMETRY THAT ACTUALLY WORKS. With the mask
 * sized AROUND the photograph, her four straight edges sat inside the fade and
 * still read as a soft rectangle — which is the perfect she keeps naming. The
 * oval is now INSCRIBED IN the photograph: its radii are the photograph's own
 * half-width and half-height, so it touches her edges on the axes, leaves the
 * corners at nothing, and reaches zero exactly where she ends. There is no
 * straight line left anywhere in it.
 */
.girls .girl img {
	position: absolute;
	/* How far back she stands inside her own oval — hers, girl by girl.
	   12 is where everybody stood; a bigger number brings more of her hair,
	   her shoulders and her surroundings inside the frame. */
	inset: calc(var(--pull, 12) * 1%);
	width: calc(100% - var(--pull, 12) * 2%);
	height: calc(100% - var(--pull, 12) * 2%);
	object-fit: cover;
	object-position: center 38%;
	pointer-events: none;
	/* Which way she sits in her own frame — hers, girl by girl. */
	transform: translate(var(--nx, 0%), var(--ny, 0%));
	transform-origin: 50% 40%;
}

/*
 * The drawing-closer she asked for on 21 September stays, but it is a breath
 * rather than a crop: 1.6 ate her hair and her shoulders and left an eye.
 */
.girls .girl.is-up img { transform: scale(1.12); }

/* The girls stand behind the doors as they open, and leave with the moment. */
.moment.is-leaving .girls { opacity: 0; transition: opacity 1.1s ease; }

@media (prefers-reduced-motion: reduce) {
	.girls .girl,
	.girls .girl.is-up,
	.girls .girl.is-going,
	.girls .girl img { transition: none; }
}