/* ==========================================
   VIDEO PRESENTATION
   Instruções de uso no topo de js/video-presentation.js
   ========================================== */

/* ==========================================
   ELEMENTOS QUE ABREM A APRESENTAÇÃO
   ========================================== */

[data-presentation] {
    cursor: pointer;
}

[data-presentation]:focus-visible {
    outline: 2px solid var(--accent, #c6f36a);
    outline-offset: 3px;
}

/* ==========================================
   FUNDO ESCURECIDO
   ========================================== */

.video-presentation-overlay {
    /*
     * Usa as cores e fontes do site quando existirem.
     * Para personalizar só a apresentação, redefina as
     * variáveis --vp-* neste seletor.
     */
    --vp-accent: var(--accent, #c6f36a);
    --vp-mono: var(--mono, "DM Mono", ui-monospace, monospace);
    --vp-sans: var(--sans, "Space Grotesk", system-ui, sans-serif);

    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(3, 5, 4, 0);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    font-family: var(--vp-sans);
    line-height: 1.6;
    text-align: left;

    transition:
        opacity 1.8s ease,
        background 2s ease,
        backdrop-filter 2s ease,
        visibility 0s linear 2.1s;
}

.video-presentation-overlay *,
.video-presentation-overlay *::before,
.video-presentation-overlay *::after {
    box-sizing: border-box;
}

/* Partes sem texto ficam ocultas. */
.video-presentation-overlay [hidden] {
    display: none !important;
}

/* Textos pequenos em fonte monoespaçada. */
.video-presentation-topline,
.video-presentation-video-name,
.video-presentation-eyebrow,
.video-presentation-bottom {
    font-family: var(--vp-mono);
    text-transform: uppercase;
}

.video-presentation-overlay.is-open {
    background: rgba(3, 5, 4, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition:
        opacity 1.8s ease,
        background 2s ease,
        backdrop-filter 2s ease,
        visibility 0s;
}

/* ==========================================
   JANELA AMPLIADA
   ========================================== */

.video-presentation-window {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(270px, 0.8fr);
    width: min(1720px, 100%);
    height: min(1000px, calc(100vh - 48px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    background: #101210;
    box-shadow: 0 40px 140px rgba(0, 0, 0, 0.75);
    transform: translateY(65px) scale(0.84);
    transform-origin: center center;
    opacity: 0;

    /*
     * A transição da janela é controlada pelo JavaScript.
     * O estado inicial é registrado antes do estado final.
     */
    transition:
        transform 2s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 1.6s ease,
        box-shadow 1.6s ease,
        border-color 0.5s ease;
}

.video-presentation-overlay.is-open .video-presentation-window {
    transform: translate(0, 0) scale(1);
    opacity: 1;
    box-shadow: 0 40px 140px rgba(0, 0, 0, 0.55);
}

/* Barra de rolagem da janela, fina e com o destaque da apresentação */

.video-presentation-window {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--vp-accent) 35%, transparent) transparent;
}

.video-presentation-window::-webkit-scrollbar {
    width: 8px;
}

.video-presentation-window::-webkit-scrollbar-track {
    background: transparent;
}

.video-presentation-window::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: color-mix(in srgb, var(--vp-accent) 35%, transparent);
}

.video-presentation-window::-webkit-scrollbar-thumb:hover {
    background: var(--vp-accent);
}

/* ==========================================
   PLAYER AMPLIADO
   ========================================== */

/*
 * Não há animação independente nesta área.
 * Ela acompanha a aproximação da janela inteira.
 */

.video-presentation-video-area {
    /*
     * Fica acima do painel de texto, que se esconde atrás
     * do player durante a abertura e o fechamento.
     */
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    padding: clamp(18px, 2.5vw, 38px);
    background:
        radial-gradient(
            ellipse at center,
            color-mix(in srgb, var(--vp-accent) 6.5%, transparent),
            transparent 70%
        ),
        #080908;
}

.video-presentation-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    letter-spacing: 1.5px;
}

.video-presentation-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.video-presentation-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vp-accent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--vp-accent) 70%, transparent);
}

.video-presentation-video {
    display: block;
    width: 100%;
    max-height: calc(100vh - 165px);
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
}

.video-presentation-video-name {
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    letter-spacing: 1px;
}

/* ==========================================
   PAINEL DE TEXTO
   ========================================== */

/*
 * A entrada do painel também é controlada pelo JavaScript,
 * evitando uma segunda animação CSS no primeiro clique.
 */

.video-presentation-info {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    min-height: 0;
    padding: 48px 28px 30px;
    border-left: 1px solid rgba(255, 255, 255, 0.09);
    background: #101210;
}

.video-presentation-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-size: 21px;
    cursor: pointer;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.3s ease;
}

.video-presentation-close:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--vp-accent);
    transform: rotate(90deg);
}

.video-presentation-close:disabled {
    cursor: default;
}

.video-presentation-eyebrow {
    margin: 0 0 22px;
    color: var(--vp-accent);
    font-size: 10px;
    letter-spacing: 2px;
}

.video-presentation-title {
    margin: 0 0 18px;
    color: #f4f5f1;
    font-size: clamp(26px, 2.2vw, 38px);
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.video-presentation-line {
    width: 42px;
    height: 2px;
    margin-bottom: 24px;
    background: var(--vp-accent);
}

.video-presentation-summary {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.9;
}

.video-presentation-more {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    opacity: 0;
    transition:
        grid-template-rows 0.55s ease,
        opacity 0.45s ease,
        margin 0.45s ease;
}

.video-presentation-more-inner {
    min-height: 0;
    overflow: hidden;
}

.video-presentation-more.is-expanded {
    grid-template-rows: 1fr;
    margin-top: 18px;
    opacity: 1;
}

.video-presentation-extra {
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    line-height: 1.9;
}

/* Com destaques, o texto extra vem logo abaixo deles. */
.video-presentation-highlights + .video-presentation-extra {
    margin-top: 18px;
}

/* ==========================================
   DESTAQUES DO VER MAIS
   Botões com as funções do vídeo e o texto
   do destaque selecionado.
   ========================================== */

.video-presentation-highlights {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.video-presentation-highlights-label {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--vp-mono);
    font-size: 9px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.video-presentation-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.video-presentation-chip {
    padding: 6px 11px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.68);
    font-family: var(--vp-mono);
    font-size: 11px;
    line-height: 1.3;
    cursor: pointer;
    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.video-presentation-chip:hover {
    border-color: color-mix(in srgb, var(--vp-accent) 55%, transparent);
    color: #fff;
    transform: translateY(-2px);
}

.video-presentation-chip:focus-visible {
    outline: 2px solid var(--vp-accent);
    outline-offset: 2px;
}

.video-presentation-chip.is-active {
    border-color: var(--vp-accent);
    background: color-mix(in srgb, var(--vp-accent) 14%, transparent);
    color: var(--vp-accent);
}

/* Ao abrir o Ver mais, os botões entram um após o outro. */
.video-presentation-more.is-expanded .video-presentation-chip {
    animation: video-presentation-chip-in 0.45s ease both;
    animation-delay: calc(var(--chip-index, 0) * 70ms + 0.15s);
}

@keyframes video-presentation-chip-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Quadro com o texto do destaque selecionado */
.video-presentation-highlight {
    margin-top: 14px;
    padding: 13px 15px;
    overflow: hidden;
    border-left: 2px solid var(--vp-accent);
    border-radius: 0 8px 8px 0;
    background: color-mix(in srgb, var(--vp-accent) 5%, transparent);
    transition: height 0.35s ease;
}

.video-presentation-highlight-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.8;
}

/* O novo texto aparece deslizando de leve. */
.video-presentation-highlight-text.is-entering {
    animation: video-presentation-highlight-in 0.45s ease both;
}

@keyframes video-presentation-highlight-in {
    from {
        opacity: 0;
        transform: translateX(-10px);
        filter: blur(3px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

.video-presentation-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding: 0 0 6px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--vp-accent) 55%, transparent);
    background: transparent;
    color: var(--vp-accent);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: gap 0.25s ease, color 0.25s ease;
}

.video-presentation-toggle:hover {
    gap: 16px;
    color: color-mix(in srgb, var(--vp-accent) 60%, #fff);
}

.video-presentation-toggle-arrow {
    font-size: 16px;
    transition: transform 0.35s ease;
}

.video-presentation-toggle[aria-expanded="true"]
.video-presentation-toggle-arrow {
    transform: rotate(180deg);
}

.video-presentation-bottom {
    width: 100%;
    margin-top: auto;
    padding-top: 32px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 9px;
    letter-spacing: 1.5px;
}

/* ==========================================
   RESPONSIVIDADE
   ========================================== */

@media (min-width: 1600px) {
    .video-presentation-window {
        grid-template-columns: minmax(0, 2.35fr) minmax(300px, 0.75fr);
    }
}

@media (max-width: 1000px) {
    .video-presentation-window {
        grid-template-columns: minmax(0, 1.7fr) minmax(240px, 0.9fr);
    }

    .video-presentation-info {
        padding: 44px 22px 24px;
    }

    .video-presentation-video-area {
        padding: 22px;
    }
}

@media (max-width: 760px) {
    .video-presentation-overlay {
        padding: 14px;
    }

    .video-presentation-window {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        max-height: calc(100vh - 28px);
    }

    .video-presentation-video-area {
        padding: 18px;
    }

    .video-presentation-video {
        max-height: none;
    }

    .video-presentation-info {
        padding: 30px 22px 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.09);
        border-left: 0;
    }

    .video-presentation-bottom {
        padding-top: 24px;
    }
}

@media (max-width: 600px) {
    .video-presentation-overlay {
        padding: 8px;
    }

    .video-presentation-window {
        max-height: calc(100vh - 16px);
        border-radius: 12px;
    }

    .video-presentation-video-area {
        padding: 12px;
    }

    .video-presentation-info {
        padding: 26px 18px 20px;
    }

    .video-presentation-title {
        font-size: 28px;
    }

    .video-presentation-topline {
        font-size: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-presentation-overlay,
    .video-presentation-window,
    .video-presentation-video-area,
    .video-presentation-info,
    .video-presentation-more,
    .video-presentation-chip,
    .video-presentation-highlight,
    .video-presentation-highlight-text,
    .video-presentation-toggle-arrow {
        animation: none !important;
        transition: none !important;
    }
}