/* ============================================================
   AI Agents landing page (/ai-agents) — page-scoped styles.
   Loaded only via the reporter_marketing/ai-agents library.

   Everything here is what Tailwind utilities cannot reasonably
   express: keyframes, the knowledge graph geometry, the flow /
   connection diagram decorations, video interactions, and the
   880px / 720px responsive overrides from the approved design
   (deliberately NOT normalized to Tailwind's 768/1024 breaks).

   All rules are scoped under .ai-agents-page (set on the
   <article> in node--ai-agents--full.html.twig). No global
   custom properties: values are literals.
   ============================================================ */

@keyframes aiFlow { 0% { left: -8px; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { left: calc(100% - 4px); opacity: 0; } }
@keyframes aiGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,6,159,0.10), 0 10px 15px -3px rgba(16,6,159,0.20); } 50% { box-shadow: 0 0 0 12px rgba(16,6,159,0.05), 0 10px 20px -3px rgba(16,6,159,0.30); } }
@keyframes aiFlowDown { 0% { top: -10px; opacity: 0; } 16% { opacity: 1; } 84% { opacity: 1; } 100% { top: calc(100% - 2px); opacity: 0; } }
@keyframes aiBusShimmer { 0% { background-position: 0 0; } 100% { background-position: 34px 0; } }
@keyframes aiLivePulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: 0.4; } }
@keyframes aiVideoGlow { 0%, 100% { box-shadow: 0 30px 60px -20px rgba(16,6,159,0.30), 0 0 0 1px rgba(16,6,159,0.06); } 50% { box-shadow: 0 36px 80px -18px rgba(16,6,159,0.42), 0 0 0 1px rgba(16,6,159,0.10); } }
@keyframes aiEdgeFlow { to { stroke-dashoffset: -18; } }
@keyframes aiHaloBreathe { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }

.ai-agents-page h1,
.ai-agents-page h2 { text-wrap: balance; }
.ai-agents-page p { text-wrap: pretty; }

/* ---- Shared card / chip / icon patterns ---- */
.ai-agents-page .ai-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(17,24,39,0.04);
}
.ai-agents-page .ai-grad-brand { background: linear-gradient(160deg, #10069f 0%, #17105f 100%); }
.ai-agents-page .ai-tint-card {
  background: linear-gradient(135deg, #eef2ff 0%, rgba(224,231,255,0.45) 100%);
  border: 1px solid #e0e7ff;
}
.ai-agents-page .ai-glow-bg {
  position: absolute;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(16,6,159,0.08) 0%, transparent 70%);
}
.ai-agents-page .ai-ico {
  flex: 0 0 auto;
  border-radius: 10px;
  background: #eef2ff;
  color: #10069f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ai-agents-page .ai-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: #374151;
  line-height: 1.4;
}
.ai-agents-page .ai-check svg { flex: 0 0 auto; margin-top: 2px; }
.ai-agents-page .ai-qbox {
  background: #f8fafc;
  border: 1px solid #f3f4f6;
  border-radius: 0.5rem;
  padding: 15px 17px;
  font-size: 15.5px;
  font-weight: 600;
  color: #111827;
  line-height: 1.55;
}
.ai-agents-page .ai-sec-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 1.1rem 1.2rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #fff;
}
.ai-agents-page .ai-sec-item svg { flex: 0 0 auto; margin-top: 2px; }
.ai-agents-page [data-mcp-link] { transition: color 0.2s; }
.ai-agents-page [data-mcp-link]:hover { color: #0b0470; }

/* ---- Demo video ---- */
.ai-agents-page [data-demo-frame] { animation: aiVideoGlow 4.5s ease-in-out infinite; }
.ai-agents-page [data-demo-play] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  background: rgba(16,6,159,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 12px 30px -6px rgba(16,6,159,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, transform 0.2s;
}
.ai-agents-page [data-demo-frame]:hover [data-demo-play] { transform: translate(-50%, -50%) scale(1.06); }
.ai-agents-page [data-demo-expand] {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: rgba(15,18,36,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.ai-agents-page [data-demo-expand]:hover { background: rgba(15,18,36,0.78); }

/* ---- Connection diagram ---- */
.ai-agents-page [data-connector] {
  flex: 1 1 70px;
  min-width: 48px;
  align-self: center;
  position: relative;
  height: 2px;
  background: linear-gradient(90deg, #e5e7eb, #10069f, #e5e7eb);
  margin: 0 6px;
}
.ai-agents-page [data-flowdot] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10069f;
  box-shadow: 0 0 0 4px rgba(16,6,159,0.12);
  animation: aiFlow 2.6s linear infinite;
}
.ai-agents-page [data-glow] { animation: aiGlow 3.4s ease-in-out infinite; }

/* ---- Workflow fan (Not just chat) ---- */
.ai-agents-page [data-flowdot2] {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10069f;
  box-shadow: 0 0 0 4px rgba(16,6,159,0.12);
  animation: aiFlowDown 2.4s linear infinite;
}
.ai-agents-page [data-fan-bus] {
  position: absolute;
  top: 0;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background-image: repeating-linear-gradient(90deg, #10069f 0 10px, rgba(16,6,159,0.2) 10px 17px);
  background-size: 34px 2px;
  animation: aiBusShimmer 1.1s linear infinite;
}
.ai-agents-page [data-drop] {
  width: 2px;
  height: 34px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(16,6,159,0.25), #10069f);
  position: relative;
  transition: background 0.2s;
}
.ai-agents-page [data-drop-dot] {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10069f;
  box-shadow: 0 0 0 4px rgba(16,6,159,0.12);
  animation: aiFlowDown 2.6s linear infinite;
}
.ai-agents-page [data-live] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10069f;
  animation: aiLivePulse 2.2s ease-in-out infinite;
}
.ai-agents-page .ai-live-mcp {
  width: 7px;
  height: 7px;
  background: #6ee7a8;
  animation-duration: 2s;
}
.ai-agents-page [data-flow-card] { transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.ai-agents-page [data-flow-ico] { transition: background 0.2s, color 0.2s; }
.ai-agents-page [data-flow-col]:hover [data-flow-card] {
  border-color: rgba(16,6,159,0.55);
  box-shadow: 0 10px 15px -3px rgba(229,231,235,0.6);
  transform: translateY(-5px);
}
.ai-agents-page [data-flow-col]:hover [data-drop] { background: #10069f; }
.ai-agents-page [data-flow-col]:hover [data-flow-ico] { background: #10069f; color: #fff; }

/* ---- Knowledge graph ----
   Lines and nodes share one percentage coordinate space: the SVG uses
   viewBox 0 0 100 100 with preserveAspectRatio="none" while nodes are
   percentage-positioned on the same aspect-ratio 8/5 container. Do not
   change the viewBox, vector-effect or percentage positions. */
.ai-agents-page [data-graph] {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 8 / 5;
}
.ai-agents-page [data-graph-edges] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ai-agents-page [data-graph] line { transition: stroke 0.6s ease, opacity 0.2s; }
.ai-agents-page [data-graph-node] {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 1;
}
/* Chips must never float/drift — removed deliberately (it blurred text). */
.ai-agents-page [data-graph] [data-chip] { animation: none !important; }
.ai-agents-page [data-edge] { animation: aiEdgeFlow 2.8s linear infinite; }
.ai-agents-page [data-edge-label] {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 9999px;
  padding: 2px 9px;
  white-space: nowrap;
  z-index: 1;
  transition: color 0.6s ease, border-color 0.6s ease, opacity 0.2s;
}
.ai-agents-page [data-halo] {
  pointer-events: none;
  animation: aiHaloBreathe 8s ease-in-out infinite;
}
.ai-agents-page .ai-halo-graph {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 82%;
  background: radial-gradient(ellipse, rgba(16,6,159,0.07) 0%, transparent 70%);
}
.ai-agents-page .ai-halo-node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  height: 220px;
  background: radial-gradient(ellipse, rgba(16,6,159,0.10) 0%, transparent 68%);
  animation-duration: 6.5s;
}
.ai-agents-page [data-node],
.ai-agents-page [data-rel] { transition: opacity 0.2s; }
.ai-agents-page [data-node] > div { transition: box-shadow 0.2s, border-color 0.2s; }
.ai-agents-page .ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  padding: 8px 14px;
  box-shadow: 0 4px 12px rgba(17,24,39,0.04);
  white-space: nowrap;
}
.ai-agents-page .ai-chip > span {
  font-size: 13.5px;
  font-weight: 700;
  color: #111827;
}

/* ---- FAQ ---- */
.ai-agents-page [data-faq] > summary { list-style: none; cursor: pointer; }
.ai-agents-page [data-faq] > summary::-webkit-details-marker { display: none; }
.ai-agents-page [data-faq-chevron] { flex: 0 0 auto; transition: transform 0.2s; }
.ai-agents-page [data-faq][open] [data-faq-chevron] { transform: rotate(180deg); }

/* ---- Responsive: connection diagram stacks below 880px ---- */
@media (max-width: 880px) {
  .ai-agents-page [data-diagram] { flex-direction: column !important; align-items: center !important; }
  .ai-agents-page [data-connector] { width: 2px !important; height: 30px !important; min-width: 2px !important; }
  /* The connector is vertical once the diagram stacks, so the travelling
     dot switches from the horizontal aiFlow to the vertical aiFlowDown
     (same as the dots in the "Not just for chat" fan). */
  .ai-agents-page [data-flowdot] {
    left: 50%;
    transform: translateX(-50%);
    animation: aiFlowDown 2.6s linear infinite;
  }
  /* flex-basis would become a fixed height once the diagram stacks. */
  .ai-agents-page [data-diagram-node] { width: 100% !important; max-width: 360px !important; flex-basis: auto !important; }
  .ai-agents-page [data-flow-grid] { grid-template-columns: repeat(2, 1fr) !important; }
  .ai-agents-page [data-fan-bus] { display: none !important; }
  .ai-agents-page [data-drop] { display: none !important; }
  .ai-agents-page [data-flow-card] { padding-top: 1.5rem !important; }
}

/* ---- Responsive: graph collapses to a plain chip list below 720px ---- */
@media (max-width: 720px) {
  .ai-agents-page [data-hide-sm] { display: none !important; }
  .ai-agents-page [data-two-col] { grid-template-columns: 1fr !important; }
  .ai-agents-page [data-flow-grid] { grid-template-columns: 1fr !important; }
  .ai-agents-page [data-graph] { aspect-ratio: auto !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; }
  .ai-agents-page [data-graph-node] { position: static !important; transform: none !important; }
  .ai-agents-page [data-graph-edges],
  .ai-agents-page [data-edge-label],
  .ai-agents-page [data-graph-packet] { display: none !important; }
  /* Fixed-size decorative halos would overflow the viewport once the
     graph collapses into a static chip list. */
  .ai-agents-page [data-graph] [data-halo] { display: none !important; }
}

/* ---- Reduced motion: disable every animation this page adds ---- */
@media (prefers-reduced-motion: reduce) {
  .ai-agents-page [data-flowdot],
  .ai-agents-page [data-glow],
  .ai-agents-page [data-chip],
  .ai-agents-page [data-flowdot2],
  .ai-agents-page [data-drop-dot],
  .ai-agents-page [data-fan-bus],
  .ai-agents-page [data-live],
  .ai-agents-page [data-edge],
  .ai-agents-page [data-halo],
  .ai-agents-page [data-demo-frame] { animation: none !important; }
}