/* ════════════════════════════════════════════════════════════════
   MOVIMENTO
   Regra da casa: a página está completa em repouso. O estado inicial
   escondido só existe quando o JS confirma que consegue revelá-lo
   (html.js) e desaparece por completo com prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. revelação ao entrar no ecrã ──────────────────────────── */
.js [data-rev]{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
.js [data-rev="esq"]{transform:translate3d(-26px,0,0)}
.js [data-rev="dir"]{transform:translate3d(26px,0,0)}
.js [data-rev="escala"]{transform:scale(.965);transform-origin:center}
.js [data-rev].is-in{opacity:1;transform:none}

/* linhas que se desenham */
.js [data-rev="linha"]{opacity:1;transform:none;transform-origin:left;
  transform:scaleX(0);transition:transform 1.1s var(--ease-out);transition-delay:var(--d,0ms)}
.js [data-rev="linha"].is-in{transform:scaleX(1)}

/* texto que sobe por detrás de uma máscara */
.mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.mask > span{display:block}
.js .mask > span{
  transform:translate3d(0,105%,0);
  transition:transform 1.05s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.js .mask.is-in > span,
.js .is-in .mask > span{transform:none}

/* ── 2. sequência de entrada do hero ─────────────────────────── */
.js [data-seq]{opacity:0;transform:translate3d(0,18px,0)}
.js .seq-go [data-seq]{
  animation:entrar .95s var(--ease-out) forwards;
  animation-delay:var(--d,0ms);
}
@keyframes entrar{to{opacity:1;transform:none}}

.js .seq-go .mask[data-seq]{opacity:1;transform:none;animation:none}
.js .seq-go .mask[data-seq] > span{
  transform:translate3d(0,105%,0);
  animation:subir 1.05s var(--ease-out) forwards;
  animation-delay:var(--d,0ms);
}
@keyframes subir{to{transform:none}}

/* ── 3. ticker dos programas ─────────────────────────────────── */
.ticker{position:relative;overflow:hidden;border-block:1px solid var(--line);
  padding-block:13px;--vel:46s}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;
  pointer-events:none}
.ticker::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.ticker::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.ticker__trilho{display:flex;width:max-content;animation:correr var(--vel) linear infinite}
.ticker:hover .ticker__trilho{animation-play-state:paused}
.ticker__grupo{display:flex;align-items:center;gap:clamp(24px,4vw,56px);
  padding-right:clamp(24px,4vw,56px)}
.ticker__item{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-mono);
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);
  white-space:nowrap}
.ticker__item b{color:var(--fg-soft);font-weight:500}
.ticker__item::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);
  opacity:.6}
@keyframes correr{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ── 4. percurso que se desenha com o scroll ─────────────────── */
.percurso{position:relative}
.percurso__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  pointer-events:none;z-index:0}
.percurso__linha{fill:none;stroke:var(--line-2);stroke-width:1.5}
.percurso__progresso{fill:none;stroke:var(--accent);stroke-width:1.5;
  stroke-dasharray:var(--len);stroke-dashoffset:calc(var(--len) * (1 - var(--p,0)))}
.percurso__etapas{position:relative;z-index:1;display:grid;
  grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.etapa{position:relative;display:flex;flex-direction:column;gap:12px;padding-top:42px}
.etapa__ponto{position:absolute;top:0;left:0;width:15px;height:15px;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--line-2);
  transition:border-color .5s var(--ease),background .5s var(--ease),
             box-shadow .5s var(--ease),transform .5s var(--ease-out)}
.etapa.is-on .etapa__ponto{border-color:var(--accent);background:var(--accent);
  box-shadow:0 0 0 6px var(--accent-soft);transform:scale(1.12)}
.etapa__n{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;color:var(--fg-dim);
  transition:color .5s var(--ease)}
.etapa.is-on .etapa__n{color:var(--accent)}
.etapa h3{font-size:clamp(1.15rem,1.5vw,1.42rem)}
.etapa p{font-size:.92rem;color:var(--fg-soft)}

/* ── 5. contadores e barras ──────────────────────────────────── */
.stat{display:flex;flex-direction:column;gap:8px;padding-block:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line)}
.stat__v{font-family:var(--f-display);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(2rem,4.2vw,3.4rem);line-height:1;font-variant-numeric:tabular-nums;
  color:var(--fg)}
.stat__v small{font-size:.44em;font-weight:600;color:var(--accent);margin-left:.15em;
  letter-spacing:-.02em}
.stat__r{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-dim)}
.barra{height:2px;background:var(--line);overflow:hidden;border-radius:2px}
.barra i{display:block;height:100%;background:var(--accent);transform:scaleX(0);
  transform-origin:left;transition:transform 1.3s var(--ease-out);transition-delay:var(--d,0ms)}
.is-in .barra i{transform:scaleX(var(--v,1))}

/* ── 6. imagens com revelação por cortina ────────────────────── */
.reveal-img{position:relative;overflow:hidden;border-radius:var(--r);background:var(--surface)}
.reveal-img img{transform:scale(1.08);transition:transform 1.5s var(--ease-out)}
.js .reveal-img::after{content:"";position:absolute;inset:0;background:var(--bg);
  transform-origin:bottom;transition:transform 1.1s var(--ease-out);transition-delay:var(--d,0ms)}
.js .reveal-img.is-in::after{transform:scaleY(0)}
.reveal-img.is-in img{transform:none}

/* ── 7. acordeão ─────────────────────────────────────────────── */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:none;border:0;cursor:pointer;text-align:left;padding:clamp(20px,2.2vw,26px) 2px;
  font-family:var(--f-display);font-size:clamp(1rem,1.3vw,1.18rem);font-weight:600;
  letter-spacing:-.02em;transition:color .3s var(--ease)}
.acc__btn:hover{color:var(--accent)}
.acc__ico{position:relative;flex:none;width:16px;height:16px}
.acc__ico::before,.acc__ico::after{content:"";position:absolute;background:var(--accent);
  transition:transform .4s var(--ease-out)}
.acc__ico::before{left:0;top:7.5px;width:16px;height:1.5px}
.acc__ico::after{left:7.5px;top:0;width:1.5px;height:16px}
.acc__btn[aria-expanded="true"] .acc__ico::after{transform:rotate(90deg)}
.acc__corpo{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ease-out)}
.acc__corpo[data-open="1"]{grid-template-rows:1fr}
.acc__corpo > div{overflow:hidden}
.acc__corpo p{padding:0 2px clamp(22px,2.4vw,28px);max-width:70ch;color:var(--fg-soft);
  font-size:.96rem}

/* ── 8. barra de progresso de leitura ────────────────────────── */
.progresso{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:2px;z-index:51;
  background:var(--accent);transform:scaleX(var(--p,0));transform-origin:left;
  transition:transform .12s linear;pointer-events:none}

/* ── respeito por quem prefere menos movimento ───────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-rev],
  .js [data-seq]{opacity:1!important;transform:none!important;animation:none!important}
  .js .mask > span,
  .js .seq-go .mask[data-seq] > span{transform:none!important;animation:none!important}
  .js .reveal-img::after{display:none}
  .reveal-img img{transform:none}
  .ticker__trilho{animation:none;width:auto}
  .ticker::before,.ticker::after{display:none}
  .barra i{transform:scaleX(var(--v,1));transition:none}
  .percurso__progresso{stroke-dashoffset:0}
  .etapa__ponto{border-color:var(--accent);background:var(--accent)}
  .etapa__n{color:var(--accent)}
  .acc__corpo{transition:none}
  .progresso{display:none}
  *,*::before,*::after{transition-duration:.01ms!important}
}