/* =============================================================
   Sunomono — Linha do Tempo 10 Anos
   Escrito MOBILE FIRST: o bloco base é o celular, os @media
   min-width vão só acrescentando conforme a tela cresce.

   --e = escala global da cena. O JS recalcula no resize; todas as
   medidas do cenário derivam dela, então a proporção entre rua,
   prédios e motoboy nunca quebra.
   ============================================================= */

.sn-tl{
  /* paleta PROVISÓRIA — trocar pelas cores da marca */
  --sn-ceu-topo:#8ecae6;
  --sn-ceu-meio:#bde0fe;
  --sn-ceu-baixo:#ffe8c2;
  --sn-marca:#e63946;
  --sn-marca-escura:#b32d38;
  --sn-tinta:#1d3557;
  --sn-papel:#fffaf3;
  --sn-painel:#0e1c26;
  --sn-borda:#2c4d63;

  --sn-fonte:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sn-ano:#c7a15c;          /* o dourado do ano no cartão */
  --sn-barra:var(--sn-ano);  /* fundo da barra de navegação — mesmo dourado */
  --sn-controles-h:70px;     /* altura da barra de anos: botão 44 + 2x13 de respiro */

  --e:.55;
  /* Onde o ponto turístico do ano estaciona, na horizontal.
     No celular ele é ancorado pela BORDA DIREITA (por isso o valor é
     100% - margem, e o .sn-marco usa translateX(-100%)); no desktop volta a
     ser ancorado pelo centro. */
  --sn-marco-x:calc(100% - 20px);

  /* ---- geometria vertical da cena (valores de CELULAR) ----
     Todos multiplicados por --e na hora do uso.
     No celular o asfalto é mais alto: o motoboy desce, a linha do horizonte
     sobe junto e a arte de fundo deixa de ficar escondida atrás dele.
     Os "tile" mantêm a proporção original do ladrilho (rua 400:130,
     frente 700:180) para a arte ampliar sem distorcer. */
  --sn-cena-h:560px;      /* base da altura da cena */
  --sn-rua-h:190px;       /* espessura do asfalto */
  --sn-rua-tile:585px;
  --sn-frente-h:250px;    /* camada da frente, postes e arbustos */
  --sn-frente-tile:972px;
  --sn-horizonte:172px;   /* onde morros, prédios e marcos se apoiam */
  --sn-moto-y:22px;       /* altura do motoboy a partir da base */

  position:relative;
  display:block;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  cursor:grab;
  background:var(--sn-painel);
}
.sn-tl.sn-is-dragging{cursor:grabbing}
.sn-tl:focus{outline:none}
.sn-tl:focus-visible{outline:3px solid #ffd166;outline-offset:-3px}

.sn-tl *,
.sn-tl *::before,
.sn-tl *::after{box-sizing:border-box}

/* Largura total, estourando o container do tema/Elementor.
   Usa --sn-vw (definido pelo JS = clientWidth, JÁ sem a barra de rolagem).
   O fallback 100vw só vale no primeiro frame, antes do JS rodar. */
.sn-tl--full{
  width:var(--sn-vw,100vw);
  max-width:var(--sn-vw,100vw);
  margin-left:calc(50% - (var(--sn-vw,100vw) / 2));
  margin-right:calc(50% - (var(--sn-vw,100vw) / 2));
}

.sn-tl__carregando{
  padding:40px 20px;text-align:center;
  color:#6f92a8;font:600 14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.sn-tl.sn-pronto .sn-tl__carregando{display:none}

/* -------------------------------------------------------------
   CENA
   ------------------------------------------------------------- */
.sn-cena{
  position:relative;
  height:calc(var(--sn-cena-h) * var(--e) + 120px);
  overflow:hidden;
  background:linear-gradient(180deg,var(--sn-ceu-topo) 0%,var(--sn-ceu-meio) 55%,var(--sn-ceu-baixo) 100%);
  background-size:cover;
  background-position:center bottom;
  touch-action:pan-y;              /* o scroll vertical da página continua livre */
}

/* Cada camada anda numa velocidade própria — é essa diferença
   que constrói a profundidade. */
.sn-camada{
  position:absolute;
  left:0;
  width:calc(100% + (1300px * var(--e)));
  background-repeat:repeat-x;
  background-position:left bottom;
  will-change:transform;
  pointer-events:none;
  backface-visibility:hidden;
}

.sn-c-nuvens{
  top:calc(10px * var(--e));
  height:calc(300px * var(--e));
  background-size:calc(900px * var(--e)) calc(300px * var(--e));
  background-position:left top;
}
.sn-c-morros{
  bottom:calc(var(--sn-horizonte) * var(--e));
  height:calc(260px * var(--e));
  background-size:calc(1200px * var(--e)) calc(260px * var(--e));
}
.sn-c-marcos{
  bottom:calc((var(--sn-horizonte) + 6px) * var(--e));
  height:calc(480px * var(--e));
  width:100%;                       /* não repete: cada parada tem a sua arte */
}
.sn-c-predios{
  bottom:calc(var(--sn-horizonte) * var(--e));
  height:calc(340px * var(--e));
  background-size:calc(900px * var(--e)) calc(340px * var(--e));
}
.sn-c-rua{
  bottom:0;
  height:calc(var(--sn-rua-h) * var(--e));
  background-size:calc(var(--sn-rua-tile) * var(--e)) calc(var(--sn-rua-h) * var(--e));
}
.sn-c-frente{
  bottom:0;
  height:calc(var(--sn-frente-h) * var(--e));
  background-size:calc(var(--sn-frente-tile) * var(--e)) calc(var(--sn-frente-h) * var(--e));
}

/* Ponto turístico do ano. Proporção 11:8, a mesma da arte original (440x320).
   No CELULAR ele é 25% maior e encosta na borda direita (translateX(-100%)),
   deixando o lado esquerdo livre para o motoboy — sem isso os dois se
   sobrepõem e a arte do marco fica escondida atrás dele. */
.sn-marco{
  position:absolute;
  bottom:0;
  width:min(calc(825px * var(--e)), 102.5%);
  aspect-ratio:11 / 8;
  height:auto;
  transform:translateX(-100%);
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:contain;
}

/* marco com SVG incorporado (o de 2026, que tem o aceno) */
.sn-marco--vivo{background-image:none !important}
.sn-marco--vivo svg{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
}

/* -------------------------------------------------------------
   ACENO

   Um aceno de verdade não é um pêndulo regular: começa mais aberto,
   perde amplitude a cada ida e volta, e termina com uma pausa antes de
   recomeçar. É essa irregularidade que faz parecer gente, e não motor.

   A mão repete o mesmo gesto com um atraso pequeno (sobreposição), que é
   o que dá a sensação de peso e articulação.
   ------------------------------------------------------------- */
/* O ANTEBRAÇO é quem acena — giro no cotovelo.
   Não é pêndulo regular: começa aberto, perde amplitude a cada ida e volta e
   termina com uma pausa. A irregularidade é o que separa gente de motor. */
/* --sn-aceno-amp multiplica TODOS os ângulos. Quanto menor, menos a junta se
   abre — é o ajuste rápido quando as peças não têm sobreposição suficiente.
   1 = amplitude cheia. Menos de .5 já quase não lê como aceno. */
.sn-marco{--sn-aceno-amp:.75}

@keyframes sn-aceno-antebraco{
   0%   {transform:rotate(0deg)}
   7%   {transform:rotate(calc(-17deg * var(--sn-aceno-amp)))}
  15%   {transform:rotate(calc(14deg * var(--sn-aceno-amp)))}
  23%   {transform:rotate(calc(-15deg * var(--sn-aceno-amp)))}
  31%   {transform:rotate(calc(11deg * var(--sn-aceno-amp)))}
  39%   {transform:rotate(calc(-10deg * var(--sn-aceno-amp)))}
  47%   {transform:rotate(calc(7deg * var(--sn-aceno-amp)))}
  55%   {transform:rotate(calc(-4deg * var(--sn-aceno-amp)))}
  62%   {transform:rotate(0deg)}
 100%   {transform:rotate(0deg)}   /* respiro antes de recomeçar */
}

/* A MÃO repete o gesto com menos amplitude — o punho é articulação curta. */
@keyframes sn-aceno-mao{
   0%   {transform:rotate(0deg)}
   7%   {transform:rotate(calc(-7deg * var(--sn-aceno-amp)))}
  15%   {transform:rotate(calc(6deg * var(--sn-aceno-amp)))}
  23%   {transform:rotate(calc(-6deg * var(--sn-aceno-amp)))}
  31%   {transform:rotate(calc(5deg * var(--sn-aceno-amp)))}
  39%   {transform:rotate(calc(-4deg * var(--sn-aceno-amp)))}
  47%   {transform:rotate(calc(3deg * var(--sn-aceno-amp)))}
  55%   {transform:rotate(calc(-2deg * var(--sn-aceno-amp)))}
  62%   {transform:rotate(0deg)}
 100%   {transform:rotate(0deg)}
}

/* O BRAÇO quase não se mexe: só acompanha de leve, para o ombro não parecer
   travado. Amplitude de 2 graus é proposital — mais que isso vira pêndulo. */
@keyframes sn-aceno-ombro{
   0%   {transform:rotate(0deg)}
  20%   {transform:rotate(-2deg)}
  45%   {transform:rotate(1.2deg)}
  62%   {transform:rotate(0deg)}
 100%   {transform:rotate(0deg)}
}

.sn-marco.is-ativo.sn-tem-aceno .sn-alvo-antebraco{
  animation:sn-aceno-antebraco 4.2s cubic-bezier(.45,.05,.55,.95) infinite;
}
.sn-marco.is-ativo.sn-tem-aceno .sn-alvo-mao{
  /* 120ms atrás do antebraço: a mão chega depois. É a sobreposição que dá
     peso ao gesto — sem ela, mão e antebraço viram uma peça rígida só. */
  animation:sn-aceno-mao 4.2s cubic-bezier(.45,.05,.55,.95) infinite;
  animation-delay:-.12s;
}
.sn-marco.is-ativo.sn-tem-aceno .sn-alvo-braco{
  animation:sn-aceno-ombro 4.2s cubic-bezier(.45,.05,.55,.95) infinite;
}

/* -------------------------------------------------------------
   MOTOBOY — fica parado no centro; quem anda é a cidade
   ------------------------------------------------------------- */
.sn-motoboy{
  position:absolute;
  left:40%;            /* no celular ele sai do centro para liberar o marco */
  bottom:calc(var(--sn-moto-y) * var(--e));
  width:calc(300px * var(--e));
  transform:translateX(-50%);
  will-change:transform;
  pointer-events:none;
  filter:drop-shadow(0 calc(12px * var(--e)) calc(10px * var(--e)) rgba(0,0,0,.25));
  /* a virada de sentido: o scaleX passa por zero e lê como ele girando o corpo */
  transition:transform .32s cubic-bezier(.65,0,.35,1);
}
.sn-motoboy svg{display:block;width:100%;height:auto;overflow:visible}

/* -------------------------------------------------------------
   CARTÃO DO MARCO
   No celular ele fica ABAIXO da cena, em fluxo — texto legível,
   nada tapando a ilustração. No desktop vira sobreposição.
   ------------------------------------------------------------- */
.sn-cartao{
  position:relative;
  background:var(--sn-papel);
  color:var(--sn-tinta);
  padding:26px 26px 28px;
  transition:opacity .3s ease,transform .3s ease;

  /* Os textos da campanha variam de 300 a 900 caracteres. Em vez de o cartão
     mudar de tamanho (ou cobrir a ilustração inteira), ele tem altura máxima e
     o excesso rola por dentro. */
  max-height:min(340px,52vh);
  overflow-y:auto;
  overscroll-behavior:contain;   /* ao chegar no fim, não arrasta a página junto */

  /* barra de rolagem dourada — Firefox */
  scrollbar-width:thin;
  scrollbar-color:var(--sn-ano) transparent;
}

/* barra de rolagem dourada — Chrome, Edge, Safari */
.sn-cartao::-webkit-scrollbar{width:8px}
.sn-cartao::-webkit-scrollbar-track{background:transparent}
.sn-cartao::-webkit-scrollbar-thumb{
  background:var(--sn-ano);
  border-radius:99px;
  border:2px solid transparent;
  background-clip:content-box;
}
.sn-cartao::-webkit-scrollbar-thumb:hover{background:#b0863f;background-clip:content-box}
.sn-cartao[data-sn-oculto="true"]{opacity:0;transform:translateY(10px)}

.sn-cartao__ano{
  margin:0 0 2px;
  font:700 34px/1.05 var(--sn-fonte);
  letter-spacing:0;
  color:var(--sn-ano);
}
.sn-cartao__titulo{
  margin:0 0 14px;
  font:700 20px/1.28 var(--sn-fonte);
  color:#1c1c1c;
}
.sn-cartao__texto{
  font:400 14.5px/1.66 var(--sn-fonte);
  color:#4a4a4a;
}
.sn-cartao__texto p{margin:0 0 .85em}
.sn-cartao__texto p:last-child{margin-bottom:0}

/* -------------------------------------------------------------
   CONTROLES
   ------------------------------------------------------------- */
.sn-controles{
  display:flex;align-items:center;gap:10px;
  padding:13px 14px;
  background:var(--sn-barra);
}

/* Só o contorno: fundo transparente em todos os estados. Os seletores
   precisam de :hover/:focus explícitos porque uma regra button:hover do tema
   tem especificidade maior que a nossa regra base e pintava o fundo. */
.sn-tl .sn-btn,
.sn-tl .sn-btn:hover,
.sn-tl .sn-btn:focus,
.sn-tl .sn-btn:active{
  background:transparent;
  box-shadow:none;
  color:#fff;          /* o chevron usa currentColor */
}
.sn-btn{
  flex:0 0 auto;
  width:44px;height:44px;border-radius:50%;
  border:2px solid rgba(255,255,255,.75);
  color:#fff;
  line-height:1;
  padding:0;
  display:grid;place-items:center;
  cursor:pointer;
  transition:border-color .2s,transform .15s,opacity .2s;
  -webkit-tap-highlight-color:transparent;
}
.sn-btn svg{display:block;width:22px;height:22px}
.sn-tl .sn-btn:hover:not(:disabled){border-color:#fff}
.sn-btn:active:not(:disabled){transform:scale(.92)}
.sn-btn:disabled{opacity:.35;cursor:default}

.sn-trilha{
  flex:1 1 auto;
  min-width:0;          /* sem isto o flex não encolhe abaixo do conteúdo e a
                           trilha alarga a página inteira no celular */
  display:flex;align-items:stretch;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
.sn-trilha::-webkit-scrollbar{display:none}

/* mesmo motivo do botão: o tema pinta button:hover, então precisamos
   declarar o fundo transparente em cada estado */
.sn-tl .sn-parada,
.sn-tl .sn-parada:hover,
.sn-tl .sn-parada:focus,
.sn-tl .sn-parada:active{
  background:transparent;
  box-shadow:none;
  border:0;
}
.sn-parada{
  flex:1 0 62px;
  position:relative;
  padding:14px 2px 6px;
  color:rgba(255,255,255,.72);
  font:600 14px/1 var(--sn-fonte);
  cursor:pointer;
  transition:color .25s;
  -webkit-tap-highlight-color:transparent;
}
/* a linha que liga as paradas */
.sn-parada::before{
  content:"";position:absolute;left:0;right:0;top:5px;
  height:2px;background:rgba(255,255,255,.5);
}
/* a bolinha de cada parada — branco sólido, sem transparência */
.sn-parada::after{
  content:"";position:absolute;left:50%;top:1px;
  width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:#fff;
  transition:transform .25s;
}
.sn-parada:hover{color:#fff}
.sn-parada[aria-current="true"]{color:#fff;font-weight:700}
.sn-parada[aria-current="true"]::after{transform:scale(1.4)}

/* -------------------------------------------------------------
   TABLET — a partir daqui o cartão vira sobreposição
   ------------------------------------------------------------- */
@media (min-width:768px){
  .sn-tl{
    --sn-marco-x:72%;        /* volta a ancorar pelo centro */
    --sn-controles-h:74px;   /* botão 46 + 2x14 de respiro */

    /* no desktop sobra largura, então a cena volta às proporções originais:
       asfalto mais fino, horizonte mais baixo, motoboy no lugar de sempre */
    --sn-cena-h:480px;
    --sn-rua-h:130px;
    --sn-rua-tile:400px;
    --sn-frente-h:180px;
    --sn-frente-tile:700px;
    --sn-horizonte:112px;
    --sn-moto-y:34px;
  }

  /* no desktop sobra largura: marco volta ao tamanho e à ancoragem central,
     e o motoboy volta para o meio da cena */
  .sn-marco{
    width:min(calc(660px * var(--e)), 82%);
    transform:translateX(-50%);
  }
  .sn-motoboy{left:50%}

  /* Sobreposto à ilustração e centralizado na vertical DENTRO DA CENA.
     O cartão é filho de .sn-tl, que inclui a barra de anos no rodapé — por isso
     descontamos a altura dela (--sn-controles-h). Centralizamos por margin auto
     e não por translateY, porque o transform já é usado na entrada e saída. */
  .sn-cartao{
    position:absolute;
    left:28px;
    top:0;
    bottom:var(--sn-controles-h);
    height:max-content;
    margin-top:auto;
    margin-bottom:auto;
    width:min(400px,44%);
    border-radius:18px;
    padding:30px 26px 32px 32px;
    background:rgba(255,250,243,.96);
    box-shadow:0 16px 40px rgba(0,0,0,.26);
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
    z-index:3;
    /* teto = altura da cena menos uma folga, para nunca encostar nas bordas */
    max-height:calc(var(--sn-cena-h) * var(--e) + 120px - 64px);
  }
  .sn-cartao[data-sn-oculto="true"]{transform:translateY(14px);pointer-events:none}
  .sn-cartao__ano{font-size:42px}
  .sn-cartao__titulo{font-size:23px}
  .sn-cartao__texto{font-size:15px;line-height:1.7}

  .sn-controles{gap:14px;padding:14px 18px}
  .sn-btn{width:46px;height:46px;font-size:20px}
  .sn-parada{flex:1 0 72px;font-size:16px}
}

@media (min-width:1024px){
  .sn-cartao{left:40px;width:min(400px,38%)}
}

/* -------------------------------------------------------------
   Quem pediu menos animação no sistema recebe menos animação
   ------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .sn-cartao{transition:none}
  .sn-trilha{scroll-behavior:auto}
  .sn-marco .sn-alvo-braco,
  .sn-marco .sn-alvo-antebraco,
  .sn-marco .sn-alvo-mao{animation:none}
}