/*
 * Motion Design System dos sites — compartilhado pelos dez modelos.
 *
 *   preset (data-motion)        caráter geral: none, minimal, editorial, cinematic, dynamic
 *   capa                        troca de slides (fade, crossfade, dissolve, slide) + Ken Burns
 *   títulos (data-title-motion) none, fade-up, split, mask
 *   imagens (data-image-motion) none, zoom, mask, lift, parallax, pan
 *   seções (data-scroll-motion) none, fade, rise, editorial
 *   sequência (data-stagger)    itens de uma lista entram um depois do outro
 *   botões (data-btn-motion)    none, arrow, lift, fill, underline, border, glow
 *
 * Regras de desempenho: só transform, opacity e clip-path são animados (nada de top, left,
 * width ou height); nenhuma animação contínua além do Ken Burns da capa; o parallax roda no
 * compositor (animation-timeline) e some onde o navegador não oferece isso.
 *
 * Acessibilidade: tudo fica dentro de prefers-reduced-motion: no-preference. Quem pede menos
 * movimento no aparelho recebe o site parado e completo — o slideshow só troca pelos controles.
 */
:root {
  --motion-time: 0.8s;
  --motion-distance: 16px;
  --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --stagger-step: 70ms;
}

[data-motion='minimal'] {
  --motion-time: 0.55s;
  --motion-distance: 0px;
}

[data-motion='editorial'] {
  --motion-time: 1s;
  --motion-distance: 22px;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --stagger-step: 80ms;
}

[data-motion='cinematic'] {
  --motion-time: 1.4s;
  --motion-distance: 26px;
  --stagger-step: 110ms;
}

[data-motion='dynamic'] {
  --motion-time: 0.85s;
  --motion-distance: 38px;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --stagger-step: 90ms;
}

/* ================================================================ CAPA */

/* ---------- Troca de slides ---------- */
.hero__slide {
  transition: opacity 1.2s var(--ease);
}

/* Crossfade: as duas fotos se cruzam devagar e a nova assenta com um recuo mínimo de escala. */
[data-transition='crossfade'] .hero__slide {
  transform: scale(1.035);
  transition: opacity 1.9s ease-in-out, transform 2.6s var(--ease);
}

[data-transition='crossfade'] .hero__slide.is-active {
  transform: none;
}

[data-transition='dissolve'] .hero__slide {
  transition: opacity 2.4s ease-in-out;
}

/* Slide suave: a foto nova entra pela direita enquanto a anterior sai pela esquerda. */
[data-transition='slide'] .hero__slide {
  opacity: 1;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.95s cubic-bezier(0.65, 0, 0.35, 1);
}

[data-transition='slide'] .hero__slide.is-active {
  transform: none;
}

[data-transition='slide'] .hero__slide.is-leaving {
  transform: translate3d(-100%, 0, 0);
}

/* O véu acompanha o slide (contraste próprio de cada foto) sem saltar. */
.hero::before {
  transition: opacity 0.8s var(--ease);
}

/* ---------- Ken Burns: zoom e deslize lentos dentro da foto ---------- */
.hero__slide img {
  transform-origin: var(--origin, 50% 50%);
}

@keyframes hero-move {
  from {
    transform: translate3d(var(--pan-x-from, 0%), var(--pan-y-from, 0%), 0) scale(var(--zoom-from, 1));
  }

  to {
    transform: translate3d(var(--pan-x-to, 0%), var(--pan-y-to, 0%), 0) scale(var(--zoom-to, 1));
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* O slide que está saindo mantém o movimento até sumir, para não dar um "pulo". */
  .hero__slide.is-active:not([data-effect='none']) img,
  .hero__slide.is-leaving:not([data-effect='none']) img {
    animation: hero-move var(--slide-time, 6s) linear both;
    will-change: transform;
  }

  .hero.is-paused .hero__slide img {
    animation-play-state: paused;
  }
}

/* ---------- Controles do slideshow ---------- */
.hero__controls {
  position: absolute;
  right: var(--gutter);
  bottom: 20px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--hero-controls-color, #fff);
}

[data-hero-flip] .hero[data-variant='split'] .hero__controls {
  right: auto;
  left: var(--gutter);
}

.hero__control {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.32);
  color: inherit;
  transition: background 0.2s var(--ease);
}

.hero__control:hover {
  background: rgba(0, 0, 0, 0.55);
}

.hero__dots {
  display: flex;
  align-items: center;
}

/* Alvo de toque de 44px; o ponto visível é pequeno. */
.hero__dot {
  position: relative;
  width: 28px;
  height: 44px;
}

.hero__dot::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}

.hero__dot[aria-current='true']::before {
  background: currentColor;
  transform: scale(1.25);
}

.hero__icon-play,
.hero.is-paused .hero__icon-pause {
  display: none;
}

.hero.is-paused .hero__icon-play {
  display: block;
}

/* No celular os controles ficam centralizados na base da foto, com espaço reservado para não cobrir os botões. */
@media (max-width: 599px) {
  .hero__controls,
  [data-hero-flip] .hero[data-variant='split'] .hero__controls {
    left: 0;
    right: 0;
    bottom: 6px;
    justify-content: center;
  }

  .hero--slideshow:is([data-variant='fade'], [data-variant='fullbleed'], [data-variant='centered'], [data-variant='inset']) .hero__inner {
    padding-bottom: 68px;
  }
}

/* Composições em que a foto fica acima do texto no celular: os controles vão para o topo da foto. */
@media (max-width: 899px) {
  .hero--slideshow:is([data-variant='split'], [data-variant='frame'], [data-variant='panel']) .hero__media {
    margin-bottom: 0;
  }

  .hero--slideshow:is([data-variant='split'], [data-variant='frame'], [data-variant='panel']) .hero__controls {
    position: static;
    order: 3;
    justify-content: center;
    padding-bottom: 8px;
    color: var(--color-text);
  }

  .hero--slideshow:is([data-variant='split'], [data-variant='frame'], [data-variant='panel']) .hero__control {
    background: color-mix(in srgb, var(--color-text) 10%, transparent);
  }
}

/* ================================================================ BOTÕES */
.btn {
  position: relative;
}

.btn .icon {
  transition: transform 0.3s var(--ease);
}

@media (prefers-reduced-motion: no-preference) {
  /* Deslize de seta: o ícone anda 5px; o texto não se mexe. */
  [data-btn-motion='arrow'] .btn:is(:hover, :focus-visible) .icon--sm {
    transform: translateX(5px);
  }

  /* Elevação suave: o botão sobe 2px, com sombra controlada. */
  [data-btn-motion='lift'] .btn {
    transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }

  [data-btn-motion='lift'] .btn:is(:hover, :focus-visible) {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px -14px rgba(0, 0, 0, 0.5);
  }

  /* Preenchimento lateral: um realce percorre o botão da esquerda para a direita; o texto mantém a cor. */
  [data-btn-motion='fill'] .btn {
    isolation: isolate;
    overflow: hidden;
  }

  [data-btn-motion='fill'] .btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, currentColor 16%, transparent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s var(--ease);
  }

  [data-btn-motion='fill'] .btn:is(:hover, :focus-visible)::before {
    transform: scaleX(1);
  }

  /* Underline Draw: uma linha cresce sob o texto. */
  [data-btn-motion='underline'] .btn::after {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 11px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s var(--ease);
  }

  [data-btn-motion='underline'] .btn:is(:hover, :focus-visible)::after {
    transform: scaleX(1);
  }

  /* Border Reveal: um contorno externo se desenha da esquerda para a direita. */
  [data-btn-motion='border'] .btn::before {
    content: '';
    position: absolute;
    inset: -5px;
    border: 1px solid currentColor;
    border-radius: inherit;
    clip-path: inset(0 100% 0 0);
    opacity: 0.7;
    transition: clip-path 0.5s var(--ease);
    pointer-events: none;
  }

  [data-btn-motion='border'] .btn--primary::before {
    border-color: var(--color-primary);
  }

  [data-btn-motion='border'] .btn:is(:hover, :focus-visible)::before {
    clip-path: inset(0);
  }

  /* Soft Glow: um brilho muito discreto, na cor principal do modelo. */
  [data-btn-motion='glow'] .btn {
    transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.45s var(--ease);
  }

  [data-btn-motion='glow'] .btn:is(:hover, :focus-visible) {
    box-shadow: 0 8px 26px -12px color-mix(in srgb, var(--color-primary) 70%, transparent);
  }
}

/* ================================================================ SEÇÕES AO ROLAR */
@media (prefers-reduced-motion: no-preference) {
  [data-scroll-motion='fade'].js [data-reveal] {
    opacity: 0;
    transition: opacity var(--motion-time) var(--motion-ease);
  }

  [data-scroll-motion='rise'].js [data-reveal] {
    opacity: 0;
    transform: translateY(max(12px, var(--motion-distance)));
    transition: opacity var(--motion-time) var(--motion-ease), transform var(--motion-time) var(--motion-ease);
  }

  /* Editorial: entrada mais ampla e lenta. */
  [data-scroll-motion='editorial'].js [data-reveal] {
    opacity: 0;
    transform: translateY(calc(max(12px, var(--motion-distance)) + 14px));
    transition: opacity calc(var(--motion-time) * 1.25) var(--motion-ease), transform calc(var(--motion-time) * 1.25) cubic-bezier(0.16, 1, 0.3, 1);
  }

  [data-scroll-motion].js [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  /* ---------- Sequência: itens de uma lista entram um depois do outro ---------- */
  [data-stagger].js :is(.services__list, .quotes, .team__list, .results__list, .gallery__grid) > [data-reveal]:nth-child(2) {
    transition-delay: calc(var(--stagger-step) * 1);
  }

  [data-stagger].js :is(.services__list, .quotes, .team__list, .results__list, .gallery__grid) > [data-reveal]:nth-child(3) {
    transition-delay: calc(var(--stagger-step) * 2);
  }

  [data-stagger].js :is(.services__list, .quotes, .team__list, .results__list, .gallery__grid) > [data-reveal]:nth-child(4) {
    transition-delay: calc(var(--stagger-step) * 3);
  }

  [data-stagger].js :is(.services__list, .quotes, .team__list, .results__list, .gallery__grid) > [data-reveal]:nth-child(5) {
    transition-delay: calc(var(--stagger-step) * 4);
  }

  [data-stagger].js :is(.services__list, .quotes, .team__list, .results__list, .gallery__grid) > [data-reveal]:nth-child(n + 6) {
    transition-delay: calc(var(--stagger-step) * 5);
  }
}

/* ================================================================ TÍTULOS */
@media (prefers-reduced-motion: no-preference) {
  /* ---------- Fade Up ---------- */
  [data-title-motion='fade-up'].js [data-reveal] .section-title,
  [data-title-motion='fade-up'].js [data-reveal].about .section-title {
    opacity: 0;
    transform: translateY(0.45em);
    transition: opacity var(--motion-time) var(--motion-ease) 0.08s, transform var(--motion-time) var(--motion-ease) 0.08s;
  }

  [data-title-motion='fade-up'].js .is-in .section-title,
  [data-title-motion='fade-up'].js .is-in.about .section-title {
    opacity: 1;
    transform: none;
  }

  /* ---------- Mask Reveal: o título sobe de trás de uma máscara ---------- */
  [data-title-motion='mask'].js [data-reveal] .section-title {
    clip-path: inset(0 0 100% 0);
    transform: translateY(0.5em);
    transition: clip-path calc(var(--motion-time) * 1.1) var(--motion-ease) 0.05s, transform calc(var(--motion-time) * 1.1) var(--motion-ease) 0.05s;
  }

  [data-title-motion='mask'].js .is-in .section-title {
    clip-path: inset(-0.2em -0.1em -0.3em -0.1em);
    transform: none;
  }

  /* ---------- Split Lines: as palavras sobem linha por linha (o script marca a linha de cada palavra) ---------- */
  [data-title-motion='split'].js .title-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.6em);
    transition: opacity var(--motion-time) var(--motion-ease), transform var(--motion-time) var(--motion-ease);
    transition-delay: calc(var(--line, 0) * 110ms);
  }

  [data-title-motion='split'].js :is(.is-in, .hero) .title-word {
    opacity: 1;
    transform: none;
  }

  /* ---------- Capa: o título entra uma vez, ao abrir a página ---------- */
  @keyframes title-fade-up {
    from {
      opacity: 0;
      transform: translateY(0.4em);
    }
  }

  @keyframes title-mask {
    from {
      clip-path: inset(0 0 100% 0);
      transform: translateY(0.5em);
    }

    to {
      clip-path: inset(-0.2em -0.1em -0.3em -0.1em);
      transform: none;
    }
  }

  [data-title-motion='fade-up'] .hero__title {
    animation: title-fade-up calc(var(--motion-time) * 1.1) var(--motion-ease) 0.15s both;
  }

  [data-title-motion='mask'] .hero__title {
    animation: title-mask calc(var(--motion-time) * 1.2) var(--motion-ease) 0.15s both;
  }

  [data-title-motion='split'].js .hero .title-word {
    animation: title-fade-up var(--motion-time) var(--motion-ease) both;
    animation-delay: calc(0.15s + var(--line, 0) * 120ms);
  }

  /* O restante da capa acompanha o título, um passo atrás. */
  :is([data-title-motion='fade-up'], [data-title-motion='mask'], [data-title-motion='split']) .hero__copy > :is(.eyebrow, .hero__text, .hero__actions) {
    animation: title-fade-up var(--motion-time) var(--motion-ease) 0.4s both;
  }

  :is([data-title-motion='fade-up'], [data-title-motion='mask'], [data-title-motion='split']) .hero__copy > .eyebrow {
    animation-delay: 0.05s;
  }
}

/* ================================================================ IMAGENS */
:is(.service__media, .shot, .about__media, .location__media, .member__photo) img {
  transition: transform 0.9s var(--ease);
}

@media (prefers-reduced-motion: no-preference) {
  /* ---------- Zoom hover ---------- */
  [data-image-motion='zoom'] .service:hover .service__media img,
  [data-image-motion='zoom'] .shot:is(:hover, :focus-visible) img,
  [data-image-motion='zoom'] .member:hover .member__photo img {
    transform: scale(1.04);
  }

  /* ---------- Pan hover: a foto desliza um pouco para o lado ---------- */
  [data-image-motion='pan'] :is(.service__media, .shot, .member__photo) img {
    transform: scale(1.07) translateX(1.6%);
  }

  [data-image-motion='pan'] .service:hover .service__media img,
  [data-image-motion='pan'] .shot:is(:hover, :focus-visible) img,
  [data-image-motion='pan'] .member:hover .member__photo img {
    transform: scale(1.07) translateX(-1.6%);
  }

  /* ---------- Lift: o item sobe 6px, com sombra suave ---------- */
  [data-image-motion='lift'] :is(.service, .shot, .member) {
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), opacity var(--motion-time) var(--motion-ease);
  }

  [data-image-motion='lift'] :is(.service, .shot, .member):is(:hover, :focus-visible) {
    transform: translateY(-6px);
    box-shadow: 0 22px 38px -26px rgba(0, 0, 0, 0.5);
  }

  /* ---------- Reveal mask: a foto se revela de cima para baixo quando entra na tela ---------- */
  /* A máscara fica na foto de dentro: um bloco observado que estivesse todo recortado nunca "entraria" na tela. */
  [data-image-motion='mask'].js :is([data-reveal] .service__media, .about[data-reveal] .about__media, .shot[data-reveal] > img, .location__media[data-reveal] > img, [data-reveal] .member__photo) {
    clip-path: inset(0 0 100% 0);
    transition: clip-path calc(var(--motion-time) * 1.25) var(--motion-ease);
  }

  [data-image-motion='mask'].js :is(.is-in .service__media, .about.is-in .about__media, .shot.is-in > img, .location__media.is-in > img, .is-in .member__photo) {
    clip-path: inset(0);
  }

  /*
   * ---------- Parallax suave ----------
   * Amplitude pequena (3% da altura), só em telas largas com mouse, e só onde o navegador
   * liga a animação à rolagem no compositor. Nos demais, as fotos ficam paradas.
   */
  @supports (animation-timeline: view()) {
    @media (min-width: 900px) and (hover: hover) {
      @keyframes parallax-drift {
        from {
          transform: translate3d(0, -3%, 0) scale(1.08);
        }

        to {
          transform: translate3d(0, 3%, 0) scale(1.08);
        }
      }

      [data-image-motion='parallax'] :is(.about__media, .location__media, .cta__media, .benefits__media) img {
        animation: parallax-drift linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
        transition: none;
      }
    }
  }

  /* Onde não há parallax, o preset mantém um zoom discreto ao passar o mouse. */
  [data-image-motion='parallax'] .service:hover .service__media img,
  [data-image-motion='parallax'] .shot:is(:hover, :focus-visible) img {
    transform: scale(1.04);
  }
}