/* AI & Automation hero illustration.
   See inc/hero-illustration-ai.php. Base styles draw the fully processed
   document; all motion is inside the no-preference media query. One 10s
   master timeline: document arrives 0–6%, scan beam 8–46% (fields light up as
   it passes, each sends a packet ~5% later and its record checks off), the
   confidence ring fills 50–68%, "Auto-approved" lands 70–76%, hold, the
   document leaves 92–97%. */

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

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

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

.ai-hero__constellation {
	stroke: #b9e4f7;
	stroke-width: 1.2;
	stroke-dasharray: 2 5;
	stroke-linecap: round;
}

.ai-hero__star { fill: var(--cyan); opacity: 0.7; }

/* ---- Document ---- */
.ai-hero__doc { filter: drop-shadow(0 16px 24px rgba(1, 36, 126, 0.16)); }

.ai-hero__sheet { fill: var(--mist); stroke: var(--line); stroke-width: 1; }

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

.ai-hero__accent-fill { fill: var(--cyan); }
.ai-hero__ink         { fill: var(--navy); opacity: 0.85; }
.ai-hero__ink-soft    { fill: var(--navy); opacity: 0.18; }
.ai-hero__muted       { fill: var(--line); }
.ai-hero__mist-row    { fill: var(--mist); }
.ai-hero__rule        { stroke: var(--line); stroke-width: 1.2; }

.ai-hero__field {
	fill: rgba(0, 159, 226, 0.12);
	stroke: var(--cyan);
	stroke-width: 1.6;
}

/* Scan beam is hidden in the static state. */
.ai-hero__scan { opacity: 0; }
.ai-hero__scan-line { fill: var(--cyan); filter: drop-shadow(0 0 6px rgba(0, 159, 226, 0.8)); }

/* ---- Orb ---- */
.ai-hero__orbit {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 1.2;
	stroke-dasharray: 2 6;
	opacity: 0.6;
}

.ai-hero__orbiters circle { fill: var(--cyan); }
.ai-hero__orbiters .ai-hero__orbiter-2 { fill: var(--navy); }

.ai-hero__orb-halo { fill: var(--cyan); opacity: 0.2; }
.ai-hero__orb-core {
	fill: var(--cyan);
	filter: drop-shadow(0 6px 12px rgba(0, 159, 226, 0.5));
}
.ai-hero__spark { fill: var(--paper); }

/* ---- Lanes & records ---- */
.ai-hero__lane {
	fill: none;
	stroke: var(--cyan-tint);
	stroke-width: 6;
	stroke-linecap: round;
}

.ai-hero__chip,
.ai-hero__approve,
.ai-hero__confidence { filter: drop-shadow(0 10px 16px rgba(1, 36, 126, 0.14)); }

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

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

/* ---- Confidence + decision ---- */
.ai-hero__confidence .ai-hero__ring-track {
	fill: var(--paper);
	stroke: var(--cyan-tint);
	stroke-width: 8;
}

.ai-hero__ring-fill {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 8;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 6;
	transform: rotate(-90deg);
	transform-box: fill-box;
	transform-origin: center;
}

.ai-hero__pct {
	fill: var(--navy);
	font-size: 15px;
	font-weight: 600;
	text-anchor: middle;
}

.ai-hero__ring-ripple {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 2;
	opacity: 0;
}

.ai-hero__approve rect   { fill: var(--cyan); }
.ai-hero__approve circle { fill: var(--paper); }
.ai-hero__approve path {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ai-hero__approve text {
	fill: var(--paper);
	font-size: 13px;
	font-weight: 600;
	text-anchor: middle;
}

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

/* ---- Motion ---- */
.ai-hero__doc,
.ai-hero__chip,
.ai-hero__field,
.ai-hero__scan,
.ai-hero__done,
.ai-hero__orbiters,
.ai-hero__orb-halo,
.ai-hero__approve,
.ai-hero__pct,
.ai-hero__ring-ripple,
.ai-hero__star {
	transform-box: fill-box;
	transform-origin: center;
}

.ai-hero__orbiters { transform-box: view-box; transform-origin: 300px 90px; }

@media (prefers-reduced-motion: no-preference) {
	.ai-hero__star       { animation: ai-twinkle 4s ease-in-out infinite; }
	.ai-hero__orbiters   { animation: ai-spin 6s linear infinite; }
	.ai-hero__orbit      { animation: ai-flow 2s linear infinite; }
	.ai-hero__orb-halo   { animation: ai-halo 2.4s ease-in-out infinite; }

	/* Master timeline */
	.ai-hero__doc        { animation: ai-doc 10s cubic-bezier(0.2, 0.9, 0.3, 1.05) infinite; }
	.ai-hero__scan       { animation: ai-scan 10s linear infinite; }
	.ai-hero__ring-fill  { animation: ai-ring 10s ease-in-out infinite; }
	.ai-hero__pct        { animation: ai-pct 10s ease-out infinite; }
	.ai-hero__ring-ripple { animation: ai-ripple 10s ease-out infinite; }
	.ai-hero__approve    { animation: ai-approve 10s cubic-bezier(0.2, 0.9, 0.3, 1.3) infinite; }
	.ai-hero__field--0 { animation: ai-field-0 10s ease-out infinite; }
	.ai-hero__packet--0 { animation: ai-packet-0 10s ease-in-out infinite; }
	.ai-hero__done--0 { animation: ai-done-0 10s ease-out infinite; }
	.ai-hero__chip--0 { animation: ai-chip 10s cubic-bezier(0.2, 0.9, 0.3, 1.1) infinite; }
	.ai-hero__field--1 { animation: ai-field-1 10s ease-out infinite; }
	.ai-hero__packet--1 { animation: ai-packet-1 10s ease-in-out infinite; }
	.ai-hero__done--1 { animation: ai-done-1 10s ease-out infinite; }
	.ai-hero__chip--1 { animation: ai-chip 10s cubic-bezier(0.2, 0.9, 0.3, 1.1) infinite; }
	.ai-hero__field--2 { animation: ai-field-2 10s ease-out infinite; }
	.ai-hero__packet--2 { animation: ai-packet-2 10s ease-in-out infinite; }
	.ai-hero__done--2 { animation: ai-done-2 10s ease-out infinite; }
	.ai-hero__chip--2 { animation: ai-chip 10s cubic-bezier(0.2, 0.9, 0.3, 1.1) infinite; }
	.ai-hero__field--3 { animation: ai-field-3 10s ease-out infinite; }
	.ai-hero__packet--3 { animation: ai-packet-3 10s ease-in-out infinite; }
	.ai-hero__done--3 { animation: ai-done-3 10s ease-out infinite; }
	.ai-hero__chip--3 { animation: ai-chip 10s cubic-bezier(0.2, 0.9, 0.3, 1.1) infinite; }
}

@keyframes ai-spin  { to { transform: rotate(360deg); } }
@keyframes ai-flow  { to { stroke-dashoffset: -8; } }

@keyframes ai-twinkle {
	0%, 100% { opacity: 0.35; transform: scale(1); }
	50%      { opacity: 0.9;  transform: scale(1.4); }
}

@keyframes ai-halo {
	0%, 100% { transform: scale(1);   opacity: 0.2; }
	50%      { transform: scale(1.3); opacity: 0.08; }
}


@keyframes ai-doc {
	0% { opacity: 0; transform: translateX(-28px); }
	6%, 92% { opacity: 1; transform: translateX(0); }
	97%, 100% { opacity: 0; transform: translateX(-28px); }
}

@keyframes ai-chip {
	0% { opacity: 0; transform: translateX(24px); }
	8%, 92% { opacity: 1; transform: translateX(0); }
	97%, 100% { opacity: 0; transform: translateX(24px); }
}

@keyframes ai-scan {
	0%, 7% { opacity: 0; transform: translateY(0); }
	8% { opacity: 1; transform: translateY(0); }
	46% { opacity: 1; transform: translateY(290px); }
	48%, 100% { opacity: 0; transform: translateY(290px); }
}

@keyframes ai-field-0 {
	0%, 10.91% { opacity: 0; transform: scale(1.08); }
	12.91%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(1.08); }
}

@keyframes ai-packet-0 {
	0%, 12.41% { offset-distance: 0%; opacity: 0; }
	13.01% { offset-distance: 0%; opacity: 1; }
	17.41% { offset-distance: 100%; opacity: 1; }
	18.01%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes ai-done-0 {
	0%, 16.91% { opacity: 0; transform: scale(0.4); }
	19.41% { opacity: 1; transform: scale(1.3); }
	21.41%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes ai-field-1 {
	0%, 14.97% { opacity: 0; transform: scale(1.08); }
	16.97%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(1.08); }
}

@keyframes ai-packet-1 {
	0%, 16.47% { offset-distance: 0%; opacity: 0; }
	17.07% { offset-distance: 0%; opacity: 1; }
	21.47% { offset-distance: 100%; opacity: 1; }
	22.07%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes ai-done-1 {
	0%, 20.97% { opacity: 0; transform: scale(0.4); }
	23.47% { opacity: 1; transform: scale(1.3); }
	25.47%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes ai-field-2 {
	0%, 24.93% { opacity: 0; transform: scale(1.08); }
	26.93%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(1.08); }
}

@keyframes ai-packet-2 {
	0%, 26.43% { offset-distance: 0%; opacity: 0; }
	27.03% { offset-distance: 0%; opacity: 1; }
	31.43% { offset-distance: 100%; opacity: 1; }
	32.03%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes ai-done-2 {
	0%, 30.93% { opacity: 0; transform: scale(0.4); }
	33.43% { opacity: 1; transform: scale(1.3); }
	35.43%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes ai-field-3 {
	0%, 40.26% { opacity: 0; transform: scale(1.08); }
	42.26%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(1.08); }
}

@keyframes ai-packet-3 {
	0%, 41.76% { offset-distance: 0%; opacity: 0; }
	42.36% { offset-distance: 0%; opacity: 1; }
	46.76% { offset-distance: 100%; opacity: 1; }
	47.36%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes ai-done-3 {
	0%, 46.26% { opacity: 0; transform: scale(0.4); }
	48.76% { opacity: 1; transform: scale(1.3); }
	50.76%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes ai-ring {
	0%, 50% { stroke-dashoffset: 100; }
	68%, 92% { stroke-dashoffset: 6; }
	97%, 100% { stroke-dashoffset: 100; }
}

@keyframes ai-pct {
	0%, 64% { opacity: 0; transform: scale(0.7); }
	70%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.7); }
}

@keyframes ai-ripple {
	0%, 67% { opacity: 0; transform: scale(1); }
	69% { opacity: 0.8; transform: scale(1); }
	82%, 100% { opacity: 0; transform: scale(1.9); }
}

@keyframes ai-approve {
	0%, 69% { opacity: 0; transform: translateY(8px) scale(0.85); }
	75% { opacity: 1; transform: translateY(0) scale(1.06); }
	78%, 92% { opacity: 1; transform: translateY(0) scale(1); }
	97%, 100% { opacity: 0; transform: translateY(8px) scale(0.85); }
}

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