/* VISUALIZE+ — /portfolio/ · composição da folha de edição visual.
   O sistema vive em base.css; aqui fica só o que é desta folha. */

@import url('base.css?v=20260829');

.hero__lead {
    margin-top: var(--s5);
}

.port__grid {
    margin-top: 0;
}

/* ---------- A FOLHA DE PROVA DESTA PÁGINA ----------
   Dez peças pedem quadro menor que as duas da capa. Aqui a folha é prova de
   contato de verdade: o quadro encolhe até caber três por linha, o suficiente
   para julgar enquadramento e cor de relance. Quem quiser conferir o acabamento
   de perto abre a peça no tamanho cheio — é para isso que existe a lupa.

   Dez em trêses deixa uma sobrando na última linha, e sobra encostada na
   margem esquerda parece erro de composição. Por isso esta folha é flex e não
   grade: em flex a linha incompleta centraliza sozinha, sem nenhuma regra que
   dependa de quantas peças existem. Trocar a décima por uma décima primeira
   não pede ajuste nenhum aqui.

   A largura da peça sai da mesma conta que o navegador faria numa grade: a
   folha menos as goteiras, dividida pelas colunas. O fio de 0.01px a menos é
   margem para o arredondamento de subpixel — sem ele, três peças podem somar
   um cabelo a mais que a folha e a terceira cai de linha. */

.folha {
    --colunas: 3;
    --goteira: clamp(var(--s4), 2vw, var(--s5));

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--goteira);
}

.folha .peca {
    flex: 0 1 calc(
        (100% - (var(--colunas) - 1) * var(--goteira)) / var(--colunas) - 0.01px
    );
}

/* Só no quadro da folha: dentro da lupa a peça está grande e o pé dela volta
   ao corpo de base.css. */
.folha .peca__desc {
    font-size: 0.75rem;
}

/* De tablet para baixo a terceira coluna aperta demais o pé da peça. Duas por
   linha é o piso: abaixo disso a peça cresce de novo, que é o contrário do que
   esta página quer. Com dez peças as linhas fecham certas e não sobra nada
   para centralizar. */
@media (max-width: 700px) {
    .folha {
        --colunas: 2;
    }
}

/* ---------- PEÇAS EM MOVIMENTO ----------
   Três vídeos na régua da folha: canto reto, moldura de fio, sem sombra e sem
   zoom no hover — a galeria de card arredondado é justamente o que esta
   página recusa. O arquivo não desce do servidor até o ponteiro entrar. */

.reels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(var(--s4), 2.5vw, var(--s5));
    margin-top: clamp(var(--s6), 4vw, var(--s7));
}

.reel {
    margin: 0;
    min-width: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    border: var(--hair) solid var(--on-carbon-2);
    background: var(--carbon-deep);
}

.reel__art {
    position: relative;
    display: block;
    min-width: 0;
}

.reel__video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: var(--carbon-deep);
    cursor: pointer;
}

.reel__video:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: -2px;
}

/* O canário marca o que está ativo agora — aqui, o convite para entrar. */
.reel__cue {
    position: absolute;
    left: var(--s3);
    bottom: var(--s3);
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: 4px var(--s2);
    background: var(--canary);
    color: var(--ink);
    font-family: var(--font-form);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    pointer-events: none;
    transition: opacity 200ms linear;
}

.reel__cue svg {
    display: block;
    width: 9px;
    height: 9px;
    fill: var(--ink);
}

/* O convite fala a língua da tela. De tablet para baixo (1024px) não há
   ponteiro para passar, então a instrução é o toque; acima disso, o mouse.
   Corte por largura, não por capacidade de hover: é o que se confere
   redimensionando a janela, sem precisar de aparelho na mão. */
.reel__cue-touch {
    display: none;
}

@media (max-width: 1024px) {
    .reel__cue-hover {
        display: none;
    }

    .reel__cue-touch {
        display: block;
    }
}

/* No celular a peça roda sozinha assim que entra na tela, então não sobrou
   nada para instruir: o convite — seta de play e rótulo — sai da folha antes
   de aparecer, em vez de piscar no primeiro quadro e sumir. O corte é por
   capacidade, o mesmo (hover: none) que liga o autoplay no script, para que
   ninguém perca a instrução só por estreitar a janela no computador.

   Quem pediu movimento reduzido fica de fora: ali nada roda sozinho, e o
   convite ao toque continua sendo a única forma de pôr a peça para andar. */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
    .reel__cue {
        display: none;
    }
}

/* Tocando, a instrução já foi cumprida e sai de cena — vale para o autoplay
   do celular e para o hover do computador, com a mesma regra. */
.reel.is-playing .reel__cue {
    opacity: 0;
}

.reel__cap {
    padding: var(--s3) var(--s4);
    border-top: var(--hair) solid var(--on-carbon-2);
}

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

@media (max-width: 900px) {
    .reels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .reels {
        grid-template-columns: minmax(0, 1fr);
        max-width: 22rem;
    }
}