/* main.css */
@import 'normalize.css';
@import "fonts.css";
@import "book1.css";
@import "book2.css";

*,
*:after,
*:before {
  box-sizing: border-box;
  transform-style: preserve-3d;
}

:root {
  --shadow: hsl(0 0% 20% / 0.9);
  --bg: hsl(0 100% 50%);
  --header: hsl(0 0% 65%);
  --lit-header: hsl(0 0% 100%);
  --speed: 10s;
  --ease: linear(
    0 0%,
    0.0036 9.62%,
    0.0185 16.66%,
    0.0489 23.03%,
    0.0962 28.86%,
    0.1705 34.93%,
    0.269 40.66%,
    0.3867 45.89%,
    0.5833 52.95%,
    0.683 57.05%,
    0.7829 62.14%,
    0.8621 67.46%,
    0.8991 70.68%,
    0.9299 74.03%,
    0.9545 77.52%,
    0.9735 81.21%,
    0.9865 85%,
    0.9949 89.15%,
    1 100%
  );
  color-scheme: dark only;
}

/*
  ОБЩИЕ ОПРЕДЕЛЕНИЯ ДЛЯ МОРДЫ
*/

body, html {
  overflow: hidden; /* Скрываем дефолтный скролл для контейнера */
  scrollbar-width: none; /* Для Firefox */
  -ms-overflow-style: none; /* Для IE/Edge */
  overflow-y: scroll; /* Гарантируем наличие прокрутки */
  overflow-x: hidden; /* Убираем горизонтальный сдвиг, если он есть */
}

*::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent; /* На всякий случай */
}

/*
  ЗАГЛАВНАЯ СТРАНИЦА  
*/

    #morda {
      height: 100vh;
      background-image: url('../images/iVioline.jpg');
      background-repeat: no-repeat; /* Prevents tiling */
      background-size: cover;       /* Scales image to fill entire screen */
      background-attachment: scroll; /* Optional: background stays still while scrolling */
      background-position: center;  /* Centers the image */
      /* border: 2px solid yellow; */
    }

    /*  Переменные для фонарика заглавной страницы  */

    @property --swing-x {
      initial-value: 0;
      inherits: false;
      syntax: '<integer>';
    }
    @property --swing-y {
      initial-value: 0;
      inherits: false;
      syntax: '<integer>';
    }

    @keyframes swing {
      0% {
        --swing-x: -100;
        --swing-y: -100;
      }
      50% {
        --swing-y: 0;
      }
      100% {
        --swing-y: -100;
        --swing-x: 100;
      }
    }

    /* Фонарик заглавной страницы  */

    .cloak__wrapper {
      position: fixed; 
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .cloak__container {
      height: 250vmax;
      width: 250vmax;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .cloak {
      animation: swing var(--speed) infinite alternate-reverse var(--ease);
      height: 100%;
      width: 100%;
      transform-origin: 50% 25%;
      transform: rotate(calc(var(--swing-x) * -0.25deg));
      background: radial-gradient(
        40% 40% at 50% calc(42% + (var(--swing-y) * 0.1%)), /*  первые два - размер от всего блока,
                                                                третий х по горизонтали
                                                                четвертый y по вертикали: Центр динамически меняется. 
                                                                  К базовой высоте в 42% прибавляется 
                                                                  значение переменной --swing-y, умноженное на 0.1
                                                             */      
        transparent,                  /* Прозрачность центра "фонарика"  */ 
        hsl(0 100% 20% / 0.94) 40vmax /* 
                                        Первый параметр - номер цвета 0 - красн, 120 - зеленый, 240 - синий
                                        Второй параметр - насыщенность цвета
                                        Третий параметр - осветление верхнего слоя, 0 - абс темный 50 - цвет, 100 - абс белый 
                                        Четвертый (после слэша) - непрозрачность 
                                        */
      );
    }

    .author_wrapper {
      display: flex;
      justify-content: center; 
      flex-direction: row;
      min-height: 2vh;
    }

    .author {
      font-size: clamp(1rem, 4vmin, 3rem);
      font-family: 'Roboto', 'SF Pro Text', 'SF Pro Icons', 'AOS Icons',
        'Helvetica Neue', Helvetica, Arial, sans-serif, system-ui;
    }

    .headline_container {
      display: flex;
      justify-content: center; 
      flex-direction: row;
      align-items: center;
      min-height: 80vh;
      font-family: 'Roboto', 'SF Pro Text', 'SF Pro Icons', 'AOS Icons',
        'Helvetica Neue', Helvetica, Arial, sans-serif, system-ui;
      perspective: 1200px;}

    .headline {
      width: 100%;
      text-align: center;
      animation: swing var(--speed) infinite alternate var(--ease);
      font-size: clamp(1rem, 20vmin, 10rem);
      font-family: 'Open Sans', sans-serif; 
      margin: auto;
      letter-spacing: 1rem;
      transform: translate3d(0, 0, 0vmin);
      --x: calc(50% + (var(--swing-x) * 0.5) * 1%); 
      background: radial-gradient(var(--lit-header), var(--header) 45%) var(--x)
        100%/100% 100%;
      -webkit-background-clip: text;
      color: transparent;
    }

    /* Это двигающаяся тень заголовка  */ 

    .headline span {
      animation: swing var(--speed) infinite alternate var(--ease);
      position: absolute;
      text-align: center;
      top: 0;
      left: 0;
      color: var(--shadow);
      filter: blur(1.5vmin);
      transform: scale(1.05) translate3d(0, 12%, -10vmin)
        translate(
          calc((var(--swing-x) * 0.05) * 1%),
          calc((var(--swing-y) * -0.025) * 1%)
        );
    }

    /* Меню по книгам. Нотная запись BACH и DSCH  */

    /* Контейнер меню  */
    .menu_wrapper {
      display: flex;
      justify-content: center;
      flex-direction: column;
      margin: auto; 
      /* border: 1px solid green; */
      width: 790px;
      min-height: 20vh;  
      margin-top: -50px;
    }

    /* Нотный стан  */
    .stave_container {
    /*  width: 780px;
      height: 60px;   */
      margin-top: -80px;
      /* margin-bottom: 20px; */
    }

    .staff_line {
      width: 780px;
      height: 10px; /* Толщина/высота линии */
      border-bottom: 1px solid hsl(0 50% 30% / 0.94); /* Сама линия */
      margin: auto;
      margin-bottom: 10px; /* Расстояние между линиями */
    }

    /* Ноты - ссылки на книги  */
    .notePunt_container {
      display: flex;
      flex-direction: row;
      justify-content: center;
      margin-top: -50px; 
    }

    .notePunt::before {
      content: '';
      display: inline-block; /* Позволяет задать размеры */
      width: 50px;  /* Желаемая ширина иконки */
      height: 40px; /* Желаемая высота иконки */
      background-image: url('../images/icons8-fullNote100.png');
      background-size: contain; /* Масштабирует картинку под размер блока */
      background-repeat: no-repeat;
      vertical-align: top;
      margin-top: -25px;
      opacity: 0.4;
    }

    .notePunt_bemol::before {
      content: '';
      display: inline-block; /* Позволяет задать размеры */
      width: 55px;  /* Желаемая ширина иконки */
      height: 40px; /* Желаемая высота иконки */
      background-image: url('../images/bemol.png'), url('../images/icons8-fullNote100.png');
      background-position: left center, right center;
      background-size: contain; /* Масштабирует картинку под размер блока */
      background-repeat: no-repeat, no-repeat;
      vertical-align: top;
      margin-top: -25px;
      opacity: 0.4;
    }

    .notePunt_bekar::before {
      content: '';
      display: inline-block; /* Позволяет задать размеры */
      width: 55px;  /* Желаемая ширина иконки */
      height: 40px; /* Желаемая высота иконки */
      background-image: url('../images/bekar.png'), url('../images/icons8-fullNote100.png');
      background-position: left center, right center;
      background-size: contain; /* Масштабирует картинку под размер блока */
      background-repeat: no-repeat, no-repeat;
      vertical-align: top;
      margin-top: -25px;
      opacity: 0.4;
    }

    .notePunt_container a {
      font-size: 12px;
    }

    /* Промежутки между нотами  */
    .after_a { 
      display: inline-block;
      margin-top: -6px;
      vertical-align: top;
      /* border: 1px solid #888;  */
      width: 30px; 
      height: 13px; 
    }

    /* Титульные обозначения ссылок  */
    .note_tooltip {
      position: relative;
      display: inline-block;
      text-decoration: none;
      background-color: transparent; /* Цвет фона */
    }

    .tooltip {
      visibility: hidden;
      width: 200px; /* Ширина подсказки */
      text-align: center;
      border-radius: 6px;
      /* border: 1px solid hsl(0 50% 30% / 0.94); */
      padding: 10px;
      position: absolute;
      z-index: 1;
      bottom: 125%; /* Позиция над ссылкой */
      left: 50%;
      margin-left: -100px; /* Центрирование */
      font-size: 0px;
      opacity: 0;
      transition: opacity 0.3s;
      line-height: 1.4;
    }

    /* Стили первой строки подсказки */
    .tt_F {
      display: block;
      color: #FFCCCC !important; /* Цвет текста */
      font-size: 18px !important;
      /* white-space: normal; /* Разрешить перенос строк */
    }

    /* Стили второй строки подсказки */
    .tt_S {
      display: block;
      color: #FF6666; /* Цвет текста */
      font-size: 12px;
    }

    /* Показываем подсказку при наведении */
    .note_tooltip:hover .tooltip {
      visibility: visible;
      opacity: 1;
    }

/*
  ОБЩИЕ ОПРЕДЕЛЕНИЯ ДЛЯ КНИГ
*/    

/* Общий контейнер после заглавной страницы  */
.fullContainer {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory; /* Включает жесткую фиксацию по вертикали */
  scroll-behavior: smooth; 
}


/* КОНТЕЙНЕР СКРОЛЛА КНИГ и СТРАНИЦ*/
.main-vertical-wrapper {
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory; /* Фиксация на книгах */
    overflow-x: hidden; /* Чтобы вся страница не качалась влево-вправо */
    scroll-behavior: smooth;

    /* Для Firefox */
    scrollbar-width: none; 
    /* Для Chrome, Safari и Edge */
    -ms-overflow-style: none; 
}

.main-vertical-wrapper::-webkit-scrollbar {
    display: none; 
}


.book-section {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start; /* Секция всегда липнет к верхнему краю */
    padding: 0;
    box-sizing: border-box;
    position: relative;
    transition: background 1s ease; /* Плавная смена фона */
}

/* КОНТЕНТ обложки */
.content {
    max-width: 100%;
    text-align: center;
    transform: translateY(50px);
    transition: all 1.2s ease;
}

/* КЛАСС, КОТОРЫЙ ДОБАВИТ JAVASCRIPT */
.content.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Навигация на точках - меню обложек книг */
.bottom-nav {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 100;
}

.nav a {
  width: 12px;
  height: 12px;
  background: rgba(255,255,255,0.3);
  border: 1px solid #000; /* Тонкая обводка, чтобы видеть на белом */
  border-radius: 50%;
  text-decoration: none;
  transition: 0.3s;
  display: block; /* Важно, чтобы ссылка имела размер */
}

.nav a:hover {
    transform: scale(1.3);
    background: #ff4757; /* Цвет при наведении для проверки */
}

/* Базовый стиль стрелок */
.nav-arrow-right, .nav-arrow-left {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 20px;
  text-decoration: none;
  font-family: 'Lora', serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  z-index: 100;
  bottom: 40px; /* Расстояние от низа экрана */
  transition: all 0.4s ease;
}

/* На обложке: стрелка направо, светлая */
.nav-arrow-right {
  right: 40px;
  color: white; /* Или цвет текста обложки */
  border-right: 2px solid;
}

/* На текстах: стрелка налево, темная (на слоновой кости) */
.nav-arrow-left {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #2c3e50;
  opacity: 0.4;
  position: sticky; /* Чтобы всегда была видна при скролле стихов */
  visibility: hidden; 
  opacity: 0;
}

.texts-scroll .nav-arrow-left {
  visibility: visible;
  opacity: 0.5;
}

.nav-arrow-left:hover {
  opacity: 1;
  left: 10px; /* Эффект подсказки движения */
}

.nav-arrow-right:hover {
    right: 30px;
}

.dark {
  color: black;
}

.light {
  color: white;
}

.book-pagination {
    position: absolute;
    bottom: 40px; /* Расстояние от низа экрана */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 20;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor; /* Точка примет цвет текста текущей книги */
    opacity: 0.3;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Увеличиваем зону клика для мобильных устройств (невидимая область) */
.dot::before {
    content: '';
    position: absolute;
    top: -15px; /* Увеличивает область клика вверх */
    bottom: -15px; /* Увеличивает область клика вниз */
    left: -10px;
    right: -10px;
}

/* Эффект при наведении и нажатии */
.dot:hover, .dot:active {
    opacity: 0.5;
    transform: scale(2); /* Заметное увеличение */
}

.dot.active {
    opacity: 1;
    transform: scale(1.8);
    box-shadow: 0 0 10px currentColor; /* Легкое свечение активной точки */
}

/* Ряд книги превращаем в горизонтальный свайпер */
.book-row {
    display: flex;
    width: 200vw; /* Ширина - два экрана */
    min-height: 100vh;
    max-height: 100vh;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-align: start; /* Фиксирует всю секцию книги по вертикали */
    scroll-snap-type: x mandatory; /* Магнит по горизонтали */
    scrollbar-width: none;
/*     overflow-y: hidden; /* ЗАПРЕЩАЕМ вертикальный скролл здесь! */
    overscroll-behavior-x: contain; 
/*     overscroll-behavior-y: contain; /* Запрещает передавать вертикальный скролл внутрь ряда, если мы на обложке */
}

.page {
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* Обложка - должна быть строго по размеру экрана */ 
.page.cover {
    width: 100vw;
    min-height: 100vh;
    max-height: 100vh;
    flex-shrink: 0;
    overflow: hidden; /* Запрещаем скролл внутри обложки */
    scroll-snap-align: start; /* Фиксирует обложку по горизонтали */
}

/* Свиток текстов - единственный, кому можно скроллиться вниз */
.page.texts-scroll {
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
    overscroll-behavior-y: contain;
    /* Разрешаем вертикальный скролл только здесь */
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; /* Для плавности на iPhone */
}

/* Стили для "Бумаги" */
.texts-scroll {
    background-color: #fdf5e6; /* Слоновая кость */
    color: #2c3e50;
    overflow-y: auto; /* Внутренний скролл для стихов */
    padding: 60px;
    box-sizing: border-box;
    scroll-snap-align: start;
}

/* Убираем скроллбары для чистоты */
.book-row::-webkit-scrollbar, 
.texts-scroll::-webkit-scrollbar {
    display: none;
}

/*
.poem-page {
    min-height: 80vh; /* Каждое стихотворение - почти экран 
    margin-bottom: 10vh;
    font-family: 'Lora', serif; /* Твоя Lora 
}

/* Убираем скроллбары для чистоты 
.book-row::-webkit-scrollbar, 
.texts-scroll::-webkit-scrollbar {
    display: none;
}

/* Обёртка для самих стихов 
.poems-content {
    max-width: 800px;      /* Чтобы текст не растягивался на весь широкий экран 
    margin: 0 auto;        /* Центрируем блок с текстом 
    padding: 100px 40px;   /* Большие отступы сверху и снизу, чтобы стихи не прилипали к краям 
    background-color: #fdf5e6; /* Тот самый цвет слоновой кости 
    min-height: 101vh;     /* Чтобы скролл появился, даже если стихов мало 
}

/* Стили для отдельного стихотворения внутри контента 
.poems-content article {
    margin-bottom: 150px;  /* Расстояние между стихами 
    font-family: 'Lora', serif;
    line-height: 1.8;
}

article.poem {
    margin-left: 15%;      /* Сдвигаем весь блок вправо, создавая "воздух" слева 
    margin-bottom: 120px !important;  /* Расстояние между стихотворениями в ленте 
    max-width: 600px;      /* Ограничиваем ширину, чтобы строки не растягивались слишком сильно 
    transition: opacity 0.5s ease; /* Для плавных эффектов, если захочешь 
}

.poem h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    margin-bottom: 30px;
    color: #333;
}

.poem-text {
    font-family: 'Lora', serif;
    font-size: 1rem;
    line-height: 1.2 !important;      /* Увеличиваем межстрочный интервал для легкого чтения
    color: #444;
    white-space: pre-wrap; /* Дополнительная страховка для сохранения пробелов и переносов 
}

.poem-text p {
    line-height: 1.3;      /* Увеличиваем межстрочный интервал для легкого чтения 
}

*/

.section-title-page {
    height: 100vh;           /* На весь экран */
    width: 100vh;           /* На весь экран */
    display: flex !important;
    min-height: 100vh !important;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 100px;    /* Чтобы первый стих не прилипал снизу */
    border-bottom: 0px solid rgba(0,0,0,0.1); /* Тонкая черта для стиля */
}

.part-number {
    display: block;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.part-title {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-style: italic;
}

/* УНИКАЛЬНЫЕ СТИЛИ ДЛЯ КНИГ (вместо разных CSS файлов) */

#book1 { 
  background-image: url('../images/1book/1book_sm.jpg') !important;
  background-size: auto 90% !important;        /* Растянуть на весь экран */
  background-position: center !important;   /* Центрировать */
  background-repeat: no-repeat;  /* Не размножать */
  background-color: transparent; /* Убрать заливку цветом, если она мешает */
  background-attachment: fixed;
  display: flex !important; /* Убедимся, что секция не схлопнулась */
/*  scroll-snap-align: start; */
}

#book2 { 
  background-image: url('../images/2book/2book.jpg') !important;
  background-size:  auto 85% !important !important;        /* Растянуть на весь экран */
  background-position: center !important;;   /* Центрировать */
  background-repeat: no-repeat;  /* Не размножать */
  background-color: #fff; 
  background-attachment: fixed;
  display: flex !important; /* Убедимся, что секция не схлопнулась */
}

#book3 { 
  background-image: url('../images/khaos.jpg') !important;
  background-size: cover !important;        /* Растянуть на весь экран */
  background-position: center !important;;   /* Центрировать */
  background-repeat: no-repeat;  /* Не размножать */
  background-color: transparent; /* Убрать заливку цветом, если она мешает */
  background-attachment: fixed;
  display: flex !important; /* Убедимся, что секция не схлопнулась */
}

#book4 { 
  background-image: url('../images/titan_chaff.png') !important;
  background-size: 30% auto !important;        /* Растянуть на весь экран */
  background-position: 25% 50% !important;;   /* Центрировать */
  background-repeat: no-repeat;  /* Не размножать */
  background-color: black; /* Убрать заливку цветом, если она мешает */
  background-attachment: fixed;
  display: flex !important; /* Убедимся, что секция не схлопнулась */
}

section#book4 .header {
  width: 50%;
  margin-left: 0;
  color: #92897E;
  font-family: 'Rubik Dirt', system-ui;
  font-weight: 400;
  font-size: 5rem !important; 
  font-style: normal;
  margin-bottom: 1rem;
  margin-left: 30rem;
/*  white-space: nowrap; /* Запретить перенос строк */
}

#book5 { 
  color: hsl(20 80% 52%);
  background-image: url('../images/5book_cov(rem).png') !important;
  background-size: cover !important;        /* Растянуть на весь экран */ 
  background-position: center !important;;   /* Центрировать */
  background-repeat: no-repeat;  /* Не размножать */
  background-color: transparent; /* Убрать заливку цветом, если она мешает */
  background-attachment: fixed;
  display: flex !important; /* Убедимся, что секция не схлопнулась */
}

section#book5 .header {
  width: 100%;
  margin-left: 0;
  font-family: 'Tektur', sans-serif;
  font-weight: 900;
  font-size: 10rem !important; 
  margin-bottom: 1rem;
  white-space: nowrap; /* Запретить перенос строк */
}

#book6 { 
  background-image: url('../images/asheka-title.jpg') !important;
  background-size: cover !important;        /* Растянуть на весь экран */
  background-position: center !important;;   /* Центрировать */
  background-repeat: no-repeat;  /* Не размножать */
  background-color: transparent; /* Убрать заливку цветом, если она мешает */
  background-attachment: fixed;
  display: flex !important; /* Убедимся, что секция не схлопнулась */
}

#book7 { 
  background-image: url('../images/demon.jpg') !important;
  background-size: cover !important;        /* Растянуть на весь экран */
  background-position: center !important;;   /* Центрировать */
  background-repeat: no-repeat;  /* Не размножать */
  background-color: transparent; /* Убрать заливку цветом, если она мешает */
  background-attachment: fixed;
  display: flex !important; /* Убедимся, что секция не схлопнулась */
}

#book8 { 
  background-image: url('../images/blindes_bl.jpg') !important;
  background-size: cover !important;        /* Растянуть на весь экран */
  background-position: center !important;;   /* Центрировать */
  background-repeat: no-repeat;  /* Не размножать */
  background-color: black; /* Убрать заливку цветом, если она мешает */
  background-attachment: fixed;
  display: flex !important; /* Убедимся, что секция не схлопнулась */
}

section#book8 .header {
  width: 100%;
  margin-left: 0;
  color: white;
  font-family: 'Rubik Microbe', system-ui;
  font-weight: 400;
  font-size: 8vw !important; 
  font-style: normal;
  margin-bottom: 15vw;
/*  margin-left: 30rem;
/*  white-space: nowrap; /* Запретить перенос строк */
}

#book9 { 
  background-image: url('../images/israel_desert-sm.jpg') !important;
  background-size: cover !important;        /* Растянуть на весь экран */
  background-position: center !important;;   /* Центрировать */
  background-repeat: no-repeat;  /* Не размножать */
  background-color: transparent; /* Убрать заливку цветом, если она мешает */
  background-attachment: fixed;
  display: flex !important; /* Убедимся, что секция не схлопнулась */
}

section#book9 .header {
  width: 100%;
  margin-left: 0;
  color: black;
  font-family: 'Times New Roman', serif;
  font-weight: 200;
  font-size: 5vw !important; 
  font-style: normal;
  margin-bottom: 1rem;
/*  margin-left: 30rem;
/*  white-space: nowrap; /* Запретить перенос строк */
}

#book10 { 
  background-image: url('../images/piranesi_capricio.jpg') !important;
  background-size: cover !important;        /* Растянуть на весь экран */
  background-position: center !important;;   /* Центрировать */
  background-repeat: no-repeat;  /* Не размножать */
  background-color: transparent; /* Убрать заливку цветом, если она мешает */
  background-attachment: fixed;
  display: flex !important; /* Убедимся, что секция не схлопнулась */
}

section#book10 .header {
  width: 100%;
  margin-left: 0;
  color: white;
  font-family: 'TrixieCyr';
  font-weight: 400;
  font-size: 8rem !important; 
  font-style: normal;
  margin-bottom: 1rem;
/*  white-space: nowrap; /* Запретить перенос строк */
}

h1 { font-size: 3rem; margin-bottom: 1rem; font-style: italic; }
h2.nam { opacity: 0.5 !important; }
p.dedicata { font-style: italic; font-weight: lighter ; text-align: right; margin-right: 140pt !important;}
p.vers { font-size: 1.2rem; line-height: 1.3; white-space: pre-wrap; }
p.versright { font-size: 1.2rem; line-height: 1.3; white-space: pre-wrap;  margin-right: 140pt !important; }
p.date { font-style: italic; font-size: 0.8rem; line-height: 1.8; white-space: pre-wrap; opacity: 0.8; }
p.verslong {}
p.epigraph { font-weight: normal ; text-align: left; margin-left: 150pt !important; }


.page-number-wrapper {
    opacity: 1;
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 1000;
    pointer-events: none; /* Чтобы не мешала выделять текст 
}


/*
#current-page-num.flip {
    transform: translateY(-20px); /* Цифра как бы подпрыгивает при смене 
    opacity: 0;
}


#current-page-num.flip {
    transform: scale(1.4) translateY(-10px);
    opacity: 0;
    transition: none; /* Чтобы исчезла мгновенно, а появилась плавно 
}


.page-number-wrapper {
    position: sticky;
    top: 80%;
    left: 90%;
    /* bottom: 40px; 
    right: 40px;
    width: 40%px;   /* Важно: чтобы блок не растягивался на весь экран */
    /*height: auto;  /* Важно 
    z-index: 99999;
    background: yellow;
    pointer-events: none; /* Чтобы через него можно было кликать на обложки 
    color: #000;    /* Цвет цифры 
}

 */