/* Canvas CSS - Infinite canvas viewport and positioning */

/* Background Layer */
.background-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

/* Viewport - the visible window */
.viewport {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.viewport.dragging {
    cursor: grabbing;
}

/* Canvas - the infinite world */
.canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    will-change: transform;
}

/* Card positioning states */
.card {
    will-change: transform;
    transform-origin: center center;
}

/* Prevent text selection while dragging */
.viewport.dragging .card {
    pointer-events: none;
}

/* Allow interactions when not dragging */
.card a,
.card button,
.card iframe {
    pointer-events: auto;
    cursor: pointer;
}

/* Zoom levels */
.canvas[data-zoom="out"] .card {
    transform-origin: center center;
}

/* Performance optimization */
.card {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .viewport {
        cursor: default;
    }

    .viewport.dragging {
        cursor: default;
    }

    /* Larger touch targets */
    .pdf-link {
        padding: 0.75rem 1.25rem;
        min-height: 44px;
    }

    .link-list a {
        padding: 1rem 1.25rem;
        min-height: 44px;
    }
}

/* High DPI optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .canvas {
        -webkit-font-smoothing: subpixel-antialiased;
    }
}