/* ============================================================
   IG Engenharia — camada rica de movimento (etapa 7)
   Liga nos ganchos deixados pelo front-end. Só transform/opacity.
   Tudo desligado sob prefers-reduced-motion (estado final visível).
   ============================================================ */

/* ---- HERO: zoom invertido, a imagem assenta ---------------- */
.hero-media {
  transform: scale(1.12);
  transition: transform 1.6s var(--ease-out);
}
.hero-media.is-settled { transform: scale(1); }

/* ---- TÍTULO: sublinhado que desenha ----------------------- */
[data-underline] {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0 2px;
  transition: background-size .9s var(--ease-out) .25s;
  padding-bottom: 2px;
}
[data-underline].is-drawn { background-size: 100% 2px; }

/* ---- DORES: o número vazado acende no reveal -------------- */
.pains__item .pains__n {
  transition: color .7s var(--ease) .1s, -webkit-text-stroke-color .7s var(--ease) .1s;
}
.pains__item.is-in .pains__n {
  color: var(--navy-300);
  -webkit-text-stroke-color: transparent;
}
.pains__item.is-in:hover .pains__n { color: var(--accent); }

/* ---- SETORES: card entra só por opacidade -----------------
   transform num elemento sticky causa salto, então aqui é opacity puro. */
.stack__card { opacity: 0; transition: opacity .6s var(--ease-out); }
.stack__card.is-in { opacity: 1; }
.stack__icon svg { transition: transform var(--t-base) var(--ease); }
.stack__card:hover .stack__icon svg { transform: scale(1.08); }

/* ---- DIFERENCIAIS: ícone entra, filete inferior desenha --- */
.diff__icon {
  opacity: 0;
  transform: translateY(6px) scale(.9);
  transition: opacity .6s var(--ease-out) .15s, transform .6s var(--ease-out) .15s;
}
.diff.is-in .diff__icon { opacity: 1; transform: none; }
.diff.is-in::before { transform: scaleX(1); transition-delay: .3s; }
.diff.is-in:hover::before { transform: scaleX(1); }

/* ---- SPLIT: imagem com parallax suave e clip que abre ----- */
.split__media img { will-change: transform; }
.split__media {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--ease-out);
}
.split__media.is-in { clip-path: inset(0 0 0 0); }

/* ---- MARCOS: linha por linha ----------------------------- */
.marks li {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.marks.is-in li { opacity: 1; transform: none; }

/* ---- CASE: parallax na mídia + dados que sobem ---------- */
.case__media { will-change: transform; }
.case__body { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.case__body.is-in { opacity: 1; transform: none; }

/* ---- PORTFÓLIO: card sobe e a capa revela --------------- */
.folio__card .folio__media {
  clip-path: inset(0 0 100% 0);
  transition: clip-path .95s var(--ease-out);
}
.folio__card.is-in .folio__media { clip-path: inset(0 0 0 0); }

/* ---- CREDENCIAIS: contador + hairline que cresce -------- */
.cred { position: relative; }
.cred::after {
  content: '';
  position: absolute; top: -1px; left: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease-out) .2s;
}
.cred.is-in::after { transform: scaleX(1); }

/* ---- CREDENCIAIS EM FRASE: linha a linha --------------- */
.credlist li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.credlist.is-in li { opacity: 1; transform: none; }
.credlist.is-in li:nth-child(2) { transition-delay: .1s; }
.credlist.is-in li:nth-child(3) { transition-delay: .2s; }

/* ---- CTA FINAL: brilho respirando ---------------------- */
.final__glow { animation: glowPulse 7s ease-in-out infinite; }
@keyframes glowPulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.06); }
}

/* ============================================================
   GUARD — sem movimento, tudo no estado final
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-media { transform: none; }
  [data-underline] { background-size: 100% 2px; }
  .marks li, .diff__icon, .case__body, .credlist li, .versus__cell, .stack__card { opacity: 1; transform: none; }
  .split__media, .folio__card .folio__media { clip-path: none; }
  .scene__n { color: var(--accent); -webkit-text-stroke-color: transparent; }
  .cred::after, .diff::before, .versus__head--ig::before, .tl::after { transform: scaleX(1); }
  .pains__item .pains__n { color: var(--navy-300); -webkit-text-stroke-color: transparent; }
  .final__glow { animation: none; }
  .case__media { transform: none !important; }
}

/* no touch, sem parallax (a rolagem do dedo fica presa/serrilhada) */
@media (hover: none) {
  .case__media { transform: none !important; }
}

/* ============================================================
   FAIL-SAFE: sem JS, NADA fica escondido
   As entradas escondem o conteúdo (opacity 0, clip-path fechado, scaleX 0) e
   só o JS o revela. Se o JS não rodar, ou se o observer não disparar, o bloco
   fica invisível para sempre — já aconteceu com as capas do portfólio e com a
   imagem do "Sobre". O `.js` no <html> é setado inline no <head>.
   ============================================================ */
html:not(.js) [data-reveal],
html:not(.js) .marks li,
html:not(.js) .diff__icon,
html:not(.js) .case__body,
html:not(.js) .credlist li,
html:not(.js) .versus__card,
html:not(.js) .stack__card {
  opacity: 1 !important;
  transform: none !important;
}
html:not(.js) .split__media,
html:not(.js) .folio__card .folio__media { clip-path: none !important; }
html:not(.js) .hero-media { transform: none !important; }
html:not(.js) .tl::after,
html:not(.js) .diff::before,
html:not(.js) .cred::after,
html:not(.js) .scene__n,
html:not(.js) .versus__card--ig::before,
html:not(.js) .step__line,
html:not(.js) .flow__rail i { transform: scaleX(1) scaleY(1) !important; }