/**
 * Vislun Video System
 * Modelo visual oficial: Vislun
 *
 * Este arquivo contém somente a identidade visual do modelo
 * vislun_padrao. Não controla reprodução, provedores,
 * sequência editorial ou transições.
 */

/* =========================================================
   1. VARIÁVEIS OFICIAIS DO MODELO VISLUN
   ========================================================= */

.vislun-video-wrapper.vislun-video-vislun_padrao {
    /* Identidade */
    --vislun-player-accent: #eebe0d;
    --vislun-player-accent-hover: #ffd42a;
    --vislun-player-white: #ffffff;
    --vislun-player-black: #000000;

    /* Elementos translúcidos */
    --vislun-player-track: rgba(255, 255, 255, 0.34);
    --vislun-player-track-loaded: rgba(255, 255, 255, 0.52);
    --vislun-player-surface: rgba(0, 0, 0, 0.56);
    --vislun-player-surface-strong: rgba(0, 0, 0, 0.78);

    /* Gradiente inferior dos controles */
    --vislun-player-controls-gradient:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.16) 28%,
            rgba(0, 0, 0, 0.62) 72%,
            rgba(0, 0, 0, 0.82) 100%
        );

    /* Dimensões principais */
    --vislun-player-control-height: 44px;
    --vislun-player-control-gap: 8px;
    --vislun-player-control-padding-x: 14px;
    --vislun-player-control-padding-bottom: 10px;

    /* Barra de progresso */
    --vislun-player-progress-height: 4px;
    --vislun-player-progress-height-active: 6px;
    --vislun-player-progress-hit-area: 18px;
    --vislun-player-progress-thumb: 12px;

    /* Botão central */
    --vislun-player-center-play-width: 82px;
    --vislun-player-center-play-height: 56px;
    --vislun-player-center-play-radius: 6px;

    /* Ícones e textos */
    --vislun-player-icon-size: 22px;
    --vislun-player-time-size: 13px;

    /* Movimento */
    --vislun-player-transition-fast: 160ms ease;
    --vislun-player-transition-normal: 240ms ease;
}

/* =========================================================
   2. CAPA INICIAL DO MODELO VISLUN
   ========================================================= */

/*
 * Mantém a capa já controlada pelo motor público.
 * Este arquivo altera somente o acabamento visual do
 * modelo vislun_padrao.
 */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-video-cover {
    background-color: var(--vislun-player-black) !important;
    color: var(--vislun-player-white);

    border: 0 !important;
    border-radius: 0 !important;

    -webkit-tap-highlight-color: transparent;
}

/*
 * Escurecimento leve: a imagem continua visível e limpa.
 * Não usamos uma máscara pesada sobre a capa.
 */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-video-cover-shade {
    background: rgba(0, 0, 0, 0.14);

    transition:
        background var(--vislun-player-transition-normal);
}

/*
 * Botão central oficial Vislun.
 */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-video-cover-play {
    width: var(--vislun-player-center-play-width);
    height: var(--vislun-player-center-play-height);

    border: 0;
    border-radius: var(--vislun-player-center-play-radius);

    background: var(--vislun-player-accent);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.34) !important;

    transition:
        background var(--vislun-player-transition-fast),
        box-shadow var(--vislun-player-transition-fast),
        transform var(--vislun-player-transition-fast);
}

/*
 * Triângulo branco central.
 */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-video-cover-play span {
    margin-left: 5px;

    border-top-width: 11px;
    border-bottom-width: 11px;
    border-left-width: 18px;

    border-left-color: var(--vislun-player-white);
}

/*
 * Hover discreto:
 * a capa permanece visível e o botão apenas ganha presença.
 */
@media (hover: hover) and (pointer: fine) {
    .vislun-video-wrapper.vislun-video-vislun_padrao
    .vislun-video-cover:hover
    .vislun-video-cover-shade {
        background: rgba(0, 0, 0, 0.18);
    }

    .vislun-video-wrapper.vislun-video-vislun_padrao
    .vislun-video-cover:hover
    .vislun-video-cover-play {
        background: var(--vislun-player-accent-hover);

        box-shadow:
            0 12px 32px rgba(0, 0, 0, 0.40) !important;
    }
}

/*
 * Foco visível para navegação por teclado.
 */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-video-cover:focus-visible {
    outline:
        3px solid var(--vislun-player-accent) !important;

    outline-offset: -3px !important;
}

/*
 * Ajuste proporcional para celular.
 */
@media (max-width: 768px) {
    .vislun-video-wrapper.vislun-video-vislun_padrao {
        --vislun-player-center-play-width: 72px;
        --vislun-player-center-play-height: 50px;
        --vislun-player-center-play-radius: 6px;
    }

    .vislun-video-wrapper.vislun-video-vislun_padrao
    .vislun-video-cover-play span {
        border-top-width: 10px;
        border-bottom-width: 10px;
        border-left-width: 16px;
    }
}

/* =========================================================
   3. ESTRUTURA DA INTERFACE SOBREPOSTA
   ========================================================= */

/*
 * A interface ocupa o mesmo quadro do vídeo.
 * Não cria faixa externa nem reduz a área visível da imagem.
 */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui {
    position: absolute;
    inset: 0;
    z-index: 70;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding:
        0
        var(--vislun-player-control-padding-x)
        var(--vislun-player-control-padding-bottom);

    color: var(--vislun-player-white);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    box-sizing: border-box;

    pointer-events: none;
}

/*
 * O atributo hidden continua sendo a trava principal.
 * Mesmo com display:flex acima, a interface permanece
 * totalmente ausente enquanto estiver desativada.
 */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui[hidden] {
    display: none !important;
}

/*
 * Gradiente transparente aplicado por cima do vídeo.
 * A imagem continua visível até a extremidade inferior.
 */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui-gradient {
    position: absolute;
    inset: 32% 0 0;
    z-index: -1;

    background: var(--vislun-player-controls-gradient);

    pointer-events: none;
}

/* =========================================================
   4. BARRA DE PROGRESSO
   ========================================================= */

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-progress-area {
    position: relative;

    width: 100%;
    height: var(--vislun-player-progress-hit-area);

    display: flex;
    align-items: center;

    margin-bottom: 2px;

    pointer-events: none;
}

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-progress {
    position: relative;

    width: 100%;
    height: var(--vislun-player-progress-hit-area);

    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    appearance: none;
    -webkit-appearance: none;

    pointer-events: none;
}

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-progress-track {
    position: relative;

    display: block;

    width: 100%;
    height: var(--vislun-player-progress-height);

    overflow: visible;

    border-radius: 999px;

    background: var(--vislun-player-track);

    transition:
        height var(--vislun-player-transition-fast);
}

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-progress-buffer,
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-progress-played {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 0;

    border-radius: inherit;

    pointer-events: none;
}

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-progress-buffer {
    background: var(--vislun-player-track-loaded);
}

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-progress-played {
    background: var(--vislun-player-accent);
}

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-progress-thumb {
    position: absolute;
    top: 50%;
    left: 0;

    width: var(--vislun-player-progress-thumb);
    height: var(--vislun-player-progress-thumb);

    border-radius: 50%;

    background: var(--vislun-player-white);

    box-shadow:
        0 2px 7px rgba(0, 0, 0, 0.42);

    transform: translate(-50%, -50%);

    pointer-events: none;
}

/*
 * Horário flutuante exibido futuramente durante
 * hover ou arraste da barra.
 */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-progress-tooltip {
    position: absolute;
    left: 0;
    bottom: calc(100% + 3px);

    min-width: 42px;

    padding: 5px 7px;

    border-radius: 4px;

    background: var(--vislun-player-surface-strong);

    color: var(--vislun-player-white);

    font-size: 12px;
    line-height: 1;
    text-align: center;

    opacity: 0;
    visibility: hidden;

    transform: translateX(-50%);

    pointer-events: none;
}

/* =========================================================
   5. LINHA INFERIOR DOS CONTROLES
   ========================================================= */

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-controls-row {
    position: relative;

    width: 100%;
    min-height: var(--vislun-player-control-height);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    pointer-events: none;
}

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-controls-left,
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-controls-right {
    display: flex;
    align-items: center;

    gap: var(--vislun-player-control-gap);

    min-width: 0;

    pointer-events: none;
}

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-controls-right {
    margin-left: auto;
}

/*
 * Base comum dos botões.
 * Os desenhos dos ícones serão construídos separadamente.
 */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-control {
    position: relative;

    flex: 0 0 auto;

    width: var(--vislun-player-control-height);
    height: var(--vislun-player-control-height);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 5px;

    background: transparent;
    color: var(--vislun-player-white);

    appearance: none;
    -webkit-appearance: none;

    opacity: 0.96;

    transition:
        color var(--vislun-player-transition-fast),
        background var(--vislun-player-transition-fast),
        opacity var(--vislun-player-transition-fast),
        transform var(--vislun-player-transition-fast);

    pointer-events: none;
}

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-control > span {
    position: relative;

    display: block;

    width: var(--vislun-player-icon-size);
    height: var(--vislun-player-icon-size);

    pointer-events: none;
}

/* =========================================================
   6. TEMPO E VOLUME
   ========================================================= */

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-time {
    flex: 0 0 auto;

    min-width: 82px;
    height: var(--vislun-player-control-height);

    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    margin: 0;
    padding: 0 4px;

    border: 0;

    background: transparent;
    color: var(--vislun-player-white);

    font-size: var(--vislun-player-time-size);
    font-variant-numeric: tabular-nums;
    line-height: 1;

    appearance: none;
    -webkit-appearance: none;

    pointer-events: none;
}

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-volume {
    width: 86px;

    display: flex;
    align-items: center;

    pointer-events: none;
}

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-volume-range {
    width: 100%;
    height: 18px;

    margin: 0;
    padding: 0;

    background: transparent;

    appearance: none;
    -webkit-appearance: none;

    pointer-events: none;
}

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-volume-range::-webkit-slider-runnable-track {
    height: 4px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.42);
}

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-volume-range::-webkit-slider-thumb {
    width: 12px;
    height: 12px;

    margin-top: -4px;

    border: 0;
    border-radius: 50%;

    background: var(--vislun-player-white);

    appearance: none;
    -webkit-appearance: none;
}

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-volume-range::-moz-range-track {
    height: 4px;

    border: 0;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.42);
}

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-volume-range::-moz-range-thumb {
    width: 12px;
    height: 12px;

    border: 0;
    border-radius: 50%;

    background: var(--vislun-player-white);
}

/* =========================================================
   7. MENU DE CONFIGURAÇÕES
   ========================================================= */

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-settings-menu {
    position: absolute;
    right: var(--vislun-player-control-padding-x);
    bottom: calc(
        var(--vislun-player-control-height)
        + var(--vislun-player-progress-hit-area)
        + 22px
    );

    z-index: 3;

    min-width: 156px;

    padding: 8px;

    border-radius: 6px;

    background: var(--vislun-player-surface-strong);

    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.40);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    pointer-events: none;
}

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-settings-menu[hidden] {
    display: none !important;
}

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-settings-title {
    padding: 7px 10px 9px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-settings-menu button {
    width: 100%;

    display: block;

    padding: 8px 10px;

    border: 0;
    border-radius: 4px;

    background: transparent;
    color: var(--vislun-player-white);

    font-size: 13px;
    text-align: left;

    pointer-events: none;
}

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-settings-menu button.is-selected {
    background: var(--vislun-player-accent);
    color: var(--vislun-player-black);

    font-weight: 700;
}

/* =========================================================
   8. RESPONSIVIDADE INICIAL
   ========================================================= */

@media (max-width: 768px) {
    .vislun-video-wrapper.vislun-video-vislun_padrao {
        --vislun-player-control-height: 42px;
        --vislun-player-control-gap: 3px;
        --vislun-player-control-padding-x: 8px;
        --vislun-player-control-padding-bottom: 7px;
        --vislun-player-icon-size: 20px;
        --vislun-player-time-size: 12px;
    }

    .vislun-video-wrapper.vislun-video-vislun_padrao
    .vislun-player-controls-row {
        gap: 6px;
    }

    .vislun-video-wrapper.vislun-video-vislun_padrao
    .vislun-player-time {
        min-width: 69px;
        padding: 0 2px;
    }

    .vislun-video-wrapper.vislun-video-vislun_padrao
    .vislun-player-volume {
        width: 64px;
    }
}

@media (max-width: 520px) {
    /*
     * A barra horizontal de volume será recolhida no celular.
     * O volume continuará acessível pelo botão de som.
     */
    .vislun-video-wrapper.vislun-video-vislun_padrao
    .vislun-player-volume {
        display: none;
    }

    .vislun-video-wrapper.vislun-video-vislun_padrao
    .vislun-player-time {
        min-width: 60px;
    }
}

/* =========================================================
   9. SISTEMA DE ÍCONES DO MODELO VISLUN
   ========================================================= */

/*
 * Todos os ícones são máscaras SVG próprias.
 * A cor acompanha a propriedade currentColor do botão.
 */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-control > span {
    background-color: currentColor;

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

/* Voltar 10 segundos */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-rewind > span {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M7.1 7.4A7.9 7.9 0 1 1 4.1 12h2.1a5.8 5.8 0 1 0 1.8-4.2L10.8 11V4H3.9l3.2 3.4Z'/%3E%3Ctext x='12.3' y='15.4' text-anchor='middle' font-family='Arial,sans-serif' font-size='7.2' font-weight='700' fill='white'%3E10%3C/text%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M7.1 7.4A7.9 7.9 0 1 1 4.1 12h2.1a5.8 5.8 0 1 0 1.8-4.2L10.8 11V4H3.9l3.2 3.4Z'/%3E%3Ctext x='12.3' y='15.4' text-anchor='middle' font-family='Arial,sans-serif' font-size='7.2' font-weight='700' fill='white'%3E10%3C/text%3E%3C/svg%3E");
}

/* Play */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-toggle > span {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7L8 5Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7L8 5Z'/%3E%3C/svg%3E");
}

/* Pausa — será ativada futuramente pelo estado is-playing */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-toggle.is-playing > span {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M7 5h4v14H7V5Zm6 0h4v14h-4V5Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M7 5h4v14H7V5Zm6 0h4v14h-4V5Z'/%3E%3C/svg%3E");
}

/* Avançar 10 segundos */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-forward > span {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(24 0) scale(-1 1)'%3E%3Cpath fill='white' d='M7.1 7.4A7.9 7.9 0 1 1 4.1 12h2.1a5.8 5.8 0 1 0 1.8-4.2L10.8 11V4H3.9l3.2 3.4Z'/%3E%3C/g%3E%3Ctext x='11.7' y='15.4' text-anchor='middle' font-family='Arial,sans-serif' font-size='7.2' font-weight='700' fill='white'%3E10%3C/text%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(24 0) scale(-1 1)'%3E%3Cpath fill='white' d='M7.1 7.4A7.9 7.9 0 1 1 4.1 12h2.1a5.8 5.8 0 1 0 1.8-4.2L10.8 11V4H3.9l3.2 3.4Z'/%3E%3C/g%3E%3Ctext x='11.7' y='15.4' text-anchor='middle' font-family='Arial,sans-serif' font-size='7.2' font-weight='700' fill='white'%3E10%3C/text%3E%3C/svg%3E");
}

/* Volume ativo */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-volume-toggle > span {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 9v6h4l5 4V5L8 9H4Zm11.4-.8v7.6A4.4 4.4 0 0 0 17.5 12a4.4 4.4 0 0 0-2.1-3.8Zm0-3.4v2.1A6.4 6.4 0 0 1 19.5 12a6.4 6.4 0 0 1-4.1 5.1v2.1A8.4 8.4 0 0 0 21.5 12a8.4 8.4 0 0 0-6.1-7.2Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 9v6h4l5 4V5L8 9H4Zm11.4-.8v7.6A4.4 4.4 0 0 0 17.5 12a4.4 4.4 0 0 0-2.1-3.8Zm0-3.4v2.1A6.4 6.4 0 0 1 19.5 12a6.4 6.4 0 0 1-4.1 5.1v2.1A8.4 8.4 0 0 0 21.5 12a8.4 8.4 0 0 0-6.1-7.2Z'/%3E%3C/svg%3E");
}

/* Volume desligado — estado futuro is-muted */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-volume-toggle.is-muted > span {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 9v6h4l5 4V5L8 9H4Zm11.2.1 1.4-1.4 2 2 2-2 1.4 1.4-2 2 2 2-1.4 1.4-2-2-2 2-1.4-1.4 2-2-2-2Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 9v6h4l5 4V5L8 9H4Zm11.2.1 1.4-1.4 2 2 2-2 1.4 1.4-2 2 2 2-1.4 1.4-2-2-2 2-1.4-1.4 2-2-2-2Z'/%3E%3C/svg%3E");
}

/* Configurações */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-settings-toggle > span {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M19.4 13a7.4 7.4 0 0 0 .1-1 7.4 7.4 0 0 0-.1-1l2.1-1.6-2-3.4-2.5 1a7.6 7.6 0 0 0-1.7-1L15 3.3h-4L10.6 6a7.6 7.6 0 0 0-1.7 1L6.5 6l-2 3.4L6.6 11a7.4 7.4 0 0 0-.1 1 7.4 7.4 0 0 0 .1 1l-2.1 1.6 2 3.4 2.4-1a7.6 7.6 0 0 0 1.7 1l.4 2.7h4l.4-2.7a7.6 7.6 0 0 0 1.7-1l2.4 1 2-3.4-2.1-1.6ZM13 15.5A3.5 3.5 0 1 1 13 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M19.4 13a7.4 7.4 0 0 0 .1-1 7.4 7.4 0 0 0-.1-1l2.1-1.6-2-3.4-2.5 1a7.6 7.6 0 0 0-1.7-1L15 3.3h-4L10.6 6a7.6 7.6 0 0 0-1.7 1L6.5 6l-2 3.4L6.6 11a7.4 7.4 0 0 0-.1 1 7.4 7.4 0 0 0 .1 1l-2.1 1.6 2 3.4 2.4-1a7.6 7.6 0 0 0 1.7 1l.4 2.7h4l.4-2.7a7.6 7.6 0 0 0 1.7-1l2.4 1 2-3.4-2.1-1.6ZM13 15.5A3.5 3.5 0 1 1 13 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E");
}

/* Tela cheia */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-fullscreen > span {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M5 5h6v2H7v4H5V5Zm8 0h6v6h-2V7h-4V5ZM5 13h2v4h4v2H5v-6Zm12 0h2v6h-6v-2h4v-4Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M5 5h6v2H7v4H5V5Zm8 0h6v6h-2V7h-4V5ZM5 13h2v4h4v2H5v-6Zm12 0h2v6h-6v-2h4v-4Z'/%3E%3C/svg%3E");
}

/* Sair da tela cheia — estado futuro is-fullscreen */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-fullscreen.is-fullscreen > span {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 5v4H5v2h6V5H9Zm6 0h-2v6h6V9h-4V5ZM5 13v2h4v4h2v-6H5Zm8 0v6h2v-4h4v-2h-6Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 5v4H5v2h6V5H9Zm6 0h-2v6h6V9h-4V5ZM5 13v2h4v4h2v-6H5Zm8 0v6h2v-4h4v-2h-6Z'/%3E%3C/svg%3E");
}

/* =========================================================
   10. ESTADOS VISUAIS DOS BOTÕES
   ========================================================= */

@media (hover: hover) and (pointer: fine) {
    .vislun-video-wrapper.vislun-video-vislun_padrao
    .vislun-player-control:hover {
        color: var(--vislun-player-accent);

        background: rgba(255, 255, 255, 0.08);
    }

    .vislun-video-wrapper.vislun-video-vislun_padrao
    .vislun-player-time:hover {
        color: var(--vislun-player-accent);
    }
}

/*
 * Engrenagem selecionada como na referência:
 * bloco amarelo com ícone escuro.
 */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-settings-toggle[aria-expanded="true"] {
    background: var(--vislun-player-accent);
    color: var(--vislun-player-black);
}

/*
 * Foco preparado para quando a interface for ativada.
 */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-control:focus-visible,
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-time:focus-visible,
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-progress:focus-visible,
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-settings-menu button:focus-visible {
    outline: 2px solid var(--vislun-player-accent);
    outline-offset: 2px;
}

/* =========================================================
   11. ESTADO DE ATIVAÇÃO FUNCIONAL
   ========================================================= */

/*
 * Esta classe será aplicada somente quando o controlador
 * confirmar que o vídeo principal MP4 está disponível.
 *
 * O atributo hidden continua sendo a trava superior.
 */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui.is-active {
    opacity: 1;
    visibility: visible;

    pointer-events: none;

    transition:
        opacity var(--vislun-player-transition-normal),
        visibility var(--vislun-player-transition-normal);
}

/*
 * Somente os componentes interativos recebem eventos.
 * O restante da camada continua transparente aos cliques.
 */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui.is-active
.vislun-player-progress,
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui.is-active
.vislun-player-control,
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui.is-active
.vislun-player-time,
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui.is-active
.vislun-player-volume-range,
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui.is-active
.vislun-player-settings-menu:not([hidden]),
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui.is-active
.vislun-player-settings-menu:not([hidden])
button {
    pointer-events: auto;
}

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui.is-active
.vislun-player-progress,
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui.is-active
.vislun-player-control,
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui.is-active
.vislun-player-time,
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui.is-active
.vislun-player-settings-menu
button {
    cursor: pointer;
}

.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui.is-active
.vislun-player-volume-range {
    cursor: pointer;
}

/*
 * A barra fica um pouco mais espessa durante hover,
 * foco pelo teclado ou arraste.
 */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui.is-active
.vislun-player-progress:hover
.vislun-player-progress-track,
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui.is-active
.vislun-player-progress:focus-visible
.vislun-player-progress-track,
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui.is-active.is-seeking
.vislun-player-progress-track {
    height: var(--vislun-player-progress-height-active);
}

/*
 * Estado preparado para ocultação automática dos controles.
 * Ele ainda não será usado nesta etapa.
 */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui.is-active.is-controls-hidden {
    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}

/*
 * Os controles nunca desaparecem enquanto:
 *
 * - o vídeo estiver pausado;
 * - o menu estiver aberto;
 * - a barra estiver sendo arrastada.
 */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui.is-active.is-paused,
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui.is-active.is-settings-open,
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui.is-active.is-seeking {
    opacity: 1;
    visibility: visible;

    pointer-events: none;
}

/*
 * Estado do horário flutuante da barra.
 */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui.is-active
.vislun-player-progress-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

/*
 * Estado de pressão dos botões.
 */
.vislun-video-wrapper.vislun-video-vislun_padrao
.vislun-player-ui.is-active
.vislun-player-control:active {
    transform: scale(0.92);
}

/*
 * Respeita usuários que desativam animações.
 */
@media (prefers-reduced-motion: reduce) {
    .vislun-video-wrapper.vislun-video-vislun_padrao
    .vislun-player-ui,
    .vislun-video-wrapper.vislun-video-vislun_padrao
    .vislun-player-control,
    .vislun-video-wrapper.vislun-video-vislun_padrao
    .vislun-player-progress-track {
        transition: none !important;
    }
}