/**
 * View Transitions — work grid <-> case study.
 *
 * Both documents must carry this rule for a cross-document transition to
 * happen, which is why the stylesheet is enqueued only by the grid and the
 * case study rather than site-wide.
 */

/* Reduced motion switches the whole thing off at source: no transition is
   started, so there is nothing to override further down. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

/* The page underneath: a quick cross-fade, faster than the morph on top of it,
   so the moving tile is what the eye follows. */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 260ms;
	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* The tile expanding into the hero. Slower, and eased so it settles rather than
   arriving — the whole point is that it should not read as a page load. */
::view-transition-group(.skvt-hero) {
	animation-duration: 620ms;
	animation-timing-function: cubic-bezier(0.22, 0.8, 0.24, 1);
}

/* The two snapshots are different shapes — a 3:2 tile and a full-width hero —
   and the default `fill` would stretch one into the other. Cover crops instead,
   which is what makes it read as the same image growing. */
::view-transition-old(.skvt-hero),
::view-transition-new(.skvt-hero) {
	object-fit: cover;
	overflow: clip;
}

/* Cross-fade the pair over the first part of the move, so the tile's photo has
   handed over to the hero well before the shape stops travelling. */
::view-transition-old(.skvt-hero) {
	animation-name: skvt-fade-out;
	animation-duration: 280ms;
}

::view-transition-new(.skvt-hero) {
	animation-name: skvt-fade-in;
	animation-duration: 420ms;
}

@keyframes skvt-fade-out { to { opacity: 0; } }
@keyframes skvt-fade-in  { from { opacity: 0; } }

/* ------------------------------------------------------------------ *
 *  Staging the arrival
 *
 *  The name is on the whole hero section, so the browser scales one bitmap
 *  of it from the tile's rectangle up to full size. Anything legible caught
 *  in that snapshot gets stretched with it — the headline smears, which is
 *  what reads as "glitchy".
 *
 *  So the hero arrives in two beats instead of one: the coloured field
 *  morphs on its own with nothing readable in it, and once it has landed
 *  the content rises into place. Same trick as a good page load — the
 *  container settles first, then it fills.
 * ------------------------------------------------------------------ */

/* Beat one: hold the hero's contents out of the snapshot entirely. No
   transition on the way out, or the browser has something half-faded to
   capture. */
html.skvt-in .skcs-hero__inner,
html.skvt-in .skcs-hero__strip {
	opacity: 0 !important;
	transition: none !important;
}

/* Beat two: the morph has finished, so bring them in under their own steam.
   Sketch Reveal has usually already marked these .sk-in while they were
   hidden, which would otherwise snap them on with no animation at all — this
   animation is what actually plays. */
html.skvt-landed .skcs-hero__inner {
	animation: skvt-rise 620ms cubic-bezier(0.22, 0.8, 0.24, 1) both;
}

html.skvt-landed .skcs-hero__strip {
	animation: skvt-rise 720ms cubic-bezier(0.22, 0.8, 0.24, 1) 120ms both;
}

@keyframes skvt-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

/* Reveal must not re-hide what we have just animated in. */
html.skvt-landed .skcs-hero [data-sk-reveal] {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
}

/* ------------------------------------------------------------------ *
 *  The header
 *
 *  It floats over a case-study hero, and without a name of its own it is
 *  part of the root cross-fade — so it dips out and back while the hero
 *  grows underneath it. Naming it takes it out of that fade and holds it
 *  still, which is most of the difference between "page changed" and "the
 *  page moved".
 * ------------------------------------------------------------------ */
/* Named from here rather than in the header template: this stylesheet only
   loads on the grid and on case studies, so the header is only pulled out of
   the fade on the pages where a transition can actually happen. */
.skgh {
	view-transition-name: skvt-header;
}

::view-transition-group(skvt-header) {
	animation-duration: 320ms;
}

::view-transition-old(skvt-header),
::view-transition-new(skvt-header) {
	/* Held, not cross-faded — the nav is identical on both pages. */
	animation: none;
	mix-blend-mode: normal;
	height: 100%;
}