/* Dynamic Shadow System CSS */
.shadow-header {
    position: relative;
    z-index: 1;
}

.shadow-header::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: var(--dss-shadow-color, hsla(0, 0%, 0%, 0.1));
    -webkit-text-stroke: 4px var(--dss-shadow-color, hsla(0, 0%, 0%, 0.1));
    z-index: -1;
    pointer-events: none;
    text-align: inherit;
    white-space: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

.shadow-header::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: var(--dss-shadow-color, hsla(0, 0%, 0%, 0.1));
    -webkit-text-stroke: 3px var(--dss-shadow-color, hsla(0, 0%, 0%, 0.1));
    z-index: -2;
    transition: transform 0.1s ease-out;
    pointer-events: none;
    transform: translate(var(--shadow-x, 8px), var(--shadow-y, 8px));
    text-align: inherit;
    white-space: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

.shadow-container {
    position: relative;
    z-index: 1;
}

.shadow-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dss-shadow-color, hsla(0, 0%, 0%, 0.1));
    border-radius: inherit;
    border: 4px solid var(--dss-shadow-color, hsla(0, 0%, 0%, 0.1));
    z-index: -1;
    transition: transform 0.1s ease-out;
    transform: translate(var(--shadow-x, 8px), var(--shadow-y, 8px));
}