/* Презентация «Чингиз Айтматов — Планета по имени Человек» */

:root {
  --night: #0a1324;
  --night-2: #101d36;
  --ink: #16233f;
  --gold: #e2b04a;
  --gold-soft: #f3d692;
  --gold-deep: #b9862b;
  --red: #c8202e;
  --snow: #f6f2ea;
  --mist: #c9d6e6;
  --lake: #2c86c4;
  --wolf: #7fb2ff;

  /* 1% ширины воображаемой сцены 16:9, вписанной в экран */
  --u: min(1vw, 1.7778vh);

  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  /* Почерк движения: входы тормозят (expo-out), выходы разгоняются (expo-in), фон дышит синусом */
  --expo: cubic-bezier(.16, 1, .3, 1);
  --expo-in: cubic-bezier(.7, 0, .84, 0);
  --expo-io: cubic-bezier(.87, 0, .13, 1);
  --sine: cubic-bezier(.37, 0, .63, 1);

  --serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --hand: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  color: var(--snow);
  overflow: hidden;
}

body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
}

body.idle { cursor: none; }

/* ---------- Колода и слайды ---------- */

#deck {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--night);
}

.slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  display: grid;
  place-items: center;
  background: var(--night);
  contain: layout paint;
}

.slide.is-active { visibility: visible; opacity: 1; z-index: 2; }
.slide.is-leaving { visibility: visible; opacity: 1; z-index: 1; }

/* Переходы: наплывание, перелистывание, рассвет */
.slide.in-fade  { animation: in-fade 1.15s var(--ease) both; }
.slide.out-fade { animation: out-fade .95s var(--ease-io) both; }
.slide.in-back  { animation: in-fade .6s var(--ease) both; }
.slide.out-back { animation: out-fade .55s var(--ease-io) both; }
.slide.in-page  { animation: in-page 1.2s var(--ease) both; transform-origin: 0 50%; }
.slide.out-page { animation: out-page 1s var(--ease-io) both; transform-origin: 100% 50%; }
.slide.in-dawn  { animation: in-dawn 2.2s var(--ease) both; }
.slide.out-dawn { animation: out-fade 1.4s var(--ease-io) both; }
.slide.in-cover { animation: in-cover 1s var(--ease) both; }

@keyframes in-fade  { from { opacity: 0; transform: scale(1.045); } to { opacity: 1; transform: none; } }
@keyframes out-fade { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.97); } }
@keyframes in-page  { from { opacity: 0; transform: perspective(1600px) rotateY(-14deg) translateX(5%); } to { opacity: 1; transform: none; } }
@keyframes out-page { from { opacity: 1; transform: none; } to { opacity: 0; transform: perspective(1600px) rotateY(10deg) translateX(-4%); } }
@keyframes in-dawn  { 0% { opacity: 0; filter: brightness(.15) saturate(.4); } 40% { opacity: 1; } 100% { opacity: 1; filter: none; } }
@keyframes in-cover { from { transform: scale(1.06); } to { transform: none; } }

/* Затемнение / вспышка поверх всего */
#veil {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  background: #000;
  transition: opacity .7s var(--ease-io);
}
#veil.light { background: radial-gradient(circle at 50% 50%, #fff 0%, #fff6dc 45%, #f3d692 100%); transition-duration: .4s; }
#veil.on { opacity: 1; }
#veil.slow { transition-duration: 1.5s; }
#veil.blackout { opacity: 1; background: #000; transition-duration: .5s; }

/* Орнаментный занавес для заставок блоков */
#curtain {
  position: fixed;
  inset: 0;
  z-index: 41;
  pointer-events: none;
  visibility: hidden;
  display: flex;
}
#curtain .panel {
  position: relative;
  flex: 1;
  background:
    radial-gradient(120% 90% at 50% 50%, #1a2b4d 0%, #0a1324 70%, #050a14 100%);
}
#curtain .panel::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: calc(var(--u) * 2.2);
  background: var(--ornament-v) repeat-y center / 100% auto, linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-deep));
}
#curtain .panel.l::after { right: 0; }
#curtain .panel.r::after { left: 0; }
#curtain .seal {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  translate: -50% -50%;
  opacity: 0;
}
#curtain.cover { visibility: visible; }
#curtain.cover .panel.l { animation: cur-l-in .7s var(--ease-io) both; }
#curtain.cover .panel.r { animation: cur-r-in .7s var(--ease-io) both; }
#curtain.cover .seal { animation: seal-in .7s .35s var(--ease) both; }
#curtain.uncover { visibility: visible; }
#curtain.uncover .panel.l { animation: cur-l-out .9s var(--ease-io) both; }
#curtain.uncover .panel.r { animation: cur-r-out .9s var(--ease-io) both; }
#curtain.uncover .seal { animation: seal-out .4s var(--ease-io) both; }

@keyframes cur-l-in  { from { transform: translateX(-102%); } to { transform: none; } }
@keyframes cur-r-in  { from { transform: translateX(102%); } to { transform: none; } }
@keyframes cur-l-out { from { transform: none; } to { transform: translateX(-102%); } }
@keyframes cur-r-out { from { transform: none; } to { transform: translateX(102%); } }
@keyframes seal-in  { from { opacity: 0; transform: scale(.6) rotate(-40deg); } to { opacity: 1; transform: none; } }
@keyframes seal-out { from { opacity: 1; } to { opacity: 0; transform: scale(1.3); } }

/* ---------- Фоны ---------- */

.bg, .bg-img, .bg-svg, .bg-canvas, .shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bg-img {
  inset: -4%;
  background-size: cover;
  background-position: var(--pos, center);
  background-repeat: no-repeat;
}
.slide.is-active .bg-img, .slide.is-leaving .bg-img {
  animation: kenburns var(--kb, 30s) ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.1) translate(var(--kx, -1.5%), var(--ky, -1%)); }
}

.bg-svg svg, .bg-canvas { width: 100%; height: 100%; display: block; }

.shade.left   { background: linear-gradient(90deg, rgba(6, 12, 26, .92) 0%, rgba(6, 12, 26, .7) 38%, rgba(6, 12, 26, .1) 70%, rgba(6, 12, 26, 0) 100%); }
.shade.right  { background: linear-gradient(270deg, rgba(6, 12, 26, .92) 0%, rgba(6, 12, 26, .7) 38%, rgba(6, 12, 26, .1) 70%, rgba(6, 12, 26, 0) 100%); }
.shade.bottom { background: linear-gradient(0deg, rgba(6, 12, 26, .95) 0%, rgba(6, 12, 26, .78) 42%, rgba(6, 12, 26, 0) 78%); }
.shade.title  { background: linear-gradient(90deg, rgba(6, 12, 26, .35) 0%, rgba(6, 12, 26, .62) 42%, rgba(6, 12, 26, .82) 100%); }
.shade.center { background: radial-gradient(75% 70% at 50% 50%, rgba(6, 12, 26, .55) 0%, rgba(6, 12, 26, .82) 70%, rgba(6, 12, 26, .95) 100%); }
.shade.dark   { background: rgba(6, 12, 26, .62); }
.shade.vignette { background: radial-gradient(90% 85% at 50% 45%, transparent 55%, rgba(0, 0, 0, .6) 100%); }

/* ---------- Анимация появления элементов ---------- */

.slide.is-active .rv {
  animation: rv-up 1.1s var(--expo) both;
  animation-delay: calc(var(--d0, .35s) + var(--i, 0) * var(--step, .12s));
}
.slide.is-active .rv.zoom { animation-name: rv-zoom; animation-duration: 1.4s; }
.slide.is-active .rv.fade { animation-name: rv-fade; animation-duration: 1.8s; }
.slide.is-active .rv.left { animation-name: rv-left; }
.slide.is-active .kicker.rv { animation-name: track-in; animation-duration: 1.5s; }
.slide.is-active .lead.rv, .slide.is-active .body.rv { animation-name: blur-in; animation-duration: 1.4s; }

/* Уход: содержимое коротко поднимается и гаснет раньше, чем сменится сцена */
.slide.is-leaving .rv {
  animation: rv-exit .5s var(--expo-in) both;
  animation-delay: calc(var(--i, 0) * .03s);
}
@keyframes rv-exit { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(calc(var(--u) * -2)); } }
@keyframes track-in {
  from { opacity: 0; letter-spacing: .8em; filter: blur(4px); }
  to   { opacity: 1; letter-spacing: .32em; filter: none; }
}
@keyframes blur-in {
  from { opacity: 0; filter: blur(12px); transform: translateY(calc(var(--u) * 1.2)); }
  to   { opacity: 1; filter: none; transform: none; }
}

@keyframes rv-up   { from { opacity: 0; transform: translateY(calc(var(--u) * 3)); } to { opacity: 1; transform: none; } }
@keyframes rv-zoom { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes rv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rv-left { from { opacity: 0; transform: translateX(calc(var(--u) * -4)); } to { opacity: 1; transform: none; } }

.frag {
  opacity: 0;
  transform: translateY(calc(var(--u) * 1.6));
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
.frag.shown { opacity: 1; transform: none; }

/* ---------- Типографика ---------- */

.content {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: calc(var(--u) * 6) calc(var(--u) * 7);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.content.center { align-items: center; text-align: center; }
.content.left   { align-items: flex-start; max-width: calc(var(--u) * 62); margin-right: auto; }
.content.right  { align-items: flex-end; text-align: right; }

.kicker {
  font-family: var(--sans);
  font-weight: 600;
  font-size: calc(var(--u) * 1.35);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 calc(var(--u) * 1.6);
}

.h-xl, .h-l, .h-m {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.02;
  margin: 0;
  letter-spacing: .005em;
  text-wrap: balance;
}
.h-xl { font-size: calc(var(--u) * 8.4); }
.h-l  { font-size: calc(var(--u) * 6); }
.h-m  { font-size: calc(var(--u) * 4.4); line-height: 1.1; }

.lead {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--u) * 3);
  line-height: 1.3;
  margin: calc(var(--u) * 2) 0 0;
  color: #f4ead6;
  text-wrap: balance;
}
.body {
  font-size: calc(var(--u) * 1.9);
  line-height: 1.55;
  color: #dfe6f1;
  margin: calc(var(--u) * 1.4) 0 0;
  max-width: calc(var(--u) * 58);
}
.gold { color: var(--gold); }
/* Золотой текст с бегущим бликом. Тень — через filter: text-shadow затемнил бы сам градиент */
.gold-grad {
  background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold) 28%, #fff3cf 42%, var(--gold) 56%, var(--gold-deep) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .5));
  animation: gold-sheen 7s ease-in-out infinite;
}
@keyframes gold-sheen { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }
.shadow-text { text-shadow: 0 2px 24px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .6); }

.ornament {
  display: block;
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 2.2);
  margin: calc(var(--u) * 2.2) auto;
  color: var(--gold);
}
.content.left .ornament { margin-left: 0; }

/* Список-пункты с ромбиком */
.points {
  list-style: none;
  padding: 0;
  margin: calc(var(--u) * 2.6) 0 0;
  display: grid;
  gap: calc(var(--u) * 1.3);
}
.points li {
  position: relative;
  padding-left: calc(var(--u) * 3);
  font-size: calc(var(--u) * 2.2);
  line-height: 1.35;
}
.points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: calc(var(--u) * 1);
  height: calc(var(--u) * 1);
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 calc(var(--u) * 1.2) rgba(226, 176, 74, .6);
}

/* ---------- Заставка «Начать» ---------- */

.s-start { background: radial-gradient(120% 100% at 50% 0%, #1b2e55 0%, #0a1324 55%, #050a14 100%); }
.s-start .sun-wrap {
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  margin-bottom: calc(var(--u) * 1.4);
  animation: spin 120s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-row { display: flex; gap: calc(var(--u) * 1.6); margin-top: calc(var(--u) * 2.4); flex-wrap: wrap; justify-content: center; }
.btn {
  appearance: none;
  border: 1px solid rgba(226, 176, 74, .55);
  background: rgba(226, 176, 74, .08);
  color: var(--snow);
  font: 600 calc(var(--u) * 1.7)/1 var(--sans);
  letter-spacing: .06em;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  border-radius: 999px;
  cursor: pointer;
  transition: background .3s, transform .3s var(--ease), box-shadow .3s;
}
.btn:hover, .btn:focus-visible { background: rgba(226, 176, 74, .2); transform: translateY(-2px); outline: none; box-shadow: 0 0 0 3px rgba(226, 176, 74, .25); }
.btn.primary {
  background: linear-gradient(180deg, #f1cf7c, var(--gold) 60%, var(--gold-deep));
  color: #1a1206;
  border-color: transparent;
  box-shadow: 0 10px 40px rgba(226, 176, 74, .35);
}
.btn.primary:hover { background: linear-gradient(180deg, #f7dc96, #ecbd5a 60%, #c8952f); }

.keys {
  margin-top: calc(var(--u) * 2);
  display: flex;
  gap: calc(var(--u) * 2.6);
  flex-wrap: wrap;
  justify-content: center;
  font-size: calc(var(--u) * 1.3);
  color: #9fb0c9;
}
.keys kbd {
  display: inline-block;
  min-width: 2.1em;
  padding: .25em .5em;
  margin-right: .45em;
  border: 1px solid rgba(255, 255, 255, .25);
  border-bottom-width: 2px;
  border-radius: 6px;
  font: 600 1em/1 var(--sans);
  color: var(--snow);
  text-align: center;
}

.dl {
  margin-top: calc(var(--u) * 1.6);
  font-size: calc(var(--u) * 1.25);
  color: var(--gold-soft);
  text-decoration: none;
  border-bottom: 1px dashed rgba(243, 214, 146, .5);
  padding-bottom: 2px;
}
.dl:hover { color: #fff; border-bottom-color: #fff; }
.offline .dl { display: none; }

/* ---------- Титул ---------- */

.s-title .content {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 6);
}
.portrait {
  position: relative;
  flex: none;
  width: calc(var(--u) * 30);
  aspect-ratio: 3 / 4;
  border-radius: 50% 50% calc(var(--u) * 1) calc(var(--u) * 1) / 36% 36% calc(var(--u) * 1) calc(var(--u) * 1);
  background-color: #1b2a48;
  background-position: 38% 18%;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow:
    0 0 0 calc(var(--u) * .35) var(--gold),
    0 0 0 calc(var(--u) * .8) rgba(10, 19, 36, .9),
    0 0 0 calc(var(--u) * 1) rgba(226, 176, 74, .55),
    0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(0, 0, 0, .6);
  filter: sepia(.12) contrast(1.04);
}
.portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 60%, rgba(10, 19, 36, .35));
}
.s-title .title-text { max-width: calc(var(--u) * 52); }
.s-title .dates {
  font-family: var(--serif);
  font-size: calc(var(--u) * 2.6);
  color: var(--gold-soft);
  letter-spacing: .08em;
  margin-top: calc(var(--u) * 1.4);
}
.s-title .subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(var(--u) * 4.2);
  color: #fff4dd;
  margin-top: calc(var(--u) * 1.2);
}

/* ---------- 170 языков ---------- */

.names {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.names span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  font-family: var(--serif);
  font-size: calc(var(--u) * var(--s, 2));
  color: rgba(214, 226, 245, var(--a, .5));
  white-space: nowrap;
  animation: drift var(--t, 14s) ease-in-out infinite alternate;
}
.slide:not(.is-active) .names span { animation-play-state: paused; }
@keyframes drift { from { transform: translate(-1.2%, -6%); } to { transform: translate(1.2%, 6%); } }

.counter {
  font-family: var(--serif);
  font-weight: 700;
  font-size: calc(var(--u) * 16);
  line-height: .9;
}
.cities {
  display: flex;
  gap: calc(var(--u) * 2.4);
  margin-top: calc(var(--u) * 3);
  font-size: calc(var(--u) * 1.6);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mist);
  flex-wrap: wrap;
  justify-content: center;
}
.cities span::after { content: '·'; margin-left: calc(var(--u) * 2.4); color: var(--gold); }
.cities span:last-child::after { content: none; }

/* ---------- Стихи ---------- */

.poem {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--u) * 3.3);
  line-height: 1.42;
  text-align: center;
  color: #fbf3e2;
}
.poem .stanza { margin: 0 0 calc(var(--u) * 1.4); }
.poem .stanza:last-child { margin-bottom: 0; }

/* ---------- Заставки блоков ---------- */

.block-card { text-align: center; }
.block-card .num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: calc(var(--u) * 5);
  letter-spacing: .3em;
  margin-right: -.3em;
  color: var(--gold);
}
.block-card .h-xl { font-size: calc(var(--u) * 10); }
.block-card .lead { color: var(--mist); }

/* ---------- «14» ---------- */

.s-war .content { flex-direction: row; align-items: center; gap: calc(var(--u) * 5); justify-content: center; }
.big-num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: calc(var(--u) * 34);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: calc(var(--u) * .25) var(--gold);
  text-shadow: 0 0 calc(var(--u) * 6) rgba(226, 176, 74, .25);
}
.s-war .war-text { max-width: calc(var(--u) * 50); }

/* ---------- Книжная страница ---------- */

.page {
  position: relative;
  width: calc(var(--u) * 70);
  padding: calc(var(--u) * 6) calc(var(--u) * 7) calc(var(--u) * 5);
  color: #3a2a17;
  background:
    radial-gradient(120% 90% at 50% 40%, #f7ecd2 0%, #ecdbb5 65%, #d8bf8e 100%);
  box-shadow:
    0 calc(var(--u) * 3) calc(var(--u) * 9) rgba(0, 0, 0, .65),
    inset 0 0 calc(var(--u) * 7) rgba(120, 80, 30, .35);
  border-radius: calc(var(--u) * .5);
  transform: rotate(-1.2deg);
}
.page::before {
  content: '';
  position: absolute;
  inset: calc(var(--u) * 1.6);
  border: 1px solid rgba(120, 80, 30, .35);
  pointer-events: none;
}
.page .quote {
  font-family: var(--hand);
  font-size: calc(var(--u) * 3.6);
  line-height: 1.32;
  margin: 0;
}
.page .src {
  margin-top: calc(var(--u) * 2.4);
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(var(--u) * 2);
  text-align: right;
  color: #6b4e2b;
}

/* ---------- Сцены «Белый пароход», «Плаха», «Манкурт» ---------- */

.ship-move { animation: sail 70s linear infinite; }
.slide:not(.is-active):not(.is-leaving) .ship-move,
.slide:not(.is-active):not(.is-leaving) .bob,
.slide:not(.is-active):not(.is-leaving) .sway,
.slide:not(.is-active):not(.is-leaving) .smoke circle,
.slide:not(.is-active):not(.is-leaving) .shimmer,
.slide:not(.is-active):not(.is-leaving) .twinkle,
.slide:not(.is-active):not(.is-leaving) .bird-fly { animation-play-state: paused; }
@keyframes sail { from { transform: translateX(-380px); } to { transform: translateX(1700px); } }
.bob { animation: bob 5s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(4px) rotate(.4deg); } }
.smoke circle { animation: smoke 6s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes smoke { from { transform: translate(0, 0) scale(.6); opacity: .6; } to { transform: translate(-60px, -50px) scale(2.2); opacity: 0; } }
.shimmer { animation: shimmer 4s ease-in-out infinite alternate; }
@keyframes shimmer { from { opacity: .25; transform: translateX(-8px); } to { opacity: .7; transform: translateX(8px); } }
.sway { animation: sway 7s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.6deg); } }

.const line { stroke: rgba(205, 225, 255, .55); stroke-width: 1.4; stroke-linecap: round; }
.const circle { fill: #fff; }
.const .glow { filter: drop-shadow(0 0 6px rgba(190, 220, 255, .9)); }
.twinkle { animation: twinkle 3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes twinkle { from { opacity: .45; transform: scale(.8); } to { opacity: 1; transform: scale(1.15); } }
.slide.is-active .const line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s var(--ease) forwards; animation-delay: calc(1s + var(--k, 0) * .06s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.wolf-const line { stroke: rgba(140, 185, 255, .7); }
.wolf-const circle { fill: #d8e8ff; }

.bird-fly { animation: fly 22s linear infinite; }
@keyframes fly {
  0% { transform: translate(-200px, 360px); }
  100% { transform: translate(1800px, 120px); }
}
.wing { animation: flap 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 60%; }
@keyframes flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-.55); } }

.mankurt-word {
  font-family: var(--serif);
  font-weight: 700;
  font-size: calc(var(--u) * 12);
  letter-spacing: .14em;
  margin-right: -.14em;
  line-height: 1;
}
.mankurt-word span {
  display: inline-block;
  opacity: 0;
}
.slide.is-active .mankurt-word span, .slide.is-leaving .mankurt-word span {
  animation: letter 2.4s var(--ease) both;
  animation-delay: calc(1.6s + var(--k) * .22s);
}
@keyframes letter {
  0% { opacity: 0; filter: blur(14px); transform: scale(1.5); }
  100% { opacity: 1; filter: blur(0); transform: none; }
}

.forget {
  display: flex;
  gap: calc(var(--u) * 3);
  margin-top: calc(var(--u) * 3.5);
  font-family: var(--serif);
  font-size: calc(var(--u) * 3.2);
  font-style: italic;
  flex-wrap: wrap;
  justify-content: center;
}
.forget .frag.shown { animation: forget 5s 1.4s ease-in forwards; }
@keyframes forget { to { filter: blur(calc(var(--u) * .35)); opacity: .28; } }

/* ---------- Корни ---------- */

.tree-svg .branches path { stroke: rgba(170, 190, 220, .32); fill: none; stroke-linecap: round; }
.tree-svg .roots path {
  stroke: var(--gold);
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 5px rgba(226, 176, 74, .75));
}
.slide.is-active .tree-svg .roots path { animation: draw 1.6s var(--ease) forwards; animation-delay: calc(1.2s + var(--dl, 0s)); }

/* ---------- Лента времени ---------- */

.s-citizen .content { justify-content: flex-start; padding-top: calc(var(--u) * 5); }
.citizen-head { display: flex; align-items: center; gap: calc(var(--u) * 4); width: 100%; }
.photo { flex: none; margin: 0; }
.photo-img {
  width: calc(var(--u) * 24);
  aspect-ratio: 2227 / 1600;
  border-radius: calc(var(--u) * .6);
  background-color: #1b2a48;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 calc(var(--u) * .25) var(--gold), 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0, 0, 0, .55);
  transform: rotate(-1.5deg);
}
.photo figcaption {
  margin-top: calc(var(--u) * 1.2);
  font-size: calc(var(--u) * 1.15);
  color: #aab8cd;
  max-width: calc(var(--u) * 24);
}
.timeline {
  position: relative;
  width: 100%;
  margin-top: calc(var(--u) * 15);
  display: grid;
  grid-template-columns: repeat(9, 1fr);
}
.timeline::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 6%, var(--gold) 94%, transparent);
  transform-origin: left;
}
.slide.is-active .timeline::before { animation: grow-x 2.6s .4s var(--ease) both; }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: none; } }
.tl-item { position: relative; padding: 0 calc(var(--u) * .6); text-align: center; }
.tl-item::before {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: calc(var(--u) * 1.3);
  height: calc(var(--u) * 1.3);
  translate: -50% -50%;
  rotate: 45deg;
  background: var(--night);
  border: 2px solid var(--gold);
}
.tl-item .y { font-family: var(--serif); font-weight: 700; font-size: calc(var(--u) * 2.6); color: var(--gold-soft); margin-top: calc(var(--u) * 2); }
.tl-item .t { font-size: calc(var(--u) * 1.32); line-height: 1.35; color: #dbe3ef; margin-top: calc(var(--u) * .5); }
/* «верхние» подписи поднимаем через top: transform занят анимацией появления */
.tl-item.up { top: calc(var(--u) * -10.5); }
.tl-item.up .y { margin-top: 0; }
.tl-item.up::before { top: calc(var(--u) * 10.5); }

/* ---------- Книжная полка ---------- */

.shelf {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(var(--u) * .5);
  height: calc(var(--u) * 30);
  margin-top: calc(var(--u) * 4);
  padding: 0 calc(var(--u) * 3);
}
.shelf::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: calc(var(--u) * -1.6);
  height: calc(var(--u) * 1.6);
  background: linear-gradient(180deg, #7a4e26, #4d2f15);
  border-radius: 3px;
  box-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 3) rgba(0, 0, 0, .6);
}
.spine {
  position: relative;
  width: calc(var(--u) * var(--w, 4.2));
  height: calc(var(--u) * var(--h, 26));
  background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(255, 255, 255, .08) 30%, rgba(0, 0, 0, .1) 70%, rgba(0, 0, 0, .4)), var(--c, #7b2430);
  border-radius: 3px 3px 2px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.spine::before, .spine::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%;
  height: calc(var(--u) * .35);
  background: var(--gold);
  opacity: .85;
}
.spine::before { top: 7%; }
.spine::after { bottom: 7%; }
.spine b {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(var(--u) * 1.55);
  color: #f6e3b4;
  white-space: nowrap;
  letter-spacing: .02em;
}
.slide.is-active .spine { animation: book-up .9s var(--ease) both; animation-delay: calc(.5s + var(--k) * .09s); }
@keyframes book-up { from { opacity: 0; transform: translateY(calc(var(--u) * -6)); } to { opacity: 1; transform: none; } }

/* ---------- Главная цитата ---------- */

.s-quote { background: radial-gradient(90% 80% at 50% 45%, #2a3554 0%, #0f1a31 55%, #070d1a 100%); }
.big-quote {
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(var(--u) * 6.2);
  line-height: 1.12;
  text-align: center;
  max-width: calc(var(--u) * 86);
  margin: 0;
  text-wrap: balance;
}
.big-quote .w { display: inline-block; }
.slide.is-active .big-quote .w { animation: rv-word 1.2s var(--ease) both; animation-delay: calc(.6s + var(--k) * .16s); }
@keyframes rv-word { from { opacity: 0; filter: blur(8px); transform: translateY(calc(var(--u) * 1.5)); } to { opacity: 1; filter: none; transform: none; } }
.big-quote .hl {
  background: linear-gradient(180deg, #fff6d8, var(--gold) 60%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 calc(var(--u) * 2) rgba(226, 176, 74, .45));
}
.sign {
  margin-top: calc(var(--u) * 3);
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(var(--u) * 2.6);
  color: var(--gold-soft);
}

/* ---------- Финал ---------- */

.thanks {
  font-family: var(--serif);
  font-weight: 700;
  font-size: calc(var(--u) * 8.6);
  line-height: 1;
  margin-top: calc(var(--u) * 3);
}
.s-finale .lead { max-width: calc(var(--u) * 80); }

/* ---------- Панель управления ---------- */

#progress {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 30;
  background: rgba(255, 255, 255, .06);
  opacity: .8;
}
#progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transition: width .8s var(--ease);
}

#hud {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 50;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(8, 14, 28, .78);
  border: 1px solid rgba(226, 176, 74, .28);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  backdrop-filter: blur(8px);
  transition: opacity .4s, transform .4s var(--ease);
}
body.idle #hud, body.on-start #hud { opacity: 0; transform: translateY(12px); pointer-events: none; }
#hud button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--snow);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s;
}
#hud button:hover, #hud button:focus-visible { background: rgba(226, 176, 74, .18); outline: none; }
#hud button.off { color: #6c7a90; }
#hud button svg { width: 20px; height: 20px; }
#hud .count {
  min-width: 66px;
  text-align: center;
  font: 600 14px/1 var(--sans);
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
}
#hud .sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .14); margin: 0 4px; }

#toast {
  position: fixed;
  left: 50%;
  top: 24px;
  z-index: 60;
  translate: -50% 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(8, 14, 28, .88);
  border: 1px solid rgba(226, 176, 74, .35);
  font: 600 15px/1.2 var(--sans);
  color: var(--snow);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .35s, transform .35s var(--ease);
  pointer-events: none;
}
#toast.show { opacity: 1; transform: none; }

/* ---------- Узкие экраны (телефон) ---------- */

@media (max-aspect-ratio: 1/1) {
  :root { --u: min(1.9vw, 1.1vh); }
  .content { padding: calc(var(--u) * 8) calc(var(--u) * 5); }
  .s-title .content, .s-war .content { flex-direction: column; text-align: center; gap: calc(var(--u) * 3); }
  .s-title .content .title-text { text-align: center; }
  .portrait { width: calc(var(--u) * 34); }
  .content.left { max-width: none; }
  .timeline { grid-template-columns: repeat(3, 1fr); row-gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 6); }
  .timeline::before { display: none; }
  .tl-item.up { top: 0; }
  .tl-item.up::before { top: 0; }
  #hud { bottom: 10px; }
}

/* ================= Живые анимации ================= */

/* Слои гор медленно расходятся — параллакс */
.slide.is-active .ml, .slide.is-leaving .ml {
  animation: ml-drift calc(32s - var(--ml) * 4s) ease-in-out infinite alternate;
}
@keyframes ml-drift {
  from { transform: translateX(calc(-6px - var(--ml) * 11px)); }
  to   { transform: translateX(calc(6px + var(--ml) * 11px)); }
}

/* Медленный «наезд камеры» на нарисованные сцены */
.slide.is-active .bg-svg.kb, .slide.is-leaving .bg-svg.kb { animation: kenburns 40s ease-in-out infinite alternate; }

/* Облака */
.clouds { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.clouds i {
  position: absolute;
  left: 0;
  top: var(--t);
  width: calc(var(--u) * var(--w));
  height: calc(var(--u) * var(--w) * .34);
  background:
    radial-gradient(50% 50% at 50% 55%, rgba(var(--cloud), var(--o)) 0%, rgba(var(--cloud), calc(var(--o) * .45)) 45%, transparent 72%),
    radial-gradient(32% 46% at 27% 62%, rgba(var(--cloud), var(--o)) 0%, transparent 72%),
    radial-gradient(30% 44% at 75% 60%, rgba(var(--cloud), calc(var(--o) * .9)) 0%, transparent 72%);
  filter: blur(calc(var(--u) * .5));
  will-change: transform;
  animation: cloud var(--dur) linear infinite;
  animation-delay: calc(var(--dur) * var(--ph) * -1);
}
@keyframes cloud { from { transform: translateX(-45vw); } to { transform: translateX(110vw); } }

/* Беркут и стаи */
.eflap { transform-box: fill-box; transform-origin: center; animation: eflap 9s ease-in-out infinite; }
@keyframes eflap { 0%, 80%, 100% { transform: scaleX(1); } 84% { transform: scaleX(.72); } 88% { transform: scaleX(1); } 92% { transform: scaleX(.74); } }
.flock-move { animation: flock var(--dur) linear infinite; animation-delay: var(--delay); }
@keyframes flock { from { transform: translate(-260px, 30px); } to { transform: translate(1850px, -50px); } }

/* Орнамент прорисовывается мотив за мотивом */
.slide.is-active .ornament path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.4s var(--ease) forwards;
  animation-delay: calc(.5s + var(--k) * .14s);
}

/* Заголовки выезжают по словам из-под маски (.sw — окно, .swi — слово) */
.sw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: .02em .08em .2em;
  margin: -.02em -.08em -.2em;
}
.swi { display: inline-block; }
.slide.is-active .swi { animation: mask-up 1.15s var(--expo) both; animation-delay: var(--wd); }
.slide.is-active .swi.gold-grad {
  animation: mask-up 1.15s var(--expo) both, gold-sheen 7s ease-in-out infinite;
  animation-delay: var(--wd), calc(var(--wd) + 1.2s);
}
.slide.is-leaving .swi { animation: mask-out .55s var(--expo-in) both; animation-delay: calc(var(--wk, 0) * .025s); }
@keyframes mask-up { from { transform: translateY(112%) rotate(5deg); } to { transform: none; } }
@keyframes mask-out { from { transform: none; } to { transform: translateY(-112%); } }
/* тень в маске обрезалась бы — у слов-масок тень короче */
.shadow-text .swi { text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }
.shadow-text .swi.gold-grad { text-shadow: none; }

/* Сияние вокруг портрета и блик на фото */
.portrait-wrap { position: relative; flex: none; }
.halo {
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(226, 176, 74, .42), rgba(226, 176, 74, .1) 60%, transparent 78%);
  animation: halo 5s ease-in-out infinite alternate;
}
@keyframes halo { from { opacity: .45; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
.portrait::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 245, 220, .22) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  animation: sheen 8s 3s ease-in-out infinite;
}
@keyframes sheen { 0% { background-position: 130% 0; } 35%, 100% { background-position: -130% 0; } }

/* Солнце-тюндюк: на заставке пульсирует, в приветствии поднимается из-за гор */
.s-start .sun-wrap { position: relative; }
.s-start .sun-wrap::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(226, 176, 74, .5), transparent);
  animation: halo 3.5s ease-in-out infinite alternate;
}
.sun-rise { opacity: .6; }
.slide.is-active .sun-rise { animation: sunrise 10s var(--ease) both; }
.sun-rise svg { animation: spin 90s linear infinite; }
@keyframes sunrise { from { transform: translateY(35%); opacity: .15; } to { transform: none; opacity: .62; } }

/* Круги вокруг счётчика — как волны от брошенного камня */
.counter-wrap { position: relative; display: inline-block; }
.rings { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 26); height: calc(var(--u) * 26); translate: -50% -50%; pointer-events: none; }
.rings i { position: absolute; inset: 0; border: 2px solid rgba(226, 176, 74, .55); border-radius: 50%; opacity: 0; animation: ring 4.5s ease-out infinite; }
.rings i:nth-child(2) { animation-delay: 1.5s; }
.rings i:nth-child(3) { animation-delay: 3s; }
@keyframes ring { 0% { transform: scale(.3); opacity: .85; } 100% { transform: scale(1.7); opacity: 0; } }

/* Лучи света за главной цитатой */
.rays {
  position: absolute;
  left: 50%; top: 50%;
  width: 170vmax; height: 170vmax;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 160, .1) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 52%);
  mask: radial-gradient(circle, #000 0%, transparent 52%);
  animation: spin 150s linear infinite;
  pointer-events: none;
}

/* Огонёк бежит по ленте жизни */
.timeline::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8);
  margin: calc(var(--u) * -.9) 0 0 calc(var(--u) * -.9);
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d8 0%, var(--gold) 45%, transparent 72%);
  opacity: 0;
}
.slide.is-active .timeline::after { animation: travel 7s 3.2s linear infinite; }
@keyframes travel { 0% { left: 0; opacity: 0; } 6%, 94% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* Книги «дышат» на полке */
.slide.is-active .spine {
  animation: book-up .9s var(--ease) both, book-float 4.5s ease-in-out infinite alternate;
  animation-delay: calc(.5s + var(--k) * .09s), calc(2s + var(--k) * .37s);
}
@keyframes book-float { from { transform: none; } to { transform: translateY(calc(var(--u) * -.8)); } }

/* Туман над степью, качание дерева, дыхание созвездия */
.fog {
  position: absolute;
  left: -20%; right: -20%; bottom: 0;
  height: 38%;
  background:
    radial-gradient(60% 60% at 30% 100%, rgba(140, 160, 200, .2), transparent 70%),
    radial-gradient(50% 60% at 75% 100%, rgba(140, 160, 200, .15), transparent 70%);
  animation: fog 22s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes fog { from { transform: translateX(-7%); } to { transform: translateX(7%); } }
.slide.is-active .sway-tree { animation: tree-sway 6s ease-in-out infinite alternate; transform-box: view-box; transform-origin: 800px 520px; }
@keyframes tree-sway { from { transform: rotate(-.9deg); } to { transform: rotate(.9deg); } }
.deer-wrap { animation: breathe 5s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: .7; } to { opacity: 1; } }

/* ================= Моушн-дизайн: переходы, камера, слои ================= */

/* Переходы между сценами */
.slide.in-push  { animation: in-push 1.2s var(--expo) both; }
.slide.out-push { animation: out-push 1s var(--expo-io) both; }
.slide.in-push .content { animation: push-content 1.35s var(--expo) both, cam-drift 16s var(--sine) 1.35s infinite alternate; }
@keyframes in-push  { from { opacity: 0; transform: translateX(16%); } to { opacity: 1; transform: none; } }
@keyframes out-push { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-12%); } }
@keyframes push-content { from { transform: translateX(9%); } to { transform: none; } }

.slide.in-zoom  { animation: in-zoom 1.25s var(--expo) .12s both; }
.slide.out-zoom { animation: out-zoom .9s var(--expo-in) both; }
@keyframes in-zoom  { from { opacity: 0; transform: scale(.84); } to { opacity: 1; transform: none; } }
@keyframes out-zoom { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(1.35); } }

/* Диафрагма: новая сцена раскрывается кругом из точки фокуса (солнце, луна) */
.slide.in-iris  { animation: in-iris 1.25s cubic-bezier(.55, 0, .25, 1) both; }
.slide.out-iris { animation: out-iris 1.25s cubic-bezier(.55, 0, .25, 1) both; }
@keyframes in-iris {
  from { clip-path: circle(0% at var(--fx, 50%) var(--fy, 50%)); }
  to   { clip-path: circle(150% at var(--fx, 50%) var(--fy, 50%)); }
}
@keyframes out-iris { from { transform: none; opacity: 1; } to { transform: scale(1.08); opacity: .35; } }

/* Диагональная шторка с золотой кромкой */
.slide.in-wipe  { animation: in-wipe 1.15s cubic-bezier(.77, 0, .18, 1) both; }
.slide.out-wipe { animation: out-wipe 1.15s cubic-bezier(.77, 0, .18, 1) both; }
@keyframes in-wipe {
  from { clip-path: polygon(0 0, 0 0, -22% 100%, 0 100%); }
  to   { clip-path: polygon(0 0, 122% 0, 100% 100%, 0 100%); }
}
@keyframes out-wipe { from { transform: none; } to { transform: translateX(-6%); opacity: .5; } }
#edge {
  position: fixed;
  top: -10%; left: 0;
  width: calc(var(--u) * 5);
  height: 120%;
  z-index: 39;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(243, 214, 146, .15) 30%, rgba(255, 236, 190, .95) 50%, rgba(243, 214, 146, .15) 70%, transparent);
  transform: translateX(-12vw) skewX(-19deg);
}
#edge.run { animation: edge-sweep 1.15s cubic-bezier(.77, 0, .18, 1) both; }
@keyframes edge-sweep {
  0% { opacity: 1; transform: translateX(-12vw) skewX(-19deg); }
  92% { opacity: 1; }
  100% { opacity: 0; transform: translateX(112vw) skewX(-19deg); }
}

/* Камера: содержимое едва заметно плывёт, фон медленно наезжает */
.slide.is-active .content, .slide.is-leaving .content { animation: cam-drift 16s var(--sine) infinite alternate; }
@keyframes cam-drift { from { transform: none; } to { transform: translate3d(-.35%, -.6%, 0); } }

/* Плёночное зерно поверх всего — убирает «цифровую» стерильность */
#grain {
  position: fixed;
  inset: -50%;
  z-index: 36;
  pointer-events: none;
  opacity: .055;
  background-size: 180px 180px;
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-6%, 4%); } 33% { transform: translate(5%, -7%); }
  50% { transform: translate(-3%, 9%); } 67% { transform: translate(8%, 2%); } 83% { transform: translate(-7%, -4%); }
  100% { transform: translate(0, 0); }
}

/* Тёплое световое пятно, медленно блуждающее по кадру */
.leak {
  position: absolute;
  left: var(--lx); top: var(--ly);
  width: 70vmax; height: 70vmax;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 176, 96, .26), rgba(255, 140, 70, .08) 55%, transparent);
  pointer-events: none;
  animation: leak 20s var(--sine) infinite alternate;
}
@keyframes leak { from { transform: translate(-6%, 3%) scale(.92); opacity: .7; } to { transform: translate(7%, -4%) scale(1.08); opacity: 1; } }
.rays-corner {
  left: 85%; top: -5%;
  width: 120vmax; height: 120vmax;
  opacity: .55;
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 45%);
  mask: radial-gradient(circle, #000 0%, transparent 45%);
  animation-duration: 220s;
}

/* Кольца-тюндюк на заставках блоков */
.block-rings {
  position: absolute;
  left: 50%; top: 50%;
  width: min(78vh, 60vw); height: min(78vh, 60vw);
  translate: -50% -50%;
  color: var(--gold);
  opacity: .42;
  pointer-events: none;
}
.block-rings svg { width: 100%; height: 100%; overflow: visible; }
.ring { transform-box: view-box; transform-origin: 0 0; }
.slide.is-active .block-rings { animation: rings-in 2s var(--expo) .2s both; }
.slide.is-leaving .ring.r1, .slide.is-active .ring.r1 { animation: spin 90s linear infinite; }
.slide.is-leaving .ring.r2, .slide.is-active .ring.r2 { animation: spin-back 60s linear infinite; }
.slide.is-leaving .ring.r3, .slide.is-active .ring.r3 { animation: spin 40s linear infinite; }
@keyframes spin-back { to { transform: rotate(-360deg); } }
@keyframes rings-in { from { opacity: 0; transform: scale(.7) rotate(-30deg); } to { opacity: .42; transform: none; } }
/* Римская цифра переворачивается к зрителю */
.slide.is-active .block-card .num.rv { animation: num-in 1.4s var(--expo) both; animation-delay: .35s; }
@keyframes num-in { from { opacity: 0; transform: perspective(600px) rotateX(-80deg) translateY(calc(var(--u) * 2)); } to { opacity: 1; transform: none; } }

/* Линии по бокам надзаголовка прорисовываются вместе с ним */
.content.center .kicker, .content.left .kicker { display: flex; align-items: center; gap: calc(var(--u) * 1.2); }
.content.center .kicker::before, .content.center .kicker::after, .content.left .kicker::before {
  content: '';
  flex: none;
  width: calc(var(--u) * 3.5);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
  transform-origin: right;
}
.content.center .kicker::after { background: linear-gradient(90deg, var(--gold), transparent); transform-origin: left; }
.content.left .kicker::before { width: calc(var(--u) * 2.4); }
.kicker.plain::before, .kicker.plain::after { display: none; }
.slide.is-active .kicker::before, .slide.is-active .kicker::after {
  animation: line-in 1.2s var(--expo) both;
  animation-delay: calc(var(--d0, .35s) + var(--i, 0) * var(--step, .12s) + .25s);
}
@keyframes line-in { from { transform: scaleX(0); } to { transform: none; } }

/* Пункты списка въезжают слева, ромбик раскрывается следом */
.points li.frag { transform: translateX(calc(var(--u) * -3)); }
.points li.frag.shown { transform: none; }
.points li::before { transition: transform .7s var(--expo) .18s; transform: rotate(45deg) scale(0); }
.points li.shown::before { transform: rotate(45deg) scale(1); }
.frag { transition: opacity .9s var(--expo), transform 1s var(--expo), filter .9s var(--expo); }
.lead.frag { filter: blur(8px); }
.lead.frag.shown { filter: none; }

/* Портрет и фото проявляются шторкой, затем медленно «дышат» в 3D */
.wipe {
  position: absolute;
  inset: -1px;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(180deg, #16264a, #0a1324);
  transform-origin: 50% 0;
}
.slide.is-active .wipe { animation: wipe-up 1.3s var(--expo-io) 1.15s both; }
.slide.is-leaving .wipe { transform: scaleY(0); }
@keyframes wipe-up { from { transform: scaleY(1); } to { transform: scaleY(0); } }
.portrait-wrap { perspective: 1100px; }
.slide.is-active .portrait, .slide.is-leaving .portrait { animation: float3d 11s var(--sine) 2.4s infinite alternate; }
@keyframes float3d {
  from { transform: rotateY(-5deg) rotateX(2deg); }
  to   { transform: rotateY(5deg) rotateX(-1.5deg) translateY(-1%); }
}
.photo-img { position: relative; overflow: hidden; }
.slide.is-active .photo .photo-img, .slide.is-leaving .photo .photo-img { animation: photo-float 9s var(--sine) 2s infinite alternate; }
@keyframes photo-float { from { transform: rotate(-1.5deg); } to { transform: rotate(.5deg) translateY(-2%); } }

/* Страница книги раскрывается из наклона и чуть покачивается */
.slide.is-active .page.rv { animation: page-in 1.6s var(--expo) both, page-float 8s var(--sine) 1.6s infinite alternate; animation-delay: .5s, 2.1s; }
@keyframes page-in { from { opacity: 0; transform: perspective(1400px) rotateX(28deg) translateY(calc(var(--u) * 6)) rotate(-4deg); } to { opacity: 1; transform: rotate(-1.2deg); } }
@keyframes page-float { from { transform: rotate(-1.2deg); } to { transform: rotate(-.4deg) translateY(calc(var(--u) * -.5)); } }

/* Книги падают на полку с отскоком; пункты ленты времени выпрыгивают */
@keyframes book-up {
  0% { opacity: 0; transform: translateY(calc(var(--u) * -14)); }
  55% { opacity: 1; transform: translateY(calc(var(--u) * .6)); }
  75% { transform: translateY(calc(var(--u) * -.4)); }
  100% { opacity: 1; transform: none; }
}
.slide.is-active .tl-item.rv { animation-name: tl-in; animation-duration: 1s; }
@keyframes tl-in { from { opacity: 0; transform: translateY(calc(var(--u) * 2.5)) scale(.85); } to { opacity: 1; transform: none; } }

/* Волны на озере, свечение луны */
.wave { animation: wave var(--wd) linear infinite; }
@keyframes wave { to { transform: translateX(var(--wl)); } }
.moon-glow { animation: moon 6s var(--sine) infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes moon { from { opacity: .7; transform: scale(.94); } to { opacity: 1; transform: scale(1.05); } }

/* Маңкурт: камера медленно уходит в звёзды; на последней строке слово рассыпается */
.slide.is-active.s-mankurt .bg-canvas { animation: kenburns 40s linear both; }
.s-mankurt.fx-dissolve .mankurt-word span {
  animation: dissolve 4.5s var(--sine) both;
  animation-delay: calc(.6s + var(--k) * .3s);
}
@keyframes dissolve {
  from { opacity: 1; filter: none; transform: none; }
  to   { opacity: .08; filter: blur(14px); transform: translate(var(--dx), var(--dy)) scale(1.35) rotate(8deg); }
}

/* Финальное «Рахмат» выплывает из размытия, главное слово цитаты пульсирует светом */
.frag.shown .thanks { animation: thanks-in 1.4s var(--expo) both; }
@keyframes thanks-in { from { opacity: 0; transform: scale(.82); filter: blur(10px); } to { opacity: 1; transform: none; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .5)); } }
.slide.is-active .big-quote .w.hl {
  animation: rv-word 1.2s var(--ease) both, hl-pulse 3.2s var(--sine) infinite alternate;
  animation-delay: calc(.6s + var(--k) * .16s), 3s;
}
@keyframes hl-pulse {
  from { filter: drop-shadow(0 0 calc(var(--u) * 1) rgba(226, 176, 74, .3)); }
  to   { filter: drop-shadow(0 0 calc(var(--u) * 3) rgba(255, 210, 120, .75)); }
}
.slide.is-leaving .big-quote .w { animation: rv-exit .5s var(--expo-in) both; animation-delay: calc(var(--k) * .02s); }

/* Пауза всего бесконечного на скрытых слайдах */
.slide:not(.is-active):not(.is-leaving) :is(.clouds i, .eflap, .flock-move, .halo, .portrait, .sun-rise svg, .rings i, .rays, .fog, .deer-wrap, .gold-grad, .wing, .leak, .wave, .moon-glow),
.slide:not(.is-active):not(.is-leaving) .portrait::before { animation-play-state: paused; }

/* Переключатель языка */
.lang-row { display: flex; gap: 6px; margin-top: calc(var(--u) * 1.6); padding: 4px; border-radius: 999px; border: 1px solid rgba(226, 176, 74, .35); }
.lang {
  appearance: none; border: 0; cursor: pointer;
  padding: calc(var(--u) * .7) calc(var(--u) * 1.8);
  border-radius: 999px;
  background: transparent;
  color: #b9c6da;
  font: 600 calc(var(--u) * 1.3)/1 var(--sans);
}
.lang.on { background: var(--gold); color: #1a1206; }

.shot *, .shot *::before, .shot *::after {
  animation-delay: 0s !important;
  animation-duration: .001s !important;
  animation-iteration-count: 1 !important;
  transition: none !important;
}
.shot #hud, .shot #toast, .shot #grain, .shot #edge { display: none; }

@media (prefers-reduced-motion: reduce) {
  .slide.is-active .bg-img, .slide.is-leaving .bg-img, .names span, .ship-move, .bird-fly, .sway, .bob { animation: none !important; }
}