/* Волшебная книга генераций — первый экран главной страницы.
   Файл идёт вдобавок к общим стилям сайта, а не вместо них: цвета, шрифт, кнопки
   и сброс отступов берутся оттуда, здесь только книга. Своего набора цветов
   заводить нельзя — сайт должен выглядеть одним целым. */

:root {
    /* Цвет страниц книги — единственный, которого нет в общем наборе */
    --бумага: #17171c;

    /* Ширина книги. Одна на всех: по ней равняется и сцена, и шапка */
    --ширина-книги: min(94vw, 82vh);

    /* Наклон книги. Вынесен в переменную: подбирать угол придётся глазами,
       и менять его удобнее в одном месте, чем в четырёх правилах.
       Страницы теперь высокие, и сильный наклон сплющивал бы их в полоску */
    --наклон: 15deg;
    --поворот: -1deg;

    /* Насколько переплёт выступает за страницы, по каждой стороне отдельно.
       Числа не на глаз: на картинке обложки тёмное поле занимает 119..1897 точек
       по ширине из 1999 и 45..1362 по высоте из 1387. Поле лежит не по центру —
       снизу кожи видно меньше, чем сверху, — поэтому четыре разных значения,
       а не два. Другая обложка — другие числа, но правятся они здесь */
    --переплёт-слева: 6.69%;
    --переплёт-справа: 5.74%;
    --переплёт-сверху: 3.42%;
    --переплёт-снизу: 1.9%;
}

/* ===== ЭКРАН С КНИГОЙ ===== */

.экран-книги {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Отступы скупые: всё, что не занял заголовок, достаётся книге.
       Высоту считаем за вычетом шапки — она висит сверху и место занимает */
    gap: clamp(10px, 1.6vh, 22px);
    min-height: calc(100vh - 150px);
    position: relative;

    /* Блок стоит снаружи колонки с содержимым, поэтому ширина у него полная:
       внутри колонки книга упиралась в её 1080 точек и теряла углы переплёта */
    padding: 0 10px 26px;

    /* Летящая страница на время переворота выходит далеко за края книги: библиотека
       рисует её тени с запасом в сотни точек. Из-за них окно растягивалось и справа
       выскакивала полоса прокрутки — на секунду, но страница от этого дёргалась.
       Обрезаем по обеим сторонам здесь, а не у всей страницы: hidden на теле
       документа ломает прилипшую шапку. clip делает то же самое, но не заводит
       собственную прокрутку */
    overflow: hidden;
    overflow: clip;
}

/* Свечение вокруг книги. Отдельным слоем во всю ширину окна, а не фоном блока:
   у блока есть поля и предельная ширина, и подсветка обрывалась о них ровными
   вертикальными границами. Здесь она гаснет в прозрачность задолго до краёв */
.экран-книги::before {
    content: "";
    position: absolute;
    inset: -80px 0 -80px 0;
    background: radial-gradient(58% 52% at 50% 44%, rgba(99, 102, 241, .22), rgba(99, 102, 241, 0) 70%);
    pointer-events: none;
    z-index: -1;
}

.заглавие {
    text-align: center;
    /* Размер пляшет вместе с шириной окна: на 4K заголовок должен быть крупным,
       на ноутбуке — помещаться в строку. Потолок сдержанный: заголовок делит
       экран с книгой, и каждый лишний десяток пикселей отнимается у неё */
    font-size: clamp(26px, 4vw, 62px);
    font-weight: 800;
    letter-spacing: clamp(1px, .35vw, 5px);
    line-height: 1.1;

    /* «Нейрокрафт.Арт.Генерации» браузер считает одним длинным словом: точки без
       пробелов перенос не разрешают. На телефоне такое слово распирало экран,
       и заголовок обрезался на полуслове */
    max-width: 100%;
    overflow-wrap: anywhere;

    /* Перелив: широкая градиентная лента ездит под буквами.
       Заливка видна только сквозь текст — за это отвечает background-clip */
    background: linear-gradient(100deg,
        #ffffff 0%,
        var(--лиловый) 18%,
        var(--салатовый) 34%,
        #ffffff 50%,
        var(--салатовый) 66%,
        var(--лиловый) 82%,
        #ffffff 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: перелив 9s linear infinite;
}

@keyframes перелив {
    from { background-position: 0% 50%; }
    to   { background-position: 300% 50%; }
}

/* Свечение под заголовком — отдельным слоем, чтобы не мешать заливке букв.
   Края гасим до полной прозрачности того же цвета: переход к слову transparent
   в некоторых браузерах идёт через серый, и по краям проступает мутная рамка */
.заглавие-обёртка { position: relative; }
.заглавие-обёртка::after {
    content: "";
    position: absolute;
    inset: 20% -10% -40% -10%;
    background: radial-gradient(60% 100% at 50% 50%, rgba(99, 102, 241, .30), rgba(99, 102, 241, 0) 72%);
    filter: blur(34px);
    z-index: -1;
}

/* ===== СЦЕНА С КНИГОЙ ===== */

.сцена {
    position: relative;
    width: 100%;
    /* Книга занимает около двух третей высоты экрана. Считаем через ширину, потому
       что растягивает библиотека именно по ширине: разворот шире своей высоты
       примерно в полтора раза, отсюда и множитель. Оставшаяся треть — заголовку
       и стрелкам: при книге во весь экран стрелки уезжали за нижний край */
    max-width: var(--ширина-книги);
    /* Место под книгу держим с самого начала: пока она грузится, высота была
       нулевой, и заголовок со стрелками стояли посреди экрана, а потом
       перепрыгивали. Пропорция та же, что у разворота — 1778 на 1317 точек */
    aspect-ratio: 1778 / 1317;
    display: flex;
    align-items: center;
    justify-content: center;
    /* perspective живёт на родителе: иначе у левой и правой страницы
       окажутся разные точки схода и разворот развалится пополам */
    perspective: 2600px;
    perspective-origin: 50% 30%;
}

/* Наклонённая обёртка. Класс, а не идентификатор: под ним лежат и переплёт,
   и сама книга, и наклоняться они должны вместе.

   Книга не возникает рывком, а выплывает: пока грузятся первые работы, зритель
   видит движение, а не пустое место — ожидание перестаёт читаться как затык */
.книга {
    position: relative;
    width: 100%;
    opacity: 0;
    transform: rotateX(var(--наклон)) rotateZ(var(--поворот)) scale(.94) translateY(26px);
    /* Без preserve-3d: библиотека переворачивает страницу своими трёхмерными
       превращениями, и внутри чужого объёмного слоя летящая страница выскакивала
       вбок и возвращалась. Наклон от этого не страдает — вложенного объёма у нас нет */
    transform-style: flat;
    transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.22, .61, .36, 1);
}

.книга.появилась {
    opacity: 1;
    transform: rotateX(var(--наклон)) rotateZ(var(--поворот));
}


/* Переплёт — картинка под страницами. У неё вырезан фон, поэтому ни заливки,
   ни скругления под ней быть не должно: за краями кожи торчал бы прямоугольник.
   Тень по той же причине рисуем фильтром — он повторяет очертания книги,
   а обычная тень легла бы рамкой вокруг пустоты */
.переплёт {
    position: absolute;
    inset:
        calc(-1 * var(--переплёт-сверху))
        calc(-1 * var(--переплёт-справа))
        calc(-1 * var(--переплёт-снизу))
        calc(-1 * var(--переплёт-слева));
    background: url("/static/kniga/pereplet.webp") center / 100% 100% no-repeat;
    filter: drop-shadow(0 26px 42px rgba(0, 0, 0, .6));
    z-index: 0;
}

/* Страницы поверх переплёта: без своего слоя они уходят под подложку */
#книга { position: relative; z-index: 1; }

/* Тень на «столе» рисует переплёт — отдельный слой под книгой больше не нужен */

/* Размеры страниц проставит библиотека, наше дело — вид. Ширину задаём явно:
   библиотека растягивает книгу по ширине этого блока, а пустой блок внутри
   выключки по центру схлопывается в ноль */
#книга { width: 100%; margin: 0 auto; }

/* ===== СТРАНИЦЫ ===== */

/* Страницы существуют только внутри книги. Оставшись сами по себе — при сбое
   сборки или после роспуска, — они разворачивались простынёй текста во весь экран.
   Страницу, лежащую прямо в обёртке книги, не показываем: место ей внутри */
.книга > .page { display: none; }

.лист {
    background: var(--бумага);
    overflow: hidden;
}

/* Тонкая полоска у корешка — она даёт ощущение толщины разворота */
.лист--лево  { box-shadow: inset -22px 0 34px -26px rgba(0, 0, 0, .95); }
.лист--право { box-shadow: inset  22px 0 34px -26px rgba(0, 0, 0, .95); }

/* Картинка занимает страницу целиком: это витрина, поля тут не нужны */
.лист-картинка {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Строчка по краю страницы — пунктир, как настоящий шов по канту */
.лист--лево::after,
.лист--право::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px dashed rgba(255, 255, 255, .14);
    border-radius: 4px;
    pointer-events: none;
}

/* --- правая страница: промпт и кнопка --- */

.подсказка-листа {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vh, 14px);
    /* Прибиваем к листу, а не тянем в высоту содержимым: длинный промпт растил
       страницу, и кнопка уезжала за нижний край. Высота в процентах тут не
       помогает — библиотека кладёт страницу в свои обёртки, и наследовать её не от чего */
    position: absolute;
    inset: 0;
    padding: clamp(16px, 2.4vw, 38px);
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(99, 102, 241, .10), transparent 60%),
        var(--бумага);
}

.стиль-метка {
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(0, 255, 136, .12);
    color: var(--салатовый);
    font-size: clamp(11px, .9vw, 13px);
    font-weight: 600;
    letter-spacing: .5px;
}

.подпись-картинки {
    font-size: clamp(17px, 1.8vw, 30px);
    font-weight: 700;
    line-height: 1.2;
}

.подсказка-текст {
    /* Занимает всё, что осталось от кнопки, и не больше. Длинный промпт
       не влезает целиком — он просто гаснет книзу, и видно, что текст продолжается */
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
    padding: clamp(10px, 1.4vw, 18px);
    border: 1px solid var(--граница);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    color: #cfd2dc;
    font-family: 'Consolas', 'SFMono-Regular', monospace;
    font-size: clamp(11px, 1vw, 15px);
    line-height: 1.5;
}

/* Кнопка не сжимается и не уступает место тексту: ради неё страницу и открывают */
.строка-кнопок { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; flex: 0 0 auto; }

/* Кнопка общая, из основных стилей: здесь только подгоняем её под мелкую страницу */
.строка-кнопок .кнопка { font-size: clamp(12px, 1vw, 15px); padding: 10px 18px; }

/* Рекомендуемая модель. Стоит рядом с копированием, но спорить с ним не должна:
   главное действие — забрать промпт, а модель это пояснение к нему.
   Надпись мелкая сверху, название крупнее снизу — так пара читается одним взглядом */
/* Селектор такой же длины, как у соседней кнопки: иначе её отступы перебивают наши,
   и подпись из двух строчек распирает страницу */
.строка-кнопок .метка-модели {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding: 6px 16px;
    text-decoration: none;
    line-height: 1.25;
}

.метка-модели .надпись-модели {
    font-size: clamp(9px, .72vw, 11px);
    font-weight: 500;
    letter-spacing: .4px;
    opacity: .7;
}

/* Название выделяем цветом площадки: это ссылка, и видно, что по ней можно пойти */
.метка-модели .имя-модели {
    font-size: clamp(11px, .95vw, 14px);
    font-weight: 700;
    color: var(--салатовый);
}

/* Подпись без ссылки: описания стиля нет, идти некуда — и вид у неё спокойнее */
span.метка-модели { cursor: default; }
span.метка-модели .имя-модели { color: var(--текст); }
span.метка-модели:hover { transform: none; box-shadow: none; }

/* ===== ЛИСТАНИЕ ===== */

.управление {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: clamp(12px, 2vh, 26px);
}

.стрелка {
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--граница);
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    color: var(--текст);
    font-size: 18px;
    cursor: pointer;
    transition: all .2s;
}
.стрелка:hover { background: rgba(99, 102, 241, .25); border-color: var(--лиловый); }

/* ===== ТЕЛЕФОНЫ ===== */

@media (max-width: 760px) {
    /* Показывается одна страница вместо разворота, и она узкая: при заметном наклоне
       такая страница читается уже плохо, поэтому книгу почти выпрямляем */
    :root { --наклон: 8deg; --поворот: 0deg; }
    .экран-книги { gap: 16px; min-height: calc(100vh - 190px); }

    /* Название целиком в строку тут не встаёт: уменьшаем его и убираем разрядку,
       чтобы оно помещалось само, а не переносилось посреди слова */
    .заглавие { font-size: clamp(17px, 5.4vw, 30px); letter-spacing: 0; }
    /* Здесь видна одна страница, а не разворот: она высокая, и в те же две трети
       экрана помещается ширина примерно вдвое меньшая, чем на большом мониторе */
    /* Здесь видна одна страница, поэтому и место под неё держим по одной странице */
    .сцена { max-width: min(92vw, 38vh); aspect-ratio: 889 / 1317; }

    /* Обложка нарисована раскрытой, а страница здесь одна — растянутый на неё
       разворот выглядел бы обрезком. Оставляем простую тёмную подложку */
    .переплёт {
        inset: -3% -4%;
        background: linear-gradient(145deg, #241f2e, #14121a);
        border-radius: 8px;
        filter: none;
        box-shadow: 0 18px 34px rgba(0, 0, 0, .5);
    }
    .подсказка-листа { padding: 14px; }
    .управление { margin-top: 22px; }
}

/* Кому движение мешает — тому статичный заголовок и мгновенный переворот.
   Настройка системная, спрашивать о ней человека не нужно */
@media (prefers-reduced-motion: reduce) {
    .заглавие { animation: none; background-position: 40% 50%; }
    /* Книга появляется сразу и на месте — без выплывания и без плавности */
    .книга {
        transition: none;
        opacity: 1;
        transform: rotateX(var(--наклон)) rotateZ(var(--поворот));
    }
    * { scroll-behavior: auto; }
}