/* Seção #comunidade: Fase 5, com o ajuste do cliente (sem palco).
   Entrada em picote, fundo com a grade de 72 px e máscara radial, cabeçalho bicolor e uma fileira de cards 9:16
   sangrada na largura da tela (Swiper, js/modulos/comunidade.js), com esmaecimento nas bordas, o texto da copy por
   cima de cada card e a navegação (setas + progresso) embaixo, alinhada ao container. */

/* Por cima do fechamento (z-index 1 × 0) e com o fundo transparente embaixo (a base #050404 vem do body): os efeitos
   do eclipse aparecem nos espaços vazios do fim da seção, sem linha de corte; cards e navegação ficam por cima. */
.comunidade {
  z-index: 1;
  padding: 140px 0 120px;
  background: linear-gradient(180deg, #070505, rgba(5, 4, 4, 0));
}

/* Grade de 72 px com máscara radial */
.comunidade__grade {
  position: absolute;
  inset: 0;
  opacity: .35;
  -webkit-mask-image: radial-gradient(60% 50% at 50% 55%, #000, transparent 75%);
  mask-image: radial-gradient(60% 50% at 50% 55%, #000, transparent 75%);
  pointer-events: none;
}

/* Título em 3 linhas de 1280 a 1920: max-width maior só aqui (1100 px) e o teto do tamanho em 58 px, em vez de
   64 (a frase é bem mais longa que a dos outros títulos de seção) */
@media (min-width: 768px) {
  .comunidade__cabecalho {
    max-width: 1100px;
  }

  .comunidade__h2 {
    font-size: clamp(38px, 4.6vw, 58px);
  }
}

/* Bicolor (ajuste do cliente): "Faça parte … continuam evoluindo" em branco e só "com o ecossistema criado pela
   Zero7." em branco .42; a partir de 768 px, a parte cinza tem linha própria (3 linhas no desktop) */
.comunidade__h2 > span {
  color: rgba(255, 255, 255, .42);
}

@media (min-width: 768px) {
  .comunidade__h2 > span {
    display: block;
  }
}

/* ========== TRILHO (Swiper sangrado) ========== */
.comunidade__trilho {
  --card-w: 320px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-top: 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  touch-action: pan-y; /* o arraste lateral fica com o carrossel; o vertical, com a página */
}

/* Núcleo do Swiper (o CSS do pacote não é carregado; só o necessário, aqui) */
.comunidade__trilho .swiper-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  box-sizing: content-box;
  transition-property: transform;
}

.comunidade__trilho .swiper-slide {
  flex-shrink: 0;
  transition-property: transform;
}

.comunidade__trilho .swiper-wrapper {
  cursor: grab;
  /* a deriva move o wrapper a cada quadro (js/modulos/comunidade.js): com a camada própria, ele é só recomposto, não
     redesenhado (no Chrome sem GPU do teste, 22 → 27 fps em 1920 durante a deriva) */
  will-change: transform;
}

/* ========== CARD ========== */
.cslide {
  position: relative;
  width: var(--card-w);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 24px 24px 24px 0;
  background: #0d0a09;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.cslide__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Degradê da base do card */
.cslide__sombra {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(5, 4, 4, .55) 62%, rgba(5, 4, 4, .94) 100%);
  pointer-events: none;
}

/* Texto por cima do vídeo. Ele tem um degradê próprio que sobe 70 px acima da primeira linha: se a descrição for
   longa, a área escura cresce junto e nada da copy é cortado. */
.cslide__texto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  text-align: left;
}

.cslide__texto::before {
  content: "";
  position: absolute;
  inset: -70px 0 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5, 4, 4, 0), rgba(5, 4, 4, .55) 70px, rgba(5, 4, 4, .7));
  pointer-events: none;
}

.cslide__n {
  font: 700 12px/1 var(--fonte-display);
  letter-spacing: .16em;
  color: var(--cor-laranja-claro);
}

.cslide__titulo {
  font: 800 26px/1 var(--fonte-display);
  text-transform: uppercase;
  color: #fff;
}

.cslide__desc {
  font: 400 14px/1.5 var(--fonte-texto);
  color: rgba(255, 255, 255, .78);
}

/* ========== NAVEGAÇÃO ========== */
.comunidade__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}

.comunidade__progresso {
  display: flex;
  gap: 6px;
}

.comunidade__progresso button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.comunidade__progresso button i {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px 0;
  background: rgba(255, 255, 255, .18);
  transition: background var(--dur-2);
}

.comunidade__progresso button[aria-pressed="true"] i {
  background: var(--grad-marca-horizontal);
}

.comunidade__progresso button:focus-visible {
  outline: 2px solid var(--cor-luz);
  outline-offset: 2px;
}

/* ========== MOBILE ========== */
@media (max-width: 767.98px) {
  .comunidade {
    padding: 110px 0 90px;
  }

  .comunidade__trilho {
    --card-w: 260px;
    margin-top: 40px;
  }

  .cslide__titulo {
    font-size: 22px;
  }

  .cslide__desc {
    font-size: 13px;
  }
}

/* ========== DESKTOP COM MOUSE: mais leve e mais limpo (ajuste do cliente) ==========
   Só com mouse em telas largas; o mobile e o toque ficam como acima.
   - Palco: os 3 cards centrais (3 × card + 2 × 28 px) aparecem inteiros; fora dele, os cards somem num degradê até
     a cor do fundo. O degradê é feito por dois pseudo-elementos fixos nas laterais, e não pelo mask-image do
     trilho, que obrigava o navegador a recompor a faixa inteira a cada quadro de vídeo.
   - Texto com a mesma altura em todos os cards (título em 1 linha, descrição em 2), que abre por inteiro no hover
     e, pelo teclado, no card ativo quando o foco está nas setas ou no progresso.
   - Hover: o card sob o mouse sobe 6 px e os outros apagam (só opacity e transform; nada de filter ou blur).
   - Vídeos (js/modulos/comunidade.js): sem hover, tocam só os 3 do palco; com hover, só o card sob o mouse.
   - Só os cards do palco reagem ao mouse: os degradês das laterais ficam por cima e recebem o ponteiro. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .comunidade__trilho {
    --gap: 28px;
    --palco: calc(3 * var(--card-w) + 2 * var(--gap));
    margin-top: 46px;
    padding: 10px 0; /* folga para o card subir 6 px sem ser cortado pelo overflow do trilho */
    -webkit-mask-image: none;
    mask-image: none;
  }

  .comunidade__nav {
    margin-top: 22px;
  }

  .comunidade__trilho::before,
  .comunidade__trilho::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: calc((100% - var(--palco)) / 2);
    /* Recebem o mouse (ajuste do cliente): o card no degradê não acende, não toca e não apaga os do palco. O arraste
       continua em toda a faixa, porque o Swiper escuta o trilho inteiro (touchEventsTarget: 'container'). */
    pointer-events: auto;
  }

  /* transparente na borda do palco, cor cheia do fundo a ~60% da largura */
  .comunidade__trilho::before {
    left: 0;
    background: linear-gradient(270deg, rgba(5, 4, 4, 0) 0%, #050404 60%);
  }

  .comunidade__trilho::after {
    right: 0;
    background: linear-gradient(90deg, rgba(5, 4, 4, 0) 0%, #050404 60%);
  }

  /* Hover: o card sob o mouse sobe e ganha a borda mais clara; os outros apagam */
  .comunidade__trilho .cslide {
    transition: opacity .35s var(--curva), transform .35s var(--curva);
  }

  .comunidade__trilho:has(.cslide:hover) .cslide:not(:hover) {
    opacity: .4;
  }

  .comunidade__trilho .cslide:hover {
    transform: translateY(-6px);
  }

  /* a borda clara fica num pseudo-elemento por cima do vídeo (a box-shadow do card fica embaixo dele) e só a
     opacidade muda */
  .cslide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    opacity: 0;
    transition: opacity .35s var(--curva);
    pointer-events: none;
  }

  .cslide:hover::after {
    opacity: 1;
  }

  /* Texto: título em 1 linha e descrição em 2 (mesma altura em todos os cards) */
  .cslide__titulo {
    overflow: hidden;
    white-space: nowrap;
  }

  .cslide__desc {
    min-height: 3em; /* 2 × line-height (1.5) */
    max-height: 3em;
    overflow: hidden;
    transition: max-height .35s var(--curva), -webkit-mask-position .35s var(--curva), mask-position .35s var(--curva);
  }

  /* Só quando o texto passa de 2 linhas (data-corta, posto pelo JS): a 1ª linha inteira e a 2ª sumindo no fim, no
     lugar de reticências. Ao abrir, a camada da última linha anda 64 px para a direita e o degradê sai do texto. */
  .cslide__desc[data-corta] {
    -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(90deg, #000 calc(100% - 64px), transparent);
    mask-image: linear-gradient(#000, #000), linear-gradient(90deg, #000 calc(100% - 64px), transparent);
    -webkit-mask-size: 100% calc(100% - 1.5em), calc(100% + 64px) 1.5em;
    mask-size: 100% calc(100% - 1.5em), calc(100% + 64px) 1.5em;
    -webkit-mask-position: 0 0, -64px 100%;
    mask-position: 0 0, -64px 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  /* Abre: até 6 linhas, crescendo para cima (o bloco está preso à base do card, e o degradê do .cslide__texto
     acompanha) */
  .cslide:hover .cslide__desc,
  .comunidade:has(.comunidade__nav :focus-visible) .swiper-slide-active .cslide__desc {
    max-height: 9em;
    -webkit-mask-position: 0 0, 0 100%;
    mask-position: 0 0, 0 100%;
  }
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  .comunidade__trilho {
    --card-w: 360px;
  }
}

/* Movimento reduzido no desktop: sem transições, sem subir o card e com o texto já aberto */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .comunidade__trilho .cslide,
  .cslide::after,
  .cslide__desc {
    transition: none;
  }

  .comunidade__trilho .cslide:hover {
    transform: none;
  }

  .cslide__desc,
  .cslide__desc[data-corta] {
    min-height: 0;
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}