/* ==========================================================================
   05 Use cases — sticky stacked cards (Axiora "Built to Boost Works")
   ========================================================================== */
#usecases .uc-meta {
  display: flex; justify-content: space-between; align-items: center; height: 44px; padding-inline: var(--pad); color: var(--text-3);
  border-top: 1px solid var(--line);
}
#usecases .uc-meta span { display: inline-flex; align-items: center; gap: 8px; }
#usecases .uc-meta svg { width: 13px; height: 13px; }
#usecases .sec-head + .uc-meta { margin-top: clamp(40px, 4.5vw, 72px); }

#usecases .uc-stack { --gap: 32px; display: grid; gap: var(--gap); padding-bottom: 8px; }
#usecases .uc-card {
  --stick: calc(var(--nav-h) + 24px + var(--i) * 14px);
  position: sticky; top: var(--stick);
  height: min(600px, calc(100vh - var(--nav-h) - 72px));
  height: min(600px, calc(100svh - var(--nav-h) - 72px));
}
#usecases .uc-inner {
  position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--bg); border: 1px solid var(--line-2);
  transform-origin: 50% 0%; will-change: transform;
  box-shadow: 0 -24px 60px -30px rgba(0,0,0,.9);
}
#usecases .uc-inner::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32) 30%, rgba(255,255,255,.32) 70%, transparent);
}
#usecases .uc-dim { position: absolute; inset: 0; z-index: 5; background: var(--bg); opacity: 0; pointer-events: none; }

/* left column */
#usecases .uc-left {
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-width: 0;
  padding: clamp(24px, 3vw, 44px); box-shadow: inset -1px 0 0 var(--line);
}
#usecases .uc-num { display: flex; align-items: flex-start; gap: 8px; }
#usecases .uc-num b { font-size: clamp(64px, 7.2vw, 112px); font-weight: 300; line-height: .82; letter-spacing: -0.07em; color: var(--text); }
#usecases .uc-num > .mono:not(.uc-kind) { color: var(--text-3); margin-top: 4px; }
#usecases .uc-kind { margin-left: auto; height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--r-pill); color: var(--text-2); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line-2); }
#usecases .uc-body { display: grid; gap: 18px; justify-items: start; }
#usecases .uc-title { font-size: clamp(26px, 2.5vw, 38px); line-height: 1.08; }
#usecases .uc-body > p { max-width: 420px; }
#usecases .uc-list { width: 100%; max-width: 440px; }
#usecases .uc-list li {
  display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--text);
}
#usecases .uc-list li::before { content: ""; width: 5px; height: 5px; flex: none; background: var(--text-3); }
#usecases .uc-foot {
  width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line);
}
#usecases .uc-metric { display: grid; gap: 2px; }
#usecases .uc-metric > .mono { color: var(--text-2); }
#usecases .uc-metric b { font-size: clamp(28px, 2.6vw, 36px); font-weight: 400; letter-spacing: -0.05em; line-height: 1.05; color: var(--text); }

/* right column: a line-and-gradient graphic per use case (Axiora "Main Featured"), built from the logo:
   01 the tick cluster stood up as queue columns, 02 the D-arc opened into a data ring, 03 the molecule as three
   meeting circles, 04 the tick marks run all the way round as a policy scanner. Inline SVG, no raster.
   Idle loops run only while the card is the active one (.is-live, set by usecases.js); without motion every
   graphic is shown in its finished, static state. */
#usecases .uc-vis { position: relative; overflow: hidden; min-width: 0; background: var(--bg); }
#usecases .uc-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; }
/* CSS-animated parts rotate/scale around their own box (orbits and the scan opt back into view-box) */
#usecases .uc1-col, #usecases .uc1-fill, #usecases .uc-mk, #usecases .uc3-bub, #usecases .uc3-msg, #usecases .uc3-ripple { transform-box: fill-box; }
#usecases .uc-vis::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(5,5,6,.72), transparent 26%);
}
/* the tag sits on a small canvas-coloured plate so column hairlines never run through it */
#usecases .uc-tag { position: absolute; z-index: 2; left: 14px; top: 14px; padding: 4px 6px; color: var(--text-3); background: rgba(5,5,6,.86); }
#usecases .uc-art * { animation-play-state: paused !important; }
#usecases .uc-card.is-live .uc-art * { animation-play-state: running !important; }

/* 01 operations: queue columns */
#usecases .uc1-col { transform-origin: 50% 100%; }
#usecases .uc1-fill { transform-origin: 50% 100%; animation: uc1-level 7s var(--ease-in-out) infinite alternate; }
#usecases .uc1-col:nth-child(2) .uc1-fill { animation-duration: 8.5s; }
#usecases .uc1-col:nth-child(3) .uc1-fill { animation-duration: 6.2s; }
#usecases .uc1-col:nth-child(4) .uc1-fill { animation-duration: 9.4s; }
#usecases .uc1-cap { stroke: #fff; stroke-opacity: .22; }
#usecases .uc1-col:first-child .uc1-cap { stroke-opacity: .12; }
@keyframes uc1-level { from { transform: scaleY(1); } to { transform: scaleY(.72); } }
#usecases .uc-mk { animation: uc-float 5.4s var(--ease-in-out) infinite alternate; }
#usecases .uc-mk circle:first-child { fill: rgba(236,63,42,.16); stroke: rgba(255,106,82,.38); }
#usecases .uc-mk path { stroke: #ff7a63; stroke-width: 2; stroke-linecap: round; }
#usecases .uc-mk .uc-mk-dot { fill: #ff7a63; }
@keyframes uc-float { from { transform: translateY(6px); } to { transform: translateY(-10px); } }

/* 02 revenue: data ring */
#usecases .uc2-orbit { transform-origin: 360px 300px; transform-box: view-box; animation: uc-spin var(--dur, 50s) linear infinite; }
#usecases .uc2-orbit--rev { animation-direction: reverse; }
#usecases .uc2-node { fill: #050506; stroke: rgba(255,255,255,.55); stroke-width: 1.2; }
#usecases .uc2-node--dim { stroke: rgba(255,255,255,.28); }
@keyframes uc-spin { to { transform: rotate(360deg); } }
#usecases .uc2-k { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; fill: #ff7a63; }
#usecases .uc2-v { font: 400 38px/1 var(--font-sans); letter-spacing: -0.05em; fill: var(--text); }
#usecases .uc2-d { font: 400 11px/1 var(--font-mono); letter-spacing: .04em; fill: var(--text-3); }

/* 03 support: three circles meeting at one point */
#usecases .uc3-bub { transform-origin: 50% 50%; animation: uc3-breathe 9s var(--ease-in-out) infinite alternate; }
#usecases .uc3-bub--b { animation-delay: -4.5s; }
#usecases .uc3-bub--c { animation-duration: 7s; }
@keyframes uc3-breathe { from { transform: scale(1); } to { transform: scale(1.025); } }
#usecases .uc3-msg { fill: rgba(255,255,255,.55); animation: uc3-msg 4.5s cubic-bezier(.45,0,.2,1) infinite; }
@keyframes uc3-msg {
  0% { transform: translateX(0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(420px); opacity: 0; }
}
#usecases .uc3-ripple { transform-origin: 50% 50%; opacity: 0; animation: uc3-ripple 2.8s var(--ease-out) infinite; }
@keyframes uc3-ripple { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(5.5); opacity: 0; } }

/* 04 risk: tick scanner */
#usecases .uc4-scan { transform-origin: 400px 320px; transform-box: view-box; animation: uc-spin 8s linear infinite; }
#usecases .uc4-ticks line { stroke: #fff; stroke-opacity: .16; stroke-width: 1.2; stroke-linecap: round; }
#usecases .uc4-ticks line.major { stroke-opacity: .34; }
#usecases .uc4-ticks line { animation: uc4-tick 8s linear infinite; }
@keyframes uc4-tick {
  0% { stroke: #ff7a63; stroke-opacity: .95; }
  14% { stroke: #fff; stroke-opacity: .42; }
  40%, 100% { stroke: #fff; stroke-opacity: .16; }
}
#usecases .uc4-items rect { fill: #050506; stroke: rgba(255,255,255,.5); stroke-width: 1.2; }

/* entrance: graphics assemble the first time their card arrives (motion only, see usecases.js) */
#usecases.uc-motion .uc-vis .uc-art { opacity: 0; transform: scale(1.04); transition: opacity 1s var(--ease-out), transform 1.6s var(--ease-out); }
#usecases.uc-motion .uc-card.is-seen .uc-vis .uc-art { opacity: 1; transform: none; }
#usecases .uc1-fill, #usecases .uc-mk, #usecases .uc3-msg, #usecases .uc3-ripple { animation-delay: var(--d, 0s); }
#usecases .uc1-col:nth-child(2) { --k: 1; } #usecases .uc1-col:nth-child(3) { --k: 2; }
#usecases .uc1-col:nth-child(4) { --k: 3; } #usecases .uc1-col:nth-child(5) { --k: 4; }
#usecases.uc-motion .uc1-col { transform: scaleY(0); transition: transform 1.6s var(--ease-out) calc(.15s + var(--k, 0) * .09s); }
#usecases.uc-motion .is-seen .uc1-col { transform: none; }
#usecases.uc-motion .uc2-arc { stroke-dashoffset: 70; transition: stroke-dashoffset 2s var(--ease-in-out) .2s; }
#usecases.uc-motion .is-seen .uc2-arc { stroke-dashoffset: 0; }
#usecases.uc-motion .uc2-tip { opacity: 0; transition: opacity .6s 1.9s; }
#usecases.uc-motion .is-seen .uc2-tip { opacity: 1; }

#usecases .uc-chip {
  position: absolute; z-index: 2; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px; border-radius: var(--r-pill); color: var(--text);
  background: rgba(5,5,6,.6); box-shadow: inset 0 0 0 1px var(--line-2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* short desktop viewports: compact list instead of an empty panel */
@media (min-width: 768px) and (max-height: 760px) {
  #usecases .uc-left { justify-content: flex-start; gap: clamp(28px, 6vh, 44px); }
  #usecases .uc-num b { font-size: clamp(56px, 6vw, 84px); }
  #usecases .uc-body { gap: 14px; }
  #usecases .uc-list li { padding: 7px 0; font-size: 13.5px; }
  #usecases .uc-foot { padding-top: 12px; }
}
@media (min-width: 768px) and (max-height: 680px) {
  #usecases .uc-list li:nth-child(n+3) { display: none; }
}

@media (max-width: 991px) {
  #usecases .uc-left { padding: 26px; }
  #usecases .uc-list li { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  #usecases .uc-art, #usecases .uc-art * { animation: none !important; transition: none !important; }
}

/* mobile & very short screens: plain stack, no sticky */
@media (max-width: 767px), (max-height: 600px) {
  #usecases .uc-stack { --gap: 16px; }
  #usecases .uc-card { position: relative; top: auto; height: auto; }
  #usecases .uc-inner { box-shadow: none; }
  /* one '+' per junction: only the last card draws bottom corner marks */
  #usecases .uc-card:not(:last-child) .cm.bl, #usecases .uc-card:not(:last-child) .cm.br { display: none; }
}
@media (max-width: 767px) {
  #usecases .uc-inner { grid-template-columns: 1fr; }
  #usecases .uc-left { padding: 22px 20px 24px; box-shadow: none; gap: 28px; }
  #usecases .uc-num b { font-size: 64px; }
  #usecases .uc-vis { height: 280px; order: -1; box-shadow: inset 0 -1px 0 var(--line); }
  #usecases .uc-vis::after { background: linear-gradient(0deg, rgba(5,5,6,.7), transparent 40%); }
  /* the data disc's labels would shrink to ~6px with the art; scale them up around the disc centre */
  #usecases .uc2-label { transform-box: view-box; transform-origin: 360px 315px; transform: scale(1.4); }
  #usecases .uc-foot { flex-wrap: wrap; }
  #usecases .uc-meta span:first-child { display: none; }
  #usecases .uc-meta { justify-content: flex-end; }
}