/* ==========================================================================
   AgroTerra — Grid, seções, revelações de scroll e primitivas de layout
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: max(var(--gutter), var(--safe-l));
  padding-right: max(var(--gutter), var(--safe-r));
}

.shell--wide   { max-width: 1600px; }
.shell--narrow { max-width: var(--maxw-narrow); }

.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.section--flush-top { padding-top: 0; }

.section--dark {
  background: var(--ink);
  color: var(--tx-on-dark);
}

.section--dark h1, .section--dark h2,
.section--dark h3, .section--dark h4 { color: var(--tx-on-dark); }

.section--dark .lead,
.section--dark .tx-mute { color: var(--tx-on-dark-mute); }

/* Em fundo escuro o vermelho da marca não atinge contraste AA,
   então o papel de destaque passa para o laranja terra. */
.section--dark .eyebrow,
.cta-band .eyebrow { color: var(--clay); }

.cta-band h1, .cta-band h2, .cta-band h3, .cta-band h4 { color: var(--tx-on-dark); }
.cta-band .lead, .cta-band .tx-mute { color: var(--tx-on-dark-mute); }

.section--bone { background: var(--bone-2); }
.section--paper { background: var(--surface); }

/* ---- Cabeçalho de seção ---- */
.sec-head {
  display: grid;
  gap: var(--sp-5);
  margin-bottom: clamp(2.25rem, 1.5rem + 3vw, 4.25rem);
}

@media (min-width: 900px) {
  .sec-head--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: end;
    gap: clamp(2rem, 4vw, 5rem);
  }
}

.sec-head__title { display: grid; gap: var(--sp-4); }
.sec-head__aside { display: grid; gap: var(--sp-4); align-content: end; }

/* ---- Grids reutilizáveis ---- */
.grid { display: grid; gap: var(--sp-5); }

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Régua/linha decorativa ---- */
.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  transform-origin: left center;
}

.section--dark .rule { background: var(--line-dark); }

/* ==========================================================================
   Revelações de scroll
   Amplitudes escalam por var(--motion); em prefers-reduced-motion vão a zero
   e restam apenas uma transição de opacidade instantânea.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transition:
    opacity var(--d-rev) var(--e-soft),
    transform var(--d-rev) var(--e-soft),
    clip-path var(--d-rev) var(--e-soft);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal="up"]     { transform: translate3d(0, calc(28px * var(--motion)), 0); }
[data-reveal="down"]   { transform: translate3d(0, calc(-22px * var(--motion)), 0); }
[data-reveal="left"]   { transform: translate3d(calc(-32px * var(--motion)), 0, 0); }
[data-reveal="right"]  { transform: translate3d(calc(32px * var(--motion)), 0, 0); }
[data-reveal="fade"]   { transform: none; }
[data-reveal="scale"]  { transform: scale(calc(1 - 0.04 * var(--motion))); }

/* Máscara e wipe recortam o FILHO, nunca o próprio alvo observado:
   clip-path no elemento observado zera a área de interseção e o
   IntersectionObserver deixa de enxergá-lo, travando a revelação. */
[data-reveal="mask"],
[data-reveal="wipe"] { opacity: 1; transform: none; }

[data-reveal="mask"] > *,
[data-reveal="wipe"] > * {
  display: block;
  transition:
    clip-path var(--d-rev) var(--e-soft),
    transform var(--d-rev) var(--e-soft);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: clip-path, transform;
}

[data-reveal="mask"] > * {
  clip-path: inset(calc(100% * var(--motion)) 0 0 0);
  transform: translate3d(0, calc(14px * var(--motion)), 0);
}

[data-reveal="wipe"] > * { clip-path: inset(0 calc(100% * var(--motion)) 0 0); }

[data-reveal="mask"].is-in > *,
[data-reveal="wipe"].is-in > * { clip-path: inset(0 0 0 0); transform: none; }

.no-js [data-reveal="mask"] > *,
.no-js [data-reveal="wipe"] > * { clip-path: none; transform: none; }

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Fallback sem JavaScript: nada fica invisível */
.no-js [data-reveal] { opacity: 1; transform: none; clip-path: none; }

/* Sequenciamento por índice, definido no HTML via style="--i:n" */
[data-reveal][style*="--i"] { transition-delay: calc(var(--i, 0) * 85ms * var(--motion)); }

/* ---- Revelação de texto linha a linha ---- */
.reveal-lines { display: block; }

.reveal-lines > span {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}

.reveal-lines > span > span {
  display: block;
  transform: translate3d(0, calc(105% * var(--motion)), 0);
  opacity: var(--motion, 1);
  transition:
    transform var(--d-rev) var(--e-soft),
    opacity calc(var(--d-rev) * 0.7) linear;
  transition-delay: calc(var(--i, 0) * 110ms * var(--motion));
}

.no-js .reveal-lines > span > span,
.reveal-lines.is-in > span > span { transform: none; opacity: 1; }

/* Com redução de movimento não existe revelação: o conteúdo já nasce
   visível. Além de ser a leitura correta do pedido do usuário, elimina
   qualquer chance de um bloco ficar invisível se o observador falhar. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-in { opacity: 1; transform: none; }

  [data-reveal="mask"] > *,
  [data-reveal="wipe"] > * { clip-path: none; transform: none; }

  .reveal-lines > span > span,
  .reveal-lines.is-in > span > span { opacity: 1; transform: none; }
}

/* ---- Parallax leve (desativado em reduced motion pelo JS e pelo token) ---- */
[data-parallax] { will-change: transform; }

/* ---- Contêiner de mídia com proporção garantida ---- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--bone-3);
  border-radius: var(--r-lg);
  isolation: isolate;
}

.media img,
.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media--4x3  { aspect-ratio: 4 / 3; }
.media--3x2  { aspect-ratio: 3 / 2; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--1x1  { aspect-ratio: 1 / 1; }
.media--4x5  { aspect-ratio: 4 / 5; }
.media--9x16 { aspect-ratio: 9 / 16; }