/* Вторая выставочная презентация /presentation2: оболочка и общие предметы.
   Сценарий .tmp/cognisphere_final_tunnel_update_v2.pdf — ночной фиолетовый
   космос, золото и лаванда, мятные искры. Корень .pres.exhibition.journey
   наследует оболочку, переходы, паузу и reduced motion первого показа;
   здесь — кадр, типографика, знак, стеклянные карточки, герой, орбиты.
   Базовые стили — законченный кадр; ранние такты скрывают предметы
   через [data-beat], поэтому reduced motion показывает финальную сцену. */

@property --jr-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.pres.journey {
  --jr-gold: #e9c27a;
  --jr-gold-hi: #f8e2b0;
  --jr-gold-rgb: 233, 194, 122;
  --jr-lav: #b9a6f5;
  --jr-lav-hi: #ddd2ff;
  --jr-lav-rgb: 185, 166, 245;
  --jr-mint: #86e3cb;
  --jr-coral: #f19a86;
  --jr-ink: #f5f3ee;
  --jr-body: #c4c6de;
  --jr-muted: #9196b6;
  --jr-deep: #06071a;
  background: radial-gradient(ellipse at 70% 40%, #15123a 0%, #080920 45%, #04050f 100%);
}
.journey .pres-depth { opacity: .45; }
.journey .pres-hud { opacity: .18; }
.journey .pres-veil { background: radial-gradient(ellipse at 66% 44%, #241c52cc, #05061a 76%); }
.journey .pres-controls { background: #0a0b20ee; border-color: #b9a6f526; }
.journey .pres-btn { border-color: #c9b9ff2b; }
.journey .pres-btn--next { background: linear-gradient(135deg, #f6deae, #e2b86d); border-color: #f2d49a; color: #14112a; }
.journey .pres-progress__tick[data-state="done"] { background: #e9c27a99; }
.journey .pres-progress__tick[data-state="current"]::after { background: linear-gradient(90deg, var(--jr-gold), var(--jr-lav)); }
.journey .pres-progress__timer { background: linear-gradient(90deg, var(--jr-lav), var(--jr-gold)); }
.journey .pres-presenter { background: #07081cf5; border-top-color: #b9a6f524; }
.journey .pres-presenter__title { color: var(--jr-gold-hi); }
.pres-presenter__beat {
  color: #b7a9ef;
  font: 400 clamp(10px, .8vw, 24px)/1.4 var(--mono);
  letter-spacing: .04em;
}
.jr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Шкала сцен — кнопки: прямой переход к любой из восьми сцен. */
.jr-ticks { height: auto; align-items: center; }
.jr-tick {
  position: relative;
  flex: 1;
  height: 14px;
  padding: 0;
  border: 0;
  background: transparent !important;
  cursor: pointer;
  overflow: visible;
}
.jr-tick::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 4px;
  border-radius: 2px;
  background: #ffffff1f;
}
.jr-tick[data-state="done"]::before { background: #e9c27a99; }
.jr-tick[data-state="current"]::before { background: #e9c27a33; }
.jr-tick[data-state="current"]::after {
  top: 5px;
  bottom: auto;
  height: 4px;
  border-radius: 2px;
}
.jr-tick:hover::before,
.jr-tick:focus-visible::before { background: #f2d49acc; }
.jr-tick:focus-visible { outline: 2px solid #e6cd9acc; outline-offset: 2px; }
@media (pointer: coarse) { .jr-tick { height: 32px; } .jr-tick::before, .jr-tick[data-state="current"]::after { top: 14px; } }

/* --- Кадр -------------------------------------------------------------------- */

.jr-stage { --ex-accent: var(--jr-gold); --ex-rgb: var(--jr-gold-rgb); }
.jr-frame { overflow: visible; }
.jr-frame > * { position: absolute; }
.jr-visual {
  inset: 0;
  z-index: 1;
  --flow-color: #f2d08c;
  --u: var(--su);
  translate: calc(var(--px, 0) * .8 * var(--su)) calc(var(--py, 0) * .5 * var(--su));
  transition: translate 900ms cubic-bezier(.2, .7, .2, 1);
}
.jr-visual > * { position: absolute; }
.jr-visual > .ex-sparks,
.jr-visual > .ex-connections { inset: 0; }
.jr-visual > .ex-connections { z-index: 7; animation: jr-fade .9s ease 2.8s backwards; }
.jr-visual > .ex-sparks { z-index: 8; animation: jr-fade .9s ease 2.8s backwards; }
.journey .ex-flow__wire { opacity: .3; }
/* Световые частицы WebGL (stagefx.mjs, вид motes): проявляются после
   первого кадра; без WebGL2 сцена остаётся законченной и без них. */
.jr-motes { inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.jr-motes[data-fx-state="ready"] { opacity: 1; }

/* Знак Cognisphere: орбиты прорисовываются, ядро вспыхивает, спутник кружит. */
.jr-top { left: calc(4.5 * var(--su)); top: calc(3 * var(--su)); z-index: 9; }
.jr-lockup { display: flex; align-items: center; gap: calc(1.1 * var(--su)); }
.jr-lockup .jr-logo { width: calc(5.2 * var(--su)); height: calc(5.2 * var(--su)); }
.jr-lockup__words { display: grid; gap: calc(.35 * var(--su)); }
.jr-lockup__name {
  font: 400 calc(2.6 * var(--su))/1 var(--font);
  letter-spacing: -.03em;
  color: var(--jr-ink);
}
.jr-lockup__os {
  font: 500 calc(.82 * var(--su))/1 var(--mono);
  letter-spacing: .55em;
  color: var(--jr-gold);
}
.jr-promise {
  margin: calc(.9 * var(--su)) 0 0 calc(6.3 * var(--su));
  font-size: max(11px, calc(.9 * var(--su)));
  color: #b8bad4;
  animation: jr-fade 1.2s ease 1.2s backwards;
}
.jr-logo { overflow: visible; filter: drop-shadow(0 0 calc(.5 * var(--su)) #f0c87a55); }
.jr-logo__orbit,
.jr-logo__ring {
  fill: none;
  stroke: var(--jr-gold);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  animation: jr-draw 1.6s cubic-bezier(.5, 0, .2, 1) .15s backwards;
}
.jr-logo__orbit--b { animation-delay: .45s; }
.jr-logo__ring { animation-delay: .8s; }
.jr-logo__core { fill: #f6dca2; transform-box: fill-box; transform-origin: center; animation: jr-pop .8s cubic-bezier(.2, 1.6, .4, 1) 1s backwards, jr-glow 4.4s ease-in-out 2s infinite; }
.jr-logo__spin { animation: jr-spin 14s linear infinite; }
.jr-logo__planet { fill: #fff1cf; }

/* Номер сцены и бейдж честности. */
.jr-counter {
  right: calc(4 * var(--su));
  top: calc(3.2 * var(--su));
  z-index: 9;
  display: flex;
  align-items: center;
  gap: calc(.5 * var(--su));
  font: 400 max(11px, calc(1 * var(--su)))/1 var(--mono);
  letter-spacing: .2em;
  color: var(--jr-muted);
}
.jr-counter b { font-weight: 500; color: var(--jr-gold); }
.jr-counter__bar {
  position: relative;
  width: calc(5 * var(--su));
  height: 1px;
  margin-right: calc(.6 * var(--su));
  background: #ffffff26;
}
.jr-counter__bar i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--jr-lav), var(--jr-gold));
  transform-origin: left;
  transform: scaleX(var(--fill));
  animation: jr-bar 1.6s cubic-bezier(.16, 1, .3, 1) .4s backwards;
}
.jr-counter .stage-badge { margin-left: calc(1 * var(--su)); letter-spacing: .04em; --badge-rgb: var(--jr-lav-rgb); }

/* --- Текст: неподвижен, не светится, не уходит под панель ---------------------- */

.jr-copy {
  left: calc(4.5 * var(--su));
  top: calc(var(--copy-top, 14) * var(--su));
  width: calc(var(--copy-w, 31) * var(--su));
  z-index: 9;
  pointer-events: none;
}
.jr-copy h1 {
  margin: 0;
  font-size: max(24px, calc(var(--title-size, 4.6) * var(--su)));
  font-weight: var(--title-weight, 620);
  line-height: 1.06;
  letter-spacing: -.035em;
  color: var(--jr-ink);
  text-wrap: balance;
  text-shadow: 0 0 calc(2.5 * var(--su)) #05061a;
  outline: none;
}
.journey .jr-copy h1:is(:focus, :focus-visible) { outline: none; box-shadow: none; }
.jr-copy__lead { display: block; animation: jr-rise 1.2s cubic-bezier(.16, 1, .3, 1) .2s backwards; }
.jr-copy__accent {
  display: block;
  margin-top: calc(.2 * var(--su));
  font-size: calc(var(--accent-scale, 1) * 1em);
  background: linear-gradient(100deg, #f7dca4 0 34%, #fff7e2 46%, #f4cf88 54%, #f0c97e 100%);
  background-size: 260% 100%;
  text-shadow: none;
  filter: drop-shadow(0 0 calc(1.2 * var(--su)) #05061acc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: jr-fade .9s ease .35s backwards, jr-sheen 9s ease-in-out 2.5s infinite;
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1), filter 1s ease, letter-spacing 1.4s cubic-bezier(.16, 1, .3, 1);
}
.jr-copy__body {
  position: relative;
  margin: calc(2.6 * var(--su)) 0 0;
  max-width: calc(var(--body-w, 29) * var(--su));
  font-size: max(12px, calc(1.32 * var(--su)));
  line-height: 1.5;
  color: var(--jr-body);
  animation: jr-fade 1s ease .9s backwards;
  transition: opacity .9s ease .25s, transform 1s cubic-bezier(.16, 1, .3, 1) .25s;
}
.jr-copy__body::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-1.3 * var(--su));
  width: calc(6 * var(--su));
  height: 1px;
  background: linear-gradient(90deg, var(--jr-gold), transparent);
}
.jr-copy__quote { color: var(--jr-lav-hi); font-weight: 600; }
.jr-mottos {
  left: calc(4.5 * var(--su));
  bottom: calc(7.6 * var(--su));
  z-index: 9;
  display: grid;
  gap: calc(.45 * var(--su));
  padding-left: calc(1.2 * var(--su));
  border-left: 1px solid #e9c27a88;
  font: 500 max(10px, calc(.78 * var(--su)))/1.4 var(--mono);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #d9b878;
  animation: jr-fade 1.4s ease 1.6s backwards;
}
.jr-mottos span + span { color: #a9a3cf; }

/* --- Стеклянная карточка с иллюстрацией ------------------------------------------ */

.jr-cards { inset: 0; z-index: 3; }
.jr-card {
  position: absolute;
  left: calc((var(--x) - 7.5) * var(--su));
  top: calc((var(--y) - 5.25) * var(--su));
  width: calc(15 * var(--su));
  height: calc(10.5 * var(--su));
  perspective: calc(60 * var(--su));
  transition:
    opacity .7s ease calc(var(--i) * .16s),
    transform 1.25s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * .16s),
    filter 1s ease calc(var(--i) * .16s);
}
.jr-card__glass {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--jr-gold-rgb), .55);
  border-radius: calc(1 * var(--su));
  background: linear-gradient(160deg, #2b2d5c99, #0b0c22e6);
  box-shadow: 0 0 calc(1.6 * var(--su)) rgba(var(--jr-gold-rgb), .26), 0 calc(1 * var(--su)) calc(3 * var(--su)) #02030c99, inset 0 1px #fff3d633;
  transform: rotateY(var(--tilt, 0deg));
  animation: jr-float 8s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.37s);
}
.jr-card__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--jr-angle), transparent 0 78%, #fff3cf 86%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: jr-edge 7s linear infinite;
  animation-delay: calc(var(--i) * -.9s);
  pointer-events: none;
}
.jr-card__glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 38%, #07081cd9 92%), linear-gradient(115deg, #ffffff1c, transparent 30%);
  pointer-events: none;
}
.jr-art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .92; }
.jr-card__label {
  position: absolute;
  z-index: 2;
  left: calc(1 * var(--su));
  right: calc(.8 * var(--su));
  bottom: calc(.8 * var(--su));
  display: flex;
  align-items: center;
  gap: calc(.6 * var(--su));
  font: 600 max(10px, calc(.86 * var(--su)))/1.2 var(--font);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #f8f2e4;
}
.jr-card__label .jr-glyph { width: calc(1.9 * var(--su)); height: calc(1.9 * var(--su)); flex: none; color: var(--jr-gold); filter: drop-shadow(0 0 4px #f0c87a88); }

/* Иллюстрации карточек. */
.jr-art__hill { fill: #191a3a; }
.jr-art__people :is(path, circle, ellipse) { fill: #0c0d1f; }
.jr-art__rim { fill: none; stroke: #ffd994; stroke-width: 1.2; stroke-linecap: round; opacity: .8; }
.jr-art__dial { fill: #0d0f24; }
.jr-art__bezel { fill: none; stroke: url(#jr-g-gold); stroke-width: 3; }
.jr-art__ticks { stroke: #e7cf9c; stroke-width: 1.4; stroke-linecap: round; }
.jr-art__hands path { stroke: #f6e3b5; stroke-width: 2; stroke-linecap: round; }
.jr-art__hands circle { fill: #f6e3b5; }
.jr-art__hand-minute { transform-origin: 96px 50px; animation: jr-spin 30s linear infinite; }
.jr-art__hand-hour { transform-origin: 96px 50px; animation: jr-spin 360s linear infinite; }
.jr-art__lines { stroke: #59587c; stroke-width: 1.6; stroke-linecap: round; }
.jr-art__pen { fill: #14152c; stroke: #d6b26a; stroke-width: 1; }
.jr-art__nib { fill: #f1cf86; }
.jr-art__bars { stroke: #8e7cd8aa; stroke-width: 5; }
.jr-art__trend { fill: none; stroke: #f2d08c; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.jr-art__metal rect { fill: #2b2c40; stroke: #6f6f8d; stroke-width: .8; }
.jr-art__bottle { fill: #1f2036; stroke: #8c8bb0; stroke-width: 1; }
.jr-art__cap { fill: #3b3c58; }
.jr-art__leaf { fill: #2f5a4c; }
.jr-art__cloud { fill: #e9b98a33; }
.jr-art__ridge { fill: none; stroke: #ffffffaa; stroke-width: 1; }
.jr-art__pole { stroke: #f3e2bc; stroke-width: 1.4; }
.jr-art__flag { transform-box: fill-box; transform-origin: left center; animation: jr-flag 2.6s ease-in-out infinite; }
.jr-art__books rect { fill: #2a2448; stroke: #c49a54aa; stroke-width: .8; }
.jr-art__scales { fill: none; stroke: #f0cd86; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jr-art__pan { fill: #f0cd8644; stroke: #f0cd86; stroke-width: 1.2; }
.jr-art__tree { fill: #0f1a1f; }
.jr-art__house { fill: #121327; stroke: #6c6a97; stroke-width: .8; }
.jr-art__window { fill: #f6c977; filter: drop-shadow(0 0 4px #f6c977); animation: jr-window 7s ease-in-out infinite; }
.jr-art__frame { stroke: #121327; stroke-width: 1.6; }
.jr-art__ground { fill: #0b0c1b; }
.jr-art__tassel { fill: #f0cd86; stroke: #f0cd86; stroke-width: 1.2; }
.jr-art--education .jr-art__cap { fill: #15162c; stroke: #f0cd86; stroke-width: 1.4; }
.jr-art__trunk { fill: none; stroke: #120f1c; stroke-width: 3; stroke-linecap: round; }
.jr-art__crown { fill: #15122a; }

/* --- Люди: единый силуэтный стиль ------------------------------------------------ */

/* Человек проявляется в своей композиции с первого кадра. Движение камеры
   общего монтажа не переносится на фигуру и не изменяет её пропорции. */
.journey .jr-stage:has(.jr-person-entry).stage--entering .stage__frame {
  animation: jr-scene-reveal 900ms cubic-bezier(.2, .7, .2, 1) both;
}
.journey .jr-stage:has(.jr-person-entry).stage--leaving .stage__frame {
  animation: jr-scene-dismiss 350ms ease-in both;
}
/* Предмет «Риски» сохраняет собственную эстафету поверх проявления портрета. */
.journey[data-handoff] .jr-stage:has(.jr-person-entry) .stage__frame { animation: none; }
.jr-person-entry { animation: jr-person-reveal 900ms cubic-bezier(.2, .7, .2, 1) both; }
@keyframes jr-scene-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes jr-scene-dismiss { from { opacity: 1; } to { opacity: 0; } }
@keyframes jr-person-reveal { 0%, 12% { opacity: 0; } 100% { opacity: 1; } }

.jr-hero-slot {
  left: calc(var(--hx, 50) * var(--su));
  top: calc(var(--hy, 15) * var(--su));
  width: calc(var(--hw, 30) * var(--su));
  aspect-ratio: 240 / 360;
  z-index: 6;
  translate: calc(var(--px, 0) * .9 * var(--su)) calc(var(--py, 0) * .4 * var(--su));
  transition: translate 1s cubic-bezier(.2, .7, .2, 1);
}
.jr-hero { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 100%; animation: jr-breathe 6.4s ease-in-out infinite; }
/* Герой, путник, Оливия и фигуры карточек нарисованы одинаково: тёмные массы
   костюма и волос, кожа в тени, без черт лица; форму описывает золотой
   контровой свет справа (`--rim-r` сцены) и холодный отсвет слева (`--rim-l`). */
.jr-fig__suit { fill: url(#jr-g-suit); }
.jr-fig__sleeve { fill: url(#jr-g-sleeve); }
.jr-fig__trouser { fill: url(#jr-g-trouser); }
.jr-fig__skin { fill: url(#jr-g-skin); }
.jr-fig__hair { fill: url(#jr-g-hair); }
.jr-fig__hair--silver { fill: url(#jr-g-hair-silver); }
.jr-fig__sheen { fill: #fff; opacity: .1; }
.jr-fig__nape { fill: #000; opacity: .35; }
.jr-fig__strands { fill: none; stroke: #fff; stroke-opacity: .09; stroke-width: 2.4; stroke-linecap: round; }
.jr-fig__seam { fill: none; stroke: #000; stroke-opacity: .35; stroke-width: 1.2; stroke-linecap: round; }
.jr-fig__collar { fill: #d9dbe9; opacity: .62; }
.jr-fig__lapel { fill: #1a1e33; }
.jr-fig__shade { fill: #000; opacity: .32; }
.jr-fig__knuckle { fill: none; stroke: #000; stroke-opacity: .3; stroke-width: 1.1; stroke-linecap: round; }
.jr-fig__shoe { fill: #05060c; }
.jr-fig__shadow { fill: #000; opacity: .7; }
.jr-fig__blouse { fill: #e8e4ee; opacity: .85; }
.jr-fig__earring { fill: none; stroke: #ffd27e; stroke-width: 1.6; filter: drop-shadow(0 0 3px #ffcf7a); }
.jr-fig__rim {
  fill: none;
  stroke: #ffd27e;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px #ffcf7a);
  opacity: var(--rim-r, .85);
  transition: opacity 1.4s ease;
}
.jr-fig__rim--cool { stroke: #c9b8ff; opacity: var(--rim-l, .32); filter: drop-shadow(0 0 4px #b39dff); }
.jr-fig__rim--thin { stroke-width: 1.4; }

/* --- Орбиты со световыми бусинами ------------------------------------------------- */

.jr-orbits { inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; pointer-events: none; }
/* Орбиты — пунктир света, как в макете: точки по линии и редкие бусины. */
.jr-orbits__ring { transform-box: fill-box; transform-origin: center; animation: jr-orbit-in 2.4s cubic-bezier(.16, 1, .3, 1) calc(.3s + var(--i) * .35s) backwards; }
.jr-orbits__line {
  fill: none;
  stroke: #f2cf8a;
  stroke-width: .13;
  stroke-linecap: round;
  stroke-dasharray: 0 .011;
  opacity: .6;
}
.jr-orbits__beads {
  fill: none;
  stroke: #fff4d4;
  stroke-width: .42;
  stroke-linecap: round;
  stroke-dasharray: 0 .125;
  filter: drop-shadow(0 0 .25px #ffd890);
  animation: jr-run 60s linear infinite;
}
.jr-orbits > g:nth-child(even) .jr-orbits__beads { animation-direction: reverse; animation-duration: 84s; }
@keyframes jr-orbit-in { from { opacity: 0; transform: scale(.7) rotate(-8deg); } }

/* --- Комнаты: тёмные интерьеры поверх космоса ----------------------------------------- */

.jr-room { inset: 0; z-index: 0; pointer-events: none; translate: calc(var(--px, 0) * -.5 * var(--su)) calc(var(--py, 0) * -.3 * var(--su)); }
.jr-room > * { position: absolute; }
.jr-room__floor {
  left: -10%;
  right: -10%;
  bottom: -2%;
  height: 26%;
  background:
    radial-gradient(ellipse at 62% 0%, #f2c77a26, transparent 55%),
    linear-gradient(180deg, #11122c00, #0a0b1fd9 35%, #05060f);
  border-top: 1px solid #b9a6f514;
}
.jr-room__pedestal {
  left: calc(26 * var(--su));
  top: calc(40 * var(--su));
  width: calc(7 * var(--su));
  height: calc(10 * var(--su));
  border-radius: calc(.6 * var(--su)) calc(.6 * var(--su)) 0 0;
  background: linear-gradient(90deg, #0c0d1f, #1d1c3b 60%, #0c0d1f);
  box-shadow: inset 0 1px #e9c27a44;
}
.jr-room__pedestal span {
  position: absolute;
  left: 50%;
  top: calc(-3.6 * var(--su));
  width: calc(3.6 * var(--su));
  height: calc(3.6 * var(--su));
  margin-left: calc(-1.8 * var(--su));
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #d9d4f0, #3c3a63 40%, #0b0b1c 75%);
  box-shadow: 0 0 calc(1.2 * var(--su)) #b9a6f533;
}
.jr-room__window { top: 0; bottom: 18%; }

/* --- Монтаж: вспышка входа в финал ------------------------------------------------------- */

.journey[data-transition="flare"] .pres-veil {
  background: radial-gradient(circle at 68% 44%, #fffaf0 0%, #f6d79ae6 14%, #9d84f080 36%, #0a0b2000 66%);
}
.journey[data-transition="flare"] .pres-veil__horizon { display: none; }
.journey[data-transition="flare"][data-phase="leaving"] .pres-veil { animation: jr-flare-in 350ms ease-in both; }
.journey[data-transition="flare"][data-phase="entering"] .pres-veil { animation: jr-flare-out 900ms cubic-bezier(.16, 1, .3, 1) both; }
.journey[data-transition="flare"]:not([data-handoff]) .stage--leaving .stage__frame { animation: jr-into-light 350ms cubic-bezier(.6, 0, .9, .4) both; }
.journey[data-transition="flare"]:not([data-handoff]) .stage--entering .stage__frame { animation: jr-out-of-light 900ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes jr-flare-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1.3); } }
@keyframes jr-flare-out { from { opacity: 1; transform: scale(1.3); } to { opacity: 0; transform: scale(2); } }
@keyframes jr-into-light { to { opacity: 0; transform: scale(1.18) translateX(calc(4 * var(--su))); filter: brightness(2.2) blur(6px); } }
@keyframes jr-out-of-light { from { opacity: 0; transform: scale(.92); filter: brightness(2.4) blur(8px); } }

/* --- Общие ключевые кадры ----------------------------------------------------------- */

@keyframes jr-draw { from { stroke-dashoffset: 1; } }
@keyframes jr-run { to { stroke-dashoffset: -1; } }
@keyframes jr-fade { from { opacity: 0; } }
@keyframes jr-pop { from { transform: scale(0); opacity: 0; } }
@keyframes jr-spin { to { rotate: 360deg; } }
@keyframes jr-glow { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 4px #ffe2a0); } }
@keyframes jr-rise { from { opacity: 0; transform: translateY(calc(1.6 * var(--su))); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -20% 0); } }
@keyframes jr-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes jr-bar { from { transform: scaleX(0); } }
@keyframes jr-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 calc(-.45 * var(--su)); }
}
@keyframes jr-edge { to { --jr-angle: 360deg; } }
@keyframes jr-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.006) translateY(-.15%); } }
@keyframes jr-flag { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-6deg) scaleX(.92); } }
@keyframes jr-window { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }
@keyframes jr-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* --- Reduced motion: законченный кадр без циклов и без параллакса ------------------------ */

.journey[data-reduced="true"] :is(.jr-visual, .jr-room, .jr-hero-slot) { translate: none; }
@media (prefers-reduced-motion: reduce) {
  .journey :is(.jr-visual, .jr-room, .jr-hero-slot) { translate: none !important; }
}

/* Телефон: кадр 16:9 масштабируется по ширине как иллюстрация (подписи
   внутри — пропорционально, без нижней границы), а заголовок, пояснение и
   девизы идут читаемым блоком под кадром; прокрутка — внутри main. */
@media (max-width: 760px) {
  .pres.journey { --su: 1vw; --frame-top: 0px; }
  .journey .pres-main { overflow-x: hidden; overflow-y: auto; }
  .journey .jr-visual, .journey .jr-room, .journey .jr-hero-slot, .journey .jr-valley-slot { translate: none; }
  .journey .jr-visual :is(.jr-card__label, .jr-crystal-slot__text, .jr-tile, .jr-risk__orb, .jr-row, .jr-result,
    .jr-board__col h3, .jr-board__phrase, .jr-planet__label, .jr-next b, .jr-next div span) { font-size: calc(.8 * var(--su)); }
  .journey .jr-node__head,
  .journey .jr-node--next .jr-node__head { font-size: calc(1 * var(--su)); }
  .journey :is(.jr-promise, .jr-panels, .jr-board__phrase) { display: none; }
  .jr-top { left: 3vw; top: 2vw; }
  .jr-counter { right: 3vw; top: 2.4vw; font-size: 10px; }
  .jr-counter .stage-badge { display: none; }
  .jr-copy {
    top: calc(56.25 * var(--su) + 18px);
    left: 16px;
    width: calc(100vw - 32px);
    pointer-events: auto;
  }
  .jr-copy h1 { font-size: 26px; }
  .jr-copy__body { max-width: none; margin-top: 22px; font-size: 14px; }
  .jr-copy__body::before { top: -11px; width: 48px; }
  .jr-mottos {
    top: calc(56.25 * var(--su) + 18px);
    bottom: auto;
    left: 16px;
    right: 16px;
    margin-top: 300px;
    padding-bottom: 24px;
    font-size: 10px;
    letter-spacing: .2em;
  }
  .jr-restart { right: 3vw; top: 46vw; min-height: 36px; font-size: 12px; }
}

/* Экран стенда без заметок ведущего; клавиши и управление при движении
   мыши доступны. Размер кадра пересчитывается под всю высоту монитора. */
.pres.journey[data-kiosk="true"] { --presenter-height: 0px; }
.journey[data-kiosk="true"] .pres-presenter { display: none; }

.journey[data-kiosk="true"][data-idle="true"][data-play-mode="auto"] .pres-controls:not(:focus-within) { pointer-events: none; }

/* Свет продолжает путь между предметами во всех сценах. Длинный шлейф
   медленнее точечных бусин, фазы колец намеренно не совпадают. */
.jr-orbits__comet { fill: none; stroke: #ffe8b3; stroke-width: .18; stroke-linecap: round; stroke-dasharray: .035 .965; filter: drop-shadow(0 0 .18px #ffd694); animation: jr-run 15s linear infinite; animation-delay: calc(var(--i) * -4.2s); opacity: .75; }
.jr-orbits > g:nth-child(even) .jr-orbits__comet { animation-direction: reverse; animation-duration: 21s; stroke: #cdb9ff; }
.jr-stage--finale .jr-orbits { z-index: 4; opacity: .65; }
.jr-stage--finale .jr-orbits { animation: jr-fade 2s ease .8s backwards; }
.jr-stage--finale .jr-orbits { transition: opacity 2s ease; }
.jr-room--office::after,.jr-room--study::after,.jr-room--night::after { content: ""; position: absolute; inset: 0; background: linear-gradient(119deg,transparent 45%,#d4b37b05 46%,#d4b37b12 50%,transparent 52%,transparent 66%,#afa2e508 67%,transparent 74%); transform-origin: 80% 0; animation: jr-room-light 18s ease-in-out infinite; pointer-events: none; }
@keyframes jr-room-light { 0%,100% { opacity: .5; transform: rotate(-2deg); } 50% { opacity: 1; transform: rotate(2deg); } }
.jr-stage--olivia[data-beat="1"] .jr-risk::after { content: ""; position: absolute; inset: -10%; border: 1px solid #f19a8655; border-radius: 50%; animation: jr-risk-wave 6s ease-out infinite; pointer-events: none; }
@keyframes jr-risk-wave { 0% { opacity: 0; transform: scale(.8); } 25% { opacity: .5; } 100% { opacity: 0; transform: scale(1.5); } }

/* Общие отклики следующего шага, используемые также доской Дэниела. */
@keyframes jr-hot {
  0%, 100% { box-shadow: 0 0 calc(1.4 * var(--su)) #f2c77a44, inset 0 1px #fff3d622; }
  50% { box-shadow: 0 0 calc(3.4 * var(--su)) #ffd27eaa, inset 0 1px #fff3d655; }
}
@keyframes jr-nudge { 0%, 100% { translate: 0 0; } 50% { translate: calc(.5 * var(--su)) 0; } }

/* Пульт привязан только к нижнему краю. Унаследованные top + bottom
   растягивали его на сотни пикселей в вертикальном окне. Размеры кнопок
   независимы от пустого пространства вокруг кадра. */
.journey .pres-controls {
  top: auto;
  bottom: calc(var(--presenter-height) + max(12px, env(safe-area-inset-bottom, 0px)));
  left: 50%;
  right: auto;
  width: min(calc(92 * var(--su)), calc(100% - 24px));
  height: auto;
  min-height: 0;
  translate: -50% 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: clamp(6px, .6vw, 20px);
  padding: clamp(6px, .5vw, 16px);
  border-radius: 12px;
  font-size: clamp(12px, 1vw, 28px);
}
.journey .pres-controls :is(.pres-btn, .locale-switch, .header-action) { flex: none; }
.journey .pres-controls .pres-btn { min-height: clamp(44px, 2.8vw, 88px); padding: 0 .85em; }
.journey .pres-controls .header-action { width: clamp(44px, 2.8vw, 88px); height: clamp(44px, 2.8vw, 88px); }
.journey .pres-controls :is(.pres-controls__spacer, .pres-paused) { display: none; }
.journey .pres-controls .pres-progress { order: 0; flex: 1 1 180px; min-width: 80px; padding: 0 4px; }
.journey .pres-controls .pres-progress__label { font-size: .75em; white-space: nowrap; }
.journey .pres-controls .jr-ticks { height: 20px; gap: 4px; }
.journey .pres-controls .jr-tick { height: 20px; }
.journey .pres-controls .jr-tick::before,
.journey .pres-controls .jr-tick[data-state="current"]::after { top: 8px; }
.journey .pres-controls .pres-btn--auto { font-size: inherit; width: auto; }
.journey .pres-controls .pres-btn--auto .ui-icon { width: 1.15em; height: 1.15em; }
@media (max-width: 1120px) {
  .journey .pres-controls { width: calc(100% - 24px); flex-wrap: wrap; }
  .journey .pres-controls .pres-progress { order: -1; flex: 0 0 100%; }
  .journey .pres-controls .pres-progress__label { display: none; }
}
@media (max-width: 900px) {
  .journey .pres-controls .pres-btn--exit { display: none; }
}
@media (max-width: 760px) {
  .pres.journey { --presenter-height: calc(140px + env(safe-area-inset-bottom, 0px)); }
  .journey .pres-main { bottom: calc(112px + var(--presenter-height)); }
  .journey .pres-controls { width: calc(100% - 16px); padding: 6px; gap: 6px; }
  .journey .pres-presenter { padding: 10px 12px; }
  .journey .pres-presenter__context { max-height: 100%; overflow-y: auto; }
  .journey .pres-presenter__meta { display: flex; gap: 3px 10px; }
  .journey .pres-presenter__position { display: none; }
}
@media (max-width: 640px) {
  .journey .pres-controls .jr-control-label { display: none; }
  .journey .pres-controls .pres-btn { width: 44px; padding: 0; justify-content: center; }
}
/* На самых узких экранах первый такт доступен также первой меткой шкалы. */
@media (max-width: 380px) {
  .journey .pres-controls { gap: 4px; }
  .journey .pres-controls .pres-btn--menu { display: none; }
}
@media (pointer: coarse) {
  .journey .pres-controls .jr-ticks,
  .journey .pres-controls .jr-tick { height: 32px; }
  .journey .pres-controls .jr-tick::before,
  .journey .pres-controls .jr-tick[data-state="current"]::after { top: 14px; }
}
/* При ручном переходе из автопоказа новый кадр должен быть читаемым,
   даже если циклы уже стоят на паузе. data-settled сохраняет этот выбор
   после возобновления, чтобы вступление не запускалось повторно.
   Обычная пауза внутри такта по-прежнему замораживает текущую позу. */
.journey .jr-stage[data-settled="true"] :is(.jr-copy__lead, .jr-copy__accent, .jr-copy__body,
  .ex-connections, .ex-sparks, .jr-card, .jr-tile, .jr-boulder, .jr-boulder__rock, .jr-boulder__label,
  .jr-node, .jr-traveller, .jr-person-entry, .jr-fragment, .jr-route__station, .jr-planet, .jr-restart,
  .jr-galaxy__orbit, .jr-galaxy__leader, .jr-hidden path, .jr-board__link, .jr-board__result-path,
  .jr-promise, .jr-mottos, .jr-board__glass, .jr-row, .jr-result, .jr-board__phrase,
  .jr-logo__orbit, .jr-logo__ring, .jr-logo__core, .jr-olivia__line, .jr-chasm__edge, .jr-tunnel__rim) {
  animation: none !important;
}