/* Entrada das heroes: retrato primeiro, conteúdo logo em seguida. */
.hero--campaign::before,
.hero--campaign .hero__portrait::before {
  content: none;
  display: none;
}

.hero--campaign .hero__portrait {
  animation: hero-portrait-rise 1.65s cubic-bezier(.22, .72, .2, 1) both;
  transform-origin: center bottom;
  will-change: transform, opacity, clip-path;
}

.hero--campaign .hero__copy {
  animation: hero-copy-enter 1.15s cubic-bezier(.22, .72, .2, 1) .32s both;
  will-change: transform, opacity;
}

@keyframes hero-portrait-rise {
  from {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translate3d(0, 11%, 0) scale(.985);
  }

  45% {
    opacity: 1;
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes hero-copy-enter {
  from {
    opacity: 0;
    transform: translate3d(-34px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--campaign .hero__portrait,
  .hero--campaign .hero__copy {
    animation: none;
    opacity: 1;
    clip-path: none;
    transform: none;
    will-change: auto;
  }
}