@import url('participation-v7.css?v=20260811-2');

/* ELC motion v4 - movimento discreto, fluido e sem excesso */

/* Remove o traco verde antes do texto do hero. */
.hero .eyebrow > span:first-child {
  display: none !important;
}

.hero .eyebrow {
  gap: 0 !important;
}

/* Entrada geral: curta, suave e executada uma unica vez. */
.reveal {
  opacity: 0;
  filter: none !important;
  transform: translate3d(0, 16px, 0) !important;
  transition:
    opacity .58s cubic-bezier(.22, 1, .36, 1),
    transform .58s cubic-bezier(.22, 1, .36, 1) !important;
  transition-delay: 0s !important;
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  filter: none !important;
  transform: translate3d(0, 0, 0) !important;
}

/* Hero: cada parte entra em sequencia, sem blur e sem efeito brusco. */
.hero__content.reveal:not(.is-visible) > .eyebrow,
.hero__content.reveal:not(.is-visible) > h1,
.hero__content.reveal:not(.is-visible) > .hero__lead,
.hero__content.reveal:not(.is-visible) > .hero__actions,
.hero__content.reveal:not(.is-visible) > .hero__signature {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}

.hero__content.reveal.is-visible > .eyebrow,
.hero__content.reveal.is-visible > h1,
.hero__content.reveal.is-visible > .hero__lead,
.hero__content.reveal.is-visible > .hero__actions,
.hero__content.reveal.is-visible > .hero__signature {
  animation: elcHeroEnter .72s cubic-bezier(.22, 1, .36, 1) both;
}

.hero__content.reveal.is-visible > .eyebrow { animation-delay: .03s; }
.hero__content.reveal.is-visible > h1 { animation-delay: .10s; }
.hero__content.reveal.is-visible > .hero__lead { animation-delay: .18s; }
.hero__content.reveal.is-visible > .hero__actions { animation-delay: .26s; }
.hero__content.reveal.is-visible > .hero__signature { animation-delay: .34s; }

@keyframes elcHeroEnter {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Fotos do hero ganham vida com movimento muito leve e lento. */
.hero-collage.reveal.is-visible .hero-collage__main,
.hero-collage.reveal.is-visible .hero-collage__top,
.hero-collage.reveal.is-visible .hero-collage__bottom {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  will-change: transform;
}

.hero-collage.reveal.is-visible .hero-collage__main {
  animation-name: elcHeroFloatMain;
  animation-duration: 8.5s;
}

.hero-collage.reveal.is-visible .hero-collage__top {
  animation-name: elcHeroFloatTop;
  animation-duration: 7.5s;
}

.hero-collage.reveal.is-visible .hero-collage__bottom {
  animation-name: elcHeroFloatBottom;
  animation-duration: 9.5s;
}

@keyframes elcHeroFloatMain {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -5px, 0); }
}

@keyframes elcHeroFloatTop {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(3px, 4px, 0); }
}

@keyframes elcHeroFloatBottom {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-3px, -3px, 0); }
}

/* Em desktop, blocos editoriais entram de lados opostos com deslocamento minimo. */
@media (min-width: 901px) {
  .project-story__photo.reveal,
  .impact-copy.reveal {
    transform: translate3d(-18px, 10px, 0) !important;
  }

  .project-story__content.reveal,
  .ods-panel.reveal,
  .regions-panel.reveal {
    transform: translate3d(18px, 10px, 0) !important;
  }

  .project-story__photo.reveal.is-visible,
  .impact-copy.reveal.is-visible,
  .project-story__content.reveal.is-visible,
  .ods-panel.reveal.is-visible,
  .regions-panel.reveal.is-visible {
    transform: translate3d(0, 0, 0) !important;
  }
}

/* Evita animacao dentro de animacao. O bloco entra uma vez, seus filhos ficam estaveis. */
.reveal .reveal-stagger > *,
.reveal.is-visible .reveal-stagger > *,
.execution-band.reveal .execution-steps article,
.execution-band.reveal.is-visible .execution-steps article,
.project-story__content.reveal .principles-list article,
.project-story__content.reveal.is-visible .principles-list article,
.impact-copy.reveal .impact-points article,
.impact-copy.reveal.is-visible .impact-points article,
.ods-panel.reveal .ods-grid article,
.ods-panel.reveal.is-visible .ods-grid article,
.regions-panel.reveal li,
.regions-panel.reveal.is-visible li {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  animation-delay: 0s !important;
}

/* Remove o recorte/zoom cinematografico da foto durante a rolagem. */
.project-story__photo.reveal,
.project-story__photo.reveal.is-visible {
  clip-path: none !important;
}

.project-story__photo.reveal img,
.project-story__photo.reveal.is-visible img {
  transform: none !important;
  transition: none !important;
}

/* Cards entram juntos, sem efeito cascata longo. */
.modalities-grid .reveal,
.gallery-grid .reveal {
  transition-delay: 0s !important;
}

/* Microinteracoes: vida ao passar o mouse, sem atrapalhar a leitura. */
.hero__actions .button,
.modality-card,
.gallery-item,
.region-map-filter,
.nucleus-card {
  transition:
    transform .24s cubic-bezier(.22, 1, .36, 1),
    box-shadow .24s ease,
    border-color .24s ease,
    background-color .24s ease !important;
}

.hero__actions .button:hover {
  transform: translateY(-2px) !important;
}

.hero__actions .button span[aria-hidden="true"] {
  display: inline-block;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}

.hero__actions .button:hover span[aria-hidden="true"] {
  transform: translateX(4px);
}

.modality-card:hover,
.nucleus-card:hover {
  transform: translateY(-4px);
}

.gallery-item:hover {
  transform: translateY(-3px);
}

/* Entrada inicial das metricas continua, mas mais curta e delicada. */
.hero-metrics article {
  animation-duration: .48s !important;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1) !important;
}
.hero-metrics article:nth-child(1) { animation-delay: .05s !important; }
.hero-metrics article:nth-child(2) { animation-delay: .10s !important; }
.hero-metrics article:nth-child(3) { animation-delay: .15s !important; }
.hero-metrics article:nth-child(4) { animation-delay: .20s !important; }

@media (max-width: 680px) {
  /* No celular, evita movimento continuo das imagens para manter a pagina leve. */
  .hero-collage.reveal.is-visible .hero-collage__main,
  .hero-collage.reveal.is-visible .hero-collage__top,
  .hero-collage.reveal.is-visible .hero-collage__bottom {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal .reveal-stagger > *,
  .reveal.is-visible .reveal-stagger > *,
  .hero-metrics article,
  .hero__content.reveal > *,
  .hero-collage.reveal.is-visible .hero-collage__main,
  .hero-collage.reveal.is-visible .hero-collage__top,
  .hero-collage.reveal.is-visible .hero-collage__bottom {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}