/* Illustrated scenes (round 24) · scale models on canvas, labels in HTML, one sentence per step.
   Reads the section's semantic tokens (--fg, --muted, --line, --accent-text) so it sits on light and dark grounds. */

.scn {
  position: relative; margin: 0;
  --tag-bg: #FFFFFF; --tag-fg: #0E1116; --tag-line: rgba(14, 17, 22, 0.12); --tag-sub: #6B7480; --stem-c: rgba(14, 17, 22, 0.32);
  --tag-shadow: 0 8px 20px -10px rgba(14, 17, 22, 0.35);
}
/* Digital twin look (2026-10-20): labels read like Affectli's twin screens: dark plates, cyan rules, lit cyan readings (no green: round 32). */
.scn.is-bp {
  --tag-bg: rgba(10, 18, 34, 0.9); --tag-fg: #DCE8F7; --tag-line: rgba(46, 160, 240, 0.48); --tag-sub: #9FE8F5; --stem-c: rgba(46, 160, 240, 0.72);
  --tag-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.7);
}
body[data-brand="affectli"] .scn, .scn[data-brand="affectli"] { --tag-fg: #0A1033; --tag-line: rgba(10, 16, 51, 0.12); --tag-sub: #4F5878; --stem-c: rgba(10, 16, 51, 0.3); }
body[data-brand="affectli"] .scn.is-bp, .scn[data-brand="affectli"].is-bp { --tag-bg: rgba(10, 18, 34, 0.9); --tag-fg: #DCE8F7; --tag-line: rgba(46, 160, 240, 0.48); --tag-sub: #9FE8F5; --stem-c: rgba(46, 160, 240, 0.72); }

.scn__stage { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 10; transition: opacity 0.42s ease; }
.scn.is-fading .scn__stage { opacity: 0; }
.scn__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scn__tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* labels on the model */
.scn-tag { position: absolute; left: -9999px; top: 0; --stem: 18px; }
.scn-tag::before {
  content: ""; position: absolute; left: -0.5px; bottom: 0; width: 1px; height: calc(var(--stem) + var(--lift, 0px));
  background: var(--stem-c); opacity: 0; transition: opacity 0.3s ease, height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 1;
}
.scn-tag::after {
  content: ""; position: absolute; left: -2.5px; bottom: -2.5px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--stem-c); opacity: 0; transition: opacity 0.3s ease; z-index: 1;
}
.scn-tag__in {
  position: absolute; z-index: 2; left: var(--dx, 0px); bottom: calc(var(--stem) + var(--lift, 0px));
  transform: translate(-50%, 6px);
  display: grid; gap: 2px; padding: 5px 10px 6px; border-radius: 7px;
  background: var(--tag-bg); color: var(--tag-fg); border: 1px solid var(--tag-line); box-shadow: var(--tag-shadow);
  font: 500 12.5px/1.25 var(--font-body); white-space: nowrap;
  opacity: 0; transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), bottom 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), margin-top 0.35s ease;
}
.scn-tag__in b { font-weight: 600; display: flex; align-items: center; gap: 7px; }
.scn-tag__in small { font: 500 10px/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tag-sub); }
.scn-tag.is-on::before, .scn-tag.is-on::after { opacity: 1; }
.scn-tag.is-on .scn-tag__in { opacity: 1; transform: translate(-50%, 0); }
.scn-tag--alert b::before, .scn-tag--act b::before, .scn-tag--ok b::before, .scn-tag--data b::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
}
.scn-tag--alert b::before { background: #E5484D; box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.2); }
.scn-tag--act b::before { background: #F7941D; box-shadow: 0 0 0 3px rgba(247, 148, 29, 0.2); }
.scn-tag--ok b::before { background: #0E8FB0; box-shadow: 0 0 0 3px rgba(14, 143, 176, 0.2); }
.scn.is-bp .scn-tag--ok b::before { background: #9FE8F5; box-shadow: 0 0 0 3px rgba(159, 232, 245, 0.22); }
.scn.is-bp .scn-tag--data b::before { background: #5FC4FF; box-shadow: 0 0 0 3px rgba(95, 196, 255, 0.22); }
.scn.is-bp .scn-tag--alert b::before { background: #F2385A; box-shadow: 0 0 0 3px rgba(242, 56, 90, 0.22); }
.scn-tag--data b::before { background: #7FA7C9; box-shadow: 0 0 0 3px rgba(127, 167, 201, 0.22); }
body[data-brand="affectli"] .scn-tag--act b::before, .scn[data-brand="affectli"] .scn-tag--act b::before { background: #2F8BFF; box-shadow: 0 0 0 3px rgba(47, 139, 255, 0.22); }
body[data-brand="affectli"] .scn-tag--data b::before, .scn[data-brand="affectli"] .scn-tag--data b::before { background: #7CC4F0; }
/* verbs on the links between things: a small pill on the line, no stem */
.scn-tag--flat::before, .scn-tag--flat::after { display: none; }
.scn-tag--flat .scn-tag__in {
  bottom: auto; top: 0; margin-top: calc(0px - var(--lift, 0px)); transform: translate(-50%, -50%) scale(0.9);
  padding: 2px 8px 3px; border-radius: 999px; box-shadow: none;
  font: italic 500 11.5px/1.3 var(--font-body);
}
.scn-tag--flat.is-on .scn-tag__in { transform: translate(-50%, -50%); }
.scn-tag--flat.scn-tag--act .scn-tag__in { color: #FFFFFF; background: #D97314; border-color: transparent; }
body[data-brand="affectli"] .scn-tag--flat.scn-tag--act .scn-tag__in, .scn[data-brand="affectli"] .scn-tag--flat.scn-tag--act .scn-tag__in { background: #2F6FE0; }
.scn-tag--flat.scn-tag--act b::before { display: none; }
@media (max-width: 560px) {
  .scn-tag--opt { display: none; }
  .scn-tag__in { font-size: 11px; padding: 4px 7px 5px; }
  .scn-tag__in small { font-size: 9px; }
  .scn-tag { --stem: 12px; }
}

/* caption: one sentence, then a quiet row of dots; the current one stretches and fills as the step plays */
.scn__cap { display: grid; gap: 0.7rem; margin-top: clamp(0.8rem, 0.5rem + 0.8vw, 1.25rem); }
.scn__steps { list-style: none; margin: 0; padding: 0; display: grid; }
.scn__steps > li {
  grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(5px);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  font: 500 clamp(1rem, 0.96rem + 0.25vw, 1.125rem)/1.45 var(--font-body); color: var(--fg);
  text-wrap: balance; max-width: 52ch;
}
.scn__steps > li.is-on { opacity: 1; transform: none; }
.scn__nav { display: flex; align-items: center; gap: 2px; margin-left: -3px; }
.scn__dot { padding: 7px 3px; border: 0; background: none; cursor: pointer; line-height: 0; }
.scn__dot i {
  display: block; position: relative; width: 6px; height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--line-strong, var(--line)); transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s ease;
}
.scn__dot i::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent-text, var(--accent));
  transform-origin: left center; transform: scaleX(0);
}
.scn__dot.is-past i { background: color-mix(in srgb, var(--accent-text, var(--accent)) 40%, var(--line-strong, var(--line))); }
.scn__dot.is-on i { width: 26px; }
.scn__dot.is-on i::after { transform: scaleX(var(--p, 0)); }
.scn__dot:hover i { background: var(--muted); }
.scn__dot:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 1px; border-radius: 4px; }
.scn--nocap .scn__cap { display: none; }

@media (prefers-reduced-motion: reduce) {
  .scn__stage, .scn-tag__in, .scn__steps > li, .scn__dot i { transition: none; }
}

/* ---------------------------------------------------------------- placements */
/* Mi-C3 home: pillar visuals sit on the white page, no panel chrome */
.mx-ch__fig .scn { padding: clamp(0.75rem, 0.4rem + 1vw, 1.25rem) clamp(0.75rem, 0.4rem + 1vw, 1.5rem) clamp(1rem, 0.6rem + 1vw, 1.5rem); }
.hb-scene { background: var(--bg); }
/* the operating picture straddles light and dark, on its own dark card */
.hb-op-scene { position: relative; z-index: 2; }
.hb-op-scene > .frame > .scn { padding: clamp(1rem, 0.5rem + 1.5vw, 2rem) clamp(1rem, 0.5rem + 1.5vw, 2.25rem) clamp(1.1rem, 0.6rem + 1.4vw, 1.9rem); border-radius: 4px; }
.hb-storm-scene > .scn { padding: clamp(1rem, 0.5rem + 1.5vw, 2rem) clamp(1rem, 0.5rem + 1.5vw, 2.25rem) clamp(1.1rem, 0.6rem + 1.4vw, 1.9rem); }

/* Affectli home */
.cx-hero .dp-rig--scene { transform: none !important; max-width: 1240px; }
.cx-hero .dp-rig--scene .scn { margin-inline: auto; }
.cx-pillar__art { overflow: hidden; }
.cx-pillar__art .scn, .cx-pillar__art .scn__stage { width: 100%; height: 100%; }
.cx-sov-scene { min-width: 0; align-self: center; }
.scn__deploy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 0.9rem; }
.scn__deploy span { font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.scn__deploy button {
  font: 500 13px/1 var(--font-body); padding: 9px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong, var(--line)); background: none; color: var(--fg); transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.scn__deploy button:hover { border-color: var(--fg); }
.scn__deploy button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #FFFFFF); }
.scn__deploy button:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 3px; }
.cx-story__view .scn { width: min(100%, 600px, calc((min(78vh, 660px) - 120px) * 1.2)); }
.cx-tile-scene { margin-top: 0.9rem; }
.cx-tile-l__map--scene { background-image: none; }
@media (max-width: 899px) { .cx-story__view .scn { width: 100%; } }
.cx-tile-scene .scn-tag__in, .cx-tile-l__map--scene .scn-tag__in { font-size: 11.5px; padding: 4px 8px 5px; }
.cx-tile-scene .scn-tag { --stem: 12px; }

/* round 26: no hover light on anything that holds a scene */
.cx-glow:has(.scn)::before { display: none; }
.cx-dark .cx-glow:has(.scn):hover { background-image: none; }
/* a label that had no room above sits below its object, stem pointing down */
.scn-tag--down::before { bottom: auto; top: 0; }
.scn-tag--down::after { bottom: auto; top: -2.5px; }
.scn-tag--down .scn-tag__in { bottom: auto; top: calc(var(--stem) + var(--lift, 0px)); }

/* inner pages (round 26) */
.inner-scene > .scn { padding: clamp(0.9rem, 0.5rem + 1.2vw, 1.75rem) clamp(0.9rem, 0.5rem + 1.4vw, 2rem) clamp(1rem, 0.6rem + 1.2vw, 1.75rem); }
.inner-scene--narrow { max-width: 760px; margin-inline: auto; }
.hero__scene { position: absolute; z-index: 0; right: clamp(0.5rem, 2vw, 3rem); top: calc(var(--header-h, 76px) + 2.5rem); width: min(47vw, 780px); pointer-events: none; }
@media (min-width: 1001px) { .hero:has(.hero__scene) .hero__inner { max-width: min(50%, 640px); position: relative; z-index: 1; } }
.hero__scene .scn { pointer-events: auto; }
@media (max-width: 1000px) {
  .hero__scene { position: relative; right: auto; top: auto; width: auto; margin: 1.5rem var(--gutter) 0; }
}

/* 29 Oct 2026 (Andrea): every digital twin illustration sits on a dark panel, also on light sections,
   so the navy board reads as it does in the product instead of floating on the page. */
:is(.t-light, .t-white, .t-paper, .cx-light, .cx-white) .scn .scn__stage {
  background: radial-gradient(120% 95% at 50% 42%, #17243F 0%, #0C1427 62%, #090F1E 100%);
  border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(46, 160, 240, 0.22);
}
:is(.t-light, .t-white, .t-paper, .cx-light, .cx-white) .cx-pillar__art .scn .scn__stage { border-radius: 0; box-shadow: none; }