/* Offline Operations: three line-art plans in the social page's section
   grammar (wtc-social.css supplies the frame, copy and reveal). Each
   visual is a complete still; when its section goes live, dots travel
   the drawn routes. */
.wtc-offline__visual {
	width: 100%;
	max-width: 640px;
	min-width: 0;
	margin: 0;
	justify-self: center;
}

.wtc-offline__svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 560 / 440;
	overflow: hidden;
}

.wtc-offline__line,
.wtc-offline__fine,
.wtc-offline__ring,
.wtc-offline__arrow {
	fill: none;
	stroke: var(--wtc-slate-deep);
	stroke-width: 1;
	opacity: .42;
}

.wtc-offline__fine {
	stroke: var(--wtc-slate-soft);
	stroke-width: .8;
	opacity: .5;
}

.wtc-offline__guide { stroke-dasharray: 2 6; }

.wtc-offline__paper {
	fill: var(--wp--preset--color--base);
	stroke: var(--wtc-slate-deep);
	stroke-width: 1;
	stroke-opacity: .7;
}

.wtc-offline__ring {
	fill: var(--wp--preset--color--base);
	opacity: 1;
	stroke-opacity: .6;
}

.wtc-offline__arrow {
	opacity: .8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wtc-offline__dot,
.wtc-offline__mover { fill: var(--wtc-slate-deep); }

.wtc-offline__stipple {
	fill: none;
	stroke: var(--wtc-slate-soft);
	stroke-width: 2.1;
	stroke-linecap: round;
	opacity: .5;
}

.wtc-offline__flow {
	stroke-dasharray: 3 17;
	opacity: .85;
}

/* Travelling dots ride their route with offset-path. Each holds a fixed
   place on the route (--p) until its section is live, so the still is
   already populated. Browsers without offset-path keep the drawn routes
   and lose only the dots. */
.wtc-offline__mover { display: none; }

@supports (offset-path: path("M0 0H1")) {
	.wtc-offline__mover {
		display: inline;
		offset-path: var(--wtc-offline-path);
		offset-distance: calc(var(--p) * 100%);
		offset-rotate: 0deg;
	}
}

.wtc-offline.is-live .wtc-offline__mover {
	animation: wtc-offline-travel var(--wtc-offline-dur, 10s) linear infinite;
	animation-delay: calc(var(--p) * var(--wtc-offline-dur, 10s) * -1);
}

.wtc-offline.is-live .wtc-offline__flow {
	animation: wtc-offline-flow 4s linear infinite;
	animation-delay: var(--wtc-offline-delay, 0s);
}

.wtc-offline.is-live .wtc-offline__pulse {
	animation: wtc-offline-pulse 5s ease-in-out infinite;
	animation-delay: var(--wtc-offline-delay, 0s);
}

@keyframes wtc-offline-travel {
	0% { offset-distance: 0%; opacity: 0; }
	7%, 93% { opacity: 1; }
	100% { offset-distance: 100%; opacity: 0; }
}

@keyframes wtc-offline-flow { to { stroke-dashoffset: -100; } }

@keyframes wtc-offline-pulse {
	0%, 100% { opacity: .35; }
	40%, 65% { opacity: 1; }
}

.wtc-offline__caption {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .35rem 1rem;
	margin-top: .9rem;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	letter-spacing: .12em;
	color: var(--wtc-slate-deep);
}

.wtc-offline__caption span + span { color: var(--wtc-slate-soft); }

@media (min-width: 900px) {
	.wtc-offline--flip .wtc-social-section__copy { grid-column: 2; grid-row: 1; }
	.wtc-offline--flip .wtc-offline__visual { grid-column: 1; grid-row: 1; }
}

.wtc-js .wtc-offline__visual { opacity: 0; translate: 0 14px; }

.wtc-social-section.is-live .wtc-offline__visual {
	opacity: 1;
	translate: none;
	transition: opacity .75s ease .12s, translate .75s cubic-bezier(.22, 1, .36, 1) .12s;
}

@media (prefers-reduced-motion: reduce) {
	.wtc-js .wtc-offline .wtc-offline__visual { opacity: 1; translate: none; transition: none; }
	.wtc-offline.is-live .wtc-offline__mover,
	.wtc-offline.is-live .wtc-offline__flow,
	.wtc-offline.is-live .wtc-offline__pulse { animation: none; }
}