/* ─────────────────────────────────────────────────────────────
   Portail · les deux fenêtres produit animées (handoff, CSS pur)

   Chaque scène est composée pour 440 × 300 px puis mise à l'échelle
   par la variable --scene-scale (posée par /js/portail.js ; vaut 1
   sans JS, le conteneur masque le débordement). Aucune couleur ni
   police en dur : tout vient de tokens.css et universes.css.

   Provenance : Vérifié en violet, Déclaré neutre, Inféré ambre,
   incohérence en rouge (seul usage du rouge). Règle du 2026-08-03,
   confirmée le 2026-09-03.
   ───────────────────────────────────────────────────────────── */

.scene {
  position: relative;
  width: 440px;
  height: 300px;
  /* Propriete independante `scale`, et non `transform` : les animations
     d'entree des scenes posent `transform: none` dans leurs keyframes et
     ecraseraient la mise a l'echelle. Vu au navigateur le 2026-09-03. */
  scale: var(--scene-scale, 1);
  transform-origin: top left;
  font-family: var(--font-sans);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.scene .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.scene__mono { font-family: var(--font-mono); }

/* ═══ Scène Investor · l'analyse d'un dossier ═══ */

@keyframes siDoc1 { 0% { opacity: 0; transform: translate(-60px, 50px) rotate(-18deg); } 7% { opacity: 1; transform: translate(0, 0) rotate(-12deg); } 17%, 27% { opacity: 1; transform: translate(12px, 14px) rotate(0); } 32%, 100% { opacity: 0; transform: translate(12px, 14px) scaleY(0.1); } }
@keyframes siDoc2 { 0%, 3% { opacity: 0; transform: translate(40px, -40px) rotate(14deg); } 10% { opacity: 1; transform: translate(0, 0) rotate(8deg); } 19%, 27% { opacity: 1; transform: translate(-170px, 22px) rotate(0); } 32%, 100% { opacity: 0; transform: translate(-170px, 22px) scaleY(0.1); } }
@keyframes siDoc3 { 0%, 6% { opacity: 0; transform: translate(30px, 60px) rotate(-6deg); } 13% { opacity: 1; transform: translate(0, 0) rotate(-5deg); } 21%, 27% { opacity: 1; transform: translate(-292px, -20px) rotate(0); } 32%, 100% { opacity: 0; transform: translate(-292px, -20px) scaleY(0.1); } }
@keyframes siRow1 { 0%, 30% { opacity: 0; transform: translateY(10px); } 35%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes siRow2 { 0%, 32% { opacity: 0; transform: translateY(10px); } 37%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes siRow3 { 0%, 34% { opacity: 0; transform: translateY(10px); } 39%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes siRow4 { 0%, 36% { opacity: 0; transform: translateY(10px); } 41%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes siThread { 0%, 43% { width: 0; opacity: 0; } 45% { opacity: 1; } 52%, 94% { width: 118px; opacity: 1; } 100% { opacity: 0; } }
@keyframes siChip { 0%, 51% { opacity: 0; transform: translateX(-8px); } 55%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes siTagOut { 0%, 53% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes siTagIn { 0%, 53% { opacity: 0; transform: scale(0.8); } 57%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes siInco { 0%, 57% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } 61% { box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.9), 0 0 28px rgba(220, 38, 38, 0.35); } 66%, 94% { box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.55), 0 0 14px rgba(220, 38, 38, 0.15); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }
@keyframes siBadge { 0%, 59% { opacity: 0; transform: translateY(6px); } 63%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes siQ { 0%, 69% { opacity: 0; transform: translateY(8px); } 72%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes siType { 0%, 71% { width: 0; } 86%, 100% { width: 100%; } }
@keyframes siCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes siScan { 0% { transform: translateX(-100%); } 100% { transform: translateX(420%); } }
@keyframes siProg { 0% { width: 0; } 94% { width: 100%; } 100% { width: 100%; } }
@keyframes siStatus1 { 0%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes siStatus2 { 0%, 88% { opacity: 0; } 92%, 100% { opacity: 1; } }

.scene--investor {
  color: var(--int-ink);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(123, 45, 142, 0.10), rgba(3, 4, 7, 0.6));
  border: 1px solid rgba(201, 142, 221, 0.16);
  box-shadow: 0 30px 80px -30px rgba(123, 45, 142, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.si-bar {
  position: absolute; left: 0; right: 0; top: 0; height: 34px; padding: 0 14px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--int-ink-faint); overflow: hidden;
}
.si-bar__ref { display: flex; gap: 10px; align-items: center; }
.si-bar__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--int-accent-mid); box-shadow: 0 0 10px var(--int-accent-mid); }
.si-bar__status { position: relative; display: inline-block; }
.si-bar__status span:first-child { animation: siStatus1 10s linear infinite; }
.si-bar__status span:last-child { position: absolute; right: 0; top: 0; white-space: nowrap; color: var(--int-accent-soft); animation: siStatus2 10s linear infinite; }
.si-bar__prog { position: absolute; left: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--int-accent), var(--orange)); animation: siProg 10s linear infinite; }
.si-bar__scan { position: absolute; left: 0; top: 0; bottom: 0; width: 90px; background: linear-gradient(90deg, transparent, rgba(168, 94, 192, 0.18), transparent); animation: siScan 2.6s linear infinite; }
.si-doc {
  position: absolute; width: 92px; height: 118px; padding: 10px; border-radius: 6px;
  background: linear-gradient(180deg, #171321, #0d0a14); border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-mono); font-size: 9px; color: var(--int-ink-faint); display: flex; flex-direction: column; gap: 6px;
}
.si-doc strong { font-weight: 400; color: var(--int-ink); }
.si-doc i { display: block; height: 3px; background: rgba(255, 255, 255, 0.14); }
.si-doc em { margin-top: auto; font-style: normal; }
.si-doc--1 { left: 24px; top: 64px; animation: siDoc1 10s var(--ease-soft) infinite; }
.si-doc--2 { left: 206px; top: 56px; animation: siDoc2 10s var(--ease-soft) infinite; }
.si-doc--3 { left: 328px; top: 98px; animation: siDoc3 10s var(--ease-soft) infinite; }
.si-rows { position: absolute; left: 14px; right: 14px; top: 48px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.si-row { position: relative; display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 10px; border-radius: 7px; background: rgba(255, 255, 255, 0.035); }
.si-row--1 { animation: siRow1 10s linear infinite; }
.si-row--2 { animation: siRow2 10s linear infinite; }
.si-row--3 { animation: siRow3 10s linear infinite, siInco 10s linear infinite; }
.si-row--4 { animation: siRow4 10s linear infinite; }
.si-row__k { width: 70px; color: var(--int-ink-faint); }
.si-row__v { color: var(--int-ink); }
.si-tag { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; padding: 2px 7px; border-radius: var(--r-pill); border: 1px solid currentColor; }
.si-tag--verified { color: var(--prov-verified); }
.si-tag--declared { color: var(--prov-inferred); }
.si-tag--inferred { color: var(--prov-inferred); }
.si-thread { height: 1px; background: linear-gradient(90deg, var(--prov-declared), var(--prov-verified)); box-shadow: 0 0 8px rgba(168, 94, 192, 0.6); animation: siThread 10s var(--ease-soft) infinite; }
.si-chip { font-family: var(--font-mono); font-size: 9.5px; color: var(--int-ink-muted); background: rgba(168, 94, 192, 0.1); border: 1px solid rgba(168, 94, 192, 0.35); border-radius: 5px; padding: 2px 6px; white-space: nowrap; animation: siChip 10s linear infinite; }
.si-swap { margin-left: auto; position: relative; width: 64px; height: 16px; }
.si-swap .si-tag { position: absolute; right: 0; margin-left: 0; }
.si-swap .si-tag--declared { animation: siTagOut 10s linear infinite; }
.si-swap .si-tag--verified { animation: siTagIn 10s linear infinite; }
.si-badge { font-family: var(--font-mono); font-size: 9.5px; color: #fca5a5; background: rgba(220, 38, 38, 0.10); border: 1px solid rgba(220, 38, 38, 0.4); border-radius: 5px; padding: 2px 6px; white-space: nowrap; animation: siBadge 10s linear infinite; }
.si-q { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 10px 12px; border-radius: var(--r-sm); background: linear-gradient(180deg, rgba(123, 45, 142, 0.22), rgba(123, 45, 142, 0.08)); border: 1px solid rgba(201, 142, 221, 0.3); animation: siQ 10s linear infinite; }
.si-q__k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--int-accent-soft); margin-bottom: 5px; }
.si-q__t { display: flex; align-items: center; }
.si-q__t span { display: inline-block; overflow: hidden; white-space: nowrap; font-size: 13px; color: var(--int-ink-strong); animation: siType 10s steps(44) infinite; max-width: 100%; }
.si-q__t i { display: inline-block; width: 7px; height: 14px; background: var(--orange); margin-left: 2px; animation: siCaret 1s steps(1) infinite; }

/* ═══ Scène Founder · le carnet papier ═══ */

@keyframes spIn { 0% { opacity: 0; transform: translateY(8px); } 6%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes spCheck1 { 0%, 12% { background: transparent; border-color: rgba(36, 28, 21, 0.3); color: transparent; } 16%, 94% { background: var(--atl-flaynn); border-color: var(--atl-flaynn); color: #fff; } 100% { opacity: 0; } }
@keyframes spCheck2 { 0%, 24% { background: transparent; border-color: rgba(36, 28, 21, 0.3); color: transparent; } 28%, 94% { background: var(--atl-flaynn); border-color: var(--atl-flaynn); color: #fff; } 100% { opacity: 0; } }
@keyframes spCheck3 { 0%, 36% { background: transparent; border-color: rgba(36, 28, 21, 0.3); color: transparent; } 40%, 94% { background: var(--atl-flaynn); border-color: var(--atl-flaynn); color: #fff; } 100% { opacity: 0; } }
@keyframes spStrike1 { 0%, 14% { color: var(--atl-ink); } 18%, 100% { color: #9a8f80; } }
@keyframes spStrike2 { 0%, 26% { color: var(--atl-ink); } 30%, 100% { color: #9a8f80; } }
@keyframes spStrike3 { 0%, 38% { color: var(--atl-ink); } 42%, 100% { color: #9a8f80; } }
@keyframes spFocus { 0%, 46% { background: var(--atl-desk); box-shadow: none; } 52%, 94% { background: var(--atl-flaynn-wash); box-shadow: 0 0 0 1px rgba(232, 101, 26, 0.45); } 100% { box-shadow: none; } }
@keyframes spBar { 0%, 10% { width: 12%; } 16% { width: 24%; } 28% { width: 40%; } 40%, 94% { width: 60%; } 100% { width: 60%; } }
@keyframes spPct1 { 0%, 10% { opacity: 1; } 14%, 100% { opacity: 0; } }
@keyframes spPct2 { 0%, 14% { opacity: 0; } 16%, 26% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes spPct3 { 0%, 26% { opacity: 0; } 30%, 38% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes spPct4 { 0%, 38% { opacity: 0; } 42%, 100% { opacity: 1; } }
@keyframes spNext { 0%, 54% { opacity: 0; transform: translateY(14px) rotate(-0.6deg); } 60%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes spRes { 0%, 66% { opacity: 0; transform: translateX(-6px) rotate(-1.2deg); } 71%, 94% { opacity: 1; transform: rotate(-1.2deg); } 100% { opacity: 0; } }
@keyframes spPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 101, 26, 0.45); } 60% { box-shadow: 0 0 0 8px rgba(232, 101, 26, 0); } }

.scene--founder {
  color: var(--atl-ink);
  border-radius: 16px;
  background: var(--atl-paper);
  border: 1px solid var(--atl-border);
  box-shadow: 0 2px 4px rgba(66, 46, 22, 0.06), 0 24px 50px -20px rgba(66, 46, 22, 0.28);
  animation: spIn 9s linear infinite;
}
.sp-bar {
  position: absolute; left: 0; right: 0; top: 0; height: 34px; padding: 0 14px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(36, 28, 21, 0.08);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--atl-ink-faint);
}
.sp-bar strong { color: var(--atl-ink); font-weight: 600; }
.sp-prog { position: absolute; left: 14px; right: 14px; top: 46px; display: flex; align-items: center; gap: 12px; }
.sp-prog__track { flex: 1; height: 5px; border-radius: 3px; background: var(--atl-paper-dense); overflow: hidden; }
.sp-prog__fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--atl-flaynn), var(--atl-flaynn-soft)); animation: spBar 9s var(--ease-soft) infinite; }
.sp-prog__pct { position: relative; width: 40px; height: 16px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; color: var(--atl-ink); text-align: right; }
.sp-prog__pct span { position: absolute; right: 0; }
.sp-prog__pct span:nth-child(1) { animation: spPct1 9s linear infinite; }
.sp-prog__pct span:nth-child(2) { animation: spPct2 9s linear infinite; }
.sp-prog__pct span:nth-child(3) { animation: spPct3 9s linear infinite; }
.sp-prog__pct span:nth-child(4) { animation: spPct4 9s linear infinite; }
.sp-rows { position: absolute; left: 14px; right: 14px; top: 70px; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.sp-row { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 10px; border-radius: var(--r-sm); background: var(--atl-desk); }
.sp-row__check { width: 14px; height: 14px; border-radius: 50%; border: 1px solid; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; }
.sp-row--1 .sp-row__check { animation: spCheck1 9s linear infinite; }
.sp-row--2 .sp-row__check { animation: spCheck2 9s linear infinite; }
.sp-row--3 .sp-row__check { animation: spCheck3 9s linear infinite; }
.sp-row--1 .sp-row__t { animation: spStrike1 9s linear infinite; }
.sp-row--2 .sp-row__t { animation: spStrike2 9s linear infinite; }
.sp-row--3 .sp-row__t { animation: spStrike3 9s linear infinite; }
.sp-row__n { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; color: #9a8f80; }
.sp-row--cur { animation: spFocus 9s linear infinite; }
.sp-row--cur .sp-row__check { border-color: rgba(232, 101, 26, 0.8); animation: spPulse 1.8s ease-out infinite; }
.sp-row--cur .sp-row__t { font-weight: 500; }
.sp-row__todo { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; color: var(--atl-flaynn-ink); letter-spacing: 0.08em; font-weight: 600; }
.sp-next { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 11px 12px; border-radius: var(--r-md); background: #f3ead9; border: 1px solid var(--atl-border); box-shadow: 0 8px 20px -12px rgba(66, 46, 22, 0.3); animation: spNext 9s var(--ease-soft) infinite; }
.sp-next__k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--atl-flaynn-ink); margin-bottom: 4px; font-weight: 600; }
.sp-next__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-next__t { font-family: var(--font-title); font-size: 13.5px; font-weight: 600; color: var(--atl-ink); letter-spacing: -0.01em; }
.sp-next__res { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; color: #6b5c46; background: var(--atl-paper); border: 1px dashed var(--atl-border-dashed); border-radius: var(--r-pill); padding: 3px 8px; white-space: nowrap; box-shadow: 0 2px 6px -2px rgba(66, 46, 22, 0.18); animation: spRes 9s linear infinite; }

/* ─── Mouvement réduit : les scènes se figent sur leur état final. ─── */
@media (prefers-reduced-motion: reduce) {
  .scene *, .scene { animation: none !important; }
  .si-doc { display: none; }
  .si-row { opacity: 1; transform: none; }
  .si-thread { width: 118px; opacity: 1; }
  .si-chip, .si-badge, .si-q { opacity: 1; transform: none; }
  .si-swap .si-tag--declared { opacity: 0; }
  .si-swap .si-tag--verified { opacity: 1; transform: none; }
  .si-q__t span { width: 100%; }
  .si-bar__status span:first-child { opacity: 0; }
  .si-bar__status span:last-child { opacity: 1; }
  .sp-row--1 .sp-row__check, .sp-row--2 .sp-row__check, .sp-row--3 .sp-row__check { background: var(--atl-flaynn); border-color: var(--atl-flaynn); color: #fff; }
  .sp-row--1 .sp-row__t, .sp-row--2 .sp-row__t, .sp-row--3 .sp-row__t { color: #9a8f80; }
  .sp-row--cur { background: var(--atl-flaynn-wash); }
  .sp-prog__fill { width: 60%; }
  .sp-prog__pct span:not(:nth-child(4)) { opacity: 0; }
  .sp-prog__pct span:nth-child(4) { opacity: 1; }
  .sp-next, .sp-next__res { opacity: 1; transform: none; }
}