/**
 * StPageFlip - Page Flip Animation CSS
 * Minimal styles for page flip effect
 */

.stf__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.stf__pages {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
}

.stf__pages_left {
    left: 0;
}

.stf__pages-right {
    right: 0;
}

.stf__pages_flip {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    transform-style: preserve-3d;
    perspective: 2000px;
}

.stf__page {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: hidden;
}

.stf__shadow {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stf__page-shadow {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Page flip animation */
@keyframes pageFlip {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(-180deg);
    }
}

/* Hard cover effect */
.stf__hard {
    box-shadow: inset 0 0 50px rgba(0,0,0,0.1);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .stf__wrapper {
        touch-action: pan-y;
    }
}