/* Cursor Spotlight Block — bkbg-cs-* */

.bkbg-cs-app { display: block; }

.bkbg-cs-section {
    position: relative;
    overflow: hidden;
    cursor: none;
}

/* Background image layer */
.bkbg-cs-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dark overlay — has a hole punched where the spotlight is */
.bkbg-cs-dim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    transition: background 0.05s;
}

/* Content layer */
.bkbg-cs-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px 32px;
    box-sizing: border-box;
}

.bkbg-cs-content .bkbg-cs-heading {
    margin: 0;
    font-family: var(--bkbg-cs-hdg-font-family, inherit);
    font-size: var(--bkbg-cs-hdg-font-size-d, var(--bkbg-cs-hdg-fs, 48px));
    font-weight: var(--bkbg-cs-hdg-font-weight, var(--bkbg-cs-hdg-fw, 800));
    font-style: var(--bkbg-cs-hdg-font-style, normal);
    text-transform: var(--bkbg-cs-hdg-text-transform, none);
    text-decoration: var(--bkbg-cs-hdg-text-decoration, none);
    letter-spacing: var(--bkbg-cs-hdg-letter-spacing-d, normal);
    line-height: var(--bkbg-cs-hdg-line-height-d, 1.15);
    word-spacing: var(--bkbg-cs-hdg-word-spacing-d, normal);
}

.bkbg-cs-subtext {
    margin: 16px 0 0;
    font-family: var(--bkbg-cs-sub-font-family, inherit);
    font-size: var(--bkbg-cs-sub-font-size-d, var(--bkbg-cs-sub-fs, 18px));
    font-weight: var(--bkbg-cs-sub-font-weight, normal);
    font-style: var(--bkbg-cs-sub-font-style, normal);
    text-transform: var(--bkbg-cs-sub-text-transform, none);
    text-decoration: var(--bkbg-cs-sub-text-decoration, none);
    letter-spacing: var(--bkbg-cs-sub-letter-spacing-d, normal);
    line-height: var(--bkbg-cs-sub-line-height-d, 1.5);
    word-spacing: var(--bkbg-cs-sub-word-spacing-d, normal);
    opacity: 0.8;
    max-width: 600px;
}

/* ── Typography responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .bkbg-cs-content .bkbg-cs-heading {
        font-size: var(--bkbg-cs-hdg-font-size-t, var(--bkbg-cs-hdg-font-size-d, var(--bkbg-cs-hdg-fs, 48px)));
        letter-spacing: var(--bkbg-cs-hdg-letter-spacing-t, var(--bkbg-cs-hdg-letter-spacing-d, normal));
        line-height: var(--bkbg-cs-hdg-line-height-t, var(--bkbg-cs-hdg-line-height-d, 1.15));
        word-spacing: var(--bkbg-cs-hdg-word-spacing-t, var(--bkbg-cs-hdg-word-spacing-d, normal));
    }
    .bkbg-cs-subtext {
        font-size: var(--bkbg-cs-sub-font-size-t, var(--bkbg-cs-sub-font-size-d, var(--bkbg-cs-sub-fs, 18px)));
        letter-spacing: var(--bkbg-cs-sub-letter-spacing-t, var(--bkbg-cs-sub-letter-spacing-d, normal));
        line-height: var(--bkbg-cs-sub-line-height-t, var(--bkbg-cs-sub-line-height-d, 1.5));
        word-spacing: var(--bkbg-cs-sub-word-spacing-t, var(--bkbg-cs-sub-word-spacing-d, normal));
    }
}
@media (max-width: 767px) {
    .bkbg-cs-content .bkbg-cs-heading {
        font-size: var(--bkbg-cs-hdg-font-size-m, var(--bkbg-cs-hdg-font-size-t, var(--bkbg-cs-hdg-font-size-d, var(--bkbg-cs-hdg-fs, 48px))));
        letter-spacing: var(--bkbg-cs-hdg-letter-spacing-m, var(--bkbg-cs-hdg-letter-spacing-t, var(--bkbg-cs-hdg-letter-spacing-d, normal)));
        line-height: var(--bkbg-cs-hdg-line-height-m, var(--bkbg-cs-hdg-line-height-t, var(--bkbg-cs-hdg-line-height-d, 1.15)));
        word-spacing: var(--bkbg-cs-hdg-word-spacing-m, var(--bkbg-cs-hdg-word-spacing-t, var(--bkbg-cs-hdg-word-spacing-d, normal)));
    }
    .bkbg-cs-subtext {
        font-size: var(--bkbg-cs-sub-font-size-m, var(--bkbg-cs-sub-font-size-t, var(--bkbg-cs-sub-font-size-d, var(--bkbg-cs-sub-fs, 18px))));
        letter-spacing: var(--bkbg-cs-sub-letter-spacing-m, var(--bkbg-cs-sub-letter-spacing-t, var(--bkbg-cs-sub-letter-spacing-d, normal)));
        line-height: var(--bkbg-cs-sub-line-height-m, var(--bkbg-cs-sub-line-height-t, var(--bkbg-cs-sub-line-height-d, 1.5)));
        word-spacing: var(--bkbg-cs-sub-word-spacing-m, var(--bkbg-cs-sub-word-spacing-t, var(--bkbg-cs-sub-word-spacing-d, normal)));
    }
}

.bkbg-cs-hint {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.5;
    white-space: nowrap;
    z-index: 3;
    pointer-events: none;
    transition: opacity 0.4s;
}

.bkbg-cs-section.bkbg-cs-active .bkbg-cs-hint {
    opacity: 0;
}

/* Custom cursor dot */
.bkbg-cs-cursor-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
    z-index: 10;
    transform: translate(-50%, -50%);
    opacity: 0.9;
    mix-blend-mode: difference;
}