/*
 * Planitia — Scrollcraft (da hero para baixo).
 * Nada aqui toca a hero. Tudo depende de html.sc-on, que só existe quando o
 * visitante NÃO pediu movimento reduzido e o scroll.js carregou. Sem isso,
 * a página aparece completa e estática.
 *
 * Dispositivos:
 *   Projetos  títulos em cascata + cards que se abrem de uma faixa central
 *   Serviços  título e texto entram pelos lados, alternando por bloco
 *   Sobre     foto em varredura com paralaxe + texto pela lateral + texto que acende
 *   FAQ       linhas que se desenham uma a uma
 */

/* ---------- base: estado inicial genérico ---------- */
html.sc-on [data-sc] {
  --sc-ease: var(--ease-studio, cubic-bezier(0.22, 1, 0.36, 1));
  opacity: 0;
  translate: var(--sc-x, 0) var(--sc-y, 28px);
  transition:
    opacity 0.9s var(--sc-ease) calc(var(--i, 0) * var(--sd, 90ms)),
    translate 1.1s var(--sc-ease) calc(var(--i, 0) * var(--sd, 90ms));
}
html.sc-on [data-sc].is-in { opacity: 1; translate: 0 0; }

/* Serviços: linhas que sobem e se desenham, uma após a outra */
html.sc-on [data-sc="row"] { --sc-y: 36px; --sd: 150ms; }
/* Como funciona: passos 1 a 5 em sequência, depois o fecho e o botão */
html.sc-on [data-sc="step"] {
  translate: 0 56px;
  scale: 0.94;
  transition: opacity 0.8s var(--sc-ease), translate 1.1s var(--sc-ease), scale 1.1s var(--sc-ease);
}
html.sc-on [data-sc="step"].is-in { scale: 1; }
html.sc-on [data-sc="slide-l"],
html.sc-on [data-sc="slide-r"] { --sd: 70ms; }

/* ---------- Trabalho: títulos em cascata ---------- */
html.sc-on [data-sc="rise"] { opacity: 1; translate: none; transition: none; }
html.sc-on [data-sc="rise"] h2 > span {
  opacity: 0;
  translate: 0 0.55em;
  transition: opacity 0.9s var(--sc-ease) 0s, translate 1.1s var(--sc-ease) 0s;
}
html.sc-on [data-sc="rise"] h2 > span:nth-of-type(2) { transition-delay: 0.12s; }
html.sc-on [data-sc="rise"] > :not(h2) {
  opacity: 0;
  transition: opacity 0.9s var(--sc-ease) 0.35s;
}
html.sc-on [data-sc="rise"].is-in h2 > span { opacity: 1; translate: 0 0; }
html.sc-on [data-sc="rise"].is-in > :not(h2) { opacity: 1; }

/* Carrossel: uma faixa fina se abre no centro e os cards se espalham lado a lado (uma vez, ao chegar na seção) */
html.sc-on [data-sc="cf"] { opacity: 1; translate: none; transition: none; }
html.sc-on [data-sc="cf"]:not(.is-in) .cf__slide {
  transform: translate3d(0, 0, 0) !important;
  clip-path: inset(46% 0 46% 0 round 24px);
}
html.sc-on [data-sc="cf"]:not(.cf--settled) .cf__slide {
  transition:
    transform 1.2s cubic-bezier(0.22, 0.8, 0.24, 1) calc(0.6s + var(--a, 0) * 80ms),
    clip-path 1.2s cubic-bezier(0.76, 0, 0.24, 1),
    opacity 0.5s ease;
}
html.sc-on [data-sc="cf"] .cf__caption,
html.sc-on [data-sc="cf"] .cf__bar { transition: opacity 0.9s var(--sc-ease) 1.3s; }
html.sc-on [data-sc="cf"]:not(.is-in) .cf__caption,
html.sc-on [data-sc="cf"]:not(.is-in) .cf__bar { opacity: 0; }

/* Texto que acende palavra a palavra (Quem sou e manifesto) */
html.sc-on .sc-w { display: inline; opacity: 0.26; transition: opacity 0.55s var(--sc-ease, ease); }
html.sc-on .sc-w.is-lit { opacity: 1; }

/* ---------- Sobre: título pela esquerda, foto em varredura, texto pela direita ---------- */
html.sc-on [data-sc="slide-l"] { --sc-x: -40px; --sc-y: 0; }
html.sc-on [data-sc="slide-r"] { --sc-x: 40px; --sc-y: 0; }

html.sc-on [data-sc="wipe"] {
  opacity: 1;
  translate: none;
  overflow: hidden;
}
/* O clip-path fica na imagem: se ficasse na figura, o IntersectionObserver
   a trataria como invisível e a revelação nunca dispararia. */
html.sc-on [data-sc="wipe"] img {
  clip-path: inset(100% 0 0 0);
  scale: 1.22;
  translate: 0 var(--sc-py, 0px);
  transition: clip-path 1.4s var(--ease-studio-in-out, cubic-bezier(0.76, 0, 0.24, 1)), scale 1.8s var(--sc-ease);
  will-change: translate;
}
html.sc-on [data-sc="wipe"].is-in img { clip-path: inset(0 0 0 0); scale: 1.1; }

/* ---------- FAQ: linhas que se desenham ---------- */
/* a borda original some e a linha animada ocupa o lugar dela */
html.sc-on [data-sc="line"] { --sc-y: 22px; --sd: 80ms; }
html.sc-on [data-sc="line"],
html.sc-on [data-sc="row"] { position: relative; border-bottom-color: transparent; }
html.sc-on [data-sc="line"]::after,
html.sc-on [data-sc="row"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--line, rgb(255 255 255 / 0.12));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s var(--sc-ease) calc(var(--i, 0) * var(--sd, 70ms) + 0.15s);
  pointer-events: none;
}
html.sc-on [data-sc="line"].is-in::after,
html.sc-on [data-sc="row"].is-in::after { transform: scaleX(1); }

/* ---------- segurança ---------- */
@media (prefers-reduced-motion: reduce) {
  html.sc-on [data-sc],
  html.sc-on [data-sc] * {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
  html.sc-on [data-sc="line"]::after { transform: none !important; }
}