/* ═══════════════════════════════════════════════════════════════
   Piratuba Fértil® · Links
   Sistema visual e de movimento
   ═══════════════════════════════════════════════════════════════ */

/* ── Fontes (auto-hospedadas) ──────────────────────────────── */
@font-face{font-family:"Sora";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/sora-600.woff2") format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/sora-700.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500.woff2") format("woff2")}

/* ── Tokens ────────────────────────────────────────────────── */
:root{
  --navy:#001355;
  --navy-2:#0c2f8c;
  --green:#00af36;
  --green-deep:#008a2b;
  --green-soft:#e4f5e9;
  --bg:#f3f7f4;
  --card:#ffffff;
  --ink:#0d1b3d;
  --muted:#5e6b83;
  --line:rgba(0,19,85,.07);

  --shadow-card:0 18px 40px -22px rgba(0,19,85,.38), 0 2px 8px rgba(0,19,85,.05);
  --shadow-hover:0 34px 60px -24px rgba(0,19,85,.45), 0 6px 16px rgba(0,19,85,.08);
  --shadow-green:0 18px 40px -18px rgba(0,175,54,.65), 0 2px 8px rgba(0,120,40,.12);
  --shadow-green-hover:0 32px 58px -18px rgba(0,175,54,.78), 0 6px 16px rgba(0,120,40,.16);

  --radius:22px;

  /* Curvas de movimento — o vocabulário de animação da página */
  --ease-out:cubic-bezier(.22,1,.36,1);        /* saída suave, padrão   */
  --ease-spring:cubic-bezier(.16,1.16,.3,1);   /* leve ultrapassagem    */
  --ease-soft:cubic-bezier(.4,.14,.2,1);       /* micro-interações      */

  --font-display:"Sora",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  min-height:100vh;
  min-height:100dvh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

/* ═══ Camadas atmosféricas ═════════════════════════════════════
   Textura de grão + partículas flutuantes. Ambas são camadas
   fixas, sem interação, animadas só por transform/opacity.       */

.grain{
  position:fixed;
  inset:0;
  z-index:60;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.motes{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.mote{
  position:absolute;
  bottom:-12px;
  left:var(--x);
  width:var(--s);
  height:var(--s);
  border-radius:50%;
  background:var(--c,rgba(0,175,54,.5));
  opacity:0;
  animation:mote-rise var(--dur) linear var(--delay) infinite;
}
@keyframes mote-rise{
  0%  {opacity:0;                transform:translate3d(0,0,0) scale(.6)}
  10% {opacity:var(--o,.5)}
  50% {                          transform:translate3d(var(--drift,14px),-46vh,0) scale(1)}
  90% {opacity:var(--o,.5)}
  100%{opacity:0;                transform:translate3d(0,-96vh,0) scale(.7)}
}

/* ═══ Faixa superior (hero) ════════════════════════════════════ */
.hero{
  position:relative;
  height:238px;
  background:
    radial-gradient(120% 95% at 85% -10%, rgba(0,175,54,.62) 0%, rgba(0,175,54,0) 58%),
    radial-gradient(90% 90% at 0% 110%, var(--navy-2) 0%, rgba(12,47,140,0) 62%),
    var(--navy);
  border-bottom-left-radius:50% 30px;
  border-bottom-right-radius:50% 30px;
  overflow:hidden;
  isolation:isolate;
}

/* aurora: dois campos de luz que giram devagar, dando a impressão
   de que a luz atravessa o topo da página                        */
.hero__aurora{
  position:absolute;
  inset:-40%;
  pointer-events:none;
  background:
    radial-gradient(38% 38% at 30% 42%, rgba(0,175,54,.55), transparent 68%),
    radial-gradient(32% 32% at 72% 58%, rgba(56,120,255,.42), transparent 70%);
  animation:aurora 26s var(--ease-soft) infinite alternate;
  will-change:transform;
}
@keyframes aurora{
  0%  {transform:rotate(-8deg) scale(1)     translate3d(-3%,0,0)}
  50% {transform:rotate(6deg)  scale(1.14)  translate3d(4%,2%,0)}
  100%{transform:rotate(14deg) scale(1.02)  translate3d(-2%,-3%,0)}
}

/* facho de luz que varre o hero de tempos em tempos */
.hero__sweep{
  position:absolute;
  top:-60%;
  left:0;
  width:26%;
  height:220%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);
  transform:translate3d(-160%,0,0) rotate(14deg);
  animation:sweep 11s var(--ease-soft) 2.4s infinite;
}
@keyframes sweep{
  0%   {transform:translate3d(-160%,0,0) rotate(14deg)}
  28%  {transform:translate3d(520%,0,0)  rotate(14deg)}
  100% {transform:translate3d(520%,0,0)  rotate(14deg)}
}

/* os triângulos arredondados ecoam o símbolo do logo.
   --px/--py vêm do ponteiro, --sy vem do scroll (parallax)       */
.hero svg{
  position:absolute;
  fill:none;
  stroke-linejoin:round;
  stroke-linecap:round;
  translate:calc(var(--px,0) * var(--depth,1)) calc(var(--py,0) * var(--depth,1) + var(--sy,0px));
  transition:translate .6s var(--ease-soft);
  will-change:translate;
}
.tri-a{width:330px;height:330px;right:-110px;top:-150px;stroke:rgba(255,255,255,.10);stroke-width:9;--depth:1.6;animation:drift 36s ease-in-out infinite alternate}
.tri-b{width:190px;height:190px;left:-54px;top:20px;stroke:rgba(0,175,54,.48);stroke-width:8;--depth:2.4;animation:drift 28s ease-in-out -9s infinite alternate-reverse}
.tri-c{width:88px;height:88px;left:52%;top:26px;stroke:rgba(255,255,255,.16);stroke-width:6;--depth:3.4;animation:drift 22s ease-in-out -4s infinite alternate}
@keyframes drift{from{transform:rotate(-6deg) translateY(0)}to{transform:rotate(8deg) translateY(14px)}}

/* ═══ Conteúdo central ═════════════════════════════════════════ */
.wrap{
  position:relative;
  z-index:2;
  width:100%;
  max-width:460px;
  margin:0 auto;
  padding:0 20px 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:1;
}

/* ── Cartão do logo ────────────────────────────────────────── */
.logo-stage{
  margin-top:-92px;
  width:min(250px,72vw);
  perspective:900px;
  position:relative;
  z-index:3;
}
.logo-card{
  position:relative;
  background:var(--card);
  border-radius:28px;
  padding:22px 24px 18px;
  box-shadow:var(--shadow-card);
  border:1px solid rgba(255,255,255,.8);
  overflow:hidden;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
  will-change:transform;
}
.logo-card:hover{box-shadow:var(--shadow-hover)}
.logo-card img{display:block;width:100%;height:auto}

/* brilho especular que acompanha o ponteiro sobre o cartão */
.logo-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(38% 60% at var(--mx,50%) var(--my,50%),rgba(0,175,54,.14),transparent 72%);
  opacity:0;
  transition:opacity .45s var(--ease-soft);
}
.logo-card:hover::before{opacity:1}

/* varredura de luz única, logo após o cartão pousar */
.logo-card::after{
  content:"";
  position:absolute;
  top:-50%;
  left:0;
  width:38%;
  height:200%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  transform:translate3d(-220%,0,0) rotate(18deg);
}
.is-ready .logo-card::after{animation:shine 1.4s var(--ease-soft) .9s both}
@keyframes shine{
  from{transform:translate3d(-220%,0,0) rotate(18deg)}
  to  {transform:translate3d(360%,0,0)  rotate(18deg)}
}

/* ── Bloco de texto ────────────────────────────────────────── */
.intro{margin-top:22px;text-align:center}

.eyebrow{
  font-family:var(--font-body);
  font-weight:500;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  text-wrap:balance;
}

.slogan{
  margin-top:8px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:24px;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--navy);
}

/* revelação palavra a palavra: cada palavra sobe por trás de uma
   máscara, como se brotasse da linha de baixo                    */
.word{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  padding-bottom:.16em;
  margin-bottom:-.16em;
}
.word > i{display:inline-block;font-style:normal}
.js .word > i{transform:translate3d(0,115%,0)}
.is-ready .word > i{animation:word-up .75s var(--ease-spring) var(--wd,0ms) both}
@keyframes word-up{from{transform:translate3d(0,115%,0)}to{transform:translate3d(0,0,0)}}

/* destaque verde: o traço é desenhado depois que a palavra pousa */
.hl{position:relative;color:var(--green);font-style:normal}
.hl::after{
  content:"";
  position:absolute;
  left:0;right:0;
  bottom:.02em;
  height:.13em;
  border-radius:99px;
  background:linear-gradient(90deg,var(--green),rgba(0,175,54,.35));
  transform:scaleX(0);
  transform-origin:0 50%;
}
.is-ready .hl::after{animation:draw .7s var(--ease-out) .93s both}
@keyframes draw{to{transform:scaleX(1)}}

.where{
  margin-top:14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 13px 7px 10px;
  border-radius:999px;
  background:var(--green-soft);
  color:var(--green-deep);
  font-weight:500;
  font-size:13px;
}
.where svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* o alfinete pulsa devagar, como um sinal de localização vivo */
.is-ready .where svg{animation:pin 4.2s var(--ease-soft) 2s infinite}
@keyframes pin{
  0%,72%,100%{transform:translateY(0) scale(1)}
  78%        {transform:translateY(-3px) scale(1.12)}
  86%        {transform:translateY(0) scale(1)}
  91%        {transform:translateY(-1px) scale(1.04)}
}

/* ═══ Botões ═══════════════════════════════════════════════════ */
.links{list-style:none;width:100%;margin-top:28px;display:grid;gap:14px}
.links > li{perspective:1000px}

.link{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px 14px 14px;
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  text-decoration:none;
  color:var(--ink);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  /* translate = flutuação ociosa · scale = hover · transform = ímã/inclinação
     as três propriedades se compõem sem conflito                  */
  transform:translate3d(var(--tx,0px),var(--ty,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:scale .35s var(--ease-spring),
             box-shadow .35s var(--ease-out),
             transform .5s var(--ease-soft),
             border-color .35s var(--ease-out);
  animation:float var(--ft,6s) ease-in-out var(--fd,0s) infinite;
  will-change:transform;
}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -4px}}

.link:hover{scale:1.025;box-shadow:var(--shadow-hover);border-color:rgba(0,19,85,.12)}
.link:active{scale:.985;transition-duration:.12s}
.link:focus-visible{outline:3px solid var(--green);outline-offset:3px}

/* reflexo que cruza o cartão no hover */
.link::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translate3d(-130%,0,0);
  transition:transform 0s .85s;
}
.link:hover::after{transform:translate3d(130%,0,0);transition:transform .85s var(--ease-soft)}

/* onda ao toque, nascendo no ponto exato do clique */
.ripple{
  position:absolute;
  left:var(--rx-p);
  top:var(--ry-p);
  width:16px;height:16px;
  margin:-8px 0 0 -8px;
  border-radius:50%;
  background:rgba(0,19,85,.16);
  pointer-events:none;
  animation:ripple .62s var(--ease-out) forwards;
}
.link--primary .ripple{background:rgba(255,255,255,.3)}
@keyframes ripple{
  from{transform:scale(0);opacity:.9}
  to  {transform:scale(26);opacity:0}
}

.chip{
  position:relative;
  flex:none;
  width:46px;height:46px;
  border-radius:15px;
  display:grid;place-items:center;
  color:#fff;
  transition:transform .45s var(--ease-spring), border-radius .45s var(--ease-spring);
}
.link:hover .chip{transform:rotate(-6deg) scale(1.06);border-radius:18px}
.chip svg{width:24px;height:24px;transition:transform .45s var(--ease-spring)}
.link:hover .chip svg{transform:rotate(6deg)}

.chip--ig{background:linear-gradient(135deg,#f9ce34 0%,#ee2a7b 52%,#6228d7 100%)}
.chip--ig svg{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.chip--site{background:var(--navy)}
.chip--site svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chip--wa{background:#fff;color:var(--green)}
.chip--wa svg{fill:currentColor;width:26px;height:26px}

.txt{flex:1;min-width:0}
.title{
  display:block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:16px;
  line-height:1.2;
  letter-spacing:-.005em;
}
.sub{display:block;margin-top:3px;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.arrow{
  flex:none;
  width:20px;height:20px;
  color:rgba(13,27,61,.35);
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .45s var(--ease-spring), color .35s var(--ease-out);
}
.link:hover .arrow{transform:translateX(4px);color:rgba(13,27,61,.6)}

/* ── Botão principal: orçamento ────────────────────────────── */
.link--primary{
  background:linear-gradient(120deg,#00b93a 0%,var(--green) 42%,#009a30 72%,#00b93a 100%);
  background-size:220% 100%;
  background-position:0% 50%;
  border-color:rgba(0,120,40,.25);
  color:#fff;
  box-shadow:var(--shadow-green);
  transition:scale .35s var(--ease-spring),
             box-shadow .35s var(--ease-out),
             transform .5s var(--ease-soft),
             background-position 1.1s var(--ease-soft);
}
.link--primary:hover{box-shadow:var(--shadow-green-hover);background-position:100% 50%}
.link--primary .sub{color:rgba(255,255,255,.82)}
.link--primary .arrow{color:rgba(255,255,255,.75)}
.link--primary:hover .arrow{color:#fff}
.link--primary:focus-visible{outline-color:var(--navy)}

/* halo que respira, para o botão principal chamar o olho sem gritar */
.link--primary::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:0 0 0 0 rgba(0,175,54,.42);
  animation:breathe 3.6s var(--ease-soft) infinite;
}
@keyframes breathe{
  0%,100%{box-shadow:0 0 0 0 rgba(0,175,54,0)}
  50%    {box-shadow:0 0 0 7px rgba(0,175,54,.14)}
}

/* Enquanto o ponteiro comanda a inclinação o retorno é imediato; ao
   sair, a transição longa de .link volta e o cartão assenta sozinho.
   Declarado depois de .link--primary para vencer o empate de peso. */
.link.is-tracking,
.link--primary.is-tracking{
  transition:scale .35s var(--ease-spring),
             box-shadow .35s var(--ease-out),
             transform .08s linear,
             background-position 1.1s var(--ease-soft);
}

/* ═══ Rodapé ═══════════════════════════════════════════════════ */
.foot{
  margin-top:auto;
  padding-top:36px;
  text-align:center;
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
}
.foot b{font-weight:500;color:var(--navy)}

/* ═══ Coreografia de entrada ═══════════════════════════════════
   Sem JS nada disso é aplicado — o conteúdo aparece estático.    */
.js .hero{opacity:0}
.is-ready .hero{animation:fade .9s var(--ease-out) both}

.js .reveal{opacity:0}
.is-ready .reveal{animation:rise .7s var(--ease-out) var(--d,0ms) both}
.is-ready .reveal--pop{animation:pop .9s var(--ease-spring) var(--d,0ms) both}

@keyframes fade{to{opacity:1}}
@keyframes rise{
  from{opacity:0;transform:translate3d(0,24px,0)}
  to  {opacity:1;transform:none}
}
@keyframes pop{
  from{opacity:0;transform:translate3d(0,34px,0) scale(.88) rotateX(-14deg)}
  60% {opacity:1}
  to  {opacity:1;transform:none}
}

/* rodapé entra por scroll, quando realmente aparece na tela */
.js .in-view{opacity:0}
.in-view.is-visible{animation:rise .9s var(--ease-out) both}

/* ═══ Desktop ══════════════════════════════════════════════════ */
@media (min-width:720px){
  .hero{height:300px;border-bottom-left-radius:50% 46px;border-bottom-right-radius:50% 46px}
  .tri-a{width:520px;height:520px;right:4vw;top:-250px;stroke-width:12}
  .tri-b{width:300px;height:300px;left:2vw;top:-10px;stroke-width:11}
  .tri-c{width:120px;height:120px;left:60%;top:34px}
  .wrap{max-width:500px;padding:0 24px 56px}
  .logo-stage{margin-top:-120px;width:300px}
  .logo-card{padding:26px 30px 22px;border-radius:32px}
  .intro{margin-top:26px}
  .slogan{font-size:28px}
  .links{margin-top:34px;gap:16px}
  .link{padding:17px 20px 17px 17px}
  .title{font-size:17px}
  .sub{font-size:13.5px}
  .chip{width:50px;height:50px;border-radius:16px}
  .chip svg{width:26px;height:26px}
  .chip--wa svg{width:28px;height:28px}
}

/* ═══ Acessibilidade: movimento reduzido ═══════════════════════
   Tudo para. O conteúdo fica no estado final, legível.           */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
  .hero,.reveal,.in-view,.js .reveal,.js .in-view{opacity:1 !important;transform:none !important}
  .js .word > i{transform:none !important}
  .hl::after{transform:scaleX(1) !important}
  .hero svg{translate:none !important}
  .link{transform:none !important}
  .motes,.grain{display:none}
}