/* ============================================================
   motion.css — camada de movimento (v2, só no /psi-motion/)
   Nada aqui altera o site publicado em /psi/.
   Regra: só anima o que está visível; tudo desliga em
   prefers-reduced-motion.
   ============================================================ */

/* ---------- freio de mão: se o JS falhar, nada fica escondido ---------- */
html.motion-off [data-reveal],
html.motion-off [data-line]{
  opacity:1 !important;
  transform:none !important;
  clip-path:none !important;
}
html.motion-off [data-lines] > span{ overflow:visible !important; }
html.motion-off [data-lines] .ln-i{ transform:none !important; opacity:1 !important; }
html.motion-off [data-arch] img{ clip-path:none !important; transform:none !important; }
html.motion-off .progress{ display:none !important; }

/* ---------- alvo de toque confortável nos links de seção ---------- */
main .link-arrow,
main .aside-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}

/* ---------- foco visível sobre o hero marinho ---------- */
.hero :focus-visible{
  outline-color:rgba(247,241,230,.96) !important;
  outline-offset:4px;
}

/* ---------- 0. base ---------- */

html.js [data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .75s ease, transform .95s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(var(--d, 0) * 70ms);
  will-change:opacity, transform;
}
html.js [data-reveal].is-in{ opacity:1; transform:none; }

/* ---------- 1. headline: linha por linha ---------- */

html.js [data-lines] > span{
  display:block;
  overflow:hidden;
  padding-bottom:.16em;
  margin-bottom:-.16em;
}
html.js [data-lines] .ln-i{
  display:block;
  transform:translateY(126%);
  transition:transform 1.1s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(var(--d, 0) * 90ms);
}
html.js [data-lines].is-in .ln-i{ transform:none; }

/* ---------- 2. arco da foto: abre de baixo ---------- */

html.js [data-arch] img{
  clip-path:inset(0 0 0 0);
  transform:scale(1.04);
  transition:clip-path 1.5s cubic-bezier(.19,1,.22,1) .15s, transform 2.2s cubic-bezier(.19,1,.22,1) .15s;
}
html.js [data-arch]:not(.is-in) img{
  clip-path:inset(100% 0 0 0);
  transform:scale(1.12);
}
html.js [data-arch].is-in img{ clip-path:inset(0 0 0 0); transform:scale(1.001); }

@media (hover:hover){
  .arch{ overflow:hidden; }
  .arch img{ transition:transform 1.1s cubic-bezier(.19,1,.22,1); }
  .arch:hover img{ transform:scale(1.028); }
}

/* ---------- 3. linha do processo desenhando ---------- */

html.js [data-line]{ border-top-color:transparent; position:relative; }
html.js [data-line]::before{
  content:"";
  position:absolute; top:-1px; left:0; right:0; height:1px;
  background:var(--line);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 1.35s cubic-bezier(.22,1,.36,1) .1s;
}
html.js [data-line].is-in::before{ transform:scaleX(1); }

/* ---------- 4. links e botões ---------- */

.nav a{ position:relative; }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-7px; height:1px;
  background:currentColor; opacity:.75;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .45s cubic-bezier(.19,1,.22,1);
}
.nav a:hover::after, .nav a:focus-visible::after{ transform:scaleX(1); }

.btn .arrow, .btn svg{ transition:transform .4s cubic-bezier(.19,1,.22,1); }
@media (hover:hover){
  .btn:hover .arrow, .btn:hover svg{ transform:translateX(3px); }
}

.link-underline{ background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .5s cubic-bezier(.19,1,.22,1); }
.link-underline:hover{ background-size:100% 1px; }

/* itens da lista de tratamentos: número ganha cor */
.ledger li .n{ transition:color .4s ease, transform .5s cubic-bezier(.19,1,.22,1); }
.ledger li:hover .n{ transform:translateY(-1px); }

/* ---------- 5. marca d'água (deriva com o scroll) ---------- */

.hero-mark{ will-change:transform; }

/* ---------- 6. barra de leitura ---------- */

.progress{
  position:fixed; top:0; left:0; height:2px; width:100%;
  background:rgba(247,241,230,.85);
  transform:scaleX(0); transform-origin:left center;
  z-index:150; pointer-events:none;
}
.progress.on-darkpage{ background:var(--accent, #2F3B5D); }

/* ---------- 7. transição entre páginas ---------- */

@view-transition{ navigation:auto; }
.arch{ view-transition-name: arco-foto; }
.hero .display{ view-transition-name: titulo-hero; }

/* ---------- 8. acessibilidade ---------- */

@media (prefers-reduced-motion: reduce){
  html.js [data-reveal]{ opacity:1 !important; transform:none !important; }
  html.js [data-lines] .ln-i{ transform:none !important; }
  html.js [data-arch] img{ clip-path:none !important; transform:none !important; }
  html.js [data-line]{ border-top-color:var(--line) !important; }
  html.js [data-line]::before{ display:none; }
  .progress{ display:none; }
  .hero-mark{ transform:translateY(-50%) !important; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}