/* Matrix Grid Animation Styles */
.matrix-grid {
    position: relative;
    width: 100%;
    gap: 3px; /* Space between main blocks */
}

.matrix-cell {
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: fadeInBlock 0.6s ease-out forwards;
}

/* Subdivided blocks */
.subdivided-block {
    padding: 1.5px;
    background-color: transparent;
}

.subdivision-2x2 {
    /* 2x2 subdivision - medium sized blocks */
    gap: 3px;
}

.subdivision-4x4 {
    /* 4x4 subdivision - smaller blocks */
    gap: 2px;
}

.subdivision-8x8 {
    /* 8x8 subdivision - very fine detail blocks */
    gap: 1px;
}

.sub-cell {
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: fadeInSubCell 0.5s ease-out forwards;
}

.cell-black {
    background-color: var(--primary-black);
}

.cell-empty {
    background-color: transparent;
}

/* Animation for main blocks */
@keyframes fadeInBlock {
    from { 
        opacity: 0; 
        transform: scale(0.85) rotate(-2deg);
    }
    to { 
        opacity: 1; 
        transform: scale(1) rotate(0deg);
    }
}

/* Animation for sub-cells within subdivided blocks */
@keyframes fadeInSubCell {
    from { 
        opacity: 0; 
        transform: scale(0.7);
    }
    to { 
        opacity: 1; 
        transform: scale(1);
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* Ensure glyphs stay on top of the generated grid */
.glyph {
    z-index: 20;
    pointer-events: none; /* Let clicks pass through to grid if needed */
}