/*
 * Real 3D Flipbook - turned-corner hint (CSS half), v8
 *
 * Positions the SVG drawn by 30-swipe-corner-hint.js:
 *   - mobile (swipe): over page 1, `.flipbook-carousel-page` exists only in swipe mode
 *   - desktop (WebGL): in an overlay layer over the canvas, placed on the cover by the JS
 * Only the curl itself takes taps; the rest of the book still swipes, drags and zooms.
 */

.flipbook-carousel-page svg.pf-swipe-curl {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    overflow: visible;
    pointer-events: none;
}

.pf-webgl-curl-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.pf-webgl-curl-layer svg.pf-swipe-curl {
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
    transform-origin: 0 0;
    pointer-events: none;
}

svg.pf-swipe-curl .pf-swipe-curl-hit {
    pointer-events: all;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}