/* ==========================================================================
   Tripz — camada de refinamento visual
   --------------------------------------------------------------------------
   Regra da casa: NÃO altera estrutura, copy, tipografia nem a paleta.
   Tudo aqui é acabamento: profundidade, luz, ritmo de entrada e movimento.
   Os ganchos .tz-* são aplicados por tripz-enhance.js, para não depender de
   seletores Tailwind escapados do artifact.
   ========================================================================== */

:root {
  --tz-gold: #f59e0b;
  --tz-gold-soft: #fcd34d;
  --tz-ink: #09090b;
  --tz-ease: cubic-bezier(.22, 1, .36, 1);
  --tz-ease-out: cubic-bezier(.16, 1, .3, 1);
  --tz-spring: cubic-bezier(.34, 1.4, .5, 1);
}

/* ------------------------------------------------------------------ 1. Luz
   Grão fino sobre a página inteira. É o que separa "gradiente de CSS" de
   "imagem impressa" — a referência peachweb usa o mesmo recurso. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
}

/* --------------------------------------------------- 2. Progresso de leitura
   Fio de ouro no topo. Único elemento novo da página, e ele informa algo
   verdadeiro: quanto falta. */
.tz-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--tz-gold), var(--tz-gold-soft));
  z-index: 100;
  pointer-events: none;
  will-change: transform;
}

/* ------------------------------------------------------------- 3. Cabeçalho
   Correção de legibilidade: no topo o menu fica sobre o herói escuro, mas
   herdava tinta zinc-600. Enquanto transparente, inverte para branco; ao
   rolar, o artifact já troca para fundo claro e a cor volta ao normal. */
header.bg-transparent .font-display,
header.bg-transparent nav a,
header.bg-transparent .text-zinc-500,
header.bg-transparent .text-zinc-600 {
  color: rgba(255, 255, 255, .82);
}

header.bg-transparent nav a:hover {
  color: #fff;
}

header.bg-transparent .bg-zinc-950 {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
}

/* Defeito de origem: as duas linhas do logotipo usam leading-[0.9] com -mt-1
   e se encavalam. Devolvemos o espaço entre elas sem mexer no tamanho. */
header .leading-\[0\.9\] {
  line-height: 1.05;
}

header .leading-\[0\.9\] > div:last-child {
  margin-top: 1px;
}

/* Sublinhado que cresce do centro — mais preciso que trocar só a cor. */
header nav a {
  position: relative;
}

header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  transform: scaleX(0);
  transition: transform .38s var(--tz-ease);
}

header nav a:hover::after {
  transform: scaleX(1);
}

/* O bloco do cabeçalho desce junto com o carregamento da página. */
.tz-head-in {
  animation: tzHeadIn .9s var(--tz-ease-out) both;
}

@keyframes tzHeadIn {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ 4. Herói
   A foto ganha respiração lenta (ken burns) e paralaxe no scroll, e uma
   aurora âmbar surge por trás do texto para dar volume ao fundo chapado. */
.tz-hero-media {
  will-change: transform;
  animation: tzDrift 26s ease-in-out infinite alternate;
}

@keyframes tzDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.4%, -1.2%, 0); }
}

.tz-aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.tz-aurora::before,
.tz-aurora::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.tz-aurora::before {
  width: 42vw;
  height: 42vw;
  left: -14vw;
  top: -6vh;
  background: rgba(245, 158, 11, .085);
  animation: tzFloatA 18s ease-in-out infinite alternate;
}

.tz-aurora::after {
  width: 40vw;
  height: 40vw;
  right: -10vw;
  bottom: -14vh;
  background: rgba(56, 108, 168, .13);
  animation: tzFloatB 22s ease-in-out infinite alternate;
}

@keyframes tzFloatA {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(5vw, 4vh, 0); }
}

@keyframes tzFloatB {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-4vw, -5vh, 0); }
}

/* Sequência de abertura: cada elemento do herói entra em ordem de leitura. */
.tz-stage > * {
  opacity: 0;
  transform: translateY(22px);
  animation: tzRise .95s var(--tz-ease-out) forwards;
}

.tz-stage > *:nth-child(1) { animation-delay: .12s; }
.tz-stage > *:nth-child(2) { animation-delay: .22s; }
.tz-stage > *:nth-child(3) { animation-delay: .34s; }
.tz-stage > *:nth-child(4) { animation-delay: .46s; }
.tz-stage > *:nth-child(5) { animation-delay: .58s; }
.tz-stage > *:nth-child(6) { animation-delay: .70s; }

@keyframes tzRise {
  to { opacity: 1; transform: none; }
}

/* O verso em itálico do H1 é o coração da promessa: ganha um traço de luz
   que corre uma vez, no fim da sequência de abertura. */
.tz-underline {
  position: relative;
  display: inline-block;
}

.tz-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .06em;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tz-gold), transparent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: tzSweep 1.5s var(--tz-ease-out) 1.15s forwards;
}

@keyframes tzSweep {
  40%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: .55; }
}

/* Faixa de provas do herói. */
.tz-proof {
  opacity: 0;
  animation: tzRise .9s var(--tz-ease-out) .95s forwards;
}

/* ------------------------------------------------- 5. Assinatura: o cartão
   O cartão do próximo embarque é o objeto que a página deixa na memória.
   Ele flutua, responde ao ponteiro em 3D e tem um brilho que atravessa a
   borda como a luz num bilhete plastificado. */
.tz-card {
  perspective: 1400px;
  animation: tzFloat 7s ease-in-out infinite alternate;
}

@keyframes tzFloat {
  from { transform: translateY(-6px); }
  to   { transform: translateY(8px); }
}

.tz-card-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .5s var(--tz-ease);
  will-change: transform;
}

.tz-card-inner::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 33px;
  padding: 1px;
  background: linear-gradient(140deg, rgba(255, 255, 255, .65), rgba(245, 158, 11, .45), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .8;
  pointer-events: none;
}

.tz-card-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 32px;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 48%, transparent 58%);
  transform: translateX(-120%);
  animation: tzShine 6.5s var(--tz-ease) 2.2s infinite;
  pointer-events: none;
}

@keyframes tzShine {
  0%, 72%  { transform: translateX(-120%); }
  88%      { transform: translateX(120%); }
  100%     { transform: translateX(120%); }
}

/* O avião do cartão decola de leve quando o cartão é observado. */
.tz-card .lucide-plane {
  transition: transform .6s var(--tz-spring);
}

.tz-card:hover .lucide-plane {
  transform: translate(2px, -3px) rotate(8deg);
}

/* -------------------------------------------- 6. Entradas conduzidas pelo scroll */
.tz-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .85s var(--tz-ease-out),
    transform .85s var(--tz-ease-out);
  will-change: opacity, transform;
}

.tz-reveal.tz-in {
  opacity: 1;
  transform: none;
}

/* Títulos de seção sobem com um leve corte de máscara. */
.tz-reveal-title {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .9s var(--tz-ease-out),
    transform .9s var(--tz-ease-out);
}

.tz-reveal-title.tz-in {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------- 7. Cartões
   Elevação com mola e uma borda que acende. Vale para os três conjuntos
   (processo, destinos, depoimentos) sem tocar em cor nem raio. */
.tz-lift {
  transition:
    transform .55s var(--tz-spring),
    box-shadow .55s var(--tz-ease),
    border-color .4s var(--tz-ease);
  will-change: transform;
}

.tz-lift:hover {
  transform: translateY(-8px);
}

/* Destinos: véu quente sobre a foto e seta que avança. */
.tz-dest .aspect-\[4\/3\]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 9, 11, .45), transparent 55%);
  opacity: 0;
  transition: opacity .55s var(--tz-ease);
  pointer-events: none;
}

.tz-dest:hover .aspect-\[4\/3\]::after {
  opacity: 1;
}

.tz-dest:hover {
  box-shadow: 0 26px 60px rgba(9, 9, 11, .14);
}

.tz-dest .lucide-arrow-right {
  transition: transform .45s var(--tz-spring);
}

.tz-dest:hover .lucide-arrow-right {
  transform: translateX(3px);
}

/* Processo: o cartão já inverte para preto no hover; suavizamos a curva e
   damos vida ao ícone e ao numeral. */
.tz-step {
  transition:
    transform .55s var(--tz-spring),
    background-color .55s var(--tz-ease),
    color .55s var(--tz-ease),
    box-shadow .55s var(--tz-ease);
}

.tz-step:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 70px rgba(9, 9, 11, .22);
}

.tz-step .lucide {
  transition: transform .55s var(--tz-spring);
}

.tz-step:hover .lucide {
  transform: rotate(-8deg) scale(1.08);
}

/* Diferenciais (fundo escuro): a borda ganha um fio âmbar em vez de só
   clarear o preenchimento. */
.tz-dark-card {
  position: relative;
  transition:
    transform .5s var(--tz-spring),
    background-color .45s var(--tz-ease);
}

.tz-dark-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(245, 158, 11, .55), rgba(255, 255, 255, .12) 45%, transparent 70%);
  -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 .45s var(--tz-ease);
  pointer-events: none;
}

.tz-dark-card:hover {
  transform: translateY(-5px);
}

.tz-dark-card:hover::before {
  opacity: 1;
}

/* --------------------------------------------------------------- 8. Botões
   Lampejo diagonal ao passar o mouse e mola no clique. A seta acompanha. */
.tz-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .35s var(--tz-spring),
    box-shadow .35s var(--tz-ease),
    background-color .3s var(--tz-ease);
}

.tz-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform .75s var(--tz-ease);
}

.tz-btn:hover::before {
  transform: translateX(130%);
}

.tz-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(9, 9, 11, .22);
}

.tz-btn:active {
  transform: translateY(0) scale(.985);
}

.tz-btn .lucide {
  transition: transform .4s var(--tz-spring);
}

.tz-btn:hover .lucide-arrow-right,
.tz-btn:hover .lucide-move-right {
  transform: translateX(4px);
}

/* --------------------------------------------------------- 9. Formulário
   Campos com foco em ouro (a mesma cor do fio de progresso e do selo). */
#form input,
#form select,
#form textarea {
  transition:
    border-color .3s var(--tz-ease),
    box-shadow .3s var(--tz-ease),
    background-color .3s var(--tz-ease);
}

#form input:focus,
#form select:focus,
#form textarea:focus {
  border-color: var(--tz-gold);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, .15);
}

/* ------------------------------------------------------ 10. Botão WhatsApp
   Anel que pulsa devagar — presença sem barulho.
   Atenção: não declarar `position` aqui. O elemento já é `fixed` pelo
   Tailwind e esta folha carrega depois, então qualquer position aqui
   arranca o botão do canto da tela. O ::before ancora no fixed. */
.tz-wa::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid rgba(37, 211, 102, .6);
  animation: tzPing 3.4s var(--tz-ease-out) infinite;
  pointer-events: none;
}

@keyframes tzPing {
  0%   { transform: scale(1); opacity: .7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.tz-wa > * {
  transition: transform .4s var(--tz-spring);
}

.tz-wa:hover > * {
  transform: scale(1.08);
}

/* --------------------------------------------------------- 11. Rodapé/links */
footer a,
footer .text-zinc-600 > * {
  transition: color .25s var(--tz-ease), transform .25s var(--tz-ease);
}

/* ------------------------------------------------- 12. Acessibilidade e mobile */

/* Herdado da camada anterior: 10,5px continua abaixo do mínimo legível.
   Vale para a assinatura do cabeçalho e a do rodapé. */
.font-body.text-\[9px\] {
  font-size: 11px;
}

@media (max-width: 1023px) {
  .tz-aurora::before,
  .tz-aurora::after { filter: blur(60px); }
  .tz-card { animation: none; }
  .tz-card-inner::after { animation: none; }
}

/* prefers-reduced-motion desativado por solicitação: animações mantidas. */
/* @media (prefers-reduced-motion: reduce) {
  .tz-hero-media,
  .tz-card,
  .tz-card-inner::after,
  .tz-aurora::before,
  .tz-aurora::after,
  .tz-underline::after,
  .tz-wa::before { animation: none !important; }

  .tz-stage > *,
  .tz-proof { opacity: 1 !important; transform: none !important; animation: none !important; }

  .tz-reveal,
  .tz-reveal-title { opacity: 1 !important; transform: none !important; }

  .tz-progress { display: none; }
} */

/* ----------------------------------------------------------------- 14.
   Avaliações do Google tornadas clicáveis (abrem a ficha no Maps em nova
   aba). Não muda layout nem tipografia: só cursor, leve realce no hover e
   o contorno de foco já existente. São os blocos de nota que o React monta
   sem href. */
.tz-google-rating {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.tz-google-rating:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
a.tz-google-rating { -webkit-tap-highlight-color: transparent; }