/* ==========================================================================
   The Engineering Thread
   ==========================================================================
   The decorative layer that carries one line down the homepage, and the
   pencil at each end of it. Geometry is built in assets/js/engineering-thread.js;
   this file is only about how the line and the pencil look.

   The layer never takes a click, never takes focus and is hidden from
   assistive technology: everything it says is already written on the page.
   ========================================================================== */

.tcwt {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	pointer-events: none;
	overflow: visible;
}

.tcwt path {
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-opacity: 0.62;
}

/* pathLength is normalised to 1, so one rule draws any path at any size and the geometry can
   change freely between breakpoints. The dash is a hair longer than the path so a finished line
   overshoots its own end rather than stopping a sub-pixel short of it; the offset that hides an
   undrawn line has to be that same length, or the leftover thousandth shows as a stub. The script
   keeps the same number in DASH. */
.tcwt__line,
.tcwt__sketch,
.tcwt__glyph {
	stroke-dasharray: 1.0012;
	stroke-dashoffset: 1.0012;
}

/* The hand-drawn twin of the main line: a touch softer, and a touch heavier, like graphite. */
.tcwt__sketch {
	stroke-width: 2.4;
	stroke-opacity: 0.5;
}

/* The shapes the line draws in passing sit a little lighter than the line itself. */
.tcwt__glyph {
	stroke-width: 1.5;
	stroke-opacity: 0.44;
	transition: opacity 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tcwt__tick {
	stroke-width: 2.6;
	stroke-opacity: 0.9;
}

/* Only a segment that is mid-transformation is promoted, and only while it is. */
.tcwt.is-working .tcwt__line,
.tcwt.is-working .tcwt__sketch {
	will-change: stroke-dashoffset;
}

/* On the navy bands the same stroke needs a little more presence to read. */
.tcwh-band--navy .tcwt path {
	stroke-opacity: 0.72;
}

.tcwh-band--navy .tcwt__glyph {
	stroke-opacity: 0.5;
}

/* The pencil ---------------------------------------------------------------
   Its graphite point is at its own origin, so placing the element places the
   point it is writing with, and turning it turns it about that point. */

.tcwh-pencil {
	position: absolute;
	left: 0;
	top: 0;
	width: 116px;
	height: 13px;
	transform-origin: 0 0;
	transform: rotate(-26deg);
	filter: drop-shadow(0 7px 10px rgba(15, 37, 68, 0.24));
	pointer-events: none;
	z-index: 3;
}

/* The artwork's point sits 2 x 10 units into a 182 x 20 box; at 116 wide that is 1.3 x 6.4. */
.tcwh-pencil__svg {
	position: absolute;
	left: -1.3px;
	top: -6.4px;
	width: 116px;
	height: 12.7px;
}

/* With scripting neither pencil is shown until the page has settled. The reveal is on the anchor
   rather than the pencil, so the two are independent: the anchor fades the pencil in once, and the
   scroll owns the pencil's own opacity as it merges into the line. Without scripting the pencil is
   simply there, on the sheet, from the first paint. */
html.js .tcwh-anchor--rest,
html.js .tcwh-anchor--restart {
	opacity: 0;
	transition: opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.js .tcwh-anchor--rest.is-visible,
html.js .tcwh-anchor--restart.is-visible {
	opacity: 1;
}

/* Only a pencil actually in motion is promoted. */
.tcwh-pencil.is-moving {
	will-change: transform, opacity;
}

/* Where the closing pencil comes back: under the copy, in the band the thread finishes in. */
.tcwh-anchor--restart {
	left: 46%;
	bottom: 42px;
	z-index: 3;
}

@media (max-width: 899px) {

	.tcwh-anchor--restart {
		left: 34%;
		bottom: 30px;
	}

	.tcwh-pencil {
		transform: rotate(-26deg) scale(0.84);
	}
}

/* The old per-section lines are the fallback for a visitor without scripting. Once the thread is
   running they stand down, so the page never shows two versions of the same line. */
html.tcwt-on .tcwh-thread:not(.tcwh-thread--cta) {
	display: none;
}

html.tcwt-on .tcwh-thread--cta .tcwh-thread__draw {
	visibility: hidden;
}

/* Reduced motion: every section is drawn in its finished state, and nothing moves.
   No information is lost, because the thread never carried any. */
@media (prefers-reduced-motion: reduce) {

	.tcwt__line,
	.tcwt__sketch,
	.tcwt__glyph {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
	}

	.tcwt__sketch {
		opacity: 0;
	}

	.tcwt path,
	.tcwh-pencil {
		transition: none;
	}

	.tcwh-pencil {
		will-change: auto;
	}
}

/* The tap ------------------------------------------------------------------
   The pencil finishes standing almost upright over the strategy call button
   and taps it, so the page ends by pointing at the one thing it is asking for.

   The bounce moves the artwork along the pencil's own length rather than down
   the screen, which is the same thing once it is upright, and leaves the
   element's own transform free for the script to keep placing it. It runs for
   the first third of each cycle and rests for the other two, so it reads as a
   recurring nudge rather than a loop. */

.tcwh-pencil.is-tapping .tcwh-pencil__svg {
	animation: tcwt-tap 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
	will-change: transform;
}

@keyframes tcwt-tap {
	0%, 58%, 100% { transform: translateX(0); }
	16% { transform: translateX(11px); }
	32% { transform: translateX(-2px); }
	44% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {

	.tcwh-pencil.is-tapping .tcwh-pencil__svg {
		animation: none;
		will-change: auto;
	}
}

/* Handsets -----------------------------------------------------------------
   There is no room beside the content on a phone, so the thread is a hairline
   down the margin and each stage says what it is in the empty band at the top
   of its own section, where the full width is available.

   Those marks are drawn by CSS when their section arrives, one shape after the
   next, rather than being scrubbed to the scroll: the page is 11,000px tall on
   a phone, and a mark that draws itself in a beat reads better than one tied to
   the scrollbar. The pencil at each end still follows the scroll. */

.tcwt--hair .tcwt__line {
	stroke-width: 1.2;
	stroke-opacity: 0.34;
}

.tcwt--reveal .tcwt__line,
.tcwt--reveal .tcwt__glyph {
	transition: stroke-dashoffset 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tcwt--reveal .tcwt__glyph {
	transition-delay: calc(var(--i, 0) * 70ms);
}

.tcwt--reveal.is-shown .tcwt__line,
.tcwt--reveal.is-shown .tcwt__glyph {
	stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {

	.tcwt--reveal .tcwt__line,
	.tcwt--reveal .tcwt__glyph {
		transition: none;
		stroke-dashoffset: 0;
	}
}

/* A handset has less room, so the pencil is smaller there. It is still shown: it is the part of
   the thread worth following, and both ends of the story need it. */
@media (max-width: 719px) {

	.tcwh-pencil {
		width: 96px;
		height: 11px;
	}

	.tcwh-pencil__svg {
		left: -1.1px;
		top: -5.3px;
		width: 96px;
		height: 10.5px;
	}
}