/* React & Frontend hero illustration.
   See inc/hero-illustration-react.php. Base styles draw the fully mounted,
   updated UI; all motion is inside the no-preference media query. One 10s
   master timeline: components mount 3–29%, tree nodes pop in alongside,
   four state updates land at 36/48/60/72% (packet travels root→leaf over the
   preceding ~6%, then only the matching component re-renders and flashes),
   hold, reset 92–97%. */

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

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

.rf-hero__glow { fill: var(--cyan-tint); opacity: 0.5; }

.rf-hero__ring {
	fill: none;
	stroke: var(--cyan-tint);
	stroke-width: 12;
}

.rf-hero__arc {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 12;
	stroke-linecap: round;
	stroke-dasharray: 250 1246;
	stroke-dashoffset: -1000;
}

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

.rf-hero__shadow { fill: var(--navy); opacity: 0.08; }

/* ---- Cards ---- */
.rf-hero__panel,
.rf-hero__window,
.rf-hero__tag { filter: drop-shadow(0 12px 18px rgba(1, 36, 126, 0.15)); }

.rf-hero__card-bg {
	fill: var(--paper);
	stroke: var(--line);
	stroke-width: 1;
}

.rf-hero__bar { fill: var(--mist); }
.rf-hero__url { fill: var(--mist-dark); }

.rf-hero__accent-fill { fill: var(--cyan); }
.rf-hero__muted-fill  { fill: var(--line); }
.rf-hero__ink         { fill: var(--navy); opacity: 0.85; }
.rf-hero__ink-soft    { fill: var(--navy); opacity: 0.18; }
.rf-hero__mist-card   { fill: var(--mist); }
.rf-hero__navy-card   { fill: var(--navy); }
.rf-hero__white       { fill: var(--paper); }
.rf-hero__white--soft { opacity: 0.5; }
.rf-hero__tint-pill   { fill: var(--cyan-tint); }
.rf-hero__btn-bg      { fill: var(--cyan); }

.rf-hero__tag rect { fill: var(--paper); stroke: var(--cyan); stroke-width: 1.2; }
.rf-hero__tag text {
	fill: var(--navy);
	font-size: 12px;
	font-weight: 600;
	text-anchor: middle;
}

/* ---- Tree ---- */
.rf-hero__edge {
	fill: none;
	stroke: var(--line);
	stroke-width: 1.8;
	stroke-linecap: round;
}

.rf-hero__node-root { fill: var(--navy); }
.rf-hero__node-bg   { fill: var(--paper); stroke: var(--navy); stroke-width: 1.6; }
.rf-hero__node-core { fill: var(--cyan); }

.rf-hero__glow-ring {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 2.5;
	opacity: 0;
}

/* ---- Updated states (static end state) ---- */
.rf-hero__stat-bar  { fill: var(--navy); opacity: 0.85; }
.rf-hero__chart-bar { fill: var(--navy); opacity: 0.3; }
.rf-hero__chart-bar--hot { fill: var(--cyan); opacity: 1; }

.rf-hero__track    { fill: var(--line); }
.rf-hero__track-on { fill: var(--cyan); }
.rf-hero__knob     { fill: var(--paper); filter: drop-shadow(0 1px 2px rgba(1, 36, 126, 0.3)); }

.rf-hero__flash {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 2.5;
	opacity: 0;
}

/* ---- Packets (hidden when static) ---- */
.rf-hero__packet {
	fill: var(--cyan);
	opacity: 0;
	filter: drop-shadow(0 0 6px rgba(0, 159, 226, 0.8));
	offset-rotate: 0deg;
}

/* ---- Motion ---- */
.rf-hero__arc { transform-box: view-box; transform-origin: 260px 260px; }

.rf-hero__comp,
.rf-hero__node,
.rf-hero__glow-ring,
.rf-hero__flash,
.rf-hero__button,
.rf-hero__stat-bar,
.rf-hero__chart-bar,
.rf-hero__knob,
.rf-hero__track-on,
.rf-hero__dot {
	transform-box: fill-box;
	transform-origin: center;
}

.rf-hero__stat-bar  { transform-origin: left center; }
.rf-hero__chart-bar { transform-origin: center bottom; }

@media (prefers-reduced-motion: no-preference) {
	.rf-hero__arc     { animation: rf-spin 80s linear infinite; }
	.rf-hero__dot     { animation: rf-drift 7s ease-in-out infinite; }
	.rf-hero__dot--b  { animation-delay: -3s; }
	.rf-hero__dot--c  { animation-delay: -5s; }
	.rf-hero__tag--app   { animation: rf-float 6s ease-in-out infinite; }
	.rf-hero__tag--state { animation: rf-float 7s ease-in-out -2s infinite; }
	.rf-hero__tag--ts    { animation: rf-float 6.5s ease-in-out -4s infinite; }

	/* Master timeline */
	.rf-hero__comp--nav { animation: rf-mount-nav 10s cubic-bezier(0.2, 0.9, 0.3, 1.1) infinite; }
	.rf-hero__comp--hero { animation: rf-mount-hero 10s cubic-bezier(0.2, 0.9, 0.3, 1.1) infinite; }
	.rf-hero__comp--stat { animation: rf-mount-stat 10s cubic-bezier(0.2, 0.9, 0.3, 1.1) infinite; }
	.rf-hero__comp--chart { animation: rf-mount-chart 10s cubic-bezier(0.2, 0.9, 0.3, 1.1) infinite; }
	.rf-hero__comp--toggle { animation: rf-mount-toggle 10s cubic-bezier(0.2, 0.9, 0.3, 1.1) infinite; }
	.rf-hero__comp--list { animation: rf-mount-list 10s cubic-bezier(0.2, 0.9, 0.3, 1.1) infinite; }
	.rf-hero__comp--foot { animation: rf-mount-foot 10s cubic-bezier(0.2, 0.9, 0.3, 1.1) infinite; }

	.rf-hero__node--root { animation: rf-node-root 10s cubic-bezier(0.2, 0.9, 0.3, 1.3) infinite; }
	.rf-hero__node--mid  { animation: rf-node-mid 10s cubic-bezier(0.2, 0.9, 0.3, 1.3) infinite; }
	.rf-hero__node--leaf { animation: rf-node-leaf 10s cubic-bezier(0.2, 0.9, 0.3, 1.3) infinite; }

	.rf-hero__node--root .rf-hero__glow-ring  { animation: rf-glow-root 10s ease-out infinite; }
	.rf-hero__node--mid-0 .rf-hero__glow-ring { animation: rf-glow-mid-0 10s ease-out infinite; }
	.rf-hero__node--mid-1 .rf-hero__glow-ring { animation: rf-glow-mid-1 10s ease-out infinite; }
	.rf-hero__node--leaf-0 .rf-hero__glow-ring { animation: rf-glow-leaf-0 10s ease-out infinite; }
	.rf-hero__packet--0 { animation: rf-packet-0 10s ease-in-out infinite; }
	.rf-hero__flash--0 { animation: rf-flash-0 10s ease-out infinite; }
	.rf-hero__node--leaf-1 .rf-hero__glow-ring { animation: rf-glow-leaf-1 10s ease-out infinite; }
	.rf-hero__packet--1 { animation: rf-packet-1 10s ease-in-out infinite; }
	.rf-hero__flash--1 { animation: rf-flash-1 10s ease-out infinite; }
	.rf-hero__node--leaf-2 .rf-hero__glow-ring { animation: rf-glow-leaf-2 10s ease-out infinite; }
	.rf-hero__packet--2 { animation: rf-packet-2 10s ease-in-out infinite; }
	.rf-hero__flash--2 { animation: rf-flash-2 10s ease-out infinite; }
	.rf-hero__node--leaf-3 .rf-hero__glow-ring { animation: rf-glow-leaf-3 10s ease-out infinite; }
	.rf-hero__packet--3 { animation: rf-packet-3 10s ease-in-out infinite; }
	.rf-hero__flash--3 { animation: rf-flash-3 10s ease-out infinite; }

	.rf-hero__stat-bar       { animation: rf-stat 10s ease-out infinite; }
	.rf-hero__chart-bar--hot { animation: rf-chart 10s cubic-bezier(0.2, 0.9, 0.3, 1.3) infinite; }
	.rf-hero__knob           { animation: rf-knob 10s ease-in-out infinite; }
	.rf-hero__track-on       { animation: rf-track 10s ease-in-out infinite; }
	.rf-hero__button         { animation: rf-press 10s ease-out infinite; }
}

@keyframes rf-spin { to { transform: rotate(360deg); } }

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

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

@keyframes rf-mount-nav {
	0%, 3% { opacity: 0; transform: translateY(16px) scale(0.96); }
	8%, 92% { opacity: 1; transform: translateY(0) scale(1); }
	97%, 100% { opacity: 0; transform: translateY(16px) scale(0.96); }
}

@keyframes rf-mount-hero {
	0%, 6% { opacity: 0; transform: translateY(16px) scale(0.96); }
	11%, 92% { opacity: 1; transform: translateY(0) scale(1); }
	97%, 100% { opacity: 0; transform: translateY(16px) scale(0.96); }
}

@keyframes rf-mount-stat {
	0%, 9% { opacity: 0; transform: translateY(16px) scale(0.96); }
	14%, 92% { opacity: 1; transform: translateY(0) scale(1); }
	97%, 100% { opacity: 0; transform: translateY(16px) scale(0.96); }
}

@keyframes rf-mount-chart {
	0%, 12% { opacity: 0; transform: translateY(16px) scale(0.96); }
	17%, 92% { opacity: 1; transform: translateY(0) scale(1); }
	97%, 100% { opacity: 0; transform: translateY(16px) scale(0.96); }
}

@keyframes rf-mount-toggle {
	0%, 15% { opacity: 0; transform: translateY(16px) scale(0.96); }
	20%, 92% { opacity: 1; transform: translateY(0) scale(1); }
	97%, 100% { opacity: 0; transform: translateY(16px) scale(0.96); }
}

@keyframes rf-mount-list {
	0%, 18% { opacity: 0; transform: translateY(16px) scale(0.96); }
	23%, 92% { opacity: 1; transform: translateY(0) scale(1); }
	97%, 100% { opacity: 0; transform: translateY(16px) scale(0.96); }
}

@keyframes rf-mount-foot {
	0%, 21% { opacity: 0; transform: translateY(16px) scale(0.96); }
	26%, 92% { opacity: 1; transform: translateY(0) scale(1); }
	97%, 100% { opacity: 0; transform: translateY(16px) scale(0.96); }
}

@keyframes rf-node-root {
	0%, 1% { opacity: 0; transform: scale(0.3); }
	5%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.3); }
}

@keyframes rf-node-mid {
	0%, 5% { opacity: 0; transform: scale(0.3); }
	10%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.3); }
}

@keyframes rf-node-leaf {
	0%, 10% { opacity: 0; transform: scale(0.3); }
	16%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.3); }
}

@keyframes rf-glow-root {
	0% { opacity: 0; transform: scale(1); }
	29% { opacity: 0; transform: scale(1); }
	30% { opacity: 1; transform: scale(1); }
	35% { opacity: 0; transform: scale(1.5); }
	41% { opacity: 0; transform: scale(1); }
	42% { opacity: 1; transform: scale(1); }
	47% { opacity: 0; transform: scale(1.5); }
	53% { opacity: 0; transform: scale(1); }
	54% { opacity: 1; transform: scale(1); }
	59% { opacity: 0; transform: scale(1.5); }
	65% { opacity: 0; transform: scale(1); }
	66% { opacity: 1; transform: scale(1); }
	71% { opacity: 0; transform: scale(1.5); }
	100% { opacity: 0; }
}

@keyframes rf-glow-mid-0 {
	0% { opacity: 0; transform: scale(1); }
	31% { opacity: 0; transform: scale(1); }
	32% { opacity: 1; transform: scale(1); }
	37% { opacity: 0; transform: scale(1.5); }
	43% { opacity: 0; transform: scale(1); }
	44% { opacity: 1; transform: scale(1); }
	49% { opacity: 0; transform: scale(1.5); }
	100% { opacity: 0; }
}

@keyframes rf-glow-mid-1 {
	0% { opacity: 0; transform: scale(1); }
	55% { opacity: 0; transform: scale(1); }
	56% { opacity: 1; transform: scale(1); }
	61% { opacity: 0; transform: scale(1.5); }
	67% { opacity: 0; transform: scale(1); }
	68% { opacity: 1; transform: scale(1); }
	73% { opacity: 0; transform: scale(1.5); }
	100% { opacity: 0; }
}

@keyframes rf-glow-leaf-0 {
	0% { opacity: 0; transform: scale(1); }
	35% { opacity: 0; transform: scale(1); }
	36% { opacity: 1; transform: scale(1); }
	41% { opacity: 0; transform: scale(1.5); }
	100% { opacity: 0; }
}

@keyframes rf-packet-0 {
	0%, 29% { offset-distance: 0%; opacity: 0; }
	30% { offset-distance: 0%; opacity: 1; }
	35% { offset-distance: 100%; opacity: 1; }
	36%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes rf-flash-0 {
	0%, 35% { opacity: 0; transform: scale(1); }
	36% { opacity: 1; transform: scale(1); }
	43%, 100% { opacity: 0; transform: scale(1.06); }
}

@keyframes rf-glow-leaf-1 {
	0% { opacity: 0; transform: scale(1); }
	47% { opacity: 0; transform: scale(1); }
	48% { opacity: 1; transform: scale(1); }
	53% { opacity: 0; transform: scale(1.5); }
	100% { opacity: 0; }
}

@keyframes rf-packet-1 {
	0%, 41% { offset-distance: 0%; opacity: 0; }
	42% { offset-distance: 0%; opacity: 1; }
	47% { offset-distance: 100%; opacity: 1; }
	48%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes rf-flash-1 {
	0%, 47% { opacity: 0; transform: scale(1); }
	48% { opacity: 1; transform: scale(1); }
	55%, 100% { opacity: 0; transform: scale(1.06); }
}

@keyframes rf-glow-leaf-2 {
	0% { opacity: 0; transform: scale(1); }
	59% { opacity: 0; transform: scale(1); }
	60% { opacity: 1; transform: scale(1); }
	65% { opacity: 0; transform: scale(1.5); }
	100% { opacity: 0; }
}

@keyframes rf-packet-2 {
	0%, 53% { offset-distance: 0%; opacity: 0; }
	54% { offset-distance: 0%; opacity: 1; }
	59% { offset-distance: 100%; opacity: 1; }
	60%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes rf-flash-2 {
	0%, 59% { opacity: 0; transform: scale(1); }
	60% { opacity: 1; transform: scale(1); }
	67%, 100% { opacity: 0; transform: scale(1.06); }
}

@keyframes rf-glow-leaf-3 {
	0% { opacity: 0; transform: scale(1); }
	71% { opacity: 0; transform: scale(1); }
	72% { opacity: 1; transform: scale(1); }
	77% { opacity: 0; transform: scale(1.5); }
	100% { opacity: 0; }
}

@keyframes rf-packet-3 {
	0%, 65% { offset-distance: 0%; opacity: 0; }
	66% { offset-distance: 0%; opacity: 1; }
	71% { offset-distance: 100%; opacity: 1; }
	72%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes rf-flash-3 {
	0%, 71% { opacity: 0; transform: scale(1); }
	72% { opacity: 1; transform: scale(1); }
	79%, 100% { opacity: 0; transform: scale(1.06); }
}

@keyframes rf-stat {
	0%, 35% { transform: scaleX(0.35); }
	40%, 92% { transform: scaleX(1); }
	97%, 100% { transform: scaleX(0.35); }
}

@keyframes rf-chart {
	0%, 47% { transform: scaleY(0.4); }
	52%, 92% { transform: scaleY(1); }
	97%, 100% { transform: scaleY(0.4); }
}

@keyframes rf-knob {
	0%, 59% { transform: translateX(-12px); }
	63%, 92% { transform: translateX(0); }
	97%, 100% { transform: translateX(-12px); }
}

@keyframes rf-track {
	0%, 59% { opacity: 0; }
	63%, 92% { opacity: 1; }
	97%, 100% { opacity: 0; }
}

@keyframes rf-press {
	0%, 71% { transform: scale(1); }
	73% { transform: scale(0.9); }
	75% { transform: scale(1.06); }
	77%, 100% { transform: scale(1); }
}

@media (max-width: 1024px) {
	.rf-hero__tag--state { display: none; }
}