/* Payment Systems Engineering hero illustration.
   See inc/hero-illustration-payments.php. Base styles draw the settled end
   state; all motion is inside the no-preference media query. One 9s master
   timeline: card → hub (4–18%), hub → 3 destinations (20–46%), destination
   confirmations (35–51%), ledger reconciles (54–77%), hold, reset (92–97%). */

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

.ps-hero svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* ---- Ring ---- */
.ps-hero__track {
	fill: none;
	stroke: var(--cyan-tint);
	stroke-width: 12;
}

.ps-hero__arc {
	fill: none;
	stroke-width: 12;
	stroke-linecap: round;
}

.ps-hero__arc--cyan { stroke: var(--cyan); stroke-dasharray: 300 1108; }
.ps-hero__arc--navy { stroke: var(--navy); stroke-dasharray: 190 1218; stroke-dashoffset: -700; }

.ps-hero__dot--a { fill: #b9e4f7; }
.ps-hero__dot--b { fill: var(--slate-light); opacity: 0.6; }
.ps-hero__dot--c { fill: var(--cyan); }
.ps-hero__dot--d { fill: var(--navy); opacity: 0.4; }

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

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

/* ---- Card ---- */
.ps-hero__card {
	filter: drop-shadow(0 16px 22px rgba(1, 36, 126, 0.25));
	transform: rotate(-5deg);
	transform-box: fill-box;
	transform-origin: center;
}

.ps-hero__card-body { fill: var(--navy); }
.ps-hero__chip      { fill: var(--cyan); }
.ps-hero__card-line { fill: var(--paper); opacity: 0.35; }
.ps-hero__card-mark--a { fill: var(--cyan); }
.ps-hero__card-mark--b { fill: var(--paper); opacity: 0.55; }

/* ---- Hub ---- */
.ps-hero__hub-dash {
	fill: none;
	stroke: var(--navy);
	stroke-width: 1.5;
	stroke-dasharray: 3 9;
	stroke-linecap: round;
	opacity: 0.5;
}

.ps-hero__hub-ring {
	fill: var(--cyan-tint);
	stroke: var(--cyan);
	stroke-width: 1.5;
}

.ps-hero__hub-core {
	fill: var(--navy);
	filter: drop-shadow(0 10px 16px rgba(1, 36, 126, 0.3));
}

.ps-hero__hub-glyph path {
	fill: none;
	stroke: var(--paper);
	stroke-width: 2.4;
	stroke-linecap: round;
}

.ps-hero__hub-glyph circle { fill: var(--cyan); }

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

/* ---- Cards & shared bits ---- */
.ps-hero__dest,
.ps-hero__float--up,
.ps-hero__float--ledger {
	filter: drop-shadow(0 10px 16px rgba(1, 36, 126, 0.14));
}

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

.ps-hero__icon-bg { fill: var(--cyan-tint); }

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

.ps-hero__ui-navy { fill: var(--navy); opacity: 0.85; }
.ps-hero__ui-line { fill: var(--line); }

.ps-hero__pending {
	fill: var(--paper);
	stroke: var(--line);
	stroke-width: 1.5;
}

.ps-hero__done circle { fill: var(--cyan); }
.ps-hero__done path {
	fill: none;
	stroke: var(--paper);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ps-hero__live { fill: var(--cyan); }

.ps-hero__beat {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ps-hero__stamp rect       { fill: var(--cyan); }
.ps-hero__stamp .ps-hero__stamp-label { fill: var(--paper); }

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

.ps-hero__packet--0 { offset-path: path('M 160,260 L 260,260'); }
.ps-hero__packet--1 { offset-path: path('M 260,260 C 340,230 350,140 398,128'); }
.ps-hero__packet--2 { offset-path: path('M 260,260 L 398,260'); }
.ps-hero__packet--3 { offset-path: path('M 260,260 C 340,290 350,380 398,392'); }

/* ---- Motion ---- */
.ps-hero__arc--cyan,
.ps-hero__arc--navy,
.ps-hero__hub-dash,
.ps-hero__pulse {
	transform-box: view-box;
	transform-origin: 260px 260px;
}

.ps-hero__done,
.ps-hero__stamp,
.ps-hero__dot,
.ps-hero__live,
.ps-hero__float {
	transform-box: fill-box;
	transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
	.ps-hero__arc--cyan  { animation: ps-spin 48s linear infinite; }
	.ps-hero__arc--navy  { animation: ps-spin 72s linear infinite reverse; }
	.ps-hero__hub-dash   { animation: ps-spin 30s linear infinite; }
	.ps-hero__flow       { animation: ps-flow 1.5s linear infinite; }
	.ps-hero__dot        { animation: ps-drift 7s ease-in-out infinite; }
	.ps-hero__dot--b     { animation-delay: -2s; }
	.ps-hero__dot--c     { animation-delay: -4s; }
	.ps-hero__dot--d     { animation-delay: -5.5s; }

	.ps-hero__float--card   { animation: ps-float 6s ease-in-out infinite; }
	.ps-hero__float--up     { animation: ps-float 7s ease-in-out -2s infinite; }
	.ps-hero__float--ledger { animation: ps-float 6.5s ease-in-out -4s infinite; }
	.ps-hero__live          { animation: ps-live 1.8s ease-in-out infinite; }
	.ps-hero__beat          { stroke-dasharray: 30 70; animation: ps-beat 2.4s linear infinite; }

	/* Master timeline */
	.ps-hero__packet--0 { animation: ps-packet-0 9s ease-in-out infinite; }
	.ps-hero__packet--1 { animation: ps-packet-1 9s ease-in-out infinite; }
	.ps-hero__packet--2 { animation: ps-packet-2 9s ease-in-out infinite; }
	.ps-hero__packet--3 { animation: ps-packet-3 9s ease-in-out infinite; }
	.ps-hero__pulse     { animation: ps-pulse 9s ease-out infinite; }

	.ps-hero__done--1  { animation: ps-done-1 9s ease-out infinite; }
	.ps-hero__done--2  { animation: ps-done-2 9s ease-out infinite; }
	.ps-hero__done--3  { animation: ps-done-3 9s ease-out infinite; }
	.ps-hero__done--l1 { animation: ps-done-l1 9s ease-out infinite; }
	.ps-hero__done--l2 { animation: ps-done-l2 9s ease-out infinite; }
	.ps-hero__done--l3 { animation: ps-done-l3 9s ease-out infinite; }
	.ps-hero__stamp    { animation: ps-stamp 9s ease-out infinite; }
}

@keyframes ps-spin  { to { transform: rotate(360deg); } }
@keyframes ps-flow  { to { stroke-dashoffset: -9; } }
@keyframes ps-beat  { to { stroke-dashoffset: -100; } }

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

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

@keyframes ps-live {
	0%, 100% { transform: scale(1);   opacity: 1; }
	50%      { transform: scale(1.6); opacity: 0.5; }
}

/* Packets: invisible, ride their lane, vanish on arrival. */
@keyframes ps-packet-0 {
	0%, 4%   { offset-distance: 0%;   opacity: 0; }
	5%       { offset-distance: 0%;   opacity: 1; }
	18%      { offset-distance: 100%; opacity: 1; }
	19%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes ps-packet-1 {
	0%, 20%  { offset-distance: 0%;   opacity: 0; }
	21%      { offset-distance: 0%;   opacity: 1; }
	34%      { offset-distance: 100%; opacity: 1; }
	35%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes ps-packet-2 {
	0%, 26%  { offset-distance: 0%;   opacity: 0; }
	27%      { offset-distance: 0%;   opacity: 1; }
	40%      { offset-distance: 100%; opacity: 1; }
	41%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes ps-packet-3 {
	0%, 32%  { offset-distance: 0%;   opacity: 0; }
	33%      { offset-distance: 0%;   opacity: 1; }
	46%      { offset-distance: 100%; opacity: 1; }
	47%, 100% { offset-distance: 100%; opacity: 0; }
}

/* Hub pings as the card's payment arrives. */
@keyframes ps-pulse {
	0%, 17%  { opacity: 0;   transform: scale(0.9); }
	19%      { opacity: 0.7; transform: scale(1); }
	30%, 100% { opacity: 0;  transform: scale(1.7); }
}

/* Confirmation pops (destinations, then ledger rows, then stamp). */
@keyframes ps-done-1 {
	0%, 34%  { opacity: 0; transform: scale(0.4); }
	38%      { opacity: 1; transform: scale(1.25); }
	42%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}
@keyframes ps-done-2 {
	0%, 40%  { opacity: 0; transform: scale(0.4); }
	44%      { opacity: 1; transform: scale(1.25); }
	48%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}
@keyframes ps-done-3 {
	0%, 46%  { opacity: 0; transform: scale(0.4); }
	50%      { opacity: 1; transform: scale(1.25); }
	54%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}
@keyframes ps-done-l1 {
	0%, 54%  { opacity: 0; transform: scale(0.4); }
	58%      { opacity: 1; transform: scale(1.25); }
	62%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}
@keyframes ps-done-l2 {
	0%, 60%  { opacity: 0; transform: scale(0.4); }
	64%      { opacity: 1; transform: scale(1.25); }
	68%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}
@keyframes ps-done-l3 {
	0%, 66%  { opacity: 0; transform: scale(0.4); }
	70%      { opacity: 1; transform: scale(1.25); }
	74%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}
@keyframes ps-stamp {
	0%, 72%  { opacity: 0; transform: translateY(6px) scale(0.85); }
	77%      { opacity: 1; transform: translateY(0) scale(1.08); }
	80%, 92% { opacity: 1; transform: translateY(0) scale(1); }
	97%, 100% { opacity: 0; transform: translateY(6px) scale(0.85); }
}

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