/* ─────────────────────────────────────────────────────────────────────────
 * hero-video.css
 * Player de vídeo Bunny.net + overlay de unmute + barra de progresso + controles
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Wrapper externo ────────────────────────────────────────────────────── */
.hero-video-wrap {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

/* ── Container 16:9 ─────────────────────────────────────────────────────── */
.hero-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--gold, #ffcd1c) 25%, transparent);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(255, 205, 28, 0.08);
    background: #0a0a0a;
}

.hero-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    transform: scale(1.01); /* compensa faixas pretas nos cantos arredondados */
}

/* ── Overlay de unmute ──────────────────────────────────────────────────── */
/*
 * O overlay cobre o frame inteiro para interceptar cliques acidentais no iframe,
 * mas a pílula fica centralizada (align-items + justify-content: center).
 * Deixamos espaço na borda inferior (padding-bottom) para não sobrepor os controles.
 *
 * pointer-events no ::after cobre a área inferior que ficaria sobre os controles —
 * na prática o overlay inteiro é clicável, o que é o comportamento desejado.
 */
.hero-video-overlay {
    position: absolute;
    inset: 0;
    /* reserva a altura dos controles (~44px) + barra (3px) na parte inferior */
    bottom: 0;
    z-index: 10;
    cursor: pointer;

    /* fundo escurecido uniforme — sem gradiente que empurrava para baixo */
    background: rgba(0, 0, 0, 0.45);

    display: flex;
    align-items: center; /* centralizado verticalmente */
    justify-content: center; /* centralizado horizontalmente */

    transition: opacity 0.35s ease;
}

.hero-video-overlay:focus-visible {
    outline: 2px solid var(--gold, #ffcd1c);
    outline-offset: -2px;
}

.hero-video-overlay:hover .hero-video-overlay-inner {
    transform: scale(1.04);
}

/* Pílula central */
.hero-video-overlay-inner {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    transition: transform 0.2s ease;

    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 205, 28, 0.4);
    border-radius: 999px;
    padding: 0.6rem 1.25rem 0.6rem 1rem;

    /* tamanho de toque confortável em mobile */
    min-height: 44px;
}

.hero-video-overlay-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--gold, #ffcd1c);
}

.hero-video-overlay-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.hero-video-overlay-label {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #fff;
    white-space: nowrap;
    /* evita que o texto em si absorva o clique separadamente do container */
    pointer-events: none;
    user-select: none;
}

/* ── Barra de progresso real ────────────────────────────────────────────── */
/*
 * Fica colada na borda inferior do frame.
 * pointer-events: none → não intercepta cliques dos controles nem do overlay.
 * z-index 25 → acima de tudo, mas sem capturar eventos.
 */
.hero-video-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 25;
    pointer-events: none;
}

.hero-video-progress-track {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
}

.hero-video-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(
        90deg,
        var(--gold, #ffcd1c) 0%,
        color-mix(in srgb, var(--gold, #ffcd1c) 70%, #fff) 100%
    );
    box-shadow: 0 0 6px 1px rgba(255, 205, 28, 0.55);
    transition: width 0.3s linear;
}

.hero-video-progress[data-done] .hero-video-progress-fill {
    width: 100% !important;
    transition:
        width 0.15s linear,
        opacity 0.6s ease 0.25s;
    opacity: 0;
}

.hero-video-progress[data-done] .hero-video-progress-track {
    transition: opacity 0.6s ease 0.25s;
    opacity: 0;
}

/* ── Caption opcional ───────────────────────────────────────────────────── */
.hero-video-caption {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--muted-foreground, #888);
    letter-spacing: 0.02em;
}

/* ── Controles customizados ─────────────────────────────────────────────── */
/*
 * Barra na borda inferior, acima da barra de progresso (bottom: 3px).
 *
 * VISIBILIDADE:
 *   Desktop (hover: hover) — some quando o mouse sai, aparece ao hover.
 *   Mobile  (hover: none)  — sempre visível quando ready.
 *
 * CLICABILIDADE:
 *   opacity:0 + pointer-events:none antes do ready → nada intercepta o iframe.
 *   Após ready: pointer-events:auto apenas no .hero-vc, não no frame inteiro.
 *   Isso garante que a área do iframe acima dos controles continua recebendo
 *   eventos normalmente (importante para o overlay de unmute).
 */
.hero-vc {
    position: absolute;
    bottom: 3px;
    left: 0;
    right: 0;
    z-index: 20;

    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;

    /* gradiente de fundo que funde com o vídeo */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 100%);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;

    /* altura mínima de toque confortável */
    min-height: 44px;
}

/* Pronto mas ainda sem hover — desktop esconde, mobile mostra */
.hero-vc--ready {
    pointer-events: auto; /* re-habilita antes do hover para não perder o primeiro toque */
}

/* Padrão: visível (mobile-first) */
.hero-vc--ready {
    opacity: 1;
}

/* Desktop com mouse real: esconde, mostra só no hover */
@media (hover: hover) and (pointer: fine) {
    .hero-vc--ready {
        opacity: 0;
    }
    .hero-video-frame:hover .hero-vc--ready {
        opacity: 1;
    }
}

/* ── Botões ─────────────────────────────────────────────────────────────── */
.hero-vc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* área de toque 44×44 px — recomendação WCAG */
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #fff;
    padding: 0;
    border-radius: 6px;
    flex-shrink: 0;
    transition:
        color 0.15s ease,
        transform 0.1s ease;
    /* -webkit-tap para eliminar delay de 300ms em iOS */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.hero-vc-btn:hover {
    color: var(--gold, #ffcd1c);
    transform: scale(1.12);
}

.hero-vc-btn:active {
    transform: scale(0.95);
}

.hero-vc-btn:focus-visible {
    outline: 2px solid var(--gold, #ffcd1c);
    outline-offset: 2px;
}

.hero-vc-icon {
    width: 1.125rem;
    height: 1.125rem;
    display: block;
    pointer-events: none;
}

/* ── Volume ─────────────────────────────────────────────────────────────── */
.hero-vc-volume {
    display: flex;
    align-items: center;
    /* largura maior em mobile para facilitar o arraste */
    width: 72px;
    flex-shrink: 0;
    /* área de toque vertical confortável */
    min-height: 44px;
    touch-action: manipulation;
}

.hero-vc-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    cursor: pointer;
    outline: none;
    background: linear-gradient(
        to right,
        var(--gold, #ffcd1c) 0%,
        var(--gold, #ffcd1c) var(--val, 80%),
        rgba(255, 255, 255, 0.25) var(--val, 80%),
        rgba(255, 255, 255, 0.25) 100%
    );
    /* padding vertical aumenta a área de toque sem alterar visual */
    padding: 10px 0;
    box-sizing: content-box;
}

/* thumb — Chrome/Edge/Safari */
.hero-vc-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 0.1s ease;
}

.hero-vc-range::-webkit-slider-thumb:hover,
.hero-vc-range:active::-webkit-slider-thumb {
    transform: scale(1.25);
}

/* thumb — Firefox */
.hero-vc-range::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

/* ── Responsividade ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .hero-video-frame {
        border-radius: 8px;
    }

    /* Slider um pouco maior em telas pequenas */
    .hero-vc-volume {
        width: 60px;
    }
}