/* Hero visual: inputs flow through the CB hub into approvals and live reporting.
   HTML text + inline SVG so it stays sharp at any DPR. CSS-only motion (transform/opacity), CSP allows no inline styles.
   Geometry: the .flow stage and its SVG share one 560 × 420 coordinate space; nodes are placed with --x/--y/--w/--h in those units. */
.hero-visual { align-self: stretch; display: flex; flex-direction: column; justify-content: center; position: relative; background: #e1e2d8; padding: 56px 7% 104px; }
.hero-visual::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(#c9cbc233 1px, transparent 1px), linear-gradient(90deg, #c9cbc233 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(to bottom, transparent, #000, transparent); pointer-events: none; }
.hero-visual:focus-visible { outline: 3px solid #a74220; outline-offset: -3px; }

.visual-label, .visual-caption, .flow { position: relative; width: 100%; max-width: 600px; margin-inline: auto; animation: visual-in .9s cubic-bezier(.2, .7, .3, 1) both; }
.visual-label, .visual-caption { font-size: 9px; font-weight: 700; letter-spacing: 1.3px; line-height: 1.6; color: #262e28; }
.visual-label { margin-top: 0; margin-bottom: 26px; text-wrap: balance; }
.visual-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 26px auto 0; font-size: 8px; animation-delay: .3s; }
.flow { aspect-ratio: 560 / 420; container: flow / inline-size; animation-delay: .15s; }

.flow-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wires path { vector-effect: non-scaling-stroke; }
.flow > div { position: absolute; left: calc(var(--x) * 100% / 560); top: calc(var(--y) * 100% / 420); width: calc(var(--w) * 100% / 560); height: calc(var(--h) * 100% / 420); }

/* Cards: paper inputs are scattered (slight tilt); outcomes sit square. */
.card { display: block; width: 100%; height: 100%; border: 1px solid #d2d5c8; border-radius: 4px; background: linear-gradient(135deg, #fffef8, #eef0e6); box-shadow: 0 12px 22px -12px #25322638, 0 1px 2px #2532261a; }
.flow-node > span { position: absolute; left: 0; top: calc(100% + max(6px, 1.4cqi)); white-space: nowrap; text-transform: uppercase; font-size: clamp(8px, 1.8cqi, 10.5px); font-weight: 700; letter-spacing: .14em; line-height: 1.2; color: #5d6656; }
.docs { --x: 0; --y: 14; --w: 124; --h: 60; --bob: 6.4s; --phase: -1.2s; }
.requests { --x: 28; --y: 112; --w: 122; --h: 56; --bob: 7.4s; --phase: -4.1s; }
.operations { --x: 6; --y: 222; --w: 122; --h: 60; --bob: 6.9s; --phase: -2.6s; }
.sheets { --x: 24; --y: 326; --w: 124; --h: 60; --bob: 7.8s; --phase: -5.3s; }
.approved { --x: 420; --y: 96; --w: 128; --h: 70; --bob: 8.2s; --phase: -3.4s; }
.reporting { --x: 412; --y: 236; --w: 140; --h: 100; --bob: 7.1s; --phase: -.6s; }
.docs .card { rotate: -3deg; }
.requests .card { rotate: 2deg; }
.operations .card { rotate: -1.5deg; }
.sheets .card { rotate: 2.5deg; }
.approved .card { background: #c5cdb8; border-color: #b3bda4; }
.check { display: block; width: 100%; height: 100%; }
.reporting .card { display: flex; align-items: flex-end; gap: 8%; padding: 13% 14% 14%; }
.reporting i { flex: 1; height: 100%; background: #a74220; border-radius: 1px 1px 0 0; transform-origin: bottom; }
.reporting i:nth-child(1) { height: 42%; }
.reporting i:nth-child(2) { height: 63%; }
.reporting i:nth-child(3) { height: 82%; }
.reporting i:nth-child(4) { height: 100%; }

.flow-hub { --x: 232; --y: 158; --w: 104; --h: 104; z-index: 1; display: flex; align-items: center; justify-content: center; border: 1.5px solid #262e28; border-radius: 12px; background: #f6f6f0; box-shadow: 0 16px 28px -14px #25322666; }
.flow-hub::before { content: ''; position: absolute; inset: -9%; border: 1.5px solid #a74220; border-radius: 18px; opacity: 0; pointer-events: none; }
.flow-hub img { display: block; width: 62%; height: auto; }

/* Static frame (reduced motion, and before the loop starts): packets rest mid-route, the tick and full bars are shown. */
.packet.in1 { transform: translate(208px, 84px); }
.packet.in2 { transform: translate(188px, 175px); }
.packet.in3 { transform: translate(188px, 242px); }
.packet.in4 { transform: translate(208px, 314px); }
.packet.out1 { transform: translate(376px, 162px); }
.packet.out2 { transform: translate(376px, 254px); }

/* Motion: one 8 s cycle. Inputs travel into the hub, it pulses, outcomes leave, the tick lands and the bars fill. */
.flow-node { animation: node-in .7s cubic-bezier(.2, .7, .3, 1) .35s both, bob var(--bob) ease-in-out var(--phase) infinite alternate; }
.flow-hub { animation: node-in .7s cubic-bezier(.2, .7, .3, 1) .5s both; }
.approved, .reporting { animation-delay: .65s, var(--phase); }
.packet { animation: 8s linear 1s infinite backwards; }
.packet.in1 { animation-name: packet-in1; }
.packet.in2 { animation-name: packet-in2; }
.packet.in3 { animation-name: packet-in3; }
.packet.in4 { animation-name: packet-in4; }
.packet.out1 { animation-name: packet-out1; }
.packet.out2 { animation-name: packet-out2; }
.flow-hub::before { animation: hub-pulse 8s ease-out 1s infinite backwards; }
.check { animation: check-loop 8s ease-in-out 1s infinite backwards; }
.reporting i { animation: bars-loop 8s ease-in-out 1s infinite backwards; }
.reporting i:nth-child(2) { animation-delay: 1.12s; }
.reporting i:nth-child(3) { animation-delay: 1.24s; }
.reporting i:nth-child(4) { animation-delay: 1.36s; }

.hero-visual:hover *, .hero-visual:hover *::before, .hero-visual:focus *, .hero-visual:focus *::before { animation-play-state: paused; }

@media (max-width: 900px) {
  .hero-visual { padding: 44px 5% 96px; }
  .visual-label { margin-bottom: 20px; }
  .visual-caption { margin-top: 20px; }
}
@media (max-width: 620px) {
  .hero-visual { padding: 30px 6% 28px; }
  .visual-label { margin-bottom: 18px; font-size: 8px; letter-spacing: 1.2px; text-align: center; }
  .visual-caption { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual *, .hero-visual *::before { animation: none; }
}

@keyframes visual-in { from { opacity: 0; transform: translateY(24px); } }
@keyframes node-in { from { opacity: 0; } }
@keyframes bob { from { transform: translateY(-2px); } to { transform: translateY(2px); } }
@keyframes hub-pulse {
  0%, 36% { opacity: 0; transform: scale(.94); }
  41% { opacity: .55; }
  54%, 100% { opacity: 0; transform: scale(1.16); }
}
@keyframes check-loop {
  0%, 38% { opacity: 1; transform: none; }
  44%, 74% { opacity: 0; transform: scale(.6); }
  79% { opacity: 1; transform: scale(1.08); }
  84%, 100% { opacity: 1; transform: none; }
}
@keyframes bars-loop {
  0%, 40% { transform: none; }
  50%, 77% { transform: scaleY(.35); }
  88%, 100% { transform: none; }
}

/* Packet routes: constant-speed stops along each connector (SVG user units; corners radius 10). */
@keyframes packet-in1 {
  0% { opacity: 0; transform: translate(116px, 44px); }
  2% { opacity: 1; }
  12.3% { transform: translate(198px, 44px); }
  14.4% { transform: translate(208px, 54px); }
  31.8% { transform: translate(208px, 170px); }
  33.9% { transform: translate(218px, 180px); }
  35.8% { opacity: 1; }
  37.8%, 100% { opacity: 0; transform: translate(244px, 180px); }
}
@keyframes packet-in2 {
  0%, 5% { opacity: 0; transform: translate(142px, 140px); }
  7% { opacity: 1; }
  10.4% { transform: translate(178px, 140px); }
  12.5% { transform: translate(188px, 150px); }
  18.5% { transform: translate(188px, 190px); }
  20.6% { transform: translate(198px, 200px); }
  25.5% { opacity: 1; }
  27.5%, 100% { opacity: 0; transform: translate(244px, 200px); }
}
@keyframes packet-in3 {
  0%, 9% { opacity: 0; transform: translate(120px, 252px); }
  11% { opacity: 1; }
  17.7% { transform: translate(178px, 252px); }
  19.8% { transform: translate(188px, 242px); }
  21.6% { transform: translate(188px, 230px); }
  23.7% { transform: translate(198px, 220px); }
  28.6% { opacity: 1; }
  30.6%, 100% { opacity: 0; transform: translate(244px, 220px); }
}
@keyframes packet-in4 {
  0%, 2% { opacity: 0; transform: translate(140px, 356px); }
  4% { opacity: 1; }
  10.7% { transform: translate(198px, 356px); }
  12.8% { transform: translate(208px, 346px); }
  27.2% { transform: translate(208px, 250px); }
  29.3% { transform: translate(218px, 240px); }
  31.2% { opacity: 1; }
  33.2%, 100% { opacity: 0; transform: translate(244px, 240px); }
}
@keyframes packet-out1 {
  0%, 50% { opacity: 0; transform: translate(324px, 196px); }
  52% { opacity: 1; }
  56.3% { transform: translate(366px, 196px); }
  58.4% { transform: translate(376px, 186px); }
  65.2% { transform: translate(376px, 141px); }
  67.3% { transform: translate(386px, 131px); }
  72.2% { opacity: 1; }
  74.2%, 100% { opacity: 0; transform: translate(432px, 131px); }
}
@keyframes packet-out2 {
  0%, 56% { opacity: 0; transform: translate(324px, 226px); }
  58% { opacity: 1; }
  62.3% { transform: translate(366px, 226px); }
  64.4% { transform: translate(376px, 236px); }
  70.4% { transform: translate(376px, 276px); }
  72.5% { transform: translate(386px, 286px); }
  76.2% { opacity: 1; }
  78.2%, 100% { opacity: 0; transform: translate(424px, 286px); }
}