/* ============================================================
   Hero em transição de fotos — carregado depois de site.css.
   Três capítulos em ordem cronológica: gestação, primeiros dias,
   primeiro aniversário.

   As frases são texto HTML de verdade, não queimadas em imagem:
   o Google indexa, leitor de tela lê, e o Painel edita.

   Enquadramento em duas leituras. No celular a foto sangra na tela.
   No desktop ela aparece inteira, sobre um campo desfocado dela
   mesma: as fotos do estúdio são verticais, e numa tela de 1440x900
   o `cover` mostraria só 42% da altura da fotografia. Num celular de
   390x844 esse mesmo `cover` mostra 69% da largura, recorte bem menos
   destrutivo — então o campo desfocado entra onde resolve algo, e sai
   onde custaria mais do que resolve.

   Nota de manutenção: nada aqui usa `.hero-slide img`. Aquele seletor
   tem especificidade (0,1,1) e vence qualquer classe sozinha, o que já
   quebrou silenciosamente o `text-transform` das frases e o
   `object-fit` das fotos. Toda regra de imagem passa por
   `.hero-photo` ou `.hero-backdrop`.
   ============================================================ */

.hero {
  /* 3,6s por foto com dissolve de 0,85s deixa 2,75s de fotografia
     assentada. O vídeo de referência usava 5,2s com dissolve de 1,3s;
     aqui o ritmo é mais rápido, então o dissolve encurtou junto para a
     transição não passar a ocupar boa parte do ciclo. */
  --slide-ms: 3600ms;
  --fade-ms: 850ms;
  --blur-max: 16px;
  --backdrop-blur: 28px;
  /* O --ease do site (0.22,1,0.36,1) chega a 96% na metade do tempo —
     ótimo para entradas, péssimo para dissolve: a troca acabaria antes
     do desfoque atingir o pico. Aqui a curva precisa ser simétrica. */
  --ease-dissolve: cubic-bezier(0.4, 0, 0.6, 1);
}

/* ============================================================
   Camadas de foto
   ============================================================ */

.hero-slides {
  position: absolute;
  inset: 0;
}

/* Dissolve com desfoque, como no vídeo de referência do cliente.
   O truque é que cada camada faz uma rampa só: a que sai vai de nítida
   a desfocada enquanto some, e a que entra faz o inverso. Compostas, o
   desfoque sobe até o meio da troca e desce depois — sem keyframes, e
   sem o momento morto de um crossfade comum. */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(var(--blur-max));
  transition:
    opacity var(--fade-ms) var(--ease-dissolve),
    filter var(--fade-ms) var(--ease-dissolve);
  will-change: opacity, filter;
}
.hero-slide.is-active {
  opacity: 1;
  filter: blur(0px);
}

/* Padrão (celular): a fotografia preenche a tela. */
.hero-slide .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 40%);
  /* Nunca abaixo de 1.045: o desfoque puxa o vazio de fora do quadro
     para dentro, e a sobra de escala é o que esconde a borda
     transparente. */
  transform: scale(1.045);
}

/* Campo desfocado, só usado no desktop. */
.hero-slide .hero-backdrop {
  display: none;
}

/* Zoom lento e contínuo enquanto o slide está visível — no vídeo ele
   não pausa durante a troca: a foto que sai continua crescendo
   enquanto borra. `.is-leaving` mantém a animação viva durante o fade
   de saída; sem ela o transform voltaria ao valor base de um quadro
   para o outro, com a foto ainda visível, e isso se via como um
   soluço. A duração casa com slide + fade, então a animação termina no
   instante em que a classe sai. */
.hero-slide.is-active .hero-photo,
.hero-slide.is-leaving .hero-photo {
  animation: heroDrift calc(var(--slide-ms) + var(--fade-ms)) linear forwards;
}
@keyframes heroDrift {
  from { transform: scale(1.045); }
  to   { transform: scale(1.125); }
}

/* ---------- Desktop: a fotografia inteira sobre o campo desfocado ---------- */
@media (min-width: 821px) {
  /* A origem do fundo é uma versão de 64px de largura: o desfoque
     destrói o detalhe de qualquer jeito, então carregar a foto grande
     duas vezes seria desperdício. Os três fundos somam 4 KB. */
  .hero-slide .hero-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: blur(var(--backdrop-blur)) saturate(1.12) brightness(0.62);
    transform: scale(1.16);
  }
  .hero-slide.is-active .hero-backdrop,
  .hero-slide.is-leaving .hero-backdrop {
    animation: backdropDrift calc(var(--slide-ms) + var(--fade-ms)) linear forwards;
  }
  @keyframes backdropDrift {
    from { transform: scale(1.16); }
    to   { transform: scale(1.26); }
  }

  .hero-slide .hero-photo {
    object-fit: contain;
    object-position: center;
  }

  /* Aqui o zoom cresce até 1, nunca além: passar de 1 recortaria as
     bordas e anularia o ponto do enquadramento. A foto assenta no
     quadro em vez de avançar sobre ele. */
  .hero-slide.is-active .hero-photo,
  .hero-slide.is-leaving .hero-photo {
    animation: photoSettle calc(var(--slide-ms) + var(--fade-ms)) linear forwards;
  }
  @keyframes photoSettle {
    from { transform: scale(0.955); }
    to   { transform: scale(1); }
  }
}

/* ============================================================
   Capítulos de texto
   ============================================================ */

.hero-chapters {
  position: relative;
  display: grid;
  margin-bottom: 1.4rem;
  min-height: 4.2em;
}

/* site.css estiliza `.hero-caption p` como rótulo em caixa alta. Estes
   capítulos são parágrafos, e aquele seletor (0,1,1) vence
   `.hero-chapter` (0,1,0) por especificidade, não por ordem — daí o
   seletor mais longo. */
.hero-caption .hero-chapter {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  pointer-events: none;
  text-transform: none;
  letter-spacing: normal;
  font-size: 1rem;
  max-width: none;
}
.hero-caption .hero-chapter.is-active {
  opacity: 1;
  transform: none;
  transition-delay: 0.35s;
}

.hero-chapter .session {
  display: block;
  font-family: var(--body);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.7rem;
}

.hero-chapter .phrase {
  display: block;
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.75rem, 4.4vw, 3.4rem);
  line-height: 1.12;
  text-transform: none;
  letter-spacing: 0.005em;
  text-shadow: 0 1px 24px rgba(46, 42, 38, 0.4);
}

/* O h1 não gira: fica fixo, para o Google ter um título estável. */
.hero-caption h1 {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-family: var(--body);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.5;
  max-width: 30ch;
  margin-bottom: 0;
  text-shadow: 0 1px 18px rgba(46, 42, 38, 0.4);
  opacity: 0.94;
}

/* ============================================================
   Controles — as barrinhas
   ============================================================ */

.hero-nav {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2rem;
}

.hero-dot {
  position: relative;
  width: clamp(38px, 7vw, 62px);
  height: 2px;
  padding: 0;
  border: none;
  background: rgba(251, 249, 247, 0.32);
  cursor: pointer;
  overflow: hidden;
}
/* Alvo de toque confortável sem engordar a linha visível. */
.hero-dot::after {
  content: "";
  position: absolute;
  inset: -16px 0;
}
/* Como as barrinhas são o único controle, vale sinalizar que são
   clicáveis — sem isso ninguém desconfia que dá para mexer nelas. */
.hero-dot:hover { background: rgba(251, 249, 247, 0.6); }

.hero-dot span {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--paper);
  transform: scaleX(0);
  transform-origin: left;
}
.hero-dot.is-active span {
  animation: heroFill var(--slide-ms) linear forwards;
}
.hero-dot.is-done span { transform: scaleX(1); }
@keyframes heroFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.hero-dot:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 6px;
}

/* Congelado: dedo segurando a tela, ou controle manual assumido.
   Nenhuma barra deve seguir preenchendo, nem o zoom avançando. */
.hero.is-frozen .hero-dot.is-active span,
.hero.is-frozen .hero-slide.is-active .hero-photo,
.hero.is-frozen .hero-slide.is-leaving .hero-photo,
.hero.is-frozen .hero-slide.is-active .hero-backdrop,
.hero.is-frozen .hero-slide.is-leaving .hero-backdrop {
  animation-play-state: paused;
}

/* Parado de vez: as barrinhas são o controle de pausa desta página,
   então mexer numa delas — por clique ou por foco de teclado — desliga
   o avanço automático. É o que cumpre o WCAG 2.2.2 sem botão dedicado.
   A barra ativa passa a aparecer cheia, e não congelada no meio do
   preenchimento, senão pareceria travada em vez de selecionada. */
.hero.is-stopped .hero-dot.is-active span {
  animation: none;
  transform: scaleX(1);
}

@media (max-width: 820px) {
  .hero-nav { gap: 0.6rem; margin-top: 1.5rem; }
  .hero-chapters { min-height: 3.8em; }
}

/* ============================================================
   Movimento reduzido — uma foto parada, uma frase, nenhum
   movimento e nenhum controle. Parte do público são mulheres no
   fim da gestação, e movimento involuntário incomoda de verdade
   quem tem enjoo ou sensibilidade vestibular.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; filter: none; }
  .hero-slide.is-active { filter: none; }
  .hero-slide.is-active .hero-photo,
  .hero-slide.is-leaving .hero-photo { animation: none; transform: scale(1); }
  .hero-slide.is-active .hero-backdrop,
  .hero-slide.is-leaving .hero-backdrop { animation: none; transform: scale(1.16); }
  .hero-caption .hero-chapter { transition: none; }
  .hero-dot.is-active span { animation: none; transform: scaleX(1); }
  .hero-nav { display: none; }
}