/* ── Watch overlay ── */

#watch-overlay {
    position: fixed; inset: 0; z-index: 9000;
    display: grid; place-items: center;
    cursor: pointer; overflow: hidden;
    opacity: 0; transform: scale(0.985);
    transition: opacity 220ms ease, transform 220ms ease;
    pointer-events: none;
}
#watch-overlay.visible {
    opacity: 1; transform: scale(1);
    pointer-events: auto;
}
#watch-overlay.hidden { display: none; }

#watch-darkening {
    position: absolute; inset: 0;
    background: #000; opacity: 0.8;
    pointer-events: none;
    backdrop-filter: blur(var(--ui-blur-overlay, 0px));
    -webkit-backdrop-filter: blur(var(--ui-blur-overlay, 0px));
}

#watch-analog {
    position: relative; z-index: 1;
    width: min(78vmin, 720px);
    aspect-ratio: 1;
}
#watch-dial {
    position: relative; width: 100%; height: 100%;
    border-radius: 50%;
}
.watch-layer {
    position: absolute; inset: 0;
    transform-origin: 50% 50%;
    will-change: transform;
}
.watch-layer svg { display: block; width: 100%; height: 100%; }

#watch-layer-digits { z-index: 1; filter: drop-shadow(0 0 12px rgba(0,0,0,0.8)); }
#watch-layer-hour { z-index: 3; }
#watch-layer-minute { z-index: 2; }
#watch-layer-second { z-index: 4; }

#watch-second-wobble {
    width: 100%; height: 100%;
    transform-origin: 50% 50%;
    transition: transform 92ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* Dark theme (default): white hands/markers */
#watch-overlay {
    --watch-svg-markers-fill: #fff;
    --watch-svg-hour-fill: var(--t-accent, #68c6ed);
    --watch-svg-minute-fill: #fff;
    --watch-svg-second-fill: var(--t-accent, #68c6ed);
}

/* Light theme: black hands/markers */
@media (prefers-color-scheme: light) {
    #watch-overlay {
        --watch-svg-markers-fill: #111;
        --watch-svg-hour-fill: var(--t-accent, #2563eb);
        --watch-svg-minute-fill: #111;
        --watch-svg-second-fill: var(--t-accent, #2563eb);
    }
    #watch-darkening { background: #fff; opacity: 0.85; }
    #watch-layer-digits { filter: drop-shadow(0 0 12px rgba(255,255,255,0.6)); }
}

/* Also detect hyprcrd's own theme mode via body class / data attribute */
body.light-theme #watch-overlay,
[data-theme-mode="light"] #watch-overlay {
    --watch-svg-markers-fill: #111;
    --watch-svg-hour-fill: var(--t-accent, #2563eb);
    --watch-svg-minute-fill: #111;
    --watch-svg-second-fill: var(--t-accent, #2563eb);
}
body.light-theme #watch-darkening,
[data-theme-mode="light"] #watch-darkening {
    background: #fff; opacity: 0.85;
}
body.light-theme #watch-layer-digits,
[data-theme-mode="light"] #watch-layer-digits {
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.6));
}

@media (prefers-reduced-motion: reduce) {
    #watch-overlay { transition: none !important; }
    #watch-second-wobble { transition: none !important; }
}