/* API Development hero illustration.
   See inc/hero-illustration-api.php. Base styles draw the completed
   exchange; all motion is inside the no-preference media query. One 8s
   master timeline: GET types (4–16%), request lanes in (5–15%), on to the
   services (24–34%), replies back (40–48%), JSON types out (48–72%),
   200 OK (72–77%), response to clients (76–88%), hold, reset (92–97%). */

.api-hero {
	position: absolute;
	inset: 0;
}

.api-hero svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	font-family: var(--font-heading);
}

.api-hero__glow { fill: var(--cyan-tint); opacity: 0.55; }

.api-hero__ring {
	fill: none;
	stroke: var(--line);
	stroke-width: 1.5;
	stroke-dasharray: 2 9;
	stroke-linecap: round;
}

.api-hero__ring--inner { stroke: var(--cyan); opacity: 0.5; stroke-dasharray: 1 12; }

.api-hero__symbol {
	fill: #cfeefb;
	font-size: 54px;
	font-weight: 500;
}

.api-hero__dot--a { fill: #b9e4f7; }
.api-hero__dot--b { fill: var(--navy); opacity: 0.4; }
.api-hero__dot--c { fill: var(--cyan); }

/* ---- Lanes ---- */
.api-hero__lane {
	fill: none;
	stroke: var(--cyan-tint);
	stroke-width: 8;
	stroke-linecap: round;
}

.api-hero__flow {
	fill: none;
	stroke: var(--navy);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-dasharray: 1 8;
	opacity: 0.5;
}

/* ---- Chips ---- */
.api-hero__chip-wrap { filter: drop-shadow(0 10px 16px rgba(1, 36, 126, 0.14)); }

.api-hero__chip {
	fill: var(--paper);
	stroke: var(--line);
	stroke-width: 1;
}

.api-hero__ping {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 2;
	opacity: 0;
}

.api-hero__glyph {
	fill: none;
	stroke: var(--navy);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---- Console ---- */
.api-hero__console { filter: drop-shadow(0 20px 28px rgba(1, 36, 126, 0.28)); }

.api-hero__win { fill: var(--navy); }

.api-hero__win-dot { fill: var(--paper); opacity: 0.35; }
.api-hero__win-dot--a { fill: var(--cyan); opacity: 1; }

.api-hero__pill rect { fill: var(--cyan); }
.api-hero__pill text {
	fill: var(--paper);
	font-size: 10.5px;
	font-weight: 600;
	text-anchor: middle;
	letter-spacing: 0.04em;
}

.api-hero__req    { fill: var(--paper); opacity: 0.85; }
.api-hero__cursor { fill: var(--cyan); }
.api-hero__rule   { stroke: var(--paper); stroke-width: 1; opacity: 0.14; }

.api-hero__brace { fill: var(--paper); opacity: 0.5; }
.api-hero__key   { fill: var(--cyan); }
.api-hero__val   { fill: var(--paper); opacity: 0.85; }

.api-hero__meter-track { fill: var(--paper); opacity: 0.12; }
.api-hero__meter       { fill: var(--cyan); }

/* ---- Tags ---- */
.api-hero__tag { filter: drop-shadow(0 8px 12px rgba(1, 36, 126, 0.14)); }
.api-hero__tag rect { fill: var(--paper); stroke: var(--cyan); stroke-width: 1.2; }
.api-hero__tag text {
	fill: var(--navy);
	font-size: 11.5px;
	font-weight: 600;
	text-anchor: middle;
}

/* Packets hidden in the static state. */
.api-hero__packet {
	opacity: 0;
	fill: var(--cyan);
	filter: drop-shadow(0 0 5px rgba(0, 159, 226, 0.7));
	offset-rotate: 0deg;
}

.api-hero__packet--req-in { fill: var(--navy); filter: drop-shadow(0 0 4px rgba(1, 36, 126, 0.4)); }

/* ---- Motion ---- */
.api-hero__ring,
.api-hero__ping,
.api-hero__pill,
.api-hero__line,
.api-hero__req,
.api-hero__meter,
.api-hero__response,
.api-hero__tag,
.api-hero__dot,
.api-hero__chip-wrap {
	transform-box: fill-box;
	transform-origin: center;
}

.api-hero__ring { transform-box: view-box; transform-origin: 260px 260px; }
.api-hero__line,
.api-hero__req,
.api-hero__meter { transform-origin: left center; }

@media (prefers-reduced-motion: no-preference) {
	.api-hero__ring--outer { animation: api-spin 90s linear infinite; }
	.api-hero__ring--inner { animation: api-spin 70s linear infinite reverse; }
	.api-hero__flow        { animation: api-flow 1.5s linear infinite; }
	.api-hero__dot         { animation: api-drift 7s ease-in-out infinite; }
	.api-hero__dot--b      { animation-delay: -3s; }
	.api-hero__dot--c      { animation-delay: -5s; }
	.api-hero__cursor      { animation: api-blink 1s steps(1) infinite; }

	.api-hero__tag--v      { animation: api-float 6s ease-in-out infinite; }
	.api-hero__tag--auth   { animation: api-float 7s ease-in-out -3s infinite; }

	/* Master timeline */
	.api-hero__pill--get   { animation: api-get 8s ease-out infinite; }
	.api-hero__req         { animation: api-req 8s ease-out infinite; }
	.api-hero__meter       { animation: api-meter 8s ease-in-out infinite; }
	.api-hero__response    { animation: api-response 8s linear infinite; }
	.api-hero__line        { animation: api-line 8s ease-out infinite; }
	.api-hero__pill--ok    { animation: api-ok 8s ease-out infinite; }

	.api-hero__packet--req-in  { animation: api-req-in 8s ease-in-out infinite; }
	.api-hero__packet--req-out { animation: api-req-out 8s ease-in-out infinite; }
	.api-hero__packet--res-in  { animation: api-res-in 8s ease-in-out infinite; }
	.api-hero__packet--res-out { animation: api-res-out 8s ease-in-out infinite; }

	.api-hero__ping--right { animation: api-ping-right 8s ease-out infinite; }
	.api-hero__ping--left  { animation: api-ping-left 8s ease-out infinite; }
}

@keyframes api-spin  { to { transform: rotate(360deg); } }
@keyframes api-flow  { to { stroke-dashoffset: -9; } }
@keyframes api-blink { 50% { opacity: 0; } }

@keyframes api-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}

@keyframes api-drift {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(6px, -10px); }
}

@keyframes api-get {
	0%, 3%   { opacity: 0; transform: scale(0.5); }
	7%       { opacity: 1; transform: scale(1.12); }
	10%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.5); }
}

@keyframes api-req {
	0%, 8%   { transform: scaleX(0); }
	16%, 92% { transform: scaleX(1); }
	97%, 100% { transform: scaleX(0); }
}

@keyframes api-meter {
	0%, 22%  { transform: scaleX(0.02); opacity: 1; }
	74%, 92% { transform: scaleX(1); opacity: 1; }
	97%, 100% { transform: scaleX(0.02); opacity: 1; }
}

/* Response block is hidden until its reply arrives; lines then type in
   (each line has its own animation-delay for the stagger). */
@keyframes api-response {
	0%, 44%   { opacity: 0; }
	46%, 92%  { opacity: 1; }
	97%, 100% { opacity: 0; }
}

@keyframes api-line {
	0%, 48%  { transform: scaleX(0); }
	53%, 100% { transform: scaleX(1); }
}

@keyframes api-ok {
	0%, 72%  { opacity: 0; transform: scale(0.6); }
	77%      { opacity: 1; transform: scale(1.12); }
	80%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.6); }
}

/* Packets: request in, request on, reply back, response out. */
@keyframes api-req-in {
	0%, 5%   { offset-distance: 0%;   opacity: 0; }
	6%       { offset-distance: 0%;   opacity: 1; }
	15%      { offset-distance: 100%; opacity: 1; }
	16%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes api-req-out {
	0%, 24%  { offset-distance: 0%;   opacity: 0; }
	25%      { offset-distance: 0%;   opacity: 1; }
	34%      { offset-distance: 100%; opacity: 1; }
	35%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes api-res-in {
	0%, 40%  { offset-distance: 0%;   opacity: 0; }
	41%      { offset-distance: 0%;   opacity: 1; }
	48%      { offset-distance: 100%; opacity: 1; }
	49%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes api-res-out {
	0%, 76%  { offset-distance: 0%;   opacity: 0; }
	77%      { offset-distance: 0%;   opacity: 1; }
	88%      { offset-distance: 100%; opacity: 1; }
	89%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes api-ping-right {
	0%, 34%  { opacity: 0; transform: scale(1); }
	36%      { opacity: 0.9; transform: scale(1); }
	44%, 100% { opacity: 0; transform: scale(1.35); }
}
@keyframes api-ping-left {
	0%, 87%  { opacity: 0; transform: scale(1); }
	89%      { opacity: 0.9; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(1.35); }
}

@media (max-width: 1024px) {
	.api-hero__flow { display: none; }
}