/* =========================================
   FLOATING PHOTO SYSTEM (Desktop)
   ========================================= */

#floating-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9; /* Below #blog-info (z-index 10), Above UI/BG */
    pointer-events: none; /* Allow clicks to pass through empty areas */
    overflow: hidden; /* Contain explosions */
}

#lines-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 8; /* Below photos */
    pointer-events: none;
}

#lines-layer path {
    fill: none;
    stroke: var(--pop-cyan);
    stroke-width: 2;
    stroke-dasharray: 8, 4;
    filter: drop-shadow(2px 2px 0px var(--pop-black));
    vector-effect: non-scaling-stroke;
}

.floating-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 0; 
    height: 0;
    pointer-events: auto; /* Enable interaction on the photo wrapper */
    cursor: grab;
    will-change: transform;
    /* Transformation handled by JS */
}

.floating-wrapper:active {
    cursor: grabbing;
    z-index: 100;
}

.floating-photo {
    /* Pop Art Polaroid Style */
    width: 220px;
    height: 260px;
    background: var(--pop-white);
    border: 3px solid var(--pop-black);
    box-shadow: 8px 8px 0px rgba(0,0,0,0.8);
    padding: 12px 12px 50px 12px; /* Bottom padding for Polaroid look */
    box-sizing: border-box;
    
    /* Centering content */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Typography */
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    color: var(--pop-black);
    font-size: 1rem;
    text-align: center;
    
    /* Interaction */
    user-select: none;
    transition: box-shadow 0.2s, transform 0.2s;
    
    /* Position relative to wrapper (center it) */
    position: absolute;
    top: -130px; /* Half of height */
    left: -110px; /* Half of width */
}

.floating-photo:hover {
    box-shadow: 12px 12px 0px var(--pop-pink);
    border-color: var(--pop-pink);
    transform: scale(1.05);
}

.floating-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid var(--pop-black);
    pointer-events: none; /* Prevent browser drag */
    background: #eee;
}

.floating-photo span {
    word-break: break-word;
    padding: 10px;
}