/* Remove default text-shadow from h1 with blur effect */
h1[data-blur-processed] {
    text-shadow: none;
}

/* Container for the H1 blur effect */
.h1-blur-container {
    position: relative;
    display: inline-block;
    width: fit-content;
    max-width: 100%;
}

/* Base layer: Sharp bright text on top */
.h1-layer-sharp {
    position: relative;
    z-index: 2;
    display: block;
    color: #ffffff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
    filter: blur(0.5px);
}

/* Blur layer: Behind sharp text, visible at edges */
.h1-layer-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    display: block;
    /* Softer blur */
    filter: blur(2.5px);
    /* Mask: extended fade out */
    mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
    opacity: 0.9;
}