/* ═══════════════════════════════════════════════════════════════════════════
   GOVINDA · LANDING PAGES — CAMADA V2
   Carrega DEPOIS do govinda-lp.css e ANTES do destino-v2.css.

   Esta folha só acrescenta e sobrescreve. O govinda-lp.css não é tocado, então
   as páginas V1 continuam idênticas ao que sempre foram.

   O vocabulário de movimento já existia: --mola é cubic-bezier(.16,1,.3,1), que
   é a mesma curva que a Apple usa nas entradas. A V2 não inventa curva nova —
   ela usa a da casa em mais lugares, e com mais paciência.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --t-cruza:1500ms;      /* travessia entre duas fotografias do hero */
  --t-entra:1100ms;      /* entrada da tipografia cinética */
}

/* ═══════════════════ 1 · O PALCO DO HERO ═══════════════════
   O parallax da V1 pegava .hero__foto pelo singular e escrevia direto no
   style.transform. Com fotos empilhadas isso pegaria só a primeira, e as
   outras ficariam paradas enquanto a de baixo desliza.

   A saída é separar as duas responsabilidades: o PALCO se desloca (parallax),
   as FOTOS só trocam de opacidade. Cada uma cuida de uma propriedade e elas
   nunca disputam o mesmo atributo. */
.hero__palco{
  position:absolute;inset:0;overflow:hidden;
  transform:scale(1.06);       /* a folga que o deslocamento do parallax consome */
  will-change:transform;
}

/* Sobrescreve a V1: a foto perde o transform e o will-change de transform,
   porque agora quem se move é o palco. */
.hero .hero__foto{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:sepia(.12) saturate(.94) brightness(.92);
  transform:none;
  opacity:0;
  transition:opacity var(--t-cruza) var(--suave);
}
.hero .hero__foto.is-ativa{opacity:1}

/* A deriva lenta — o que impede a foto parada de parecer um JPEG travado.
   1,5% em nove segundos: percebe-se como respiração, não como zoom. */
@media (prefers-reduced-motion:no-preference){
  .hero .hero__foto.is-ativa{animation:deriva 9s var(--suave) forwards}
}
@keyframes deriva{from{transform:scale(1)}to{transform:scale(1.015)}}

/* ── os três traços ────────────────────────────────────────────────────────
   Sem setas: elas competiriam com o botão, que é o que a página quer que a
   visitante clique. O traço fino apenas sinaliza que há mais para ver — e
   devolve o controle, que é o que a acessibilidade pede de um autoplay. */
/* Os traços moram DENTRO da .linha-cta, à direita do botão. O hero já é mais
   alto que a tela em 900px — era assim na V1 também — e um controle que nasce
   abaixo da dobra não controla nada. Aqui eles não acrescentam altura nenhuma
   no desktop, e no celular quebram para a linha de baixo, onde o botão ocupa
   a largura inteira. */
.hero .linha-cta{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:1rem 1.6rem;
}
.hero__tracos{
  display:flex;gap:.55rem;
  padding:0;border:0;background:none;
}
.hero__tracos button{
  appearance:none;border:0;padding:.55rem 0;background:none;cursor:pointer;
  width:2.4rem;
}
.hero__tracos button::before{
  content:'';display:block;height:2px;border-radius:2px;
  background:rgba(250,247,239,.34);
  transition:background-color var(--t-media) var(--suave),
             transform var(--t-media) var(--mola);
  transform-origin:left center;
}
.hero__tracos button:hover::before{background:rgba(250,247,239,.6)}
.hero__tracos button[aria-current="true"]::before{
  background:var(--ouro);transform:scaleY(1.5);
}
.hero__tracos button:focus-visible{outline:2px solid var(--ouro);outline-offset:4px}
/* Um traço só não é controle, é enfeite. Some. */
.hero__tracos[data-total="1"]{display:none}

/* ═══════════════════ 2 · TIPOGRAFIA CINÉTICA ═══════════════════
   O h1 entra linha a linha, cada uma subindo de dentro da própria máscara.
   O overflow:hidden da .linha é o que faz o texto surgir "de trás" do papel em
   vez de simplesmente aparecer.

   Tudo depende da classe .anima, que o JS acrescenta ao .hero antes de pedir o
   .pronto. Sem JS, sem movimento e sem reduced-motion, o estado final é o
   estado padrão — a página nunca nasce invisível. */
.hero h1 .linha{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .linha > span{display:block}

.hero.anima h1 .linha > span{
  transform:translateY(108%);opacity:0;
  transition:transform var(--t-entra) var(--mola),opacity 800ms var(--suave);
}
.hero.anima.pronto h1 .linha > span{transform:none;opacity:1}
.hero.anima h1 .linha:nth-child(2) > span{transition-delay:110ms}
.hero.anima h1 .linha:nth-child(3) > span{transition-delay:220ms}

/* O olho assenta: entra aberto demais e recolhe até o valor da campanha.
   O valor final vem do destino-v2.css via --olho-ls, porque cada campanha
   calibrou o seu (.44em nos Himalaias, .46em na Tailândia). */
.hero .olho{--olho-ls:.44em;letter-spacing:var(--olho-ls)}
.hero.anima .olho{
  letter-spacing:calc(var(--olho-ls) + .34em);opacity:0;
  transition:letter-spacing 1400ms var(--mola),opacity 900ms var(--suave);
}
.hero.anima.pronto .olho{letter-spacing:var(--olho-ls);opacity:1}

/* O resto do bloco entra atrás do título, em cascata */
/* Os traços não entram nesta lista: eles vivem dentro da .linha-cta e já
   sobem junto com o botão. Animá-los de novo seria movimento sobre movimento. */
.hero.anima .hero__linha,
.hero.anima .hero__meta,
.hero.anima .linha-cta,
.hero.anima .bt-apoio,
.hero.anima .data-alternativa{
  opacity:0;transform:translateY(18px);
  transition:opacity 900ms var(--suave),transform 900ms var(--mola);
}
.hero.anima.pronto .hero__linha{transition-delay:340ms}
.hero.anima.pronto .hero__meta{transition-delay:440ms}
.hero.anima.pronto .linha-cta{transition-delay:540ms}
.hero.anima.pronto .bt-apoio{transition-delay:620ms}
.hero.anima.pronto .data-alternativa{transition-delay:680ms}
.hero.anima.pronto .hero__linha,
.hero.anima.pronto .hero__meta,
.hero.anima.pronto .linha-cta,
.hero.anima.pronto .bt-apoio,
.hero.anima.pronto .data-alternativa{opacity:1;transform:none}

/* ═══════════════════ 3 · REVELAÇÃO MAIS PACIENTE ═══════════════════
   A V1 revela com translateY(30px) em .9s. A diferença aqui é sutil e
   deliberada: a distância cai, a duração sobe. Movimento curto e demorado lê
   como peso; movimento longo e rápido lê como banner. */
.pre-revela{opacity:0;transform:translateY(22px)}
.revelado{
  transition:opacity 1000ms var(--suave),transform 1000ms var(--mola);
}

/* ═══════════════════ 4 · ESTADOS E MICROINTERAÇÕES ═══════════════════ */

/* O brilho que atravessa o botão de ouro. Só existe no ponteiro fino — em
   toque, hover é um estado que não se desfaz. */
@media (hover:hover) and (pointer:fine){
  .bt--ouro{position:relative;overflow:hidden;isolation:isolate}
  .bt--ouro::after{
    content:'';position:absolute;inset:0;z-index:-1;
    background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.26) 50%,transparent 70%);
    transform:translateX(-120%);
  }
  .bt--ouro:hover::after{
    transform:translateX(120%);
    transition:transform 900ms var(--suave);
  }
}

/* Sublinhado que cresce a partir da esquerda, em vez de aparecer inteiro */
.rodape a,
.duvida__corpo a{
  text-decoration:none;background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--t-media) var(--mola);
}
.rodape a:hover,
.duvida__corpo a:hover{background-size:100% 1px}

/* A foto do card respira ao passar o ponteiro. A V1 já tirava a curva Govinda
   no hover; aqui o movimento fica mais lento para não parecer sobressalto. */
.foto-card img{transition:transform 1200ms var(--mola),filter var(--t-media) var(--suave)}

/* O trilho ganha cursor de arraste — o único jeito de dizer, sem texto, que
   aquilo se puxa. */
.trilho{cursor:grab}
.trilho:active{cursor:grabbing}

/* Cartões e condutores: mesma convenção de elevação da V1, com a sombra mais
   funda no topo do movimento. */
.cartao:hover,.condutor:hover{box-shadow:var(--sombra-3)}

/* ═══════════════════ 5 · OS CONDUTORES, COM ROSTO ═══════════════════
   A V1 apresentava Rebeca e Mohan como dois blocos de texto. Numa seção
   chamada "quem conduz", a ausência de rosto é justamente o que a seção existe
   para resolver.

   O retrato entra redondo e pequeno, ao lado do nome — não em cima, ocupando
   meia tela. Quem decide comprar quer ver com quem vai viajar, não um banner. */
.condutor{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "retrato nome"
    "texto   texto"
    "creds   creds";
  column-gap:1.15rem;
}
.condutor__retrato{
  grid-area:retrato;align-self:center;
  width:5.6rem;height:5.6rem;border-radius:50%;
  object-fit:cover;display:block;
  background:var(--superficie-2);
  box-shadow:0 0 0 1px var(--linha),0 6px 18px -10px rgba(51,38,26,.5);
  transition:box-shadow var(--t-media) var(--suave),transform var(--t-media) var(--mola);
}
.condutor:hover .condutor__retrato{
  transform:scale(1.04);
  box-shadow:0 0 0 1px var(--linha-forte),0 10px 26px -12px rgba(51,38,26,.55);
}
.condutor__nome{grid-area:nome;align-self:center;min-width:0}
.condutor__nome h3{margin-bottom:.25rem}
.condutor__nome .papel{margin-bottom:0}
.condutor p{grid-area:texto;margin-top:1.35rem}
.condutor .creds{grid-area:creds}

/* Abaixo de 380px o retrato de 5.6rem espreme o nome a ponto de quebrar
   "Rebeca Angélica" em três linhas. Aí ele encolhe. */
@media (max-width:380px){
  .condutor{column-gap:.85rem}
  .condutor__retrato{width:4.4rem;height:4.4rem}
}

/* ═══════════════════ 6 · CONTRASTE E MOVIMENTO REDUZIDO ═══════════════════ */

/* O traço ativo não pode depender só de cor: quem não distingue ouro de branco
   precisa da diferença de espessura, que o scaleY dá. Isto é o reforço para
   modo de alto contraste, onde background-color é descartado. */
@media (forced-colors:active){
  .hero__tracos button[aria-current="true"]::before{
    background:Highlight;height:3px;
  }
}

@media (prefers-reduced-motion:reduce){
  /* Nada se move: as fotos trocam sem travessia, o título nasce no lugar. */
  .hero__palco{transform:scale(1.06) !important}
  .hero .hero__foto{transition:none !important;animation:none !important}
  .hero.anima h1 .linha > span,
  .hero.anima .hero__linha,
  .hero.anima .hero__meta,
  .hero.anima .linha-cta,
  .hero.anima .bt-apoio,
  .hero.anima .data-alternativa{
    opacity:1 !important;transform:none !important;transition:none !important;
  }
  .hero.anima .olho{
    opacity:1 !important;letter-spacing:var(--olho-ls) !important;
    transition:none !important;
  }
  .bt--ouro::after{display:none}
}