/* =============================================================================
   motion.css — toda a animação e o comportamento visual da página.

   Três famílias, com motivos diferentes:

   1. ENTRADA DO HERO — baseada em tempo, roda no carregamento. O hero está
      acima da dobra, então uma revelação por rolagem apareceria já pronta.

   2. REVELAÇÃO "UMA VEZ SÓ" — animações de tempo disparadas por classe. Um
      IntersectionObserver em motion.js adiciona `.is-in` quando o elemento
      entra na tela e PARA de observá-lo: a revelação toca uma vez e fica. Isto
      substituiu as animações guiadas por scroll (`animation-timeline: view()`),
      que reproduziam e revertiam a cada rolagem.

      Progressive enhancement: os estados de repouso (escondido) vivem todos sob
      a classe `.js` no <html>, ligada por um script inline no <head>. Sem
      JavaScript a classe não existe, nada fica escondido, e a página aparece
      estática e completa — nenhum elemento fica preso em opacity: 0.

   3. SETAS + TRILHO DA JORNADA — continuam guiados por scroll (`view()`), de
      propósito: são desenhos de PROGRESSO, não fade-ins, e o pedido excluiu
      explicitamente as setas do comportamento "uma vez só".

   Quatro regras valem para as três famílias:

   - Só `opacity` e `transform`. Nada aqui muda o layout.

   - As folhas de layout posicionam tudo com as propriedades individuais
     `translate:` e `rotate:`, nunca com o atalho `transform:`. Por isso animar
     `transform` — e o parallax de cursor de motion.js — COMPÕE por cima do
     posicionamento em vez de apagá-lo. Não troque `translate:` por `transform:`
     em desktop.css/mobile.css — a troca é silenciosa e joga tudo para fora do
     lugar.

   - `animation-fill-mode`: a entrada do hero usa `backwards`, não `both`. Com
     `both`, o valor final continua valendo depois de terminar e ganha de
     qualquer `:hover` (ou do parallax de cursor), matando o efeito. Pelo mesmo
     motivo, elementos que ganham `transform` na interação (`.offer__cta` e
     `.offer__bottles`, que segue o cursor) são revelados APENAS com opacidade.

   - Nenhum ancestral de um elemento guiado por scroll (setas/trilho) pode ter
     `overflow: hidden`, que cria contêiner de rolagem e congela a linha do
     tempo. Ver regra 7 do AGENTS.md — é por isso que a página usa `clip`.
   ============================================================================= */

/* ----- Vocabulário --------------------------------------------------------- */

@keyframes m-fade       { from { opacity: 0; }                                to { opacity: 1; } }
@keyframes m-fade-up    { from { opacity: 0; transform: translateY(2.25rem); } to { opacity: 1; transform: none; } }
@keyframes m-fade-down  { from { opacity: 0; transform: translateY(-1.25rem); } to { opacity: 1; transform: none; } }
@keyframes m-from-left  { from { opacity: 0; transform: translateX(-3rem); }   to { opacity: 1; transform: none; } }
@keyframes m-from-right { from { opacity: 0; transform: translateX(3rem); }    to { opacity: 1; transform: none; } }
@keyframes m-pop        { from { opacity: 0; transform: scale(0.86); }         to { opacity: 1; transform: none; } }
@keyframes m-rise       { from { opacity: 0; transform: translateY(3.5rem) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes m-draw       { from { stroke-dashoffset: 1; }                       to { stroke-dashoffset: 0; } }
@keyframes m-draw-rail  { from { transform: scaleX(0); }                       to { transform: scaleX(1); } }

/* ----- 1. Entrada do hero (baseada em tempo) -------------------------------
   Durações 30% mais longas do que a versão original (0.85 -> 1.105s etc.). */

@media screen and (prefers-reduced-motion: no-preference) {
  .hero__wordmark,
  .hero__logo,
  .hero__headline,
  .hero__prices,
  .hero__cta,
  .hero__bottle,
  .hero__orange {
    animation-duration: 1.105s;
    animation-timing-function: cubic-bezier(0.22, 0.75, 0.3, 1);
    /* `backwards`, e não `both` — ver cabeçalho. Também é o que devolve o
       `transform` ao frasco e à laranja depois da entrada, para o cursor. */
    animation-fill-mode: backwards;
  }

  .hero__wordmark { animation-name: m-fade;      animation-duration: 1.95s; animation-delay: 0.1s; }
  .hero__logo     { animation-name: m-fade-down; animation-delay: 0.05s; }
  .hero__headline { animation-name: m-fade-up;   animation-delay: 0.18s; }
  .hero__prices   { animation-name: m-fade-up;   animation-delay: 0.3s; }
  .hero__cta      { animation-name: m-fade-up;   animation-delay: 0.42s; }
  .hero__bottle   { animation-name: m-rise;      animation-duration: 1.43s; animation-delay: 0.22s; }
  .hero__orange   { animation-name: m-pop;       animation-delay: 0.5s; }
}

/* ----- 2. Revelação "uma vez só" (disparada por classe) --------------------
   Cada elemento nasce PAUSADO no primeiro quadro da sua animação — com
   `fill-mode: both`, o quadro `from` já vale antes de a animação rodar, então
   ele começa escondido. O observer adiciona `.is-in`, que troca o play-state
   para `running`: a animação toca até o fim e, com `both`, mantém o `to`. Como
   é baseada em tempo (e não em scroll), nunca reverte — toca uma vez e fica.

   Tudo sob `.js` (progressive enhancement) e dentro de `no-preference`, para
   que quem pede movimento reduzido receba a página inteira visível e estática.

   O escalonamento, que antes vinha dos recortes de scroll, agora vem de
   `animation-delay`. As durações já estão 30% acima da base (1.1s). */

@media screen and (prefers-reduced-motion: no-preference) {

  .js .about__media,
  .js .about__content,
  .js .about__slice,
  .js .benefits__title,
  .js .benefits__photo,
  .js .benefits__item,
  .js .why__figure,
  .js .why__title,
  .js .card,
  .js .why__closing,
  .js .journey__step,
  .js .offer__title,
  .js .offer__pointer,
  .js .offer__claim,
  .js .offer__bottles,
  .js .offer__orange,
  .js .offer__dot,
  .js .offer__price,
  .js .offer__cta,
  .js .pill {
    animation-duration: 1.1s;
    animation-timing-function: cubic-bezier(0.22, 0.75, 0.3, 1);
    animation-fill-mode: both;
    animation-play-state: paused;
  }

  /* "O que é": a foto entra pela esquerda, o texto pela direita. */
  .js .about__media   { animation-name: m-from-left; }
  .js .about__content { animation-name: m-from-right; animation-delay: 0.08s; }
  .js .about__slice   { animation-name: m-pop;        animation-delay: 0.16s; }

  /* "Como ajudar" (as setas ficam de fora, na família 3). */
  .js .benefits__title  { animation-name: m-fade-up; }
  .js .benefits__photo  { animation-name: m-rise; }
  .js .benefits__item   { animation-name: m-fade-up; }
  .js .benefits__item--2 { animation-delay: 0.08s; }
  .js .benefits__item--3 { animation-delay: 0.16s; }
  .js .benefits__item--4 { animation-delay: 0.24s; }

  /* "Por que escolher" */
  .js .why__figure  { animation-name: m-from-left; }
  .js .why__title   { animation-name: m-fade-up; animation-delay: 0.06s; }
  .js .card         { animation-name: m-fade-up; }
  .js .card:nth-child(2) { animation-delay: 0.1s; }
  .js .card:nth-child(3) { animation-delay: 0.2s; }
  .js .why__closing { animation-name: m-fade-up; animation-delay: 0.1s; }

  /* Jornada */
  .js .journey__step { animation-name: m-fade-up; }
  .js .journey__step:nth-child(2) { animation-delay: 0.12s; }
  .js .journey__step:nth-child(3) { animation-delay: 0.24s; }

  /* Oferta (última seção). `bottles` é revelado SÓ com opacidade porque segue
     o cursor via `transform` — um `m-rise` com fill `both` travaria o
     transform no valor final. Mesmo caso do `.offer__cta` (hover). */
  .js .offer__title    { animation-name: m-from-left; }
  .js .offer__bottles  { animation-name: m-fade;       animation-delay: 0.05s; }
  .js .offer__claim    { animation-name: m-from-right; animation-delay: 0.12s; }
  .js .offer__pointer  { animation-name: m-from-right; animation-delay: 0.14s; }
  .js .offer__orange   { animation-name: m-pop;        animation-delay: 0.16s; }
  .js .offer__dot--1,
  .js .offer__price--1 { animation-name: m-fade-up;    animation-delay: 0.18s; }
  .js .offer__dot--2,
  .js .offer__price--2 { animation-name: m-fade-up;    animation-delay: 0.24s; }
  .js .offer__cta      { animation-name: m-fade;       animation-delay: 0.3s; }

  /* Pílulas decorativas (pilula.webp e laranja.webp): fade suave, um pouco
     mais longo. Só opacidade, para não tocar no `rotate:`/`blur` de cada uma. */
  .js .pill { animation-name: m-fade; animation-duration: 1.4s; }

  /* O gatilho. Mesma especificidade (0,2,0) do repouso pausado acima; por vir
     DEPOIS na folha, vence o empate e libera a animação. */
  .js .is-in { animation-play-state: running; }
}

/* ----- 3. Guiados por scroll: setas + trilho da jornada --------------------
   Ficam separados de propósito — são desenhos de progresso e devem acompanhar
   a rolagem (as setas foram excluídas do "uma vez só" no pedido). */

@supports (animation-timeline: view()) {
  @media screen and (prefers-reduced-motion: no-preference) {

    /* Trilho da jornada: barra de progresso que se enche conforme a rolagem. */
    .journey__track { view-timeline-name: --journey; }

    .journey__rail-fill {
      animation-name: m-draw-rail;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --journey;
      animation-range: cover 6% cover 34%;
    }

    /* ----- Setas desenhadas à mão -------------------------------------------
       Os traços usam pathLength="1", então o comprimento é sempre 1 e a mesma
       regra serve para as quatro setas, qualquer que seja o tamanho real.
       A linha do tempo vem da seção, e não de cada traço: elementos SVG não
       têm caixa CSS própria para o `view()` medir.
       ---------------------------------------------------------------------- */

    .benefits { view-timeline-name: --benefits; }

    .benefits__arrow-line,
    .benefits__arrow-head {
      stroke-dasharray: 1;
      animation-name: m-draw;
      animation-duration: auto;
      animation-timing-function: ease-out;
      animation-fill-mode: both;
      animation-timeline: --benefits;
    }

    /* As duas de cima saem primeiro; o corpo da seta antes da ponta. */
    .benefits__arrow--1 .benefits__arrow-line,
    .benefits__arrow--3 .benefits__arrow-line { animation-range: cover 26% cover 40%; }
    .benefits__arrow--1 .benefits__arrow-head,
    .benefits__arrow--3 .benefits__arrow-head { animation-range: cover 39% cover 44%; }

    .benefits__arrow--2 .benefits__arrow-line,
    .benefits__arrow--4 .benefits__arrow-line { animation-range: cover 33% cover 47%; }
    .benefits__arrow--2 .benefits__arrow-head,
    .benefits__arrow--4 .benefits__arrow-head { animation-range: cover 46% cover 51%; }
  }
}

/* ----- 4. Parallax de cursor (comportamento em motion.js) ------------------
   frasco.webp (.hero__bottle), laranja-moro.webp (.hero__orange) e
   frascos-duplo.webp (.offer__bottles) seguem o cursor de leve. O movimento é
   escrito em `transform` inline pelo JS; o layout os posiciona com
   `translate:`/`rotate:` individuais, então o `transform` compõe por cima sem
   tirá-los do lugar (regra 9). A transição é o que dá a fluidez — o elemento
   desliza atrás do cursor em vez de saltar.

   Só em ponteiros finos com hover (mouse/trackpad): em toque não há cursor.
   `.offer__bottles` nasce com `pointer-events: none` (é arte); reativamos aqui
   para poder capturar o ponteiro sobre ele. */

@media (hover: hover) and (pointer: fine) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__bottle,
    .hero__orange,
    .offer__bottles {
      transition: transform 0.3s cubic-bezier(0.22, 0.75, 0.3, 1);
      will-change: transform;
    }

    .offer__bottles { pointer-events: auto; }
  }
}