/* ============================================================
   EFFECTS — efeitos de scroll, desenhados a partir de --p
   Cada bloco corresponde a um efeito da referência (ver
   docs/SETORIZACAO.md § efeitos). O JS só escreve --p (0→1);
   tudo o que se vê está aqui.
   ============================================================ */

[data-scroll] { --p: 0; }

/* ------------------------------------------------------------
   1. HOME — a faixa visual "fecha" ao rolar
   diagonal 5/12 → 2/12 · bloco 50% → 5% · texto sobe
   ------------------------------------------------------------ */
.home-visual[data-scroll] .home-visual__diagonal {
  width: calc(41.6% - var(--p) * 25%);
}
.home-visual[data-scroll] .home-visual__block {
  width: calc(50% - var(--p) * 45%);
}
.home-about[data-scroll] {
  transform: translateY(calc((1 - var(--p)) * 10%));
  opacity: calc(0.4 + var(--p) * 0.6);
}

/* ------------------------------------------------------------
   2. POSICIONAMENTO — duas formas sobem na seção de personalidade
   A segunda começa quando a primeira está na metade (<50% do GSAP).
   ------------------------------------------------------------ */
.personality {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-xl);
  border-bottom: 1px solid var(--border);
}
.personality__text {
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  line-height: 1.05;
}
.personality__text strong { font-weight: var(--fw-medium); }
.personality__shapes {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  pointer-events: none;
}
.personality__shape {
  align-self: end;
  height: 70%;
  /* p1 = --p acelerado (dura metade); p2 = começa em 50 % */
  --p1: clamp(0, calc(var(--p) * 2), 1);
  --p2: clamp(0, calc(var(--p) * 2 - 1), 1);
}
.personality__shape--a {
  background: var(--chapter-accent, var(--c-accent-1));
  clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 100%);
  transform: translateY(calc((1 - var(--p1)) * 200%));
}
.personality__shape--b {
  background: var(--chapter-accent-text, var(--c-pair-1));
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
  transform: translateY(calc((1 - var(--p2)) * 200%));
}
@media (min-width: 768px) {
  .personality__text { grid-column: 1 / span 5; }
  .personality__shapes { left: 50%; }
}

/* ------------------------------------------------------------
   3. LOGO — wipe de inversão ao cruzar o centro da tela
   Uma cópia invertida do palco cresce de 0 → 100 % de largura.
   ------------------------------------------------------------ */
.wipe { position: relative; }
.section__visual.wipe {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
  border: 1px solid var(--border);
  overflow: hidden;
}
.wipe__mark { width: 38%; }
.wipe__overlay {
  position: absolute;
  inset: 0;
  width: calc(var(--p) * 100%);
  overflow: hidden;
  background: var(--fg);
  color: var(--bg);
  pointer-events: none;
}
/* Seções escondidas pela interface (CONTENT.hidden) */
[data-section][hidden] { display: none !important; }
/* O conteúdo da cópia tem a largura do palco inteiro, para o
   recorte parecer uma cortina e não um redimensionamento:
   largura do overlay = p × W, então W = largura ÷ p. */
.wipe__stage {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(100% / max(var(--p), 0.001));
  display: grid;
  place-items: center;
}
.wipe:not(.section__visual) .wipe__stage > * { width: clamp(120px, 18vw, 220px); }

/* ------------------------------------------------------------
   4. SISTEMA VISUAL — sequência fixada: quadros aparecem um a um
   O trilho é alto; o palco fica sticky; cada quadro tem --i.
   Quadro i visível quando --p × passos ≥ i.
   ------------------------------------------------------------ */
.pin-seq {
  grid-column: 1 / -1;
  position: relative;
}
.pin-seq__stage {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.pin-seq__frame {
  grid-area: 1 / 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--sp-md) var(--gutter-half);
  opacity: clamp(0, calc(var(--p) * var(--steps) - var(--i) + 1), 1);
  transition: opacity 120ms linear;
}
/* Só o quadro mais avançado responde a hover/leitura */
.pin-seq__frame + .pin-seq__frame { pointer-events: none; }
.pin-seq__counter { font-size: var(--fs-caption); font-weight: var(--fw-medium); opacity: .6; }
.pin-seq__visual {
  display: grid;
  place-items: center;
  min-height: 0;
}
.pin-seq__visual svg, .pin-seq__visual img { max-width: 100%; max-height: 100%; }
.pin-seq__caption { max-width: 60ch; font-size: var(--fs-body); }

/* Indicador de progresso da sequência (linha fina embaixo) */
.pin-seq__bar {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: calc(var(--p) * 100%);
  background: var(--chapter-accent, var(--c-accent-1));
}

/* ------------------------------------------------------------
   5. ANIMAÇÃO — zoom através do símbolo, depois o nome aparece
   ------------------------------------------------------------ */
.zoom-through {
  grid-column: 1 / -1;
  position: relative;
}
.zoom-through__stage {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.zoom-through__mark {
  grid-area: 1 / 1;
  width: clamp(120px, 24vw, 320px);
  color: var(--chapter-accent, var(--c-accent-1));
  /* scale 1 → 33 com aceleração no fim (aproxima power2.inOut) */
  --z: calc(var(--p) * var(--p));
  transform: scale(calc(1 + var(--z) * 32));
  transform-origin: 50% 50%;
  will-change: transform;
}
.zoom-through__mark svg { width: 100%; height: auto; display: block; }
.zoom-through__word {
  grid-area: 1 / 1;
  width: min(60%, 520px);
  text-align: center;
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  color: var(--chapter-accent-text, var(--c-pair-1));
  opacity: clamp(0, calc(var(--p) * 3 - 2), 1);   /* aparece no último terço */
}

/* Typewriter de submarcas */
.typewriter {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-xl) var(--gutter-half);
  border-bottom: 1px solid var(--border);
}
.typewriter__mark { width: clamp(64px, 10vw, 140px); transition: color 400ms; }
.typewriter__mark svg { width: 100%; height: auto; display: block; }
.typewriter__word {
  display: inline-block;
  min-height: 1.4em;
  padding: 0.15em 0.4em;
  font-size: var(--fs-h1);
  font-weight: var(--fw-regular);
  line-height: 1.1;
  transition: background-color 400ms, color 400ms;
}
.typewriter__word::after {
  content: "";
  display: inline-block;
  width: 0.06em; height: 0.9em;
  margin-left: 0.08em;
  background: currentColor;
  vertical-align: -0.1em;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* ------------------------------------------------------------
   6. ICONOGRAFIA — a galeria acende célula a célula
   ------------------------------------------------------------ */
.icon-grid[data-scroll] .icon-cell {
  opacity: clamp(0.12, calc(var(--p) * var(--n, 12) - var(--i, 0)), 1);
  transform: translateY(calc((1 - clamp(0, calc(var(--p) * var(--n, 12) - var(--i, 0)), 1)) * 12px));
  transition: opacity 80ms linear, transform 80ms linear;
}

/* ------------------------------------------------------------
   Reduced motion: tudo no estado final, sem trilhos altos
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  [data-scroll] { --p: 1 !important; }
  [data-scroll-pin] { min-height: auto !important; }
  .pin-seq__stage, .zoom-through__stage { position: static; height: auto; }
  .pin-seq__frame { grid-area: auto; opacity: 1; pointer-events: auto; }
  .zoom-through__mark { transform: none; }
  .typewriter__word::after { animation: none; }
}