/* public/app/css/visual-rich.css
 * Synopsis: Orchestrateur mode Ultra (tokens globaux).
 * Objectif: Cohérence chrome dashboard sans changer les ratios.
 */

html[data-vok-visual="ultra"] {
    --vu-glow: color-mix(in srgb, var(--dash-accent) 42%, transparent);
    --vu-edge: color-mix(in srgb, var(--dash-accent) 55%, var(--dash-line));
    --vu-lift: 0 10px 24px color-mix(in srgb, var(--dash-text) 10%, transparent);
    --vu-inset: inset 0 1px 0 color-mix(in srgb, #fff 36%, transparent);
}

html[data-vok-visual="ultra"] .dash .dash-panel {
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--dash-accent) 7%, transparent), transparent 42%),
        var(--dash-elev);
    border-color: color-mix(in srgb, var(--dash-accent) 22%, var(--dash-line));
    box-shadow:
        var(--vu-inset),
        0 1px 0 color-mix(in srgb, var(--dash-line) 70%, transparent),
        var(--vu-lift);
    position: relative;
}

html[data-vok-visual="ultra"] .dash .dash-panel::before {
    background: linear-gradient(180deg, var(--dash-accent), transparent 78%);
    border-radius: var(--dash-radius) 0 0 var(--dash-radius);
    content: '';
    inset: 0 auto 0 0;
    opacity: .55;
    pointer-events: none;
    position: absolute;
    width: 3px;
}

html[data-vok-visual="ultra"] .dash .dash-label {
    letter-spacing: .02em;
    text-shadow: 0 0 .6rem color-mix(in srgb, var(--dash-accent) 18%, transparent);
}

html[data-vok-visual="ultra"] .dash .dash-brand__mark {
    animation: dash-brand-glow 2.8s ease-in-out infinite;
}

html[data-vok-visual="ultra"] .dash .dash-status {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--dash-accent) 32%, transparent),
        0 0 18px color-mix(in srgb, var(--dash-accent) 16%, transparent);
}

html[data-vok-visual="ultra"] .dash.dash--fs {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--dash-accent) 38%, transparent);
}

html[data-vok-visual="ultra"] .dictee-teaser {
    box-shadow:
        0 12px 28px color-mix(in srgb, var(--ink) 14%, transparent),
        0 28px 56px color-mix(in srgb, var(--ink) 12%, transparent);
}

html[data-vok-visual="ultra"] .dictee-teaser:hover {
    box-shadow:
        0 16px 32px color-mix(in srgb, var(--ink) 18%, transparent),
        0 32px 64px color-mix(in srgb, var(--ink) 16%, transparent);
    transform: translateY(-3px);
}

@keyframes dash-brand-glow {
    0%, 100% {
        filter: drop-shadow(0 0 .25rem color-mix(in srgb, var(--dash-accent) 40%, transparent));
        opacity: .92;
        transform: translateY(0);
    }

    50% {
        filter: drop-shadow(0 0 .7rem color-mix(in srgb, var(--dash-accent) 75%, transparent));
        opacity: 1;
        transform: translateY(-1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-vok-visual="ultra"] .dash .dash-brand__mark {
        animation: none;
    }

    html[data-vok-visual="ultra"] .dictee-teaser:hover {
        transform: none;
    }
}

html.vok-visual-paused .dash .dash-brand__mark {
    animation: none;
}