/* Сценарий .tmp/cognisphere_final_tunnel_update_v2.pdf.
   Одна геометрия тоннеля до и после открытия. Финальный кадр — базовые стили;
   первый такт освобождает путь, второй перестраивает затронутую ветвь.
   Текст не светится. Свечение, трещины и пыль живут в отдельных слоях. */

/* Разлом и герой в первом кадре. */
.jr-chasm { inset: 0; width: 100%; height: 100%; z-index: 3; }
.jr-chasm__ground { fill: #0a0d19; }
.jr-chasm__edge { fill: none; stroke: #f6dba0; stroke-width: .12; filter: drop-shadow(0 0 .35px #efb24f); stroke-dasharray: 1; animation: jr-draw 3s ease .4s backwards; }
.jr-chasm__cracks { fill: none; stroke: #ad8555; stroke-width: .1; opacity: .6; }
.jr-chasm__reflection { fill: none; stroke: #ffda93; stroke-width: 2; opacity: .08; }
.jr-stage--question .jr-traveller { --tx: 49; --ty: 22; --tw: 14; }
.jr-stage--question .jr-sphere { z-index: 1; }
.jr-stage--question .jr-sphere__glass { opacity: .14; }
.jr-stage--question .jr-sphere__rim { opacity: .25; }
.jr-stage--question .jr-card__glass { border-radius: .1px; clip-path: polygon(6% 3%, 91% 0, 100% 14%, 96% 88%, 87% 100%, 4% 93%, 0 16%); }
.jr-stage--question .jr-card__glass::after { opacity: .65; }

/* Полнофигурный герой и контактная тень, независимые от главного текста.
   Фигура стоит спиной к свету впереди, поэтому её контровой свет не зависит
   от `--rim-*` сцены, которые настраивают бюст героя. */
.jr-traveller { position: absolute; left: calc(var(--tx, 29) * var(--su)); top: calc(var(--ty, 22) * var(--su)); width: calc(var(--tw, 11.5) * var(--su)); aspect-ratio: 220 / 520; z-index: 6; transform-origin: 50% 98%; transition: transform 3s cubic-bezier(.22,.7,.2,1) .4s; }
.jr-traveller__figure { width: 100%; height: 100%; overflow: visible; animation: jr-traveller-breathe 7s ease-in-out infinite; }
.jr-traveller .jr-fig__rim { opacity: .9; }
.jr-traveller .jr-fig__rim--cool { opacity: .35; }
@keyframes jr-traveller-breathe { 0%,100% { transform: rotate(.2deg); } 50% { transform: rotate(-.2deg) translateY(-.3%); } }

/* Каменный тоннель: статичная геометрия, глубина и движущийся свет. */
.jr-stage--blockage { --copy-top: 12; --copy-w: 29; --body-w: 24; --title-size: 3.6; --title-weight: 400; --accent-scale: 1.15; }
.jr-stage--picture { --copy-top: 13.5; --copy-w: 31; --body-w: 26; --title-size: 3.6; --title-weight: 540; --accent-scale: 1; }
.jr-stage--picture .jr-copy__accent { margin-top: calc(.55 * var(--su)); }
.jr-stage--picture .jr-copy__body { font-size: max(12px, calc(1.2 * var(--su))); }
.jr-stage--picture .jr-mottos { max-width: calc(25 * var(--su)); }
.jr-stage:is(.jr-stage--blockage,.jr-stage--picture) .jr-visual { translate: none; }
.jr-tunnel { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.jr-tunnel > * { position: absolute; }
.jr-tunnel__stone { inset: 0; width: 100%; height: 100%; }
.jr-tunnel__bedrock { fill: #060910; }
.jr-tunnel__facet { fill: hsl(222 22% var(--rock-light)); stroke: #12161e; stroke-width: .025; }
.jr-tunnel__seams path { fill: none; stroke: #ceab70; stroke-width: .055; opacity: .28; stroke-dasharray: 1; animation: jr-seam-breathe 8s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
.jr-tunnel__seams path:nth-child(3n) { stroke: #c8bee0; opacity: .16; }
.jr-tunnel__floor { fill: #10131c; stroke: #59514b; stroke-width: .1; }
.jr-tunnel__floor-cracks { fill: none; stroke: #b0874e; stroke-width: .075; opacity: .35; }
.jr-tunnel__rim { fill: none; stroke: #e0b76c; stroke-width: .1; filter: drop-shadow(0 0 .3px #f2b75b); stroke-dasharray: 1; animation: jr-draw 3.5s ease .2s backwards; }
.jr-tunnel__light { left: calc(76 * var(--su)); top: calc(9 * var(--su)); width: calc(36 * var(--su)); height: calc(34 * var(--su)); background: radial-gradient(ellipse, #fff8df 0 10%, #f7d493 23%, #d8954399 40%, transparent 69%); animation: jr-portal-breathe 6s ease-in-out infinite; }
.jr-tunnel__shafts { left: calc(30 * var(--su)); top: calc(5 * var(--su)); width: calc(72 * var(--su)); height: calc(46 * var(--su)); background: conic-gradient(from 239deg at 92% 47%, transparent 0deg, #ffd59a16 5deg, transparent 10deg, #ffd59a0b 18deg, transparent 22deg, #ffd59a1c 35deg, transparent 43deg, #ffe5b311 52deg, transparent 68deg); mix-blend-mode: screen; z-index: 1; opacity: .6; animation: jr-shafts-sway 16s ease-in-out infinite; transform-origin: 92% 47%; }
.jr-tunnel__portal { left: calc(90.5 * var(--su)); top: calc(18 * var(--su)); width: calc(9 * var(--su)); height: calc(16 * var(--su)); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(ellipse, #ffe9b999, #e2b57022 50%, transparent 72%); }
.jr-tunnel__portal .jr-glyph { width: calc(2.7 * var(--su)); height: calc(2.7 * var(--su)); color: #fff1cb; filter: drop-shadow(0 0 7px #ffe0a2); }
.jr-tunnel__haze { inset: 0; z-index: 1; background: linear-gradient(90deg, #070a13 0%, #070a13f5 24%, #070a1355 38%, transparent 55%), linear-gradient(0deg, #05081288, transparent 23%); }
@keyframes jr-seam-breathe { 0%,100% { opacity: .16; } 50% { opacity: .4; } }
@keyframes jr-portal-breathe { 0%,100% { opacity: .65; transform: scale(.95); } 50% { opacity: .95; transform: scale(1.06); } }
@keyframes jr-shafts-sway { 0%,100% { transform: rotate(-3deg); opacity: .45; } 50% { transform: rotate(3deg); opacity: .8; } }

/* Семь причин складываются в плотный завал, а не в независимые карточки. */
.jr-boulders { inset: 0; z-index: 3; }
.jr-boulder { position: absolute; left: calc((var(--x) - 9.5) * var(--su)); top: calc((var(--y) - 7.75) * var(--su)); width: calc(19 * var(--su)); height: calc(15.5 * var(--su)); display: grid; place-items: center; transform-origin: center; transition: transform 3.6s cubic-bezier(.25,.75,.2,1), opacity 2s ease; transition-delay: calc(var(--i) * .12s); }
.jr-boulder__rock { position: absolute; inset: 0; animation: jr-boulder-land 1.7s cubic-bezier(.2,.75,.3,1) calc(var(--i) * .17s) backwards; }
.jr-crystal { width: 100%; height: 100%; overflow: visible; }
.jr-crystal__shadow { fill: #03060c; transform: translate(0,3px) scale(1.04); transform-origin: center; transform-box: fill-box; }
.jr-crystal__facet { fill: hsl(220 17% calc(7% + var(--shade) * 15%)); stroke: #181c26; stroke-width: .3; }
.jr-crystal__edge { fill: none; stroke: #c5a36a; stroke-width: .85; opacity: .62; stroke-linejoin: bevel; }
.jr-crystal__crack { fill: none; stroke: #edc584; stroke-width: .7; opacity: 0; stroke-dasharray: 1; }
.jr-boulder__label { position: relative; width: calc(12.8 * var(--su)); text-align: center; color: #e6d6b8; font: 500 max(11px,calc(1.04 * var(--su)))/1.3 var(--font); letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 2px 8px #030609; transition: opacity 1s ease, transform 1.2s ease; }
.jr-boulder:nth-child(2n) .jr-boulder__label { rotate: -7deg; }
.jr-boulder:nth-child(3n) .jr-boulder__label { rotate: 5deg; }
.jr-stage--blockage .jr-boulder__label {
  animation: jr-reason-reveal 1.1s cubic-bezier(.2,.7,.2,1) calc(.8s + var(--i) * .17s) backwards;
}
.jr-stage--blockage .jr-boulder__rock {
  animation: jr-boulder-land 1.7s cubic-bezier(.2,.75,.3,1) calc(var(--i) * .17s) backwards,
    jr-boulder-weight 6s ease-in-out calc(3.2s + var(--i) * .17s) infinite;
}
.jr-stage--blockage .jr-crystal__crack { opacity: .2; animation: jr-seam-breathe 7s ease-in-out infinite; }
.jr-stage--blockage .jr-boulder::after {
  content: ""; position: absolute; inset: 12% 4%; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, #ffdf9d44 50%, transparent 70%);
  clip-path: polygon(15% 0,85% 5%,100% 40%,80% 100%,10% 85%,0 30%);
  animation: jr-stone-light 1.5s ease calc(.65s + var(--i) * .17s) both;
}
@keyframes jr-reason-reveal {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  45% { opacity: 1; }
  to { opacity: 1; clip-path: inset(0); }
}
@keyframes jr-stone-light { from { opacity: 0; translate: -35% 0; } 35% { opacity: .85; } to { opacity: 0; translate: 35% 0; } }
@keyframes jr-boulder-land { 0% { opacity: 0; transform: translateY(calc(-20 * var(--su))) rotate(-12deg) scale(.8); } 65% { opacity: 1; transform: translateY(calc(.35 * var(--su))) rotate(1deg); } 80% { transform: translateY(calc(-.25 * var(--su))); } 100% { transform: none; } }
@keyframes jr-boulder-weight { 0%,75%,100% { transform: none; } 83% { transform: translate(.6px,-.9px) rotate(.2deg); } 91% { transform: translate(-.6px,.4px); } }

/* Разбор завала. Основания выходят из камней, осколки оседают у прохода. */
.jr-stage--picture .jr-boulder { transform: translate(calc(var(--dx) * var(--su)), calc(var(--dy) * var(--su))) rotate(var(--turn)) scale(.43); opacity: .75; }
.jr-stage--picture .jr-boulder__rock { animation: none; }
.jr-stage--picture .jr-boulder__label { opacity: .75; }
.jr-stage--picture .jr-boulder { animation: jr-boulder-clear 3.6s cubic-bezier(.25,.75,.2,1) calc(var(--i) * .12s) backwards; }
@keyframes jr-boulder-clear { 0%, 12% { transform: none; opacity: 1; } }
@keyframes jr-crack-open { 0% { opacity: 0; stroke-dashoffset: 1; } 30% { opacity: .85; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
.jr-stage--picture .jr-crystal__crack { animation: jr-crack-open 3.8s ease both; filter: drop-shadow(0 0 3px #e8b358); }
.jr-stage--picture .jr-traveller { animation: jr-person-reveal 900ms cubic-bezier(.2,.7,.2,1) both, jr-traveller-step 3s cubic-bezier(.22,.7,.2,1) .7s backwards; transform: translate(calc(4 * var(--su)),calc(-.7 * var(--su))) scale(.95); }
@keyframes jr-traveller-step { from { transform: none; } }
.jr-stage--picture .jr-traveller__leg--near { transform: rotate(8deg); transform-origin: 74px 306px; transition: transform 2.8s ease; }
.jr-stage--picture .jr-traveller__leg--far { transform: rotate(-7deg); transform-origin: 150px 306px; transition: transform 2.8s ease; }
.jr-stage--picture .jr-tunnel__shafts { opacity: 1; }
.jr-unlock { left: calc(57 * var(--su)); top: calc(24 * var(--su)); width: calc(20 * var(--su)); height: calc(20 * var(--su)); z-index: 4; pointer-events: none; }
.jr-unlock span { position: absolute; inset: 0; border: 1px solid #ffdfa3; border-radius: 50%; opacity: 0; box-shadow: 0 0 calc(1 * var(--su)) #f0bd5f33; }
.jr-stage--picture[data-beat="0"] .jr-unlock span { animation: jr-unlock-wave 4s cubic-bezier(.2,.6,.2,1) both; }
.jr-stage--picture[data-beat="0"] .jr-unlock span:nth-child(2) { animation-delay: .7s; }
.jr-stage--picture[data-beat="0"] .jr-unlock span:nth-child(3) { animation-delay: 1.4s; }
@keyframes jr-unlock-wave { 0% { opacity: 0; transform: scale(.2) rotateX(50deg); } 20% { opacity: .5; } 100% { opacity: 0; transform: scale(3.8) rotateX(50deg); } }

/* Мелкие осколки и резервная пыль, видимые даже без GPU. */
.jr-fragments,.jr-dust { inset: 0; z-index: 2; pointer-events: none; }
.jr-fragment { position: absolute; left: calc(var(--x) * var(--su)); top: calc(var(--y) * var(--su)); width: calc(var(--s) * var(--su)); height: calc(var(--s) * 1.2 * var(--su)); background: linear-gradient(135deg,#a98b58 0%,#343742 22%,#141a24 56%,#080c16 90%); clip-path: polygon(19% 0,81% 11%,100% 52%,68% 100%,0 63%); rotate: var(--r); animation: jr-debris-drift 10s ease-in-out infinite; animation-delay: calc(var(--i) * -.53s); transition: translate 3s cubic-bezier(.2,.75,.35,1), scale 2.5s ease; transition-delay: calc(var(--i) * .017s); }
.jr-stage--picture .jr-fragment { translate: calc(var(--dx) * var(--su)) calc(var(--dy) * var(--su)); scale: .6; animation: jr-debris-drift 10s ease-in-out calc(var(--i) * -.53s) infinite, jr-debris-clear 3s cubic-bezier(.2,.75,.35,1) calc(var(--i) * .017s) backwards; }
@keyframes jr-debris-clear { from { translate: 0 0; scale: 1; } }
.jr-dust i { position: absolute; left: calc(var(--x) * var(--su)); top: calc(var(--y) * var(--su)); width: calc(var(--s) * var(--su)); height: calc(var(--s) * var(--su)); border-radius: 50%; background: #f1d098; opacity: .5; box-shadow: 0 0 6px #efba6a55; animation: jr-dust-rise 9s ease-in-out infinite; animation-delay: calc(var(--i) * -.61s); }
@keyframes jr-debris-drift { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(calc(-.65 * var(--su))) rotate(15deg); } }
@keyframes jr-dust-rise { 0%,100% { transform: translate(0,0); opacity: .12; } 45% { opacity: .65; } 75% { transform: translate(calc(-1.4 * var(--su)),calc(-2.5 * var(--su))); opacity: .1; } }

/* Переход в том же пространстве: локальный световой проход через тоннель. */
.journey[data-transition="tunnel"] .pres-veil { background: radial-gradient(ellipse at 93% 45%,#fff0cfa8, #e6b26022 18%,transparent 58%); }
.journey[data-transition="tunnel"] .pres-veil__horizon { display: none; }
.journey[data-transition="tunnel"][data-phase="leaving"] .pres-veil { animation: jr-tunnel-veil-in 350ms ease-in both; }
.journey[data-transition="tunnel"][data-phase="entering"] .pres-veil { animation: jr-tunnel-veil-out 900ms ease-out both; }
.journey[data-transition="tunnel"] .stage--entering .jr-tunnel,
.journey[data-transition="tunnel"] .stage--entering .jr-boulder__rock { animation: none; }
@keyframes jr-tunnel-veil-in { from { opacity: 0; } to { opacity: .65; } }
@keyframes jr-tunnel-veil-out { from { opacity: .65; } to { opacity: 0; } }

/* Законченная композиция без разлёта и сканирования. */
.journey[data-reduced="true"] .jr-unlock { display: none; }
.journey[data-reduced="true"] .jr-route path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .jr-unlock { display: none; } }
@media (max-width: 760px) {
  .jr-boulder__label { font-size: calc(1.04 * var(--su)); }
  .jr-stage--picture .jr-copy__body { font-size: 14px; }
  .jr-stage--picture .jr-mottos { max-width: none; }
}

/* Ручной шаг ставит автопоказ на паузу. Прорисовка нового пути должна
   завершиться: остановленный в первом кадре dashoffset скрывал маршрут. */
.journey .jr-stage--picture[data-settled="true"] .jr-route .jr-route__line {
  animation: none !important;
  stroke-dashoffset: 0;
}

.journey .jr-stage--picture[data-settled="true"] .jr-unlock { display: none; }