/* Allonia — live micro-interface scenes (from the pertimm.com home): RAG query, agent run,
   data pipeline. Used on the home page and the product pages; scenes.js plays them in view. */
/* ---------------------------------------------------------- Solutions */
/* Live micro-interface scenes in the pearl-on-ink style of the insight covers:
   pearl type, hairlines, minimal monospace — the spectrum appears only as light.
   Each plays once in view (index.js); without JS or with reduced motion the final
   state is simply there. */
.solutions__grid { align-items: stretch; }
.scene-card .card__body { gap: .5rem; padding: clamp(1.1rem, .9rem + .9vw, 1.75rem); }
.scene-card .card__title { font-size: var(--step-3); letter-spacing: -.032em; line-height: 1.04; }
.scene-card .card__text { max-width: 40ch; }
.scene-card .card__link { margin-top: auto; padding-top: .6rem; }
.scene-card:hover .scene { --scene-glow: .2; }
.solutions__note { margin-top: 1rem; }

.scene {
  --scene-h: clamp(14.5rem, 11.25rem + 6.6vw, 18.5rem);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  --scene-glow: .13;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  height: var(--scene-h); flex: none;
  background:
    radial-gradient(80% 90% at 88% 0%, rgb(166 140 255 / var(--scene-glow)), transparent 62%),
    radial-gradient(60% 80% at 0% 100%, rgb(138 212 255 / .06), transparent 60%),
    #090b16;
  border-bottom: 1px solid var(--line);
  color: #b4b7c9; font-family: var(--mono); font-size: .75rem; line-height: 1.4; letter-spacing: 0;
}
.scene::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(transparent 0 calc(100% - 1px), rgb(240 237 247 / .035) 0) 0 0 / 100% 24px;
}
.scene__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .7rem clamp(1rem, .8rem + .6vw, 1.35rem); border-bottom: 1px solid rgb(240 237 247 / .08);
  color: #8b90a7; white-space: nowrap;
}
.scene__path { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.scene__path::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #f0edf7; box-shadow: 0 0 8px rgb(173 203 240 / .9), 0 0 2px #fff; }
.scene__index { color: #8b90a7; }
.scene__tag {
  display: inline-flex; align-items: center; gap: .45rem; padding: .18rem .55rem;
  border: 1px solid rgb(240 237 247 / .3); border-radius: 3px; color: #f0edf7; background: rgb(240 237 247 / .04);
}
.scene__tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #f0edf7; box-shadow: 0 0 8px rgb(166 244 234 / .9); }

/* 01 · Language AI & RAG */
.rag { flex: 1; display: grid; align-content: center; gap: .85rem; padding: .9rem clamp(1rem, .8rem + .6vw, 1.35rem) 1rem; min-width: 0; }
.rag__query {
  display: flex; align-items: center; gap: .6rem; min-width: 0; height: 2.5rem; padding: 0 .9rem;
  border: 1px solid rgb(240 237 247 / .2); border-radius: 4px; background: rgb(240 237 247 / .04);
  box-shadow: 0 0 0 3px rgb(166 140 255 / .1); color: #f0edf7; font-size: .8125rem; white-space: nowrap; overflow: hidden;
}
.rag__prompt { color: #c8b8ff; }
.rag__q { overflow: hidden; text-overflow: ellipsis; }
.rag__caret { flex: none; width: 1.5px; height: 1.05em; margin-left: -.35rem; background: #f0edf7; opacity: 0; }
.scene.is-typing .rag__caret { opacity: 1; animation: caret 1s steps(1) infinite; }
.rag__hits { display: grid; gap: .55rem; margin: 0 0 0 1.05rem; padding: .1rem 0 .1rem 1rem; border-left: 1px dashed rgb(240 237 247 / .2); list-style: none; }
.rag__hit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(3.5rem, 34%) 2.4rem; gap: .9rem; align-items: center; }
.rag__src { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rag__bar { position: relative; height: 4px; border-radius: 2px; background: rgb(240 237 247 / .1); }
.rag__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: inherit; background: rgb(240 237 247 / .46); transform-origin: 0 50%; }
.rag__hit:first-child { color: #f0edf7; }
.rag__hit:first-child .rag__bar::after { background: linear-gradient(90deg, #e49cf2, #a68cff 50%, #8ad4ff); box-shadow: 0 0 12px rgb(166 140 255 / .75); }
.rag__score { text-align: right; color: #f0edf7; }
.rag__answer { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; color: #b4b7c9; }
.rag__sep { color: #8b90a7; }

/* 02 · Agentic AI */
.agent { flex: 1; display: grid; align-content: center; gap: .95rem; margin: 0; padding: .9rem clamp(1rem, .8rem + .6vw, 1.35rem); list-style: none; }
.agent__step { position: relative; display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; align-items: center; gap: .9rem; }
.agent__step:not(:last-child)::before,
.agent__step:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 50%; width: 1px; height: calc(100% + .95rem); }
.agent__step:not(:last-child)::before { background: rgb(240 237 247 / .16); }
.agent__step:not(:last-child)::after { background: linear-gradient(180deg, #e49cf2, #a68cff 55%, #8ad4ff); box-shadow: 0 0 8px rgb(166 140 255 / .7); transform-origin: 50% 0; }
.agent__node { position: relative; z-index: 1; width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgb(240 237 247 / .5); background: #090b16; }
.agent__node::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: #f0edf7; }
.agent__label { color: #f0edf7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent__state { color: #8b90a7; }
.agent__state::before { content: ""; display: inline-block; width: .55em; height: .3em; margin-right: .5em; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.2em) rotate(-45deg); }
.agent__step--human .agent__node { border-radius: 2px; transform: rotate(45deg) scale(.86); border-color: #c8b8ff; box-shadow: 0 0 0 4px rgb(166 140 255 / .12), 0 0 16px rgb(166 140 255 / .6); }
.agent__step--human .agent__node::after { inset: 4px; background: transparent; border: 1px solid #f0edf7; border-radius: 1px; }
.agent__step--human .agent__label::after { content: ":"; color: #8b90a7; }
.agent__step--human .agent__state { padding: .16rem .55rem; border: 1px solid rgb(200 184 255 / .55); border-radius: 3px; color: #f0edf7; background: rgb(166 140 255 / .1); }
.agent__step--human .agent__state::before { display: none; }

/* 03 · Computer Vision (one real work image, graded to pearl on ink) */
.scene--cv { background: #05060b; }
.cv { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* anchored to the bottom and centred: the crop falls under the top bar, never on the detections */
.cv__frame {
  position: absolute; left: 50%; bottom: 0;
  width: max(100%, calc((var(--scene-h) - 2.2rem) * 1.777));
  aspect-ratio: 1672 / 941; transform: translateX(-50%);
}
.cv__frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12) brightness(.5); }
.cv__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgb(10 20 51 / .45), rgb(40 30 90 / .15) 55%, rgb(5 6 11 / .35)); }
.cv__box {
  --c: rgb(240 237 247 / .95);
  position: absolute; z-index: 1; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border: 1px solid rgb(240 237 247 / .3);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 11px 1.5px, linear-gradient(var(--c), var(--c)) 0 0 / 1.5px 11px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 11px 1.5px, linear-gradient(var(--c), var(--c)) 100% 0 / 1.5px 11px,
    linear-gradient(var(--c), var(--c)) 0 100% / 11px 1.5px, linear-gradient(var(--c), var(--c)) 0 100% / 1.5px 11px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 11px 1.5px, linear-gradient(var(--c), var(--c)) 100% 100% / 1.5px 11px;
  background-repeat: no-repeat;
}
.cv__box--lock { border-color: rgb(200 184 255 / .6); box-shadow: 0 0 24px rgb(166 140 255 / .35), inset 0 0 24px rgb(166 140 255 / .14); }
.cv__box--group { border-style: dashed; }
.cv__label {
  position: absolute; left: -1px; bottom: calc(100% + 4px);
  padding: .08rem .4rem; border-radius: 2px; background: #f0edf7; color: #05060b; white-space: nowrap; font-size: .75rem; line-height: 1.45;
}
.cv__box--lock .cv__label { box-shadow: 0 0 14px rgb(166 140 255 / .6); }
.cv__box--group .cv__label { left: auto; right: -1px; }
.cv__box--inside .cv__label { bottom: 7px; left: 7px; }
/* the truck box sits high in the frame: its label goes inside, under the top edge, so it never meets the overlay bar */
.cv__box--lock .cv__label { bottom: auto; top: 7px; left: 7px; }
.cv__scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; }
.cv__scan::before { content: ""; position: absolute; left: 0; right: 0; top: -60px; height: 60px; background: linear-gradient(180deg, transparent, rgb(166 140 255 / .14)); }
.cv__scan::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #8ad4ff 18%, #fff 50%, #e49cf2 82%, transparent); box-shadow: 0 0 12px 1px rgb(166 140 255 / .7); }
.scene__bar--over { position: relative; z-index: 3; background: linear-gradient(180deg, rgb(5 6 11 / .85), rgb(5 6 11 / .4)); border-bottom-color: rgb(240 237 247 / .1); }

/* 04 · Data Intelligence */
.merge { position: relative; flex: 1; margin: 1.6rem clamp(1rem, .8rem + .6vw, 1.35rem) 1.9rem; }
.merge__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.merge__grid { fill: none; stroke: rgb(240 237 247 / .06); stroke-width: 1; }
.merge__src { fill: none; stroke: rgb(240 237 247 / .42); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 0; }
.merge__out { fill: none; stroke: url(#g-merge); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.merge__out-glow { fill: none; stroke: #a68cff; stroke-width: 9; stroke-linecap: round; opacity: .2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.merge__node { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #090b16; border: 1.5px solid #f0edf7; box-shadow: 0 0 0 4px rgb(166 140 255 / .14), 0 0 14px rgb(166 140 255 / .7); }
.merge__label { position: absolute; left: 0; color: #8b90a7; white-space: nowrap; line-height: 1; }
.merge__label--erp { top: calc(15.5% - 1.35rem); }
.merge__label--iot { top: calc(50% - 1.35rem); }
.merge__label--crm { top: calc(84.5% + .5rem); }
.merge__label--out { left: auto; right: 0; top: calc(17.8% + .75rem); color: #f0edf7; padding: .18rem .55rem; border: 1px solid rgb(240 237 247 / .3); border-radius: 3px; background: rgb(9 11 22 / .8); line-height: 1.4; }

/* Scene choreography — only once index.js has armed a scene (JS + motion allowed).
   Armed = the starting frame, set instantly; the transitions live on the played state. */
@media (prefers-reduced-motion: no-preference) {
  /* RAG: the query types itself, then sources arrive and relevance bars fill */
  .scene.is-armed .rag__hit { opacity: 0; transform: translateX(-8px); }
  .scene.is-armed .rag__bar::after { transform: scaleX(0); }
  .scene.is-armed .rag__answer { opacity: 0; transform: translateY(4px); }
  .scene.is-typed .rag__hit { opacity: 1; transform: none; transition: opacity .6s var(--ease-out) calc(var(--i) * 150ms), transform .9s var(--ease-out) calc(var(--i) * 150ms); }
  .scene.is-typed .rag__bar::after { transform: none; transition: transform 1.3s var(--ease-out) calc(180ms + var(--i) * 150ms); }
  .scene.is-typed .rag__answer { opacity: 1; transform: none; transition: opacity .6s var(--ease-out) 1.05s, transform .8s var(--ease-out) 1.05s; }

  /* Agent: each step completes in turn; the run stops at the human checkpoint */
  .agent__step { --t: calc(250ms + var(--i) * 560ms); }
  .scene.is-armed .agent__node, .scene.is-armed .agent__label { opacity: .5; }
  .scene.is-armed .agent__state { opacity: 0; transform: translateX(-4px); }
  .scene.is-armed .agent__step:not(:last-child)::after { transform: scaleY(0); }
  .scene.is-played .agent__node, .scene.is-played .agent__label { opacity: 1; transition: opacity .45s var(--ease-out) var(--t); }
  .scene.is-played .agent__state { opacity: 1; transform: none; transition: opacity .45s var(--ease-out) calc(var(--t) + 240ms), transform .6s var(--ease-out) calc(var(--t) + 240ms); }
  .scene.is-played .agent__step:not(:last-child)::after { transform: none; transition: transform .5s var(--ease-in-out) calc(var(--t) + 300ms); }
  .scene.is-played .agent__step--human .agent__node { animation: await-pulse 1.5s var(--ease-out) calc(var(--t) + 500ms) 2; }

  /* Vision: one scan pass, then the detections lock on */
  .scene.is-armed .cv__box { opacity: 0; transform: scale(1.22); }
  .scene.is-played .cv__box { opacity: 1; transform: none; transition: opacity .35s var(--ease-out) calc(650ms + var(--i) * 260ms), transform .8s var(--ease-out) calc(650ms + var(--i) * 260ms); }
  .scene.is-played .cv__scan { animation: cv-scan 1.9s var(--ease-in-out) .1s 1 both; }

  /* Data: sources draw in, meet at one node, leave as one unified, enriched line */
  .scene.is-armed :is(.merge__src, .merge__out, .merge__out-glow) { stroke-dashoffset: 1; }
  .scene.is-armed .merge__node { opacity: 0; transform: scale(.3); }
  .scene.is-armed .merge__label { opacity: 0; }
  .scene.is-armed .merge__label--out { transform: translateY(4px); }
  .scene.is-played .merge__src { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease-out) calc(var(--i) * 170ms); }
  .scene.is-played :is(.merge__out, .merge__out-glow) { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease-out) 1.2s; }
  .scene.is-played .merge__node { opacity: 1; transform: none; transition: opacity .4s var(--ease-out) 1.05s, transform .7s var(--ease-spring) 1.05s; }
  .scene.is-played .merge__label { opacity: 1; transition: opacity .6s var(--ease-out) .2s; }
  .scene.is-played .merge__label--out { transform: none; transition: opacity .6s var(--ease-out) 2.1s, transform .8s var(--ease-out) 2.1s; }
}
@keyframes await-pulse { 0% { box-shadow: 0 0 0 4px rgb(166 140 255 / .12), 0 0 16px rgb(166 140 255 / .6); } 40% { box-shadow: 0 0 0 10px rgb(166 140 255 / 0), 0 0 26px rgb(200 184 255 / .95); } 100% { box-shadow: 0 0 0 4px rgb(166 140 255 / .12), 0 0 16px rgb(166 140 255 / .6); } }
@keyframes cv-scan { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(100%); } }

@media (max-width: 719px) {
  .scene { --scene-h: 14.25rem; }
  .rag__hit { grid-template-columns: minmax(0, 1fr) 3.25rem 2.3rem; gap: .7rem; }
}