/*
 * Glyph Background - CSS for M.C.A. Hogarth Website
 * Adds decorative Ai-Naidar script glyphs to the background
 */

/* Main container for the glyph background */
.glyph-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Place behind all content */
    pointer-events: none; /* Allow clicks to pass through to content */
    overflow: hidden;
}

/* Individual glyph styling */
.glyph {
    position: absolute;
    opacity: 0.05; /* Default opacity that works across themes */
    color: var(--text-color); /* Use the site's text color from time theme */
    transition: color 1.5s ease; /* Match your time theme transition speed */
}

/* Make SVG elements inherit color from parent */
.glyph svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Force SVG elements to use the parent color */
.glyph svg * {
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .glyph {
        /* Slightly reduce opacity on smaller screens */
        opacity: 0.03;
    }
}