/* Image Reveal Animation Effect */

.image-reveal-container {
    position: relative;
    width: 250px;
    height: 250px;
    background: transparent;
    overflow: hidden;
    display: inline-block;
    /* Prevent animation until triggered */
}

.image-reveal-container:not(.reveal-triggered) .reveal-block {
    animation-play-state: paused;
    opacity: 0;
}

.image-reveal-container.reveal-triggered .reveal-block {
    animation-play-state: running;
}

.image-reveal-container img {
    /* Hide the original image */
    opacity: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reveal-block {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    animation: revealFadeBlink 1s ease-in-out forwards;
    /* Fix white lines between blocks */
    transform: translateZ(0); /* Force hardware acceleration */
    backface-visibility: hidden;
    /* Slightly overlap blocks to eliminate gaps */
    margin: -0.5px;
    width: calc(100% + 1px);
    height: calc(100% + 1px);
}

@keyframes revealFadeBlink {
    0% {
        opacity: 0;
        filter: brightness(2);
    }

    50% {
        opacity: 1;
        filter: brightness(0.6);
    }

    100% {
        opacity: 1;
        filter: brightness(1);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .image-reveal-container {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 480px) {
    .image-reveal-container {
        width: 180px;
        height: 180px;
    }
}

/* Accessibility - respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    .reveal-block {
        animation: none;
        opacity: 1;
    }
}
/* Optimized and deduplicated CSS for image-reveal.css */
/* The following styles have been optimized and deduplicated */
.image-reveal-container {
    position: relative;
    width: 250px;
    height: 250px;
    background: transparent;
    overflow: hidden;
    display: inline-block;
}
.image-reveal-container img {
    opacity: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.reveal-block {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    animation: revealFadeBlink 1s ease-in-out forwards;
    transform: translateZ(0);
    backface-visibility: hidden;
    margin: -0.5px;
    width: calc(100% + 1px);
    height: calc(100% + 1px);
}
@keyframes revealFadeBlink {
    0% { opacity: 0; filter: brightness(2); }
    50% { opacity: 1; filter: brightness(0.6); }
    100% { opacity: 1; filter: brightness(1); }
}
@media (max-width: 768px) {
    .image-reveal-container { width: 200px; height: 200px; }
}
@media (max-width: 480px) {
    .image-reveal-container { width: 180px; height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
    .reveal-block { animation: none; opacity: 1; }
}