/* Tiled Background System */
.tiled-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.tile {
    position: absolute;
    transition: transform 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
    pointer-events: auto;
    filter: blur(0.5px);
    mix-blend-mode: screen;
}

.tile img,
.tile video {
    display: block;
    border-radius: inherit;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.tile-animate {
    animation: floatTile 20s ease-in-out infinite;
}

@keyframes floatTile {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
        opacity: inherit;
    }
    25% {
        transform: translateY(-20px) translateX(10px) rotate(2deg);
        opacity: inherit;
    }
    50% {
        transform: translateY(10px) translateX(-15px) rotate(-1deg);
        opacity: inherit;
    }
    75% {
        transform: translateY(-15px) translateX(5px) rotate(1deg);
        opacity: inherit;
    }
}

/* Different animation patterns for variety */
.tile-animate:nth-child(3n) {
    animation: floatTileSlow 30s ease-in-out infinite;
}

.tile-animate:nth-child(5n) {
    animation: floatTileFast 15s ease-in-out infinite;
}

.tile-animate:nth-child(7n) {
    animation: floatTileDiagonal 25s ease-in-out infinite;
}

@keyframes floatTileSlow {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }
    33% {
        transform: translateY(-30px) translateX(20px) rotate(3deg);
    }
    66% {
        transform: translateY(20px) translateX(-25px) rotate(-2deg);
    }
}

@keyframes floatTileFast {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }
    20% {
        transform: translateY(-15px) translateX(8px) rotate(2deg);
    }
    40% {
        transform: translateY(5px) translateX(-10px) rotate(-1deg);
    }
    60% {
        transform: translateY(-10px) translateX(6px) rotate(1deg);
    }
    80% {
        transform: translateY(8px) translateX(-5px) rotate(-0.5deg);
    }
}

@keyframes floatTileDiagonal {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-25px) translateX(25px) rotate(2deg);
    }
    50% {
        transform: translateY(15px) translateX(-20px) rotate(-1.5deg);
    }
    75% {
        transform: translateY(-20px) translateX(15px) rotate(1deg);
    }
}

/* Hover effects */
.tile:hover {
    filter: blur(0px) brightness(1.2);
    mix-blend-mode: normal;
    z-index: 10;
}

.tile img:hover,
.tile video:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Responsive design */
@media (max-width: 768px) {
    .tile {
        max-width: 80px;
        max-height: 80px;
    }

    .tile-animate {
        animation-duration: 30s !important;
    }

    @keyframes floatTile {
        0%, 100% {
            transform: translateY(0px) translateX(0px) rotate(0deg);
        }
        25% {
            transform: translateY(-10px) translateX(5px) rotate(1deg);
        }
        50% {
            transform: translateY(5px) translateX(-8px) rotate(-0.5deg);
        }
        75% {
            transform: translateY(-8px) translateX(3px) rotate(0.5deg);
        }
    }
}

@media (max-width: 480px) {
    .tile {
        max-width: 60px;
        max-height: 60px;
        filter: blur(0.8px);
    }

    .tile img,
    .tile video {
        filter: brightness(0.9);
    }
}

/* Performance optimizations */
.tile img {
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

.tile video {
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Loading states */
.tile img:not([src]),
.tile video:not([src]) {
    background: linear-gradient(45deg, #ff2ea6, #8b5cf6);
    opacity: 0.3;
}

/* Ensure main content stays above tiles */
main,
header,
footer,
#app-container {
    position: relative;
    z-index: 1;
}