/* «Балбай» — обложка.
   Слои — обычные картинки с запечённой краской. Движется только transform и
   opacity: телефон считает это видеочипом, без перерисовки и мигания.
   Движение строгое: медленные наплывы из темноты, «камера» отъезжает,
   ничего не подпрыгивает. Потом небо живёт: облака идут за всадником,
   проносятся порывы ветра, в вышине кружит беркут. Сам всадник неподвижен:
   мелкий штрих при движении рябит. */
:root {
  --paper: #32e3f4;
  --ink: #053b4a;
  --accent: #b4432a;
  --deep: #03222b;
  --ui: "Roboto Condensed", "sans-serif-condensed", "Avenir Next Condensed",
        "Bahnschrift", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --slow: cubic-bezier(.25, .6, .15, 1);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--deep);
  color: var(--paper);
  font-family: var(--ui);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- ПОРОГ: титул ---------- */
#gate {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 0; padding: 24px;
  background: var(--deep);
  color: var(--paper);
  font: inherit; cursor: pointer;
  transition: opacity .8s ease, visibility 0s linear .8s;
}
.gate-title {
  display: flex; flex-direction: column; align-items: flex-start;
  width: min(78vw, 420px);
  animation: gate-in 1.6s var(--slow) both;
}
.gate-author { width: 42%; height: auto; margin-bottom: 4%; }
.gate-name { width: 100%; height: auto; }
.gate-rule {
  width: 46px; height: 3px; margin: 34px 0 26px;
  background: var(--accent);
  animation: gate-in 1.6s var(--slow) .35s both;
}
.gate-hint {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: gate-in 1.4s var(--slow) .7s both;
}
.gate-main {
  font-size: clamp(14px, 3.9vw, 17px);
  font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  animation: breathe 3.2s ease-in-out 2.2s infinite;
}
.gate-sub {
  font-size: clamp(13px, 3.5vw, 15px);
  letter-spacing: .02em; opacity: .6;
}
@keyframes gate-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.state-open #gate { opacity: 0; visibility: hidden; pointer-events: none; }
.state-open .gate-main { animation: none; }

/* ---------- СЦЕНА ---------- */
#cover {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
}

.sheet {
  position: relative; flex: none;
  width: min(100vw, calc((100vh - 190px) * 1000 / 1444), 600px);
  width: min(100vw, calc((100dvh - 190px) * 1000 / 1444), 600px);
  aspect-ratio: 1000 / 1444;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  opacity: 0;
}
/* Лист проступает из темноты. */
.state-open .sheet { animation: fade-in 1.4s ease .2s both; }

/* «Камера»: начинает крупно и медленно отъезжает, чуть опускаясь к всаднику. */
.stage { position: absolute; inset: 0; transform-origin: 50% 40%; }
.state-open .stage { animation: camera 5.2s var(--slow) both; }
@keyframes camera {
  from { transform: scale(1.14) translate3d(0, 2%, 0); }
  to   { transform: scale(1) translate3d(0, 0, 0); }
}

/* ---------- СЛОИ ---------- */
.layer, .rev { position: absolute; inset: 0; }
.rev { opacity: 0; }
.rev img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; user-select: none; -webkit-user-drag: none; pointer-events: none;
}

/* запас по краям, чтобы при сдвиге не открывался срез картинки */
.layer[data-layer="sky"] img    { transform: scale(1.05); }
.layer[data-layer="clouds"] img { transform: scale(1.03); }
.layer[data-layer="ground"] img { transform: scale(1.04); }

/* ---------- ПОЯВЛЕНИЕ: долгие наплывы ---------- */
.layer.is-in .rev { animation: fade-in 1.3s ease both; }
.layer[data-layer="rider"].is-in .rev { animation: emerge 1.9s var(--slow) both; }
.layer[data-layer="title"].is-in .rev { animation: title-in 1.1s var(--slow) both; }
.layer[data-layer="author"].is-in .rev { animation-duration: .9s; }

@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes emerge   { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: scale(1); } }
@keyframes title-in { from { opacity: 0; transform: translate3d(0, 1.2%, 0); } to { opacity: 1; transform: none; } }

.sheet .layer.is-in.is-done .rev { animation: none; opacity: 1; transform: none; }

/* ---------- ТИХИЙ ЦИКЛ: едва заметно плывут небо и облака ---------- */
.sheet.is-idle .layer[data-layer="sky"].is-done .rev    { animation: drift-a 30s ease-in-out infinite alternate; }
.sheet.is-idle .layer[data-layer="clouds"].is-done .rev { animation: drift-b 22s ease-in-out infinite alternate; }
@keyframes drift-a { from { transform: translate3d(-1%, 0, 0); } to { transform: translate3d(1%, 0, 0); } }
@keyframes drift-b { from { transform: translate3d(.7%, 0, 0); } to { transform: translate3d(-.7%, 0, 0); } }

/* ---------- ОБЛАКА ИДУТ ЗА ВСАДНИКОМ ----------
   Картинка — две одинаковые полосы подряд; сдвиг ровно на одну полосу
   незаметно начинает круг заново. Дальние медленнее ближних. */
.rev .track { position: absolute; left: 0; width: 200%; will-change: transform; }
.rev .track img { position: static; width: 100%; height: auto; }
.layer[data-layer="far"] .track  { top: 0; }
.layer[data-layer="near"] .track { top: 17.3%; }
.state-open .layer[data-layer="far"] .track  { animation: sail 150s linear infinite; }
.state-open .layer[data-layer="near"] .track { animation: sail 75s linear -30s infinite; }
@keyframes sail { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ---------- ВЕТЕР ----------
   Пучок штрихов влетает справа, проходит за всадником и гаснет слева.
   Длительность — весь цикл; сам порыв занимает его первую треть. */
.rev img.gust {
  inset: auto; left: 100%; width: 38%; height: auto;
  opacity: 0; will-change: transform, opacity;
}
/* строки подобраны по открытому небу: над тучей, под ней, под брюхом коня,
   между горами и степью */
.rev img.g1 { top: 1.5%; }
.rev img.g2 { top: 38.5%; width: 30%; }
.rev img.g3 { top: 54.5%; width: 34%; }
.rev img.g4 { top: 9.5%;  width: 26%; }
.rev img.g5 { top: 65.5%; width: 42%; }
.sheet.is-idle .gust { animation: gust 13s linear infinite; }
.sheet.is-idle .gust.g2 { animation-duration: 17s; animation-delay: 2.6s; }
.sheet.is-idle .gust.g3 { animation-duration: 15s; animation-delay: 5.1s; }
.sheet.is-idle .gust.g4 { animation-duration: 21s; animation-delay: 8.4s; }
.sheet.is-idle .gust.g5 { animation-duration: 19s; animation-delay: 11s; }
@keyframes gust {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  5%   { opacity: .85; }
  26%  { opacity: .85; }
  34%  { transform: translate3d(-400%, 0, 0); opacity: 0; }
  100% { transform: translate3d(-400%, 0, 0); opacity: 0; }
}

/* ---------- БЕРКУТ ----------
   Три вложенных движения с общим периодом дают круг в перспективе:
   вдоль, вверх-вниз (вверху — дальше и меньше) и крен. Крылья
   машут по отдельности, вокруг плеча. */
.eagle-path {
  position: absolute; left: 86%; top: 3%; width: 9%;
  will-change: transform;
}
.eagle-bob, .eagle { position: relative; width: 100%; aspect-ratio: 126 / 30; will-change: transform; }
.eagle svg { position: absolute; display: block; overflow: visible; fill: var(--ink); }
.eagle-body { left: 45.24%; top: 33.33%; width: 9.52%; height: 66.67%; }
.wing { position: absolute; top: 3.33%; width: 48.41%; height: 76.67%; }
.wing svg, .wing-l > span { position: absolute; inset: 0; width: 100%; height: 100%; }
.wing-r { left: 51.59%; transform-origin: 0 78.26%; }
.wing-l { left: 0; transform: scaleX(-1); }
.wing-l > span { transform-origin: 0 78.26%; }

.state-open .eagle-path { animation: soar-x 24s ease-in-out infinite alternate; }
.state-open .eagle-bob  { animation: soar-y 24s ease-in-out -12s infinite alternate; }
.state-open .eagle      { animation: bank 24s ease-in-out -12s infinite alternate; }
.state-open .wing-r, .state-open .wing-l > span { animation: flap 11s ease-in-out 3s infinite; }
@keyframes soar-x { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-170%, 0, 0); } }
@keyframes soar-y { from { transform: translate3d(0, 0, 0) scale(.78); } to { transform: translate3d(0, 220%, 0) scale(1); } }
@keyframes bank   { from { transform: rotate(-6deg); } to { transform: rotate(5deg); } }
@keyframes flap {
  0%, 80%   { transform: rotate(0); }
  83%       { transform: rotate(-26deg); }
  86.5%     { transform: rotate(14deg); }
  90%       { transform: rotate(-26deg); }
  93.5%     { transform: rotate(14deg); }
  97%, 100% { transform: rotate(0); }
}

/* ---------- ПОД ОБЛОЖКОЙ ---------- */
.under {
  flex: 1; width: min(100vw, 600px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 18px 24px 22px; text-align: center;
  opacity: 0;
  transition: opacity 1s ease;
}
.under.is-in { opacity: 1; }
.kicker {
  margin: 0; font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; opacity: .7;
}
.lead {
  margin: 0; max-width: 30em;
  font-family: Georgia, "PT Serif", "Times New Roman", serif;
  font-size: clamp(15px, 4.1vw, 17.5px); line-height: 1.45; color: #c9f6fb;
}
.btn-read {
  display: inline-block; margin-top: 6px; min-width: 190px; padding: 14px 34px;
  border: 0; border-radius: 2px;
  background: var(--paper); color: var(--ink);
  font: 600 18px/1 var(--ui); letter-spacing: .24em; text-transform: uppercase;
  text-decoration: none; text-align: center; cursor: pointer;
  box-shadow: 3px 3px 0 var(--accent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-read:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--accent); }
.btn-read:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--accent); }
.btn-read:focus-visible, .btn-sound:focus-visible, #gate:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Переключатель языка под кнопкой чтения */
.langs { display: flex; gap: 4px; margin-top: 8px; }
.langs button {
  min-width: 52px; height: 36px; padding: 0 10px;
  border: 1px solid rgba(50, 227, 244, .3); border-radius: 2px;
  background: none; color: rgba(201, 246, 251, .75);
  font: 600 13px/1 var(--ui); letter-spacing: .12em; cursor: pointer;
}
.langs button.is-on { color: var(--paper); border-color: var(--paper); }
.langs button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.btn-sound {
  position: fixed; z-index: 5;
  right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(50, 227, 244, .45);
  background: rgba(3, 34, 43, .7); color: var(--paper);
  display: grid; place-items: center; cursor: pointer;
}
.btn-sound[hidden] { display: none; }
.btn-sound .mute { display: none; }
.btn-sound[aria-pressed="false"] .wave { display: none; }
.btn-sound[aria-pressed="false"] .mute { display: block; }

/* ---------- УМЕНЬШЕННОЕ ДВИЖЕНИЕ ---------- */
@media (prefers-reduced-motion: reduce) {
  .gate-title, .gate-rule, .gate-hint, .gate-main { animation: none; }
  .state-open .sheet { animation: none; opacity: 1; }
  .stage { animation: none !important; }
  .layer { transform: none !important; }
  .layer .rev { animation: none !important; transition: opacity .4s ease; transform: none !important; }
  .layer.is-in .rev { opacity: 1; }
  .track, .eagle-path, .eagle-bob, .eagle, .wing-r, .wing-l > span { animation: none !important; }
  .gust { display: none; }
}