/* ============================================================
   CAMADA DE MOVIMENTO — padrão do tenisclubepvh.com.br
   ------------------------------------------------------------
   O cliente comparou as duas entregas e pediu "o scroll e as
   entradas iguais às do Tênis Clube". Fui ler o código do site
   dele em vez de chutar. A diferença medida:

              Aberto (antes)        Tênis Clube
   distância  14px                  28px
   duração    0,4s                  0,8s
   curva      cubic(.22,1,.36,1)    cubic(.16,1,.3,1)
   variações  cima/lados/zoom       + máscara (clip-path)
   escalonado data-delay solto      8 degraus fixos

   Metade da distância em metade do tempo: por isso lia como
   "estático". Esta folha traz a régua do Tênis Clube para cá.
   Carrega DEPOIS de style.css, então sobrepõe sem apagar nada.
   ============================================================ */

:root{
  /* a curva do site de referência — sobe rápido e assenta devagar */
  --ease-tc:cubic-bezier(.16,1,.3,1);
}

/* ---- rolagem ---- */
html{
  scroll-behavior:smooth;
  scroll-padding-top:110px;
  overflow-x:clip;
}
/* com o Lenis ativo a suavização nativa briga com a da biblioteca */
html.lenis{scroll-behavior:auto;}
html.lenis body{overflow-x:hidden;}

/* ============================================================
   ENTRADAS
   ============================================================ */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease-tc), transform .8s var(--ease-tc);
}
[data-reveal].in{opacity:1; transform:none; clip-path:inset(0 0 0 0);}

[data-reveal="left"] { transform:translateX(-34px);}
[data-reveal="right"]{ transform:translateX(34px);}
[data-reveal="zoom"] { transform:scale(.93) translateY(16px);}

/* a máscara: o bloco não se move, ele é revelado de cima para
   baixo. É o que dá a leitura de "edição" nos títulos. */
[data-reveal="mascara"]{
  opacity:1;
  clip-path:inset(0 0 100% 0);
  transform:none;
  transition:clip-path 1s var(--ease-tc);
}

/* degraus de atraso: irmãos entram em cascata, não todos juntos */
[data-delay="1"]{transition-delay:.08s}
[data-delay="2"]{transition-delay:.16s}
[data-delay="3"]{transition-delay:.24s}
[data-delay="4"]{transition-delay:.32s}
[data-delay="5"]{transition-delay:.40s}
[data-delay="6"]{transition-delay:.48s}
[data-delay="7"]{transition-delay:.56s}
[data-delay="8"]{transition-delay:.64s}

/* o site antigo usava data-delay em milissegundos (0, 40, 80…);
   esses continuam funcionando pelo atributo style que o JS põe */
[data-parallax]{will-change:transform;}

/* ============================================================
   NÚMEROS QUE CONTAM
   O número cresce até o valor real quando entra na tela. Para
   não "pular" de largura enquanto conta, a fonte vira tabular:
   todos os dígitos passam a ter a mesma caixa.
   ============================================================ */
[data-conta]{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ============================================================
   INTERATIVIDADE
   ============================================================ */

/* botões: erguem e ganham brilho, como no site de referência */
.btn{
  transition:transform .35s var(--ease-tc), box-shadow .35s var(--ease-tc),
             filter .35s var(--ease-tc), background .35s var(--ease-tc),
             color .35s var(--ease-tc);
}
.btn:hover{transform:translateY(-3px) scale(1.015); filter:brightness(1.06);}
.btn:active{transform:translateY(-1px) scale(1);}

/* cartões: sobem ao passar o mouse */
.atalho,
.cat-card,
.athlete-card,
.noticia-card,
.galeria-grid-item,
.campeoes-card,
.tvm-card,
.gal-item,
.nt-card{
  transition:transform .45s var(--ease-tc), box-shadow .45s var(--ease-tc),
             border-color .45s var(--ease-tc);
}
.atalho:hover,
.cat-card:hover,
.athlete-card:hover,
.noticia-card:hover,
.campeoes-card:hover,
.tvm-card:hover,
.nt-card:hover{transform:translateY(-6px);}

/* a imagem dentro do cartão aproxima devagar */
.tvm-card-img img,
.nt-card-img img,
.gal-item img{
  transition:transform 1.1s var(--ease-tc), filter .6s var(--ease-tc);
}
.tvm-card:hover .tvm-card-img img,
.nt-card:hover .nt-card-img img,
.gal-item:hover img{transform:scale(1.07);}

/* link com seta: a seta anda */
.link-seta svg,
.tvm-abrir svg,
.nt-ler svg{transition:transform .4s var(--ease-tc);}
.link-seta:hover svg,
.tvm-abrir:hover svg,
.nt-ler:hover svg{transform:translateX(5px);}

/* ============================================================
   QUEM PEDE MENOS MOVIMENTO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1 !important; transform:none !important; clip-path:none !important;}
  .btn:hover{transform:none;}
}

/* ============================================================
   CABEÇALHO QUE NÃO CORTA
   ------------------------------------------------------------
   Medido: marca 160px + menu 924px + ações 267px = 1351px,
   dentro de um contêiner de 1180px. O cabeçalho é flex e nada
   ali encolhe, então as ações (idioma + botão) vazavam 171px
   para fora do contêiner — e, em tela de notebook, para fora da
   própria janela. Era esse o "menu cortando na lateral".

   Três ajustes, cada um medido:
   1. o cabeçalho ganha contêiner próprio, mais largo que a
      coluna de conteúdo — ele não precisa obedecer à mesma
      medida do texto;
   2. o menu aperta mais um pouco (padding e corpo);
   3. o menu sanduíche entra mais cedo, em 1280px: abaixo disso
      nove itens não cabem sem virar sopa de letrinhas.
   ============================================================ */
.site-header .container{
  width:min(100% - 40px, 1420px);
  max-width:1420px;
}

@media (min-width:1360px){
  .nav-desktop{gap:0;}
  .nav-desktop a{
    padding:10px 6px;
    font-size:.655rem;
    letter-spacing:.025em;
    font-variation-settings:'wdth' 106;
  }
  /* Nada no cabeçalho encolhe abaixo do próprio conteúdo.
     Deixar o menu encolher (min-width:0) foi pior: a caixa
     encolhia, os links não, e eles passavam POR CIMA do seletor
     de idioma. Melhor sobrar espaço de verdade do que fingir
     que coube. */
  .site-header .brand,
  .site-header .header-actions,
  .site-header .nav-desktop{flex:0 0 auto;}
}

/* A assinatura da marca ("Tênis & Beach Tennis · Porto Velho/RO")
   ocupa 150px no cabeçalho e repete o que o rodapé já diz. Abaixo
   de 1600px ela sai e esse espaço vai para os nove itens do menu.
   O nome da marca continua lá, inteiro. */
@media (max-width:1600px){
  .site-header .brand small{display:none;}
}

/* As ações são o destino do cabeçalho, então não somem — só
   ficam mais justas quando o espaço aperta. */
@media (max-width:1500px){
  .site-header .header-actions{gap:8px;}
  .site-header .header-actions .btn{padding:9px 14px; font-size:.72rem;}
}

/* Abaixo de 1280 o menu do topo sai e entra o sanduíche.
   Medido: marca 296 + menu 840 + ações 215 + respiros = 1411px.
   Abaixo disso os nove itens só caberiam encolhendo a ponto de
   não se ler. Então em 1360 o menu dá lugar ao sanduíche, que
   mostra os mesmos nove itens com folga.
   O botão sanduíche do site só aparecia a partir de 1200px — se
   eu apenas escondesse o menu, a faixa entre 1201 e 1359 ficaria
   SEM navegação nenhuma. As duas regras andam juntas. */
@media (max-width:1359px){
  .nav-desktop{display:none;}
  .burger{display:flex;}
}