/* Report banner — Option 3 (navy editorial, data-viz background). Scoped under .rb3.
 * Brand colour via the compiled --tw-color-* vars; decorative SVG/gradient stops use brand hex;
 * the mask #000 is alpha-only, not a colour.
 */

.rb3 { position: relative; isolation: isolate; overflow: hidden; }

/* layered mesh base + two slowly-drifting glow blobs */
.rb3-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(55% 75% at 86% 6%, rgba(236, 99, 75, 0.40), transparent 60%),
    radial-gradient(65% 85% at 6% 116%, rgba(52, 120, 247, 0.52), transparent 60%),
    linear-gradient(135deg, #0F1A4F 0%, #1B2A6B 48%, #28408F 100%);
}
.rb3-bg::before,
.rb3-bg::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(42px);
}
.rb3-bg::before {
  width: 320px; height: 320px; top: -130px; right: 6%;
  background: rgba(236, 99, 75, 0.30);
  animation: rb3-drift-a 16s ease-in-out infinite;
}
.rb3-bg::after {
  width: 360px; height: 360px; bottom: -170px; left: 1%;
  background: rgba(52, 120, 247, 0.32);
  animation: rb3-drift-b 21s ease-in-out infinite;
}

/* faint graph paper, fading in from the right */
.rb3-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 55%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 55%, #000 100%);
}

/* the chart scene, bottom-right, behind the copy — left edge faded so the lines aren't "half-cut" */
.rb3-viz {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  width: 64%; max-width: 760px; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 34%, #000 100%);
}
.rb3-line {  /* the two static chart lines */
  fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
}
.rb3-pulse {  /* bright segment that travels along the primary line, loops seamlessly */
  fill: none; stroke: #DCEBFF; stroke-width: 4.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 44 820;
  stroke-dashoffset: 864;
  animation: rb3-travel 3.6s linear infinite;
}
.rb3-dot {  /* glowing peak data point */
  transform-box: fill-box; transform-origin: center;
  animation: rb3-pulse 2.8s ease-in-out infinite;
}
.rb3-scrim {  /* keep left-side copy legible over the viz */
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, rgba(15, 26, 79, 0.52) 0%, rgba(15, 26, 79, 0.18) 40%, transparent 66%);
}
.rb3-content { position: relative; z-index: 4; }
.rb3-cta { box-shadow: 0 12px 32px -8px rgba(236, 99, 75, 0.55); }

@keyframes rb3-drift-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-26px, 18px); } }
@keyframes rb3-drift-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(22px, -16px); } }
@keyframes rb3-travel { to { stroke-dashoffset: 0; } }
@keyframes rb3-pulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }

@media (prefers-reduced-motion: reduce) {
  .rb3-bg::before, .rb3-bg::after, .rb3-dot, .rb3-pulse { animation: none; }
  .rb3-pulse { display: none; }
}