/* ============================================================
   ABERTO DO MADEIRA 2027 — Camada de movimento
   ------------------------------------------------------------
   Carregado depois do tema. Aditivo: nenhuma regra existente é
   alterada. Tirar este arquivo devolve o site estático.

   Princípio: o movimento vem dos elementos gráficos da marca —
   trajetórias das bolas, folhagens e linhas de quadra — e não de
   efeitos genéricos. Cada animação tem razão de existir.

   Tudo aqui é transform/opacity (não causa recálculo de layout) e
   tudo para sob prefers-reduced-motion, no fim do arquivo.
   ============================================================ */

/* ---------- 1. Entrada do hero: o momento coreografado ----------
   Roda por CSS no carregamento, sem depender de JS. Se o JS falhar,
   o conteúdo termina visível do mesmo jeito (animation-fill-mode).
   A ordem conta a hierarquia: marca, título, apoio, dados, ação. */
@keyframes am-sobe{
  from{opacity:0; transform:translate3d(0,26px,0)}
  to  {opacity:1; transform:translate3d(0,0,0)}
}
@keyframes am-marca{
  from{opacity:0; transform:translate3d(0,14px,0) scale(.88)}
  to  {opacity:1; transform:translate3d(0,0,0) scale(1)}
}
@keyframes am-risca{
  from{transform:scaleX(0)}
  to  {transform:scaleX(1)}
}

.hero-poster-logo,
.hero-poster-title,
.hero-poster-subtitle,
.hero-poster-desc,
.hero-poster-infobar,
.hero-poster-cta{
  animation:am-sobe .72s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--d,0ms);
}
.hero-poster-logo{
  animation-name:am-marca;
  animation-duration:.9s;
  --d:60ms;
}
.hero-poster-title{--d:220ms}
.hero-poster-subtitle{--d:320ms}
.hero-poster-desc{--d:400ms}
.hero-poster-infobar{--d:500ms}
.hero-poster-cta{--d:600ms}

/* O selo oficial entra girando de leve, como uma bola quicando. */
@keyframes am-selo{
  0%  {opacity:0; transform:translate3d(0,-18px,0) rotate(-12deg)}
  60% {opacity:1; transform:translate3d(0,4px,0) rotate(4deg)}
  100%{opacity:1; transform:translate3d(0,0,0) rotate(0)}
}
.hero-selo-oficial{animation:am-selo 1.1s cubic-bezier(.22,1,.36,1) 760ms both;}

/* ---------- 2. Trajetória da bola ----------
   Elemento gráfico oficial da marca. O arco se desenha conforme a
   seção entra na tela — o traço acompanha a leitura, não decora. */
.am-trajetoria{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
  overflow:visible;
}
.am-trajetoria path{
  fill:none;
  stroke:var(--am-laranja,#FF6A00);
  stroke-linecap:round;
  stroke-dasharray:var(--traco,1200);
  stroke-dashoffset:var(--traco,1200);
  transition:stroke-dashoffset 1.6s cubic-bezier(.22,1,.36,1);
}
.am-trajetoria.am-desenhou path{stroke-dashoffset:0;}
.am-trajetoria .am-bola{
  fill:var(--am-laranja,#FF6A00);
  opacity:0;
  transition:opacity .4s ease .9s;
}
.am-trajetoria.am-desenhou .am-bola{opacity:1;}

/* ---------- 3. Folhagem em paralaxe ----------
   A folhagem emoldura, nunca disputa. Três regras a sustentam:

   1. NUNCA sobre a coluna de texto. A largura máxima e os recuos são
      calculados para que a folha pare antes da goteira do .container.
   2. SEMPRE cortada pela borda. Folha inteira dentro do retângulo lê
      como adesivo; folha entrando pela beirada lê como mata.
   3. Opacidade pelo FUNDO, não fixa. A arte tem luminância 32–50
      (verde quase preto): sobre a areia clara, 50% vira mancha. Entre
      .16 e .24 ela está presente sem puxar o olho.

   Assimetria: três folhas de um lado em alturas diferentes, uma do
   outro. Quatro folhas, uma por canto, é moldura — e moldura o olho
   lê como enfeite. */
.am-folhas{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.am-folha{
  position:absolute;
  width:clamp(120px,15vw,230px);
  opacity:.2;
  will-change:transform;
  transform:translate3d(0,var(--py,0),0) rotate(var(--rot,0deg));
}

/* --- disposição A (primeira seção clara) ---
   Massa no alto à esquerda, eco baixo à direita. */
.am-folhas--a .am-folha--1{   /* frente, canto superior esquerdo */
  top:-7%; left:-12%; --rot:-16deg;
  width:clamp(130px,16vw,250px); opacity:.24;
}
.am-folhas--a .am-folha--2{   /* fundo, logo abaixo da primeira */
  top:24%; left:-11%; --rot:9deg;
  width:clamp(100px,12vw,180px); opacity:.14;
  filter:blur(1.5px);
}
.am-folhas--a .am-folha--3{   /* respingo alto à direita, muito cortado */
  top:-11%; right:-9%; --rot:22deg;
  width:clamp(90px,11vw,170px); opacity:.16;
  filter:blur(1px);
}
.am-folhas--a .am-folha--4{   /* peso baixo à direita, fecha a diagonal */
  bottom:-13%; right:-5%; --rot:-8deg;
  width:clamp(120px,15vw,225px); opacity:.22;
}

/* --- disposição B (segunda seção clara) ---
   Espelhada e deslocada: a mesma mata, outro trecho dela. */
.am-folhas--b .am-folha--1{
  bottom:-10%; left:-8%; --rot:12deg;
  width:clamp(125px,15vw,235px); opacity:.22;
}
.am-folhas--b .am-folha--2{
  top:-9%; right:-7%; --rot:-19deg;
  width:clamp(130px,16vw,245px); opacity:.24;
}
.am-folhas--b .am-folha--3{
  top:38%; right:-12%; --rot:6deg;
  width:clamp(95px,11vw,175px); opacity:.13;
  filter:blur(1.5px);
}
.am-folhas--b .am-folha--4{
  top:-12%; left:-10%; --rot:-6deg;
  width:clamp(85px,10vw,160px); opacity:.15;
  filter:blur(1px);
}

/* Em telas estreitas NAO EXISTE goteira: o texto comeca a 24px da
   borda, entao qualquer folha visivel fica atras de alguma linha.
   A folhagem recua para as faixas vazias de respiro, no topo e na
   base da secao, bem mais fraca e quase toda fora do quadro.
   As regras precisam da mesma especificidade do arranjo (.am-folhas--x
   .am-folha--n); escrever so .am-folha aqui perde a disputa e a
   opacidade do desktop continua valendo. */
@media (max-width:860px){
  .am-folhas--a .am-folha--2,
  .am-folhas--a .am-folha--3,
  .am-folhas--b .am-folha--2,
  .am-folhas--b .am-folha--3{display:none}

  .am-folhas--a .am-folha--1,
  .am-folhas--a .am-folha--4,
  .am-folhas--b .am-folha--1,
  .am-folhas--b .am-folha--4{
    width:clamp(84px,24vw,122px);
    opacity:.11;
    filter:none;
  }
  .am-folhas--a .am-folha--1{top:-5%;  left:-24%;  --rot:-16deg}
  .am-folhas--a .am-folha--4{bottom:-6%; right:-24%; --rot:-8deg}
  .am-folhas--b .am-folha--1{bottom:-6%; left:-24%;  --rot:12deg}
  /* no desktop esta folha e ancorada pela esquerda; sem zerar o left,
     o right do celular e ignorado e ela cai em cima do texto. */
  .am-folhas--b .am-folha--4{top:-5%; left:auto; right:-24%; --rot:-6deg; display:block}
}


/* ---------- 4. Cartões com movimento clicável ----------
   O cartão responde ao ponteiro (inclinação sutil, seguindo o
   cursor) e ao toque (afunda). Só onde existe mouse de verdade. */
.cat-card,.athlete-card,.news-card,.jogos-home-card,.tv-video-card{
  transition:transform .42s cubic-bezier(.22,1,.36,1), box-shadow .42s ease;
  transform-style:preserve-3d;
}
@media (hover:hover){
  .am-inclina{
    transform:perspective(900px)
              rotateX(calc(var(--ry,0) * -1deg))
              rotateY(calc(var(--rx,0) * 1deg))
              translate3d(0,-4px,0);
  }
}
.cat-card:active,.athlete-card:active,.news-card:active,
.jogos-home-card:active,.tv-video-card:active{
  transform:scale(.985);
  transition-duration:.12s;
}

/* Brilho que acompanha o cursor — marca a superfície como clicável. */
@media (hover:hover){
  .am-brilho{position:relative; isolation:isolate;}
  .am-brilho::after{
    content:"";
    position:absolute; inset:0; z-index:1;
    border-radius:inherit;
    pointer-events:none;
    opacity:0;
    transition:opacity .3s ease;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
               rgba(255,106,0,.16), transparent 60%);
  }
  .am-brilho:hover::after{opacity:1;}
}

/* ---------- 5. Vídeo clicável ----------
   O cartão de vídeo mostra o play crescendo no hover e some ao tocar. */
.am-play{
  position:absolute;
  left:50%; top:50%;
  width:clamp(52px,6vw,74px);
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(1);
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--am-laranja,#FF6A00);
  color:var(--am-carvao,#1A1A1A);
  box-shadow:0 10px 30px -8px rgba(255,106,0,.7);
  transition:transform .4s cubic-bezier(.22,1,.36,1), opacity .3s ease;
  z-index:3;
}
.am-play svg{width:42%; height:42%; margin-left:6%;}
.am-video-cx:hover .am-play{transform:translate(-50%,-50%) scale(1.12);}
.am-video-cx.am-tocando .am-play{opacity:0; transform:translate(-50%,-50%) scale(.6); pointer-events:none;}

/* Anel pulsante atrás do play, no ritmo de uma bola quicando. */
@keyframes am-pulso{
  0%  {transform:translate(-50%,-50%) scale(1);   opacity:.55}
  70% {transform:translate(-50%,-50%) scale(1.5); opacity:0}
  100%{transform:translate(-50%,-50%) scale(1.5); opacity:0}
}
.am-play::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:100%; aspect-ratio:1; border-radius:50%;
  border:2px solid var(--am-laranja,#FF6A00);
  animation:am-pulso 2.4s ease-out infinite;
}

/* ---------- 6. Números que contam ----------
   Placar e contagem regressiva sobem até o valor — dá a sensação
   de dado ao vivo, que é o que a seção comunica. */
.am-conta{font-variant-numeric:tabular-nums;}

/* ---------- 7. Linhas de quadra que se desenham ----------
   O elemento .court-lines já existia no site; aqui ele ganha
   entrada, saindo do centro para as bordas. */
@keyframes am-quadra{
  from{opacity:0; transform:scaleX(.82)}
  to  {opacity:1; transform:scaleX(1)}
}
.court-lines{
  animation:am-quadra 1.4s cubic-bezier(.22,1,.36,1) 300ms both;
  transform-origin:50% 50%;
}

/* ---------- 8. Faixa clara: a onda respira ---------- */
@keyframes am-onda{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(3px)}
}
.secao-clara::before{animation:am-onda 7s ease-in-out infinite;}

/* ---------- 9. Movimento reduzido ----------
   Quem pediu menos movimento recebe o site inteiro parado, no
   estado final. Nada fica invisível. */
@media (prefers-reduced-motion:reduce){
  .hero-poster-logo,.hero-poster-title,.hero-poster-subtitle,
  .hero-poster-desc,.hero-poster-infobar,.hero-poster-cta,
  .hero-selo-oficial,.court-lines{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .am-trajetoria path{transition:none; stroke-dashoffset:0;}
  .am-trajetoria .am-bola{opacity:1; transition:none;}
  .am-folha{transform:none !important;}
  .am-play::before{animation:none;}
  .secao-clara::before{animation:none;}
  .am-inclina{transform:none !important;}
}

/* As trajetórias cruzam a seção das competições por trás dos cartões.
   Em opacidade cheia elas competiam com o conteúdo; aqui ficam como
   atmosfera, que é o papel delas. */
[data-trajetoria] .am-trajetoria{opacity:.42;}
[data-trajetoria] .am-trajetoria path{stroke-width:1.6;}