* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; background: radial-gradient(circle at center, #1a1c29 0%, #090a0f 100%);
    font-family: sans-serif; overflow: hidden;
}

#particles-container { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

.particle {
    position: absolute; bottom: -20px; background: rgba(255, 215, 100, 0.8);
    border-radius: 50%; box-shadow: 0 0 10px rgba(255, 215, 100, 0.8);
    animation: floatUp linear infinite, pulse ease-in-out infinite alternate;
}

@keyframes floatUp {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translateY(-100vh) scale(0.5); opacity: 0; }
}

@keyframes pulse { to { transform: scale(1.2); opacity: 1; } }

.book {
    position: relative; width: 800px; max-width: 95%; height: 600px;
    perspective: 3000px; z-index: 10;
}

.page {
    position: absolute; top: 0; right: 0; width: 50%; height: 100%;
    transform-style: preserve-3d; transform-origin: left center;
    transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
    cursor: pointer; border-radius: 5px 15px 15px 5px;
    /* Базовое положение в правой стопке */
    transform: rotateY(0deg) translateZ(calc(var(--page-z) * 1px));
}

.page.flipped {
    /* Поворот вокруг оси + сохранение порядка в левой стопке */
    transform: rotateY(-180deg) translateZ(calc(var(--page-z) * 1px));
}

.front, .back {
    position: absolute; inset: 0; backface-visibility: hidden;
    border-radius: inherit; overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.front {
    z-index: 2; background: #fff;
    transform: translateZ(0.5px); /* Минимальный зазор для четкости */
}

.front img {
    width: 100%; height: 100%; object-fit: contain; display: block;
}

.back {
    background: #fdfaf3; transform: rotateY(180deg) translateZ(0.5px);
    box-shadow: inset -10px 0 30px rgba(0,0,0,0.1);
}

.book::after {
    content: ''; position: absolute; inset: 0 0 0 calc(50% - 15px);
    width: 30px; background: linear-gradient(to right, transparent, rgba(0,0,0,0.2) 50%, transparent);
    z-index: 20; pointer-events: none;
}

@media (max-width: 800px) {
    .book { height: 70vh; perspective: 4000px; }
    .page { width: 100%; }
    .book::after { display: none; }
    .particle { box-shadow: none; }
}

/* Стили оверлея свайпа из прошлого шага */
.swipe-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; pointer-events: none; visibility: hidden; opacity: 0;
}

@media (max-width: 800px) {
    .swipe-overlay { visibility: visible; opacity: 1; animation: fadeOut 0.8s forwards 3s; }
}

@keyframes fadeOut { to { opacity: 0; visibility: hidden; } }