/* ============================================================
   COMO FUNCIONA — narrativa visual em 8 etapas
   Paleta: off-white / texto escuro + dourado (--gold) como destaque —
   igual ao resto do site (ver :root em css/style.css). O fundo das
   fotos de motion foi normalizado exatamente para --white (#fffdf8) em
   PHP/GD, para se camuflarem com a página sem precisar de transparência.
   Arquitetura: "sticky stage" (position:sticky) + IntersectionObserver,
   sem bibliotecas externas. Ver js/como-funciona.js.
   ============================================================ */

/* overflow-anchor:none — as fotos de motion vão ficando maiores conforme o
   utilizador desce a página (só carregam quando a etapa se aproxima), e o
   scroll anchoring do browser tentava "compensar" pequenas variações de
   layout causadas por esse carregamento, empurrando a posição do scroll
   sozinho. Sem isto o scroll ficava instável durante o carregamento. */
.cf{background:var(--white);color:var(--text);overflow-anchor:none}
.cf h1,.cf h2{font-weight:800;line-height:1.15}
.cf .btn{cursor:pointer}
.cf-btn-outline{border-color:rgba(28,27,26,.3);color:var(--text)}
.cf-btn-outline:hover{background:var(--text);color:var(--white)}

/* ===== Intro ===== */
.cf-intro{display:flex;align-items:center;justify-content:center;text-align:center;padding:2.5rem 1.5rem 1.8rem;position:relative;overflow:hidden}
.cf-intro-inner{max-width:640px;position:relative;z-index:1}
.cf-intro-line{display:block;width:0;height:2px;background:var(--gold);margin:0 auto 1.4rem;transition:width 1.4s cubic-bezier(.4,0,.2,1)}
.cf-intro.is-visible .cf-intro-line{width:120px}
.cf-intro h1{font-size:clamp(2rem,5vw,3.2rem);text-transform:uppercase;letter-spacing:.04em;margin-bottom:1.2rem;opacity:0;transform:translateY(14px);transition:opacity .9s ease .15s,transform .9s ease .15s}
.cf-intro.is-visible h1{opacity:1;transform:translateY(0)}
.cf-intro-lead{font-size:clamp(1.1rem,2.4vw,1.4rem);color:var(--text);margin-bottom:.8rem;opacity:0;transform:translateY(14px);transition:opacity .9s ease .35s,transform .9s ease .35s}
.cf-intro.is-visible .cf-intro-lead{opacity:1;transform:translateY(0)}
.cf-intro-sub{color:var(--text-muted);font-size:.95rem;line-height:1.8;max-width:480px;margin:0 auto 1.2rem;opacity:0;transform:translateY(14px);transition:opacity .9s ease .5s,transform .9s ease .5s}
.cf-intro.is-visible .cf-intro-sub{opacity:1;transform:translateY(0)}
.cf-intro-num{display:block;margin-top:1.6rem;font-family:inherit;font-weight:800;color:var(--gold);font-size:1.1rem;letter-spacing:.1em;opacity:0;transition:opacity .6s ease 1.6s}
.cf-intro.is-visible .cf-intro-num{opacity:1}

/* ===== Jornada: grelha com palco fixo + lista de etapas ===== */
.cf-journey-inner{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}

.cf-stage{position:sticky;top:100px;height:440px;display:flex;align-items:center;justify-content:center}
.cf-scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .6s ease,transform .6s ease}
.cf-scene.is-shown{opacity:1;transform:translateY(0);pointer-events:auto}

.cf-motion-img{width:100%;height:100%;max-width:440px;object-fit:contain;user-select:none;-webkit-user-drag:none}


/* ===== Lista de etapas + linha de progresso ===== */
.cf-steps{list-style:none;padding-left:2.4rem;position:relative}
.cf-step{position:relative;padding:0 0 5.5rem 1.6rem;min-height:220px;display:flex;flex-direction:column;justify-content:center;opacity:.35;transition:opacity .5s ease}
.cf-step.is-active{opacity:1}
.cf-step-last{padding-bottom:1rem}
.cf-step-track{position:absolute;left:-2.4rem;top:6px;bottom:-5.5rem;width:2px;background:rgba(28,27,26,.12)}
.cf-step-last .cf-step-track{bottom:50%}
.cf-step-track::before{content:'';position:absolute;inset:0;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .4s ease}
.cf-step.is-active .cf-step-track::before,.cf-step.is-passed .cf-step-track::before{transform:scaleY(1)}
.cf-step-num{position:absolute;left:-2.86rem;top:-2px;width:14px;height:14px;border-radius:50%;background:var(--white);border:2px solid rgba(28,27,26,.25);font-size:0;transition:border-color .4s ease,background .4s ease,box-shadow .4s ease}
.cf-step.is-active .cf-step-num,.cf-step.is-passed .cf-step-num{border-color:var(--gold);background:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.2)}
.cf-step h2{font-size:clamp(1.3rem,2.6vw,1.9rem);margin:1.6rem 0 .7rem;transform:translateX(0)}
.cf-step p{color:var(--text-muted);font-size:.92rem;line-height:1.7;max-width:420px}
.cf-step::before{content:attr(data-step);position:absolute;left:1.6rem;top:-1.6rem;font-size:.75rem;font-weight:800;letter-spacing:.1em;color:var(--gold);opacity:0;transition:opacity .4s ease}
.cf-step.is-active::before{opacity:1;content:"0" attr(data-step) " / 07"}

/* ===== Fecho ===== */
.cf-closing{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6rem 1.5rem;position:relative}
.cf-closing-motion{width:min(440px,80vw);margin:0 auto 2rem;opacity:.4;transform:scale(.94);transition:opacity 1.1s ease,transform 1.1s ease}
.cf-closing.is-visible .cf-closing-motion{opacity:1;transform:scale(1)}
.cf-closing-title{font-size:clamp(1.4rem,3vw,2rem);color:var(--text-muted);margin-bottom:.6rem;opacity:0;transition:opacity .8s ease .3s}
.cf-closing.is-visible .cf-closing-title{opacity:1}
.cf-closing-highlight{font-size:clamp(1.8rem,4.2vw,2.8rem);font-weight:800;color:var(--gold);margin-bottom:1rem;opacity:0;transform:translateY(10px);transition:opacity .8s ease .5s,transform .8s ease .5s}
.cf-closing.is-visible .cf-closing-highlight{opacity:1;transform:translateY(0)}
.cf-closing-sub{color:var(--text-muted);margin-bottom:2.2rem;opacity:0;transition:opacity .8s ease .7s}
.cf-closing.is-visible .cf-closing-sub{opacity:1}
.cf-closing-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;opacity:0;transition:opacity .8s ease .9s}
.cf-closing.is-visible .cf-closing-ctas{opacity:1}

/* ===== Responsivo ===== */
@media(max-width:960px){
  /* Em grid de 1 coluna, .cf-stage e .cf-steps caem em linhas separadas — a área
     sticky do palco fica limitada à sua própria linha (~260px) e "descola" quase
     de imediato ao rolar. Passar para fluxo normal (display:block) faz o palco
     ficar sticky em relação a .cf-journey-inner inteiro, que é tão alto quanto a
     lista de 7 etapas — por isso permanece fixo no topo até ao fim da timeline. */
  .cf-journey-inner{display:block}
  .cf-stage{position:sticky;top:70px;height:260px;margin-bottom:1rem;z-index:2;background:var(--white)}
  .cf-steps{padding-left:2rem}
  .cf-step{padding-bottom:3.5rem;min-height:0}
  .cf-step-track{bottom:-3.5rem}
  .cf-step-last .cf-step-track{bottom:50%}
}
@media(max-width:600px){
  .cf-intro{padding:2rem 1.2rem 1.4rem}
  .cf-stage{height:220px}
}

/* ===== prefers-reduced-motion ===== */
/* Só tira as transições/animações (trocas instantâneas em vez de fade) — o
   palco continua sticky. "Reduzir movimento" não devia desligar o pin do
   palco: isso não é uma animação, é layout, e desligá-lo aqui era o que
   fazia a imagem "subir" e desaparecer em vez de ficar fixa para quem tem
   esta preferência ativada (confirmado com o overlay de diagnóstico). */
@media (prefers-reduced-motion: reduce){
  .cf *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}