/* =========================================================
   BIOTROPICA — Design v3 "Ecossistema Vivo"
   Camada de animações, transições e micro-interações.
   Progressive enhancement — tudo degrada para o layout v2:
   - html.fx      → JS ativo e SEM prefers-reduced-motion
   - html.has-st  → suporte a scroll-driven animations (view())
   Estados iniciais "escondidos" existem SÓ sob html.fx, para
   nunca deixar conteúdo invisível sem JS / com reduced-motion.
   ========================================================= */

/* ---------- Base ---------- */
:root { interpolate-size: allow-keywords; }

.ambient__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* =========================================================
   1. DIVISORES ORGÂNICOS
   ========================================================= */
.divider { height: clamp(44px, 7vw, 96px); pointer-events: none; }
.divider svg { display: block; width: 100%; height: 100%; }
.divider--flip svg { transform: scaleX(-1); }
.divider__fill { fill: rgba(0, 159, 87, .055); }
[data-theme="dark"] .divider__fill { fill: rgba(223, 234, 208, .05); }
.divider__line {
  fill: none; stroke: var(--green); stroke-opacity: .4; stroke-width: 2.5;
  stroke-linecap: round;
}
html.fx .divider__line {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease-out) .1s;
}
html.fx .divider.is-drawn .divider__line { stroke-dashoffset: 0; }

/* =========================================================
   2. CLIENTES — marquee infinito (estrutura criada pelo JS)
   ========================================================= */
.logos--marquee { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.marquee {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; gap: 1rem; width: max-content;
  /* duração-base lenta; o JS ajusta proporcional à quantidade de logos */
  animation: marqueeShift 144s linear infinite;
}
.marquee--rev .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__track .logo-tile { width: clamp(150px, 18vw, 210px); flex: 0 0 auto; }
/* 4 grupos por trilha; deslocar 1 grupo = -25% - gap/4 */
@keyframes marqueeShift { to { transform: translateX(calc(-25% - .25rem)); } }

/* =========================================================
   3. FAQ — abertura/fechamento fluidos + borda viva
   ========================================================= */
.faq { position: relative; }
.faq::details-content {
  height: 0; overflow: clip;
  transition: height .45s var(--ease-out), content-visibility .45s allow-discrete;
}
.faq[open]::details-content { height: auto; }
.faq__icon { transition: transform .55s var(--ease-spring); }
.faq[open] .faq__icon { transform: rotate(180deg); }
.faq::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; z-index: 1;
}
.faq[open]::before { opacity: 1; }

/* =========================================================
   4. FOOTER — copa de árvore
   ========================================================= */
.footer__canopy {
  position: absolute; top: -1px; left: 0; width: 100%;
  height: clamp(28px, 5vw, 60px); pointer-events: none;
}
.footer__canopy path { fill: rgba(223, 234, 208, .05); }
@supports (animation-timeline: view()) {
  html.fx .footer__canopy {
    animation: canopyRise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
}
@keyframes canopyRise {
  from { transform: translateY(24px); opacity: .3; }
  to   { transform: none; opacity: 1; }
}

/* =========================================================
   5. HERO — split-text + sublinhado desenhado
   ========================================================= */
.hero__title.split .w { display: inline-block; }
html.fx .hero__title.split .w {
  opacity: 0; translate: 0 .4em; filter: blur(8px);
  transition:
    opacity .7s var(--ease-out) calc(var(--wi, 0) * 70ms),
    translate .7s var(--ease-out) calc(var(--wi, 0) * 70ms),
    filter .7s var(--ease-out) calc(var(--wi, 0) * 70ms);
}
html.fx.hero-in .hero__title.split .w { opacity: 1; translate: 0 0; filter: blur(0); }

.w--grad { position: relative; }
.scribble {
  position: absolute; left: 2%; bottom: -.14em;
  width: 96%; height: .24em; overflow: visible; pointer-events: none;
}
.scribble path {
  fill: none; stroke: var(--yellow); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
html.hero-in .scribble path {
  transition: stroke-dashoffset .9s var(--ease-out) 1.05s;
  stroke-dashoffset: 0;
}

/* =========================================================
   6. BOTÕES — magnéticos + label deslizante
   ========================================================= */
.magnetic { translate: var(--mtx, 0) var(--mty, 0); will-change: translate; }
/* replica as transitions originais de cada alvo + translate (shorthand substituiria tudo) */
.btn.magnetic {
  transition: translate .5s var(--ease-spring), transform .35s var(--ease-spring),
              box-shadow .35s var(--ease), background .3s;
}
.nav__cta.magnetic {
  transition: translate .5s var(--ease-spring), transform .3s var(--ease-spring),
              box-shadow .3s, color .25s, background .3s;
}
.btn__label { display: inline-block; position: relative; overflow: hidden; vertical-align: top; }
.btn__label > span { display: inline-block; position: relative; transition: transform .45s var(--ease-out); }
.btn__label > span::after {
  content: attr(data-text); position: absolute; left: 0; top: 105%; white-space: nowrap;
}
.btn:hover .btn__label > span { transform: translateY(-105%); }

/* =========================================================
   7. STATS — "tick" de chegada do contador
   ========================================================= */
.stat--done .stat__num { animation: statTick .6s var(--ease-spring); }
.stat--done::after { width: 44px; }
@keyframes statTick { 0% { scale: 1; } 40% { scale: 1.14; } 100% { scale: 1; } }

/* =========================================================
   8. SERVIÇOS — ícones que se desenham no reveal
   ========================================================= */
html.fx .card__icon :is(path, circle) {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease-out) calc(var(--i, 0) * 90ms + .3s);
}
html.fx .card.is-visible .card__icon :is(path, circle) { stroke-dashoffset: 0; }

/* =========================================================
   9. MAPA — contorno desenhado, pontos que brotam e
      destaque interativo via checklist
   ========================================================= */
html.fx .mapa__shape {
  stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0;
  transition: stroke-dashoffset 2.2s var(--ease-out), fill-opacity 1s ease 1.4s;
}
html.fx .mapa.is-drawn .mapa__shape { stroke-dashoffset: 0; fill-opacity: 1; }

.mapa__hq { transform-box: fill-box; transform-origin: center; }
html.fx :is(.mapa__dot, .mapa__hq, .mapa__hq-ring) {
  scale: 0;
  transition: scale .55s var(--ease-spring) calc(var(--d, 2.6s) * .5s + 1.1s);
}
html.fx .mapa.is-drawn :is(.mapa__dot, .mapa__hq, .mapa__hq-ring) { scale: 1; }

/* destaque por passo do scrollytelling (data-hl setado pelo JS) */
.mapa__svg :is(.mapa__dot, .mapa__hq, .mapa__hq-ring) {
  transition: filter .35s ease, stroke-width .35s ease;
}
.mapa__svg[data-hl] :is(.mapa__dot, .mapa__hq, .mapa__hq-ring) { filter: saturate(.1) opacity(.18); }
.mapa__svg[data-hl="hq"] :is(.mapa__hq, .mapa__hq-ring),
.mapa__svg[data-hl="bases"] [data-region="base"],
.mapa__svg[data-hl="all"] :is(.mapa__dot, .mapa__hq, .mapa__hq-ring) { filter: none; }
.mapa__svg[data-hl="bases"] [data-region="base"] { stroke: var(--yellow); stroke-width: 7; }
.mapa__svg[data-hl="all"] :is(.mapa__dot, .mapa__hq) { stroke: var(--yellow); stroke-width: 5; }

/* scrollytelling: mapa gruda na tela enquanto os passos rolam */
.mapa--story { align-items: start; }
.mapa__sticky { position: sticky; top: max(96px, calc(50vh - 240px)); }
.mapa__steps { display: flex; flex-direction: column; }
.mapa__step { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; }
.mapa__step:first-child { min-height: 32vh; }
.mapa__step h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -.01em; margin-bottom: .8rem;
}
.mapa__step h4 {
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
  margin-bottom: .5rem; position: relative; padding-left: 1.9rem;
}
.mapa__step h4::before {
  content: ""; position: absolute; left: 0; top: .18em; width: 18px; height: 18px;
  background: var(--green);
  -webkit-mask: url("../assets/logo/elemento.svg") center / contain no-repeat;
  mask: url("../assets/logo/elemento.svg") center / contain no-repeat;
}
.mapa__step p { color: var(--text-soft); max-width: 42ch; }
html.fx .mapa__step { opacity: .35; transition: opacity .5s var(--ease); }
html.fx .mapa__step.is-active { opacity: 1; }

@media (max-width: 980px) {
  .mapa--story { text-align: left; }
  .mapa__sticky { position: static; order: -1; }
  .mapa__step, .mapa__step:first-child { min-height: 0; padding: .9rem 0; justify-content: flex-start; }
  html.fx .mapa__step { opacity: 1; }
  .mapa__step p { max-width: none; }
}

/* =========================================================
   10. DIFERENCIAIS — conector desenhado entre os cards
   ========================================================= */
.feat-grid { position: relative; }
.feat-connector {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.feat-connector path {
  fill: none; stroke: rgba(255, 199, 66, .4); stroke-width: 2;
  stroke-linecap: round;
}
html.fx .feat-connector path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 2s var(--ease-out) .2s;
}
html.fx .feat-grid.is-drawn .feat-connector path { stroke-dashoffset: 0; }
@media (max-width: 980px) { .feat-connector { display: none; } }

/* =========================================================
   11. SOBRE — moldura orgânica viva + parallax interno
   ========================================================= */
html.fx .sobre__frame { animation: blobMorph 9s ease-in-out infinite; }
@keyframes blobMorph {
  0%, 100% { border-radius: 32px 56px 40px 64px / 48px 36px 60px 32px; }
  33%      { border-radius: 56px 32px 64px 40px / 36px 56px 32px 60px; }
  66%      { border-radius: 44px 60px 32px 52px / 60px 32px 52px 40px; }
}
html.fx .sobre__badge { animation: badgeFloat 6s ease-in-out infinite; }
@keyframes badgeFloat { 50% { transform: translateY(-7px); } }
@supports (animation-timeline: view()) {
  html.fx .sobre__frame img {
    scale: 1.12;
    animation: imgPan linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}
@keyframes imgPan {
  from { translate: 0 -3.5%; }
  to   { translate: 0 3.5%; }
}

/* =========================================================
   12. ONLINE — anel revelado em varredura (@property só
       onde há has-st, que garante suporte)
   ========================================================= */
@property --sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
html.has-st.fx .ring {
  --sweep: 0deg;
  -webkit-mask: conic-gradient(#000 var(--sweep), transparent 0);
  mask: conic-gradient(#000 var(--sweep), transparent 0);
  transition: --sweep 1.3s var(--ease-out);
}
html.has-st.fx .ring.is-drawn { --sweep: 360deg; }

/* =========================================================
   13. DEPOIMENTOS — aspas com deriva parallax
   ========================================================= */
@supports (animation-timeline: view()) {
  html.fx .quote::before {
    animation: quoteDrift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}
@keyframes quoteDrift {
  from { translate: 0 10px; }
  to   { translate: 0 -10px; }
}

/* =========================================================
   14. TEMA — View Transition em círculo a partir do botão
   ========================================================= */
html.vt-active body { transition: none !important; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) {
  animation: vtCircle .55s var(--ease-out);
  clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 50%));
}
@keyframes vtCircle {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%)); }
  to   { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 50%)); }
}

/* =========================================================
   15. FORMULÁRIO — floating labels, preenchimento de borda,
       validação inline e botão morphing
   ========================================================= */
.form .field { display: block; position: relative; }
.form .field :is(input, textarea) { width: 100%; padding: 1.45rem 1.05rem .6rem; }
.field__label {
  position: absolute; left: 1.1rem; top: 1rem;
  font-weight: 700; font-size: 1rem; color: var(--text-soft);
  pointer-events: none; transform-origin: left top;
  transition: transform .25s var(--ease-out), color .25s;
}
.field :is(input, textarea):focus ~ .field__label,
.field :is(input, textarea):not(:placeholder-shown) ~ .field__label {
  transform: translateY(-.58rem) scale(.72);
  color: var(--green);
}
.field::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px;
  border-radius: 2px; background: var(--grad);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out); pointer-events: none;
}
.field:focus-within::after { transform: scaleX(1); }

.field__err {
  /* fora do fluxo: não desloca o layout nem o ::after do sublinhado */
  position: absolute; left: .2rem; top: calc(100% + .15rem);
  font-size: .8rem; font-weight: 700; color: #e11d48;
  opacity: 0; translate: 0 -2px;
  transition: opacity .3s, translate .3s;
}
.field.is-err .field__err { opacity: 1; translate: 0 0; }
.field.is-err :is(input, textarea) { border-color: #e11d48; animation: fieldShake .35s var(--ease); }
.field.is-err .field__label { color: #e11d48; }
@keyframes fieldShake {
  25% { translate: -5px 0; }
  50% { translate: 5px 0; }
  75% { translate: -3px 0; }
}

/* botão de envio: largura fixada pelo JS em --btn-w */
.btn--morph {
  width: var(--btn-w);
  transition: width .5s var(--ease-spring), background .3s, transform .35s var(--ease-spring), box-shadow .35s var(--ease);
  white-space: nowrap;
}
.btn--morph:is(.is-loading, .is-success) { width: 58px; padding-inline: 0; color: transparent; }
.btn--morph:is(.is-loading, .is-success) > * { opacity: 0; }
.btn--morph.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px;
  border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: spin .8s linear infinite;
}
.btn--morph.is-success { background: var(--green); }
.btn--morph.is-success::after {
  content: "✓"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 1.35rem; font-weight: 800;
  animation: popIn .45s var(--ease-spring);
}
@keyframes popIn { from { scale: .3; opacity: 0; } }