/* =============================================================
   Motion — "the drape"

   Only three things move by themselves: photographs fall into
   view like fabric, display titles rise a line at a time, and the
   coloured chapters open out to full width as they arrive.
   Everything else moves only when the reader does.

   Nothing here applies until motion.js adds .motion to <html>,
   and it never does for reduced motion, so without it the page
   simply renders complete.
   ============================================================= */

/* Titles, a line at a time */
html.motion .t-rise .ln {
	overflow: hidden;
	padding-bottom: 0.16em;
	margin-bottom: -0.16em;
}

html.motion .t-rise .ln > span {
	display: inline-block;
	transform: translate3d(0, 110%, 0);
	transition: transform 1.15s var(--drape);
	transition-delay: calc(var(--i, 0) * 90ms);
}

html.motion .t-rise.is-in .ln > span { transform: none; }

/* Photographs fall into the frame */
html.motion .drape {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.35s var(--drape);
}

html.motion .drape img {
	transform: scale(1.14);
	transition: transform 2.1s var(--ease);
}

html.motion .drape.is-in { clip-path: inset(0 0 0 0); }
html.motion .drape.is-in img { transform: none; }

/* The opening photograph follows its headline in */
html.motion .open__photo { transition-delay: 0.18s; }

/* Coloured chapters open to full bleed as they scroll in. Pure CSS where the
   browser supports scroll-linked animation; elsewhere they are simply there. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.framework,
		.workshop,
		.sig,
		.call {
			animation: chapter-open linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 85%;
		}
	}
}

@keyframes chapter-open {
	from { clip-path: inset(0 3vw 0 3vw); }
	to   { clip-path: inset(0 0 0 0); }
}

/* -------------------------------------------------------------
   Cursor
   The layer is the size of the window and clips its contents, so
   the ring can never widen the page when it reaches an edge.
   ---------------------------------------------------------- */
.cursor {
	position: fixed;
	inset: 0;
	z-index: 9999;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}

.cursor.is-awake { opacity: 1; }
.cursor.is-text  { opacity: 0; }

.cursor__dot,
.cursor__ring {
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	will-change: transform;
}

.cursor__dot {
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	background: var(--rani);
	box-shadow: 0 0 0 1.5px var(--paper);
}

.cursor__ring {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 1.5px solid var(--ink);
	box-shadow: 0 0 0 1px rgba(247, 243, 238, 0.55);
	transition: width 0.4s var(--ease), height 0.4s var(--ease), margin 0.4s var(--ease),
		background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.cursor.is-link .cursor__ring {
	width: 54px;
	height: 54px;
	margin: -27px 0 0 -27px;
	background: rgba(201, 31, 99, 0.14);
	border-color: var(--rani);
}

.cursor.is-view .cursor__ring {
	width: 84px;
	height: 84px;
	margin: -42px 0 0 -42px;
	background: var(--ink);
	border-color: var(--ink);
}

.cursor__label {
	font-family: var(--sans);
	font-size: 0.7rem;
	font-weight: 500;

	color: var(--paper);
	opacity: 0;
	transition: opacity 0.25s var(--ease);
}

.cursor.is-view .cursor__label { opacity: 1; }
.cursor.is-view .cursor__dot   { opacity: 0; }

html.cursor-on body,
html.cursor-on a,
html.cursor-on button,
html.cursor-on label,
html.cursor-on select { cursor: none; }

@media (prefers-reduced-motion: reduce) {
	.cursor { display: none; }
}

/* Below the width where the drawn cursor is shown, give the reader their own
   pointer back — otherwise a narrow desktop window would have no cursor at all. */
@media (max-width: 1023px) {
	html.cursor-on body,
	html.cursor-on a,
	html.cursor-on button,
	html.cursor-on label,
	html.cursor-on select { cursor: revert; }
}

/* === Round 3 === */

/* On a phone and a tablet the coloured chapters are simply there, full width.
   Opening them out from an inset read as small coloured blocks. */
@media (max-width: 900px) {
	.framework,
	.workshop,
	.sig,
	.call { animation: none !important; clip-path: none !important; }
}

/* The magazine masthead on the framework photograph never scales or drifts
   with the photograph's reveal. */
html.motion .drape .framework__masthead,
html.motion .drape.is-in .framework__masthead { transform: none !important; }

/* Cream cursor over pink and dark grounds, so it is always visible. */
.cursor.is-light .cursor__ring {
	border-color: var(--on-dark);
	box-shadow: 0 0 0 1px rgba(26, 19, 17, 0.35);
}
.cursor.is-light .cursor__dot {
	background: var(--on-dark);
	box-shadow: 0 0 0 1.5px rgba(26, 19, 17, 0.45);
}
.cursor.is-light.is-link .cursor__ring {
	background: rgba(248, 241, 235, 0.16);
	border-color: var(--on-dark);
}
.cursor.is-light.is-view .cursor__ring { background: var(--on-dark); border-color: var(--on-dark); }
.cursor.is-light.is-view .cursor__label { color: var(--ink); }