/* Hero illustrations for the Resources section (Insights, Case Studies, the
   Resources hub). See inc/hero-illustrations-resources.php. Shares the ih-*
   base classes from hero-illustrations-industries.css. Base styles draw each
   scene's finished state; all motion is inside the reduced-motion gate. */

/* ===== Insights ===== */
.rsi-noise { fill: none; stroke: var(--slate-light); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; opacity: 0.8; }
.rsi-lens-glass  { fill: var(--cyan-tint); opacity: 0.55; }
.rsi-lens-ring   { fill: none; stroke: var(--navy); stroke-width: 7; }
.rsi-lens-handle { stroke: var(--navy); stroke-width: 9; stroke-linecap: round; }
.rsi-lens-spark  { fill: var(--cyan); }
.rsi-clean  { fill: none; stroke: var(--cyan); stroke-width: 3.4; stroke-linecap: round; }
.rsi-lens   { filter: drop-shadow(0 10px 14px rgba(1, 36, 126, 0.2)); }
.rsi-packet { fill: var(--cyan); opacity: 0; filter: drop-shadow(0 0 6px rgba(0, 159, 226, 0.8)); offset-rotate: 0deg; }
.rsi-trend  { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.rsi-peak       { fill: var(--cyan); stroke: var(--paper); stroke-width: 2; }
.rsi-peak-halo  { fill: var(--cyan); opacity: 0.22; }
.rsi-bulb       { fill: var(--cyan-tint); stroke: var(--cyan); stroke-width: 2; }
.rsi-bulb-base  { fill: var(--navy); }
.rsi-bulb-halo  { fill: var(--cyan); opacity: 0.25; }

/* ===== Case studies ===== */
.rsc-before-bg   { fill: var(--mist); stroke: var(--line); stroke-width: 1; }
.rsc-before-row  { fill: none; stroke: var(--line); stroke-width: 1.2; stroke-dasharray: 4 4; }
.rsc-before-bar  { fill: var(--slate-light); opacity: 0.55; }
.rsc-before-fill { fill: var(--slate-light); opacity: 0.6; }
.rsc-spinner     { fill: none; stroke: var(--slate-light); stroke-width: 2.4; stroke-linecap: round; }
.rsc-pill rect   { fill: var(--mist-dark); }
.rsc-pill text   { fill: var(--slate); font-size: 11px; font-weight: 600; text-anchor: middle; }
.rsc-pill--after rect { fill: var(--cyan); }
.rsc-pill--after text { fill: var(--paper); }
.rsc-trend       { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rsc-after       { clip-path: inset(0 0 0 0); }
.rsc-handle      { opacity: 0; }
.rsc-handle-line { stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; }
.rsc-grip        { fill: var(--paper); stroke: var(--cyan); stroke-width: 3; filter: drop-shadow(0 4px 8px rgba(1, 36, 126, 0.25)); }
.rsc-chev        { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; }
.rsc-chip-fill   { fill: var(--cyan); transform-origin: left center; }

/* ===== Resources hub ===== */
.rsh-card { transform-box: view-box; transform-origin: 260px 440px; }
.rsh-card--0 { transform: rotate(-34deg); }
.rsh-card--1 { transform: rotate(-17deg); }
.rsh-card--2 { transform: rotate(0deg); }
.rsh-card--3 { transform: rotate(17deg); }
.rsh-card--4 { transform: rotate(34deg); }
.rsh-lift-ring { fill: none; stroke: var(--cyan); stroke-width: 3; opacity: 0; }
.rsh-ribbon    { fill: var(--cyan); opacity: 0; transform-origin: top center; }

@media (prefers-reduced-motion: no-preference) {
	.rsi-noise { animation: rsi-scroll 4s linear infinite; }
	.rsi-lens { animation: rsi-lens 3.2s ease-in-out infinite; }
	.rsi-clean { animation: rsi-clean 1.6s linear infinite; }
	.rsi-card { animation: rsi-card 10s cubic-bezier(0.2, 0.9, 0.3, 1.05) infinite; }
	.rsi-trend { animation: rsi-trend 10s ease-in-out infinite; }
	.rsi-peak { animation: rsi-peak 10s ease-out infinite; }
	.rsi-peak-halo { animation: rsi-peak-halo 10s ease-out infinite; }
	.rsi-callout { animation: rsi-callout 10s ease-out infinite; }
	.rsi-bulb { animation: rsi-bulb 10s ease-out infinite; }
	.rsi-bulb-halo { animation: rsi-bulb-halo 10s ease-out infinite; }
	.rsi-copy:nth-of-type(1) { animation: rsi-copy-0 10s ease-out infinite; }
	.rsi-copy:nth-of-type(2) { animation: rsi-copy-1 10s ease-out infinite; }
	.rsi-copy:nth-of-type(3) { animation: rsi-copy-2 10s ease-out infinite; }
	.rsi-published { animation: rsi-published 10s ease-out infinite; }
	.rsi-packet--0 { animation: rsi-packet-0 10s ease-in-out infinite; }
	.rsi-packet--1 { animation: rsi-packet-1 10s ease-in-out infinite; }
	.rsi-packet--2 { animation: rsi-packet-2 10s ease-in-out infinite; }
	.rsc-after { animation: rsc-wipe 10s ease-in-out infinite; }
	.rsc-handle { animation: rsc-handle 10s ease-in-out infinite; }
	.rsc-spinner { animation: rsc-spin 1.4s linear infinite; }
	.rsc-chip-fill--0 { animation: rsc-chip-0 10s ease-out infinite; }
	.rsc-chip-fill--1 { animation: rsc-chip-1 10s ease-out infinite; }
	.rsc-chip-fill--2 { animation: rsc-chip-2 10s ease-out infinite; }
	.rsh-card--0 { animation: rsh-card-0 10s cubic-bezier(0.25, 0.9, 0.3, 1.1) infinite; }
	.rsh-card--0 .rsh-lift-ring { animation: rsh-ring-0 10s ease-out infinite; }
	.rsh-ribbon--0 { animation: rsh-ribbon-0 10s ease-out infinite; }
	.rsh-card--1 { animation: rsh-card-1 10s cubic-bezier(0.25, 0.9, 0.3, 1.1) infinite; }
	.rsh-card--1 .rsh-lift-ring { animation: rsh-ring-1 10s ease-out infinite; }
	.rsh-ribbon--1 { animation: rsh-ribbon-1 10s ease-out infinite; }
	.rsh-card--2 { animation: rsh-card-2 10s cubic-bezier(0.25, 0.9, 0.3, 1.1) infinite; }
	.rsh-card--2 .rsh-lift-ring { animation: rsh-ring-2 10s ease-out infinite; }
	.rsh-ribbon--2 { animation: rsh-ribbon-2 10s ease-out infinite; }
	.rsh-card--3 { animation: rsh-card-3 10s cubic-bezier(0.25, 0.9, 0.3, 1.1) infinite; }
	.rsh-card--3 .rsh-lift-ring { animation: rsh-ring-3 10s ease-out infinite; }
	.rsh-ribbon--3 { animation: rsh-ribbon-3 10s ease-out infinite; }
	.rsh-card--4 { animation: rsh-card-4 10s cubic-bezier(0.25, 0.9, 0.3, 1.1) infinite; }
	.rsh-card--4 .rsh-lift-ring { animation: rsh-ring-4 10s ease-out infinite; }
	.rsh-ribbon--4 { animation: rsh-ribbon-4 10s ease-out infinite; }
}

@keyframes rsi-scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-150px); }
}

@keyframes rsi-lens {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.04); }
}

@keyframes rsi-clean { to { stroke-dashoffset: -12; } }

@keyframes rsi-card {
	0%, 4% { opacity: 0; transform: translateX(28px); }
	10%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; transform: translateX(28px); }
}

@keyframes rsi-trend {
	0%, 12% { stroke-dashoffset: 100; }
	34%, 92% { stroke-dashoffset: 0; }
	97%, 100% { stroke-dashoffset: 100; }
}

@keyframes rsi-peak {
	0%, 34% { opacity: 0; transform: scale(0.4); }
	37% { opacity: 1; transform: scale(1.25); }
	39%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes rsi-peak-halo {
	0%, 34% { opacity: 0; transform: scale(0.5); }
	40% { opacity: 0.35; transform: scale(1.6); }
	52%, 92% { opacity: 0.22; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.5); }
}

@keyframes rsi-callout {
	0%, 38% { opacity: 0; transform: scale(0.4); }
	41% { opacity: 1; transform: scale(1.25); }
	43%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes rsi-bulb {
	0%, 44% { fill: var(--cyan-tint); }
	48%, 92% { fill: var(--cyan); }
	97%, 100% { fill: var(--cyan-tint); }
}

@keyframes rsi-bulb-halo {
	0%, 44% { opacity: 0; transform: scale(0.6); }
	50% { opacity: 0.5; transform: scale(1.5); }
	58%, 92% { opacity: 0.25; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.6); }
}

@keyframes rsi-copy-0 {
	0%, 52% { transform: scaleX(0); }
	57%, 92% { transform: scaleX(1); }
	97%, 100% { transform: scaleX(0); }
}

@keyframes rsi-copy-1 {
	0%, 55% { transform: scaleX(0); }
	60%, 92% { transform: scaleX(1); }
	97%, 100% { transform: scaleX(0); }
}

@keyframes rsi-copy-2 {
	0%, 58% { transform: scaleX(0); }
	63%, 92% { transform: scaleX(1); }
	97%, 100% { transform: scaleX(0); }
}

@keyframes rsi-published {
	0%, 64% { opacity: 0; transform: scale(0.4); }
	67% { opacity: 1; transform: scale(1.12); }
	69%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes rsi-packet-0 {
	0%, 12% { offset-distance: 0%; opacity: 0; }
	12.6% { offset-distance: 0%; opacity: 1; }
	20% { offset-distance: 100%; opacity: 1; }
	20.8%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes rsi-packet-1 {
	0%, 18% { offset-distance: 0%; opacity: 0; }
	18.6% { offset-distance: 0%; opacity: 1; }
	26% { offset-distance: 100%; opacity: 1; }
	26.8%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes rsi-packet-2 {
	0%, 24% { offset-distance: 0%; opacity: 0; }
	24.6% { offset-distance: 0%; opacity: 1; }
	32% { offset-distance: 100%; opacity: 1; }
	32.8%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes rsc-wipe {
	0%, 8% { clip-path: inset(0 100% 0 0); }
	46%, 88% { clip-path: inset(0 0 0 0); }
	96%, 100% { clip-path: inset(0 100% 0 0); }
}

@keyframes rsc-handle {
	0%, 8% { opacity: 1; transform: translateX(0); }
	46%, 88% { opacity: 1; transform: translateX(440px); }
	94% { opacity: 1; transform: translateX(0); }
	100% { opacity: 1; transform: translateX(0); }
}

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

@keyframes rsc-chip-0 {
	0%, 16% { transform: scaleX(0.3); }
	26%, 88% { transform: scaleX(1); }
	96%, 100% { transform: scaleX(0.3); }
}

@keyframes rsc-chip-1 {
	0%, 26% { transform: scaleX(0.3); }
	36%, 88% { transform: scaleX(1); }
	96%, 100% { transform: scaleX(0.3); }
}

@keyframes rsc-chip-2 {
	0%, 36% { transform: scaleX(0.3); }
	46%, 88% { transform: scaleX(1); }
	96%, 100% { transform: scaleX(0.3); }
}

@keyframes rsh-card-0 {
	0%, 8% { transform: rotate(0deg) translateY(0); }
	22% { transform: rotate(-34deg) translateY(0); }
	28% { transform: rotate(-34deg) translateY(0); }
	31% { transform: rotate(-34deg) translateY(-30px); }
	35% { transform: rotate(-34deg) translateY(-30px); }
	38% { transform: rotate(-34deg) translateY(0); }
	88% { transform: rotate(-34deg) translateY(0); }
	96%, 100% { transform: rotate(0deg) translateY(0); }
}

@keyframes rsh-ring-0 {
	0%, 28% { opacity: 0; }
	31% { opacity: 1; }
	35% { opacity: 1; }
	38%, 100% { opacity: 0; }
}

@keyframes rsh-ribbon-0 {
	0%, 29% { opacity: 0; transform: scaleY(0); }
	32% { opacity: 1; transform: scaleY(1); }
	35% { opacity: 1; transform: scaleY(1); }
	37%, 100% { opacity: 0; transform: scaleY(0); }
}

@keyframes rsh-card-1 {
	0%, 9.5% { transform: rotate(0deg) translateY(0); }
	23.5% { transform: rotate(-17deg) translateY(0); }
	37% { transform: rotate(-17deg) translateY(0); }
	40% { transform: rotate(-17deg) translateY(-30px); }
	44% { transform: rotate(-17deg) translateY(-30px); }
	47% { transform: rotate(-17deg) translateY(0); }
	88% { transform: rotate(-17deg) translateY(0); }
	96%, 100% { transform: rotate(0deg) translateY(0); }
}

@keyframes rsh-ring-1 {
	0%, 37% { opacity: 0; }
	40% { opacity: 1; }
	44% { opacity: 1; }
	47%, 100% { opacity: 0; }
}

@keyframes rsh-ribbon-1 {
	0%, 38% { opacity: 0; transform: scaleY(0); }
	41% { opacity: 1; transform: scaleY(1); }
	44% { opacity: 1; transform: scaleY(1); }
	46%, 100% { opacity: 0; transform: scaleY(0); }
}

@keyframes rsh-card-2 {
	0%, 11% { transform: rotate(0deg) translateY(0); }
	25% { transform: rotate(0deg) translateY(0); }
	46% { transform: rotate(0deg) translateY(0); }
	49% { transform: rotate(0deg) translateY(-30px); }
	53% { transform: rotate(0deg) translateY(-30px); }
	56% { transform: rotate(0deg) translateY(0); }
	88% { transform: rotate(0deg) translateY(0); }
	96%, 100% { transform: rotate(0deg) translateY(0); }
}

@keyframes rsh-ring-2 {
	0%, 46% { opacity: 0; }
	49% { opacity: 1; }
	53% { opacity: 1; }
	56%, 100% { opacity: 0; }
}

@keyframes rsh-ribbon-2 {
	0%, 47% { opacity: 0; transform: scaleY(0); }
	50% { opacity: 1; transform: scaleY(1); }
	53% { opacity: 1; transform: scaleY(1); }
	55%, 100% { opacity: 0; transform: scaleY(0); }
}

@keyframes rsh-card-3 {
	0%, 12.5% { transform: rotate(0deg) translateY(0); }
	26.5% { transform: rotate(17deg) translateY(0); }
	55% { transform: rotate(17deg) translateY(0); }
	58% { transform: rotate(17deg) translateY(-30px); }
	62% { transform: rotate(17deg) translateY(-30px); }
	65% { transform: rotate(17deg) translateY(0); }
	88% { transform: rotate(17deg) translateY(0); }
	96%, 100% { transform: rotate(0deg) translateY(0); }
}

@keyframes rsh-ring-3 {
	0%, 55% { opacity: 0; }
	58% { opacity: 1; }
	62% { opacity: 1; }
	65%, 100% { opacity: 0; }
}

@keyframes rsh-ribbon-3 {
	0%, 56% { opacity: 0; transform: scaleY(0); }
	59% { opacity: 1; transform: scaleY(1); }
	62% { opacity: 1; transform: scaleY(1); }
	64%, 100% { opacity: 0; transform: scaleY(0); }
}

@keyframes rsh-card-4 {
	0%, 14% { transform: rotate(0deg) translateY(0); }
	28% { transform: rotate(34deg) translateY(0); }
	64% { transform: rotate(34deg) translateY(0); }
	67% { transform: rotate(34deg) translateY(-30px); }
	71% { transform: rotate(34deg) translateY(-30px); }
	74% { transform: rotate(34deg) translateY(0); }
	88% { transform: rotate(34deg) translateY(0); }
	96%, 100% { transform: rotate(0deg) translateY(0); }
}

@keyframes rsh-ring-4 {
	0%, 64% { opacity: 0; }
	67% { opacity: 1; }
	71% { opacity: 1; }
	74%, 100% { opacity: 0; }
}

@keyframes rsh-ribbon-4 {
	0%, 65% { opacity: 0; transform: scaleY(0); }
	68% { opacity: 1; transform: scaleY(1); }
	71% { opacity: 1; transform: scaleY(1); }
	73%, 100% { opacity: 0; transform: scaleY(0); }
}