/**
 * Floating Photos v2 — CSS-driven animations
 *
 * All motion is handled by CSS keyframes.
 * JS only spawns/removes elements and sets CSS custom properties.
 * No per-frame JS style mutations.
 */

/* Container — clips photos to section bounds */
.floating-photos-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
    contain: layout style;
}

/* Base photo element */
.fp-photo {
    position: absolute;
    bottom: -20%; /* Start below section */
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    pointer-events: auto;
    cursor: pointer;
    opacity: 0;

    /* CSS animation — all motion handled here */
    animation: fpFloat var(--fp-duration, 20s) linear forwards;

    /* Scale and rotation from JS custom properties */
    transform: scale(var(--fp-scale, 1)) rotate(var(--fp-rotation, 0deg));

    /* Only promote to compositor layer */
    will-change: transform, opacity;
    contain: layout style paint;
}

/* Initial spawn — starts mid-section instead of bottom */
.fp-photo.fp-initial {
    animation-name: fpFloatInitial;
    --fp-start-y: var(--fp-start, 50%);
}

/* Photo image */
.fp-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
    /* Prevent image dragging */
    -webkit-user-drag: none;
    user-select: none;
}

/* === DEPTH LAYERS === */

/* Far layer — smaller, dimmer, slower */
.fp-far {
    opacity: 0;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.6);
    filter: brightness(0.88) saturate(0.8);
}

/* Mid layer — medium, balanced */
.fp-mid {
    opacity: 0;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.85);
}

/* Near layer — large, vivid, fastest */
.fp-near {
    opacity: 0;
    border-width: 3px;
    border-color: rgba(255, 255, 255, 1);
    filter: contrast(1.05) saturate(1.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* === HOVER EFFECTS === */
.fp-photo:hover {
    animation-play-state: paused;
    z-index: 30 !important;
    border-color: var(--lima-bean-green, #7C991F);
    box-shadow: 0 12px 40px rgba(124, 153, 31, 0.35);
    transform: scale(calc(var(--fp-scale, 1) * 1.15)) rotate(var(--fp-rotation, 0deg));
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* === KEYFRAMES === */

/* Normal float: bottom to top */
@keyframes fpFloat {
    0% {
        transform: translateY(0) scale(var(--fp-scale, 1)) rotate(var(--fp-rotation, 0deg));
        opacity: 0;
    }
    5% {
        opacity: var(--fp-opacity, 0.85);
    }
    90% {
        opacity: var(--fp-opacity, 0.85);
    }
    100% {
        transform: translateY(calc(-100% - 100vh)) scale(var(--fp-scale, 1)) rotate(var(--fp-rotation, 0deg));
        opacity: 0;
    }
}

/* Initial float: starts at a specific position */
@keyframes fpFloatInitial {
    0% {
        transform: translateY(0) scale(var(--fp-scale, 1)) rotate(var(--fp-rotation, 0deg));
        bottom: var(--fp-start-y, 50%);
        opacity: 0;
    }
    5% {
        opacity: var(--fp-opacity, 0.85);
    }
    90% {
        opacity: var(--fp-opacity, 0.85);
    }
    100% {
        transform: translateY(-100vh) scale(var(--fp-scale, 1)) rotate(var(--fp-rotation, 0deg));
        bottom: var(--fp-start-y, 50%);
        opacity: 0;
    }
}

/* === MOBILE === */
@media (max-width: 768px) {
    .fp-photo {
        /* Smaller on mobile */
        border-radius: 8px;
    }

    .fp-far {
        /* Even smaller on mobile */
        border-width: 1px;
    }

    .fp-near {
        border-width: 2px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    /* Disable hover effects on touch */
    .fp-photo:hover {
        animation-play-state: running;
        transform: scale(var(--fp-scale, 1)) rotate(var(--fp-rotation, 0deg));
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        border-color: rgba(255, 255, 255, 0.85);
    }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    .fp-photo {
        animation: none;
        opacity: var(--fp-opacity, 0.85) !important;
        position: absolute;
    }

    .floating-photos-container {
        display: none;
    }
}