/* ============================================================================
   Home use-case card visuals (uc-viz) - three upleveled, on-brand mini scenes.
   Refined product-UI fragments, not cartoons. Three-light system. Subtle motion
   gated on the card's reveal (.in) + prefers-reduced-motion. Static end-state
   reads cleanly with no JS/motion.
   ========================================================================== */
.uc-vis{
  height:168px !important; border:1px solid var(--border); border-radius:var(--radius-lg);
  margin-bottom:18px; position:relative; overflow:hidden;
  background:linear-gradient(180deg,rgba(124,58,237,.07),var(--bg-card) 70%);
}
.uc-vis .grbg{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(124,58,237,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,.07) 1px,transparent 1px);
  background-size:22px 22px; opacity:.55;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000,transparent 78%); mask-image:radial-gradient(120% 100% at 50% 0%,#000,transparent 78%);
}
.uc-vis .glow{ position:absolute; width:160px; height:160px; border-radius:9999px; filter:blur(46px); pointer-events:none; opacity:.5; }
.uc-vis .glow.p{ top:-60px; left:-30px; background:radial-gradient(circle,var(--purple-glow),transparent 60%); }
.uc-vis .glow.t{ bottom:-70px; right:-30px; background:radial-gradient(circle,var(--teal-glow),transparent 60%); opacity:.32; }
.uc-vis .glow.o{ bottom:-70px; right:10px; background:radial-gradient(circle,var(--orange-glow),transparent 60%); opacity:.28; }
.uc-stage{ position:absolute; inset:0; padding:14px 15px; z-index:1; }
.uc-cap{ position:absolute; left:14px; right:14px; bottom:10px; z-index:2; font-family:var(--font-mono); font-size:9px; letter-spacing:.09em; text-transform:uppercase; color:var(--fg-faint); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.uc-cap .ld{ width:5px; height:5px; border-radius:9999px; }

/* ---------- shared micro type ---------- */
.uc-vis .mono{ font-family:var(--font-mono); }

/* ===========================================================================
   1 - ALERT TRIAGE - a live queue resolving verdicts; the needle surfaces
   =========================================================================== */
.viz-triage .q{ display:flex; flex-direction:column; gap:7px; }
.viz-triage .row{ display:flex; align-items:center; gap:9px; height:21px; padding:0 9px; border:1px solid var(--border); border-radius:7px; background:rgba(8,8,16,.45); opacity:.55; transform:translateX(-6px); }
.viz-triage .row .sev{ width:6px; height:6px; border-radius:9999px; flex-shrink:0; background:var(--fg-faint); }
.viz-triage .row .bar{ height:4px; border-radius:9999px; background:rgba(255,255,255,.13); flex:1; }
.viz-triage .row .bar.s2{ max-width:62%; } .viz-triage .row .bar.s3{ max-width:50%; } .viz-triage .row .bar.s4{ max-width:72%; }
.viz-triage .row .verd{ flex-shrink:0; font-family:var(--font-mono); font-size:8.5px; letter-spacing:.04em; text-transform:uppercase; padding:2px 6px; border-radius:5px; border:1px solid transparent; opacity:0; }
.viz-triage .row .verd.teal{ color:var(--teal-300); border-color:rgba(20,184,166,.4); background:rgba(20,184,166,.1); }
.viz-triage .row .verd.orange{ color:var(--orange-300); border-color:rgba(249,115,22,.45); background:rgba(249,115,22,.12); }
.viz-triage .row.hot{ border-color:rgba(249,115,22,.5); background:rgba(249,115,22,.06); }
.viz-triage .row.hot .sev{ background:var(--orange); box-shadow:0 0 7px var(--orange-glow); }

/* animate in when card revealed */
.uc-card.in .viz-triage .row{ animation:tri-in .5s cubic-bezier(.2,.7,.2,1) forwards; }
.uc-card.in .viz-triage .row:nth-child(1){ animation-delay:.05s; }
.uc-card.in .viz-triage .row:nth-child(2){ animation-delay:.13s; }
.uc-card.in .viz-triage .row:nth-child(3){ animation-delay:.21s; }
.uc-card.in .viz-triage .row:nth-child(4){ animation-delay:.29s; }
.uc-card.in .viz-triage .row .verd{ animation:tri-verd .4s ease forwards; }
.uc-card.in .viz-triage .row:nth-child(1) .verd{ animation-delay:.5s; }
.uc-card.in .viz-triage .row:nth-child(2) .verd{ animation-delay:.62s; }
.uc-card.in .viz-triage .row:nth-child(3) .verd{ animation-delay:.74s; }
.uc-card.in .viz-triage .row.hot{ animation:tri-in .5s cubic-bezier(.2,.7,.2,1) .29s forwards, tri-hot 2.4s ease-in-out 1s infinite; }
@keyframes tri-in{ to{ opacity:1; transform:none; } }
@keyframes tri-verd{ to{ opacity:1; } }
@keyframes tri-hot{ 0%,100%{ box-shadow:0 0 0 0 rgba(249,115,22,0); } 50%{ box-shadow:0 0 0 1px rgba(249,115,22,.3),0 0 16px rgba(249,115,22,.18); } }

/* ===========================================================================
   2 - AGENTIC SOC - an agent reasoning across the stack (node graph)
   =========================================================================== */
.viz-soc svg{ width:100%; height:100%; display:block; }
.viz-soc .edge{ stroke:rgba(124,58,237,.32); stroke-width:1.4; fill:none; }
.viz-soc .pulse{ stroke:var(--purple-300); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-dasharray:5 60; stroke-dashoffset:0; opacity:0; }
.uc-card.in .viz-soc .pulse{ animation:soc-pulse 2.6s linear infinite; opacity:1; }
.uc-card.in .viz-soc .pulse.e2{ animation-delay:.5s; } .uc-card.in .viz-soc .pulse.e3{ animation-delay:1s; }
.uc-card.in .viz-soc .pulse.e4{ animation-delay:1.5s; } .uc-card.in .viz-soc .pulse.e5{ animation-delay:2s; }
@keyframes soc-pulse{ from{ stroke-dashoffset:65; } to{ stroke-dashoffset:-65; } }
.viz-soc .node rect, .viz-soc .node circle{ }
.viz-soc .satellite{ fill:rgba(8,8,16,.7); stroke:var(--border-strong); stroke-width:1; }
.viz-soc .satlabel{ font-family:var(--font-mono); font-size:8px; letter-spacing:.06em; fill:var(--fg-muted); text-transform:uppercase; }
.viz-soc .core{ fill:url(#socCore); stroke:rgba(124,58,237,.7); stroke-width:1.5; }
.viz-soc .core-ring{ fill:none; stroke:rgba(124,58,237,.4); stroke-width:1; opacity:.7; }
.uc-card.in .viz-soc .core-ring{ animation:soc-ring 3s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
@keyframes soc-ring{ 0%,100%{ opacity:.2; transform:scale(.9); } 50%{ opacity:.7; transform:scale(1.12); } }
.viz-soc .spark{ fill:var(--teal-300); opacity:0; }
.uc-card.in .viz-soc .spark{ animation:soc-spark 2.6s ease-in-out infinite; }
.uc-card.in .viz-soc .spark.s2{ animation-delay:.9s; } .uc-card.in .viz-soc .spark.s3{ animation-delay:1.8s; }
@keyframes soc-spark{ 0%,70%,100%{ opacity:0; } 82%{ opacity:1; } }

/* ===========================================================================
   3 - AI-AGENT SOAR - plain-English SOP wires itself into a workflow
   =========================================================================== */
.viz-soar{ display:grid; grid-template-columns:1fr auto 88px; gap:10px; align-items:center; height:100%; }
.viz-soar .sop{ border:1px solid var(--border); border-radius:8px; background:rgba(8,8,16,.5); padding:10px 11px; display:flex; flex-direction:column; gap:7px; }
.viz-soar .sop .ln{ display:flex; align-items:center; gap:6px; }
.viz-soar .sop .ln .k{ font-family:var(--font-mono); font-size:8.5px; color:var(--purple-300); }
.viz-soar .sop .ln .tx{ height:4px; border-radius:9999px; background:rgba(255,255,255,.16); flex:1; }
.viz-soar .sop .ln .tx.s1{ max-width:84%; } .viz-soar .sop .ln .tx.s2{ max-width:66%; } .viz-soar .sop .ln .tx.s3{ max-width:74%; }
.viz-soar .arrow{ display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--purple-300); }
.viz-soar .arrow svg{ width:18px; height:18px; }
.viz-soar .arrow .l{ font-family:var(--font-mono); font-size:7px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-faint); }
.viz-soar .flow{ display:flex; flex-direction:column; gap:0; position:relative; }
.viz-soar .step{ display:flex; align-items:center; gap:7px; height:26px; padding:0 8px; border:1px solid var(--border); border-radius:7px; background:rgba(8,8,16,.5); position:relative; z-index:1; opacity:.4; }
.viz-soar .step .d{ width:7px; height:7px; border-radius:9999px; flex-shrink:0; }
.viz-soar .step .b{ height:4px; border-radius:9999px; background:rgba(255,255,255,.16); flex:1; }
.viz-soar .wire{ position:absolute; left:11px; top:18px; bottom:18px; width:1.5px; background:linear-gradient(var(--purple),rgba(124,58,237,.2)); z-index:0; transform:scaleY(0); transform-origin:top; }
.viz-soar .flow .step:not(:last-child){ margin-bottom:9px; }
.uc-card.in .viz-soar .step{ animation:soar-step .45s ease forwards; }
.uc-card.in .viz-soar .step:nth-child(2){ animation-delay:.35s; }
.uc-card.in .viz-soar .step:nth-child(3){ animation-delay:.6s; }
.uc-card.in .viz-soar .step:nth-child(4){ animation-delay:.85s; }
.uc-card.in .viz-soar .wire{ animation:soar-wire .9s ease .35s forwards; }
@keyframes soar-step{ to{ opacity:1; } }
@keyframes soar-wire{ to{ transform:scaleY(1); } }

@media(prefers-reduced-motion:reduce){
  .uc-vis *{ animation:none !important; }
  .viz-triage .row{ opacity:1 !important; transform:none !important; }
  .viz-triage .row .verd{ opacity:1 !important; }
  .viz-soc .pulse{ opacity:.5 !important; }
  .viz-soar .step{ opacity:1 !important; }
  .viz-soar .wire{ transform:scaleY(1) !important; }
}

/* ============================================================================
   HERO-SCALE variant - same scenes, larger, inside a solution-page .frame.
   Force the reveal-gated animations on (heroes are above the fold) by also
   keying every .uc-card.in rule with .uc-hero playing immediately.
   ========================================================================== */
.uc-hero{ position:relative; padding:22px; min-height:248px; display:flex; align-items:center; }
.uc-hero .viz-triage{ width:100%; }
.uc-hero .viz-triage .q{ gap:11px; }
.uc-hero .viz-triage .row{ height:34px; padding:0 14px; gap:13px; border-radius:9px; opacity:1; transform:none; }
.uc-hero .viz-triage .row .sev{ width:8px; height:8px; }
.uc-hero .viz-triage .row .bar{ height:5px; }
.uc-hero .viz-triage .row .verd{ font-size:10px; padding:3px 9px; opacity:1; }
.uc-hero .viz-soc{ width:100%; height:248px; }
.uc-hero .viz-soar{ width:100%; }
.uc-hero .viz-soar .sop{ padding:14px 15px; gap:11px; }
.uc-hero .viz-soar .sop .ln .k{ font-size:10px; }
.uc-hero .viz-soar .sop .ln .tx{ height:5px; }
.uc-hero .viz-soar .arrow svg{ width:22px; height:22px; }
.uc-hero .viz-soar .step{ height:34px; opacity:1; }
.uc-hero .viz-soar .wire{ transform:scaleY(1); }
/* play the entrance once in hero context */
.uc-hero .viz-triage .row{ animation:tri-in .5s cubic-bezier(.2,.7,.2,1) both; }
.uc-hero .viz-triage .row:nth-child(1){ animation-delay:.1s; } .uc-hero .viz-triage .row:nth-child(2){ animation-delay:.2s; }
.uc-hero .viz-triage .row:nth-child(3){ animation-delay:.3s; } .uc-hero .viz-triage .row:nth-child(4){ animation-delay:.4s; } .uc-hero .viz-triage .row:nth-child(5){ animation-delay:.5s; }
.uc-hero .viz-triage .row .verd{ animation:tri-verd .4s ease both; }
.uc-hero .viz-triage .row:nth-child(1) .verd{ animation-delay:.6s; } .uc-hero .viz-triage .row:nth-child(2) .verd{ animation-delay:.72s; }
.uc-hero .viz-triage .row:nth-child(3) .verd{ animation-delay:.84s; } .uc-hero .viz-triage .row:nth-child(4) .verd{ animation-delay:.96s; } .uc-hero .viz-triage .row:nth-child(5) .verd{ animation-delay:1.08s; }
.uc-hero .viz-triage .row.hot{ animation:tri-in .5s cubic-bezier(.2,.7,.2,1) .3s both, tri-hot 2.4s ease-in-out 1.2s infinite; }
.uc-hero .viz-soc .pulse{ animation:soc-pulse 2.6s linear infinite; opacity:1; }
.uc-hero .viz-soc .pulse.e2{ animation-delay:.5s; } .uc-hero .viz-soc .pulse.e3{ animation-delay:1s; } .uc-hero .viz-soc .pulse.e4{ animation-delay:1.5s; } .uc-hero .viz-soc .pulse.e5{ animation-delay:2s; }
.uc-hero .viz-soc .core-ring{ animation:soc-ring 3s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
.uc-hero .viz-soc .spark{ animation:soc-spark 2.6s ease-in-out infinite; }
.uc-hero .viz-soc .spark.s2{ animation-delay:.9s; } .uc-hero .viz-soc .spark.s3{ animation-delay:1.8s; }
@media(prefers-reduced-motion:reduce){ .uc-hero *{ animation:none !important; } }