/* =========================================================================
   Central de Envio — efeitos
   Adaptação de três componentes React (Aceternity "Google Gemini Effect",
   Motiq "Border Beam Panel" e um botão com press/ripple) para a stack real
   do projeto: CSS e JS puros, sem build, sem npm, sem framer-motion.

   O que mudou além da linguagem:

   1. PALETA. Os originais vêm em rosa/azul (Google) e azul/coral (Motiq).
      Aqui tudo foi retraduzido para "Vidro e Metal" — champanhe, ouro e
      prata dos tokens do style.css. Nenhuma cor nova entrou no projeto.
   2. FÍSICA NO JS, APARÊNCIA NO CSS. O JS escreve UMA custom property por
      quadro (--feixe-angulo, --p). Todo o resto é declarado aqui, então o
      conteúdo dos cartões nunca repinta.
   3. MOVIMENTO É OPCIONAL. O style.css já mata animation/transition sob
      `prefers-reduced-motion`. Como estes efeitos são movidos por JS, a
      preferência é lida também lá — e o estado parado é desenhado aqui.
   ========================================================================= */

:root {
  /* ângulo do feixe da borda: o JS reescreve isto, e só isto, por quadro */
  --feixe-angulo: 0deg;
}

/* =========================================================================
   1. Feixe de borda  (Motiq "Border Beam Panel")
   Dois cometas em órbita sobre um anel de 2px. O anel é um conic-gradient
   girando, recortado por uma máscara ALPHA de duas camadas com
   `mask-composite: exclude` — máscara de luminância em SVG é evitada de
   propósito, porque em Chromium ela falha em silêncio.
   Aplicação: `data-feixe` em qualquer elemento (o JS injeta as camadas).
   ========================================================================= */

[data-feixe] {
  position: relative;
  isolation: isolate;
}

.feixe-anel,
.feixe-halo {
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--raio) + 1px);
  pointer-events: none;
  /* Os dois cometas. A rampa começa em 4% da cor, e não em `transparent`:
     `transparent` é rgba(0,0,0,0), e um conic passando por ele escurece
     visivelmente no meio do rastro. */
  background: conic-gradient(
    from var(--feixe-angulo),
    transparent 0deg,
    rgba(215, 187, 140, .04) 18deg,
    rgba(215, 187, 140, .55) 46deg,
    #f8f1e4 56deg,
    #fffdf7 60deg,
    transparent 63deg,
    transparent 198deg,
    rgba(223, 229, 238, .04) 216deg,
    rgba(223, 229, 238, .50) 244deg,
    #dfe5ee 254deg,
    #ffffff 258deg,
    transparent 261deg,
    transparent 360deg
  );
}

/* um cometa só: o rastro de prata some */
[data-feixe="1"] .feixe-anel,
[data-feixe="1"] .feixe-halo {
  background: conic-gradient(
    from var(--feixe-angulo),
    transparent 0deg,
    rgba(215, 187, 140, .04) 18deg,
    rgba(215, 187, 140, .55) 46deg,
    #f8f1e4 56deg,
    #fffdf7 60deg,
    transparent 63deg,
    transparent 360deg
  );
}

/* No tema claro o champanhe sobre branco vira quase invisível: o anel usa
   os tons fechados do ouro claro (--ouro #9c7b45) e ganha contraste. */
@media (prefers-color-scheme: light) {
  .feixe-anel,
  .feixe-halo {
    background: conic-gradient(
      from var(--feixe-angulo),
      transparent 0deg,
      rgba(156, 123, 69, .05) 18deg,
      rgba(156, 123, 69, .55) 46deg,
      #b08c4f 56deg,
      #d7bb8c 60deg,
      transparent 63deg,
      transparent 198deg,
      rgba(120, 132, 150, .05) 216deg,
      rgba(120, 132, 150, .45) 244deg,
      #8b98ab 254deg,
      #b6c0cf 258deg,
      transparent 261deg,
      transparent 360deg
    );
  }
  .feixe-halo { opacity: .45; }
}

.feixe-anel {
  padding: 2px;                   /* = espessura do anel */
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

/* cópia borrada do anel: lida como luz projetada, não como segunda borda */
.feixe-halo {
  filter: blur(14px);
  opacity: .32;
  z-index: -1;
}

/* Alto contraste do sistema: o anel decorativo sai de cena e a borda real
   volta a ser a borda do sistema, que é o que o modo existe para garantir. */
@media (forced-colors: active) {
  .feixe-anel,
  .feixe-halo { display: none; }
}

/* =========================================================================
   2. Feixes de percurso  (Aceternity "Google Gemini Effect")
   Cinco traços que se desenham conforme a página rola. No original o
   `pathLength` é animado pelo framer-motion; aqui cada <path> declara
   `pathLength="1"`, o que normaliza o comprimento — então basta mover o
   `stroke-dashoffset` de 1 (apagado) a 0 (inteiro).

   O JS escreve só `--p` (0 → 1) no <svg>. Cada traço deriva o próprio
   avanço a partir do seu `--inicio`, reproduzindo o escalonamento do
   original (0.2, 0.15, 0.1, 0.05, 0 → 1.2 ao longo de 80% do percurso).
   ========================================================================= */

.percurso {
  position: relative;
  /* 210vh: o suficiente para o traçado acontecer com calma, longe das 400vh
     do original — esta é uma seção da página, não a página inteira. */
  height: 210vh;
  margin: 74px 0 0;
}
@media (max-width: 820px) {
  .percurso { height: 150vh; }
}

/* o conteúdo fica grudado no meio da tela enquanto a seção passa */
.percurso-palco {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-content: center;
  gap: 18px;
  overflow: hidden;
}

.percurso-palco h2 {
  font-size: clamp(1.8rem, 5.2vw, 3rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  text-align: center;
  margin: 0;
}
.percurso-palco .sub {
  text-align: center;
  max-width: 46ch;
  margin: 0 auto;
  color: var(--suave);
}

/* O SVG recorta em vez de encolher (`preserveAspectRatio="…slice"` no HTML).
   Encolhendo, num celular os cinco traços caem para ~80px de altura total e
   viram um borrão único. Recortando, a altura é ditada aqui e o corte come as
   pontas — que são retas — preservando o centro, que é onde os feixes se
   cruzam e onde está o desenho. */
.percurso svg {
  display: block;
  width: 100%;
  max-width: 1180px;
  height: min(300px, 26vw);
  margin: 0 auto;
}
@media (max-width: 820px) {
  .percurso svg { height: 190px; }
}

.percurso path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  /* comprimento normalizado: pathLength="1" no HTML faz 1 = traço inteiro */
  stroke-dasharray: 1;
  /* avanço = inicio + p * (1.2 - inicio) / 0.8, exatamente como o original */
  --avanco: calc(var(--inicio) + var(--p, 0) * (1.2 - var(--inicio)) / .8);
  stroke-dashoffset: clamp(0, calc(1 - var(--avanco)), 1);
}

/* cópia borrada por baixo: o mesmo traço virando luz difusa */
.percurso .halo path { stroke-width: 3; opacity: .5; filter: blur(6px); }

/* Cinco tons de metal, do champanhe claro à prata fria. Os cinco vêm dos
   tokens da marca — nenhuma cor nova entra no projeto por aqui. */
.percurso path:nth-child(1) { stroke: #f8f1e4; --inicio: .20; }
.percurso path:nth-child(2) { stroke: #d7bb8c; --inicio: .15; }
.percurso path:nth-child(3) { stroke: #c3a274; --inicio: .10; }
.percurso path:nth-child(4) { stroke: #dfe5ee; --inicio: .05; }
.percurso path:nth-child(5) { stroke: #a9b4c4; --inicio: 0;   }

/* No claro os cinco descem de tom: champanhe sobre branco não se enxerga. */
@media (prefers-color-scheme: light) {
  .percurso path:nth-child(1) { stroke: #b99a63; }
  .percurso path:nth-child(2) { stroke: #9c7b45; }
  .percurso path:nth-child(3) { stroke: #7d6236; }
  .percurso path:nth-child(4) { stroke: #8b98ab; }
  .percurso path:nth-child(5) { stroke: #6d7788; }
  .percurso .halo path { opacity: .35; }
}

/* o selo central, sobre o cruzamento dos traços */
.percurso-selo {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 999px;
  font-weight: 650;
  font-size: .93rem;
  color: #1c1508;
  background: var(--metal);
  border: 1px solid var(--metal-borda);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75),
              0 14px 30px -16px rgba(206, 172, 118, .9);
}
.percurso-selo svg { width: 16px; height: 16px; flex: none; }

/* =========================================================================
   3. Botões: firmeza no toque  (adaptação do botão com press/ripple)
   O projeto já afundava 1px no :active. Aqui entra a escala do toque, o
   leve levantar no hover (só em ponteiro fino — dedo não faz hover) e a
   ondulação, que o JS desenha a partir do ponto exato do toque.
   ========================================================================= */

.btn,
.icone-btn {
  position: relative;
  overflow: hidden;
  /* saída mais rápida que a volta: afunda seco, levanta com folga */
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1),
              box-shadow var(--transicao),
              background var(--transicao),
              border-color var(--transicao),
              color var(--transicao);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled):not(.ocupado)      { transform: translateY(-1px); }
  .icone-btn:hover:not(:disabled)              { transform: translateY(-1px); }
}

.btn:active:not(:disabled):not(.ocupado) {
  transform: translateY(1px) scale(.975);
  transition-duration: 90ms;
}
.icone-btn:active:not(:disabled) {
  transform: translateY(1px) scale(.94);
  transition-duration: 90ms;
}

/* A ondulação usa currentColor: no botão metálico (texto escuro sobre
   champanhe) ela sai escura, nos demais sai clara. Um só código, dois
   comportamentos corretos. */
.ondulacao {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  opacity: .26;
  animation: ondular 620ms cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes ondular {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* =========================================================================
   Respeito ao usuário
   O style.css já zera animation/transition sob reduced-motion. Falta o que
   é movido por JS: o anel para num ângulo que deixa os dois cometas em
   arestas visíveis, e os percursos aparecem inteiros. Ninguém fica com
   conteúdo preso esperando uma animação que não vai rodar.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  :root { --feixe-angulo: 40deg; }
  .feixe-halo { opacity: .22; }
  .percurso { height: auto; margin-top: 74px; }
  .percurso-palco { position: static; height: auto; padding: 40px 0; }
  .percurso path { stroke-dashoffset: 0; }
  .ondulacao { display: none; }
}