/* ========================================
   RASTI - Collage Images & Animations
   ======================================== */

/* Collage Image Slots (containers) */
.collage-img {
    position: absolute;
    width: 280px;
    height: auto;
    cursor: pointer;
    transition: all 0.7s ease-in-out;
}

/* Images inside slots */
.collage-img-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 2s ease-in-out, transform 0.3s ease, filter 0.3s ease;
    pointer-events: none;
    /* Drop shadow with magical glow effect - uses theme color */
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--primary) 30%, transparent)) drop-shadow(0 0 25px color-mix(in srgb, var(--primary) 20%, transparent)) drop-shadow(0 12px 20px color-mix(in srgb, var(--primary) 25%, transparent));
}

.collage-img-inner.active {
    opacity: 1;
    pointer-events: auto;
}

.collage-img-inner:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 15px color-mix(in srgb, var(--primary) 40%, transparent)) drop-shadow(0 0 30px color-mix(in srgb, var(--primary) 30%, transparent)) drop-shadow(0 15px 25px color-mix(in srgb, var(--primary) 35%, transparent)) brightness(1.03);
}

/* Image 1: Top Left - Libro abierto (destacado) */
.collage-img-1 {
    top: -110px;
    left: -90px;
    width: 380px;
    transform: rotate(-9deg);
    animation: float1 7s ease-in-out infinite;
    z-index: 4;
}

/* Image 2: Center Right (largest, most prominent - open book) */
.collage-img-2 {
    top: -20px;
    right: 40px;
    width: 310px;
    transform: rotate(4deg);
    animation: float2 8s ease-in-out infinite;
    z-index: 2;
}

/* Image 3: Bottom Left */
.collage-img-3 {
    top: 140px;
    left: 0;
    width: 260px;
    transform: rotate(-3deg);
    animation: float3 6.5s ease-in-out infinite;
    z-index: 1;
}

/* Floating Animations */
@keyframes float1 {

    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-15px) rotate(0deg);
    }
}

@keyframes float2 {

    0%,
    100% {
        transform: translateY(0) rotate(4deg);
    }

    50% {
        transform: translateY(-20px) rotate(6deg);
    }
}

@keyframes float3 {

    0%,
    100% {
        transform: translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateY(-12px) rotate(-5deg);
    }
}