/* IntelCit public-story motion layer styles.
 * Isolated from the Home hero (public-brand.css) and the service grammars
 * (service-visuals.css). Loaded only by the new public banners. Each banner has
 * a distinct semantic sequence; cyan/blue means observation/analysis and green
 * means a confirmed output or accountable action. Gold is intentionally not used
 * here (it stays reserved for the Home decision hub and baked brand imagery). */

/* ---- Banner layout ---- */
.pub-story-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(28rem, 44vw, 38rem);
  display: grid;
  align-items: center;
  color: #fff;
  background: #021a33;
}
.pub-story-media {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.pub-story-media > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Copy-side scrim for readable text over the photo. */
.pub-story-media::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(2 22 42 / 94%) 0%, rgb(2 22 42 / 84%) 30%, rgb(2 22 42 / 40%) 56%, transparent 78%),
    linear-gradient(0deg, rgb(2 22 42 / 50%) 0%, transparent 40%);
}
/* In RTL the photo and its overlay diagram transform together; the copy stays
   outside .pub-story-media and remains normally readable. The horizontal scrim
   flips with the media, so it lands on the copy side (right) automatically —
   no separate RTL gradient is needed (matches the Home hero pattern). */
[dir="rtl"] .pub-story-media { transform: scaleX(-1); }
.pub-story-copy {
  position: relative;
  z-index: 4;
  padding-block: clamp(var(--ic-space-12), 8vw, var(--ic-space-24));
}
.pub-story-copy > :is(p, h1, h2, .pub-actions, .pub-editorial-caption) { max-width: min(46rem, 60%); }
.pub-story-copy .pub-eyebrow { color: #7fe3ef; }
.pub-story-copy .pub-eyebrow::before { background: #7fe3ef; }
.pub-story-banner h1, .pub-story-banner h2 { color: #fff; max-width: 20ch; }
.pub-story-banner .pub-section-lead { color: rgb(255 255 255 / 84%); }

/* Buttons sit on a dark photo, so they need the light-on-dark treatment the
   base .pub-hero/.pub-cta get (these banners are neither). Gold stays reserved
   for the Home decision hub, so the primary uses a solid white pill. */
.pub-story-banner .pub-button-hero { border-color: #fff; background: #fff; color: #04264a; }
.pub-story-banner .pub-button-hero:hover { border-color: var(--ic-blue-50); background: var(--ic-blue-50); }
.pub-story-banner .pub-button-ghost { border-color: rgb(255 255 255 / 45%); background: transparent; color: #fff; }
.pub-story-banner .pub-button-ghost:hover { background: rgb(255 255 255 / 12%); }

.pub-story-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.pub-story-graphic {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 9px rgb(18 168 189 / 40%));
}
.pub-story-graphic :is(path, circle, rect, line, ellipse) { vector-effect: non-scaling-stroke; }
.pub-story-layer.is-motion-paused .pub-story-graphic * { animation-play-state: paused !important; }

/* ---- Shared marks ---- */
.pub-story-graphic .story-route {
  fill: none;
  stroke: #3fd0e6;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 10 16;
  opacity: .8;
  animation: story-flow 4.6s linear infinite;
}
.pub-story-graphic .story-route-out { animation-duration: 5.4s; opacity: .62; }
.pub-story-graphic .story-surge {
  fill: none;
  stroke: #eafcff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 46 900;
  opacity: 0;
  animation: story-surge 6.8s cubic-bezier(.2, .68, .2, 1) infinite;
}
.pub-story-graphic .story-signal { fill: #eafcff; }
.pub-story-graphic .story-signal-ring {
  fill: none;
  stroke: #7fe3ef;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: story-ping 2.9s ease-out infinite;
}
.pub-story-graphic .story-node {
  fill: rgb(63 208 230 / 22%);
  stroke: #7fe3ef;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: story-node-activate 9s ease-in-out infinite;
}
.pub-story-graphic .story-teams .story-node:nth-child(1) { animation-delay: -8.1s; }
.pub-story-graphic .story-teams .story-node:nth-child(2) { animation-delay: -7.2s; }
.pub-story-graphic .story-teams .story-node:nth-child(3) { animation-delay: -6.3s; }
.pub-story-graphic .story-teams .story-node:nth-child(4) { animation-delay: -5.4s; }
.pub-story-graphic .story-service-box {
  fill: rgb(48 212 127 / 14%);
  stroke: #57e39b;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: story-appear 9s ease-in-out infinite;
  animation-delay: -3.8s;
}
.pub-story-graphic .story-check {
  fill: none;
  stroke: #57e39b;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 90;
  animation: story-draw 9s ease-in-out infinite;
  animation-delay: -3.2s;
}

/* ---- Science ---- */
.pub-story-graphic .story-frame rect {
  fill: rgb(63 208 230 / 6%);
  stroke: #7fe3ef;
  stroke-width: 2.4;
  stroke-dasharray: 16 10;
  animation: story-frame-scan 9s ease-in-out infinite;
}
.pub-story-graphic .story-scanline {
  stroke: #eafcff;
  stroke-width: 3;
  opacity: .85;
  animation: story-scanline 4.4s ease-in-out infinite;
}
.pub-story-graphic .story-observe {
  fill: rgb(63 208 230 / 26%);
  stroke: #7fe3ef;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: story-appear 9s ease-in-out infinite;
  animation-delay: -7s;
}
.pub-story-graphic .story-infer-label rect {
  fill: rgb(23 106 178 / 30%);
  stroke: #6db6ff;
  stroke-width: 2.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: story-appear 9s ease-in-out infinite;
  animation-delay: -5s;
}
.pub-story-graphic .story-human-ring {
  fill: rgb(48 212 127 / 12%);
  stroke: #57e39b;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: story-appear 9s ease-in-out infinite;
  animation-delay: -3.4s;
}

/* ---- Company: two roles circle one shared record, add their review marks,
   and release a single accountable action. This collaboration grammar is
   intentionally different from Solutions' four-way routing fan. ---- */
.pub-story-graphic .story-collab-ring {
  fill: none;
  stroke: #7fe3ef;
  stroke-width: 2.4;
  stroke-dasharray: 18 14;
  transform-box: fill-box;
  transform-origin: center;
  animation: story-collab-orbit 13s linear infinite;
}
.pub-story-graphic .story-role {
  fill: rgb(63 208 230 / 24%);
  stroke: #c9f8ff;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: story-role-review 9s ease-in-out infinite;
}
.pub-story-graphic .story-role-b { animation-delay: -4.5s; }
.pub-story-graphic .story-shared-record {
  fill: rgb(23 106 178 / 28%);
  stroke: #7fe3ef;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: story-record-focus 9s ease-in-out infinite;
}
.pub-story-graphic .story-signature {
  fill: none;
  stroke: #eafcff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 58;
  animation: story-sign 9s ease-in-out infinite;
}
.pub-story-graphic .story-signature-b { animation-delay: -4.5s; }
.pub-story-graphic .story-accountable-action {
  fill: rgb(48 212 127 / 15%);
  stroke: #57e39b;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: story-appear 9s ease-in-out infinite;
  animation-delay: -2.2s;
}

/* ---- Resources ---- */
.pub-story-graphic .story-card rect {
  fill: rgb(63 208 230 / 10%);
  stroke: #7fe3ef;
  stroke-width: 2.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: story-appear 9s ease-in-out infinite;
}
.pub-story-graphic .story-card-a rect { animation-delay: -8.2s; }
.pub-story-graphic .story-card-b rect { animation-delay: -6s; }
.pub-story-graphic .story-line { stroke: #cdeff6; stroke-width: 3; stroke-linecap: round; opacity: .7; }
.pub-story-graphic .story-tick circle {
  fill: rgb(48 212 127 / 14%);
  stroke: #57e39b;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: story-appear 9s ease-in-out infinite;
}
.pub-story-graphic .story-tick-mark {
  fill: none;
  stroke: #57e39b;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34;
  animation: story-draw 9s ease-in-out infinite;
}
.pub-story-graphic .story-checklist .story-tick:nth-child(1) circle,
.pub-story-graphic .story-checklist .story-tick:nth-child(1) .story-tick-mark { animation-delay: -5.4s; }
.pub-story-graphic .story-checklist .story-tick:nth-child(2) circle,
.pub-story-graphic .story-checklist .story-tick:nth-child(2) .story-tick-mark { animation-delay: -4.4s; }
.pub-story-graphic .story-checklist .story-tick:nth-child(3) circle,
.pub-story-graphic .story-checklist .story-tick:nth-child(3) .story-tick-mark { animation-delay: -3.4s; }

/* ---- Request demo ---- */
.pub-story-graphic .story-select rect {
  fill: rgb(63 208 230 / 6%);
  stroke: #7fe3ef;
  stroke-width: 2;
  stroke-dasharray: 14 9;
  animation: story-flow 5.6s linear infinite;
}
.pub-story-graphic .story-corner {
  fill: none;
  stroke: #eafcff;
  stroke-width: 4;
  stroke-linecap: round;
  animation: story-appear 9s ease-in-out infinite;
  animation-delay: -8s;
}
.pub-story-graphic .story-step {
  fill: rgb(63 208 230 / 14%);
  stroke: #7fe3ef;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: story-node-activate 9s ease-in-out infinite;
}
.pub-story-graphic .story-steps .story-step:nth-child(1) { animation-delay: -6.6s; }
.pub-story-graphic .story-steps .story-step:nth-child(2) { animation-delay: -5.8s; }
.pub-story-graphic .story-steps .story-step:nth-child(3) { animation-delay: -5s; }
.pub-story-graphic .story-evidence-box {
  fill: rgb(48 212 127 / 14%);
  stroke: #57e39b;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: story-appear 9s ease-in-out infinite;
  animation-delay: -3.4s;
}

/* ---- Keyframes ---- */
@keyframes story-flow { to { stroke-dashoffset: -104; } }
@keyframes story-surge {
  0%, 10% { stroke-dashoffset: 900; opacity: 0; }
  18%, 74% { opacity: .9; }
  86%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes story-ping {
  0% { opacity: .85; transform: scale(.5); }
  76%, 100% { opacity: 0; transform: scale(1.9); }
}
@keyframes story-node-activate {
  0%, 12%, 100% { opacity: .28; transform: scale(.82); }
  30%, 74% { opacity: 1; transform: scale(1); }
}
@keyframes story-appear {
  0%, 16%, 100% { opacity: 0; transform: translateY(8px) scale(.9); }
  32%, 76% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes story-draw {
  0%, 30% { stroke-dashoffset: 90; opacity: 0; }
  46%, 82% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: .3; }
}
@keyframes story-frame-scan {
  0%, 100% { opacity: .3; stroke-dashoffset: 40; }
  40%, 70% { opacity: .9; stroke-dashoffset: 0; }
}
@keyframes story-scanline {
  0% { transform: translateX(0); opacity: 0; }
  12%, 78% { opacity: .8; }
  100% { transform: translateX(452px); opacity: 0; }
}
@keyframes story-collab-orbit { to { transform: rotate(360deg); stroke-dashoffset: -96; } }
@keyframes story-role-review {
  0%, 16%, 100% { opacity: .38; transform: scale(.86); }
  34%, 76% { opacity: 1; transform: scale(1); }
}
@keyframes story-record-focus {
  0%, 18%, 100% { opacity: .48; transform: scale(.92); }
  40%, 82% { opacity: 1; transform: scale(1); }
}
@keyframes story-sign {
  0%, 26% { opacity: 0; stroke-dashoffset: 58; }
  44%, 82% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: .35; stroke-dashoffset: 0; }
}

/* ---- Editorial caption + generated-data provenance ---- */
.pub-editorial-caption {
  display: inline-flex;
  align-items: center;
  gap: var(--ic-space-2);
  margin-top: var(--ic-space-6);
  padding: .4rem .8rem;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: var(--ic-radius-pill);
  background: rgb(2 22 42 / 45%);
  color: rgb(255 255 255 / 80%);
  font-size: var(--ic-text-xs);
  font-weight: 600;
  line-height: 1.4;
}
.pub-editorial-caption::before {
  content: "";
  inline-size: .5rem;
  block-size: .5rem;
  flex: 0 0 auto;
  border-radius: 2px;
  background: linear-gradient(135deg, #7fe3ef, #57e39b);
}
/* Caption on a light editorial figure (used inside content sections). */
.pub-editorial-figure { position: relative; margin: 0; border-radius: var(--ic-radius-lg); overflow: hidden; }
.pub-editorial-figure img { display: block; width: 100%; height: auto; }
.pub-editorial-figure figcaption {
  position: absolute;
  inset-block-end: var(--ic-space-3);
  inset-inline-start: var(--ic-space-3);
  max-width: calc(100% - 2 * var(--ic-space-3));
  padding: .35rem .7rem;
  border-radius: var(--ic-radius-sm);
  background: rgb(2 22 42 / 72%);
  color: rgb(255 255 255 / 88%);
  font-size: var(--ic-text-xs);
  font-weight: 600;
  line-height: 1.4;
}

@media (max-width: 880px) {
  .pub-story-copy > :is(p, h1, h2, .pub-actions, .pub-editorial-caption) { max-width: 100%; }
  /* Stacked mobile layout: a vertical scrim is flip-invariant, so it reads the
     same in LTR and RTL even though .pub-story-media is still mirrored. */
  .pub-story-media::after {
    background: linear-gradient(180deg, rgb(2 22 42 / 90%) 0%, rgb(2 22 42 / 72%) 50%, rgb(2 22 42 / 52%) 100%);
  }
}

/* On narrow phones, object-fit:cover exposes only the centre slice of a
   landscape image. Map the full semantic diagram to that visible frame so the
   source and accountable outcome remain on-screen instead of being cropped
   away with the outer pixels of the photograph. */
@media (max-width: 640px) {
  .story-image-locked .pub-story-graphic {
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    opacity: .84;
  }
}

/* Reduced motion: keep the essential state progression visible as a calm,
   multi-second sequence; pause or slow only the fast, continuous secondary
   loops (source pings, dashed flow, one-shot surges, scan sweeps). */
@media (prefers-reduced-motion: reduce) {
  .pub-story-graphic :is(
    .story-node, .story-service-box, .story-check, .story-observe,
    .story-infer-label rect, .story-human-ring, .story-frame rect,
    .story-card rect, .story-tick circle, .story-tick-mark,
    .story-step, .story-evidence-box, .story-corner,
    .story-collab-ring, .story-role, .story-shared-record,
    .story-signature, .story-accountable-action) {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .pub-story-graphic :is(.story-signal-ring, .story-scanline) { animation: none !important; opacity: .45; }
  .pub-story-graphic .story-surge { animation: none !important; opacity: 0; }
  .pub-story-graphic :is(.story-route, .story-select rect) {
    animation-duration: 16s !important;
    animation-iteration-count: infinite !important;
  }
}