/* ==========================================================================
   Animações da 100 Engenharia & Manutenção
   --------------------------------------------------------------------------
   Princípios: movimentos curtos, com propósito, disparados uma única vez.
   Sem JavaScript (ou com "reduzir movimento" ativado no sistema) todo o
   conteúdo aparece normalmente, sem animação.

   Como usar no HTML:
     data-reveal            -> surge subindo levemente
     data-reveal="fade"     -> só esmaece
     data-reveal="image"    -> imagem revelada de baixo para cima
     data-reveal-stagger    -> filhos diretos entram em sequência
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* Elementos revelados no scroll (a classe .js é adicionada no <head>) */
  .js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 0.9s var(--ease), transform 1s var(--ease-expo);
    transition-delay: var(--d, 0ms);
  }
  .js [data-reveal="fade"] { transform: none; }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }

  .js [data-reveal-stagger] > * {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.8s var(--ease), transform 0.9s var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js [data-reveal-stagger].is-visible > * { opacity: 1; transform: none; }

  /* Revelação de imagem: cortina sobe e a foto "assenta" (escala 1.12 -> 1) */
  .js [data-reveal="image"] {
    opacity: 1;
    transform: none;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.3s var(--ease-expo);
    transition-delay: var(--d, 0ms);
  }
  .js [data-reveal="image"] img { transform: scale(1.12); transition: transform 1.6s var(--ease-expo); transition-delay: var(--d, 0ms); }
  .js [data-reveal="image"].is-visible { clip-path: inset(0 0 0 0); }
  .js [data-reveal="image"].is-visible img { transform: none; }
  /* Depois de revelada, a imagem volta a responder ao hover normalmente */
  .js [data-reveal="image"].is-done img { transition: transform 1.1s var(--ease-expo); }

  /* Hero: título entra palavra por palavra (só em telas a partir de 768px:
     no celular o texto é o maior elemento da tela e aparece de imediato,
     o que mantém o LCP baixo). A foto assenta devagar em todas as telas. */
  @media (min-width: 768px) {
    .js .hero .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0 0.24em; margin: -0.06em 0 -0.24em; }
    .js .hero .w > span {
      display: inline-block;
      transform: translate3d(0, 110%, 0);
      transition: transform 1.1s var(--ease-expo);
      transition-delay: calc(150ms + var(--i, 0) * 55ms);
    }
    .js .hero.is-ready .w > span { transform: none; }

    .js .hero [data-hero-fade] {
      opacity: 0;
      transform: translate3d(0, 16px, 0);
      transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
      transition-delay: calc(550ms + var(--i, 0) * 110ms);
    }
    .js .hero.is-ready [data-hero-fade] { opacity: 1; transform: none; }
  }

  .js .hero__media img { transform: scale(1.08); transition: transform 2.6s var(--ease-expo); }
  .js .hero.is-ready .hero__media img { transform: none; }
  /* Sequência de fotos: cada foto se aproxima devagar enquanto está na tela */
  .js .hero--slides.is-ready .hero__slide img { transform: scale(1.06); transition: transform 8s cubic-bezier(0.25, 0.6, 0.3, 1); }
  .js .hero--slides.is-ready .hero__slide.is-active img { transform: none; }

  /* Topo das páginas internas: a foto aparece de imediato (bom para o LCP)
     e apenas "assenta" com uma leve redução de escala */
  .page-hero__media img { animation: assentar 1.8s var(--ease-expo) both; }
  @keyframes assentar { from { transform: scale(1.06); } }

  /* Paralaxe sutil do hero, 100% em CSS (só em navegadores compatíveis) */
  @supports (animation-timeline: scroll()) {
    .hero__media {
      animation: hero-parallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
    @keyframes hero-parallax { to { transform: translate3d(0, 14%, 0); } }
  }
  @supports (animation-timeline: view()) {
    .band__media {
      inset: -8% 0;
      animation: faixa-paralaxe linear both;
      animation-timeline: view();
    }
    @keyframes faixa-paralaxe {
      from { transform: translate3d(0, -6%, 0); }
      to { transform: translate3d(0, 6%, 0); }
    }
  }

  /* Linha do processo "desenhada" ao entrar na tela */
  .js .process__line { transform: scaleX(0); transition: transform 1.8s var(--ease-expo) 0.2s; }
  .js .process.is-visible .process__line { transform: scaleX(1); }

  /* Curva S desenhada */
  .js .s-curve__real { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease) 0.3s; }
  .js .s-curve__plan { opacity: 0; transition: opacity 1s var(--ease); }
  .js .s-curve__dot { opacity: 0; transition: opacity 0.4s var(--ease) 2.3s; }
  .js .s-curve.is-visible .s-curve__real { stroke-dashoffset: 0; }
  .js .s-curve.is-visible .s-curve__plan,
  .js .s-curve.is-visible .s-curve__dot { opacity: 1; }

  /* Transição suave entre páginas (navegadores com View Transitions) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out 0.22s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in 0.38s var(--ease) both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
}

/* Reduzir movimento: desliga transições e animações decorativas */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}