/* ============================================================
   enhance.css  —  quiet motion layer for BrizZ
   Direction: dark + Mont-fort restraint. Smooth reveals only,
   no parallax/glow/sheen. Loaded AFTER styles.css + page CSS.
   Gated behind .js-enh; honors prefers-reduced-motion.
   ============================================================ */

/* ---- Thin scroll progress ---- */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 1px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--accent);
    opacity: 0.7;
    z-index: 250;
    will-change: transform;
    pointer-events: none;
}

/* ---- Scroll reveal (quiet) ---- */
.js-enh [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
    will-change: opacity, transform;
}
.js-enh [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---- Custom trailing cursor ---- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
    .js-enh .cursor { display: block; position: fixed; top: 0; left: 0; z-index: 600; pointer-events: none; mix-blend-mode: difference; }
    .cursor-dot {
        position: fixed; top: 0; left: 0;
        width: 6px; height: 6px; border-radius: 50%;
        background: #fff; transform: translate(-50%, -50%);
        will-change: transform;
    }
    .cursor-ring {
        position: fixed; top: 0; left: 0;
        width: 32px; height: 32px; border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.55);
        transform: translate(-50%, -50%);
        transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out),
                    border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
        will-change: transform;
    }
    .cursor.is-hover .cursor-ring {
        width: 56px; height: 56px;
        border-color: rgba(255, 255, 255, 0.9);
        background: rgba(255, 255, 255, 0.08);
    }
    html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
    html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }
}

/* ---- Live HUD readout ---- */
.hud {
    position: fixed;
    bottom: 18px; right: 20px;
    z-index: 200;
    display: flex;
    gap: 16px;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s var(--ease-out);
}
.js-enh .hud { opacity: 0.7; }
.hud b { color: var(--accent); font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 768px) { .hud { display: none; } }

/* ---- Staggered word reveal on headings ---- */
.js-enh .split-done .w { display: inline-block; }
.js-enh .split-done .w-in {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.5em);
    transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out);
    will-change: opacity, transform;
}
.js-enh .split-done.in .w-in { opacity: 1; transform: none; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .js-enh [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .scroll-progress { display: none; }
    .js-enh .cursor { display: none !important; }
    html.has-cursor, html.has-cursor * { cursor: auto !important; }
    .js-enh .split-done .w-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}