/* public/app/css/dash-fullscreen-rim.css
 * Synopsis: Bordure plein écran + balayage K2000.
 * Objectif: 3px statique ; 5px animé seulement en dictée.
 */

@property --vok-fs-a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.dash.dash--fs {
    box-shadow:
        inset 0 0 0 3px color-mix(in srgb, var(--dash-accent) 58%, transparent),
        0 0 20px color-mix(in srgb, var(--dash-accent) 24%, transparent);
    transition: box-shadow 0.28s ease;
}

.dash.dash--fs::after {
    content: none;
}

.dash.dash--fs.dash--fs-live {
    box-shadow:
        inset 0 0 0 5px color-mix(in srgb, var(--dash-accent) 78%, transparent),
        0 0 28px color-mix(in srgb, var(--dash-accent) 42%, transparent),
        0 0 48px color-mix(in srgb, var(--dash-hot) 22%, transparent);
}

.dash.dash--fs.dash--fs-live::after {
    animation: vok-fs-k2000 1.55s linear infinite;
    background: conic-gradient(
        from var(--vok-fs-a),
        transparent 0deg 250deg,
        color-mix(in srgb, var(--dash-accent) 45%, transparent) 290deg,
        var(--dash-accent) 320deg,
        #fff 338deg,
        var(--dash-hot) 350deg,
        var(--dash-accent) 358deg,
        transparent 360deg
    );
    border-radius: 0;
    content: "";
    inset: 0;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 5px;
    pointer-events: none;
    position: absolute;
    transition: padding 0.28s ease;
    z-index: 10050;
}

@keyframes vok-fs-k2000 {
    to {
        --vok-fs-a: 360deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dash.dash--fs {
        transition: none;
    }

    .dash.dash--fs.dash--fs-live::after {
        animation: none;
        background: color-mix(in srgb, var(--dash-accent) 70%, #fff 12%);
        transition: none;
    }
}