/* Production homepage portrait Hero, isolated from all other sections and pages. */

.hero--portrait .hero-visual {
  position: absolute;
  top: 0;
  right: max(1.25rem, calc((100vw - var(--container)) / 2));
  bottom: 0;
  width: min(36vw, 29rem);
  height: auto;
  aspect-ratio: auto;
  isolation: isolate;
}

.hero--portrait .hero-visual::before {
  top: 15%;
  right: -10%;
  bottom: 18%;
  left: -10%;
  background: radial-gradient(circle, rgb(44 117 164 / 0.18), transparent 68%);
  box-shadow: none;
}

.hero--portrait .home-hero-orbit-field {
  position: absolute;
  z-index: 0;
  top: 20%;
  left: 60%;
  width: min(100%, 29rem);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translateX(-50%);
}

.hero--portrait .home-hero-orbit-field .hero-visual__orbit--outer {
  inset: 0;
  border-color: rgb(116 151 184 / 0.12);
}

.hero--portrait .home-hero-orbit-field .hero-visual__orbit--inner {
  inset: 17%;
  border-color: rgb(116 151 184 / 0.07);
}

.hero--portrait .home-hero-orbit-field .hero-visual__orbit--outer::after {
  width: 0.375rem;
  height: 0.375rem;
  background: rgb(255 107 26 / 0.62);
  box-shadow: 0 0 0.875rem rgb(255 107 26 / 0.32);
}

.hero--portrait .home-hero-orbit-field .hero-visual__orbit--inner::after {
  width: 0.25rem;
  height: 0.25rem;
  background: rgb(170 199 225 / 0.52);
  box-shadow: 0 0 0.75rem rgb(116 151 184 / 0.26);
}

.hero--portrait .home-hero-person-shell {
  position: absolute;
  z-index: 2;
  bottom: -18%;
  left: 60%;
  height: 106%;
  max-height: none;
  pointer-events: none;
  transform: translateX(-50%);
}

.hero--portrait .home-hero-person {
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1.5rem 2.75rem rgb(0 0 0 / 0.28));
  animation: none;
  transform: none;
}

@media (max-width: 71.99rem) {
  .hero--portrait .hero-visual {
    right: -1rem;
    width: min(48vw, 24rem);
  }

  .hero--portrait .home-hero-orbit-field {
    left: 50%;
    width: 100%;
  }

  .hero--portrait .home-hero-person-shell {
    bottom: -14%;
    left: 50%;
    height: 86%;
  }
}

@media (max-width: 47.99rem) {
  .hero--portrait .hero__inner {
    padding-bottom: 0;
  }

  .hero--portrait .hero-visual {
    position: relative;
    z-index: 0;
    top: auto;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 100%;
    height: 28rem;
    margin-top: -2rem;
    justify-self: stretch;
    opacity: 1;
    transform: translateX(-50%);
  }

  .hero--portrait .home-hero-orbit-field {
    top: 8%;
    left: 50%;
    width: min(88vw, 22rem);
  }

  .hero--portrait .home-hero-person-shell {
    right: auto;
    bottom: -20%;
    left: 50%;
    height: 120%;
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero--portrait .hero__content,
  .hero--portrait .hero-visual {
    animation: none;
  }

  .hero--portrait .hero__eyebrow {
    animation: production-hero-reveal-12 620ms 0ms var(--ease-enter) both;
  }

  .hero--portrait .hero__title {
    animation: production-hero-reveal-18 650ms 70ms var(--ease-enter) both;
  }

  .hero--portrait .hero__lead {
    animation: production-hero-reveal-12 620ms 140ms var(--ease-enter) both;
  }

  .hero--portrait .hero__actions {
    animation: production-hero-reveal-10 600ms 210ms var(--ease-enter) both;
  }

  .hero--portrait .hero__assurance {
    animation: production-hero-fade 560ms 280ms var(--ease-enter) both;
  }

  .hero--portrait .home-hero-orbit-field {
    animation: production-hero-fade 680ms 100ms var(--ease-enter) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--portrait .hero__eyebrow,
  .hero--portrait .hero__title,
  .hero--portrait .hero__lead,
  .hero--portrait .hero__actions,
  .hero--portrait .hero__assurance,
  .hero--portrait .hero-visual,
  .hero--portrait .home-hero-orbit-field,
  .hero--portrait .hero-visual__orbit--outer,
  .hero--portrait .hero-visual__orbit--inner {
    opacity: 1;
    animation: none;
  }

  .hero--portrait .hero__eyebrow,
  .hero--portrait .hero__title,
  .hero--portrait .hero__lead,
  .hero--portrait .hero__actions,
  .hero--portrait .hero__assurance {
    transform: none;
  }
}

@keyframes production-hero-reveal-10 {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
}

@keyframes production-hero-reveal-12 {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

@keyframes production-hero-reveal-18 {
  from {
    opacity: 0;
    transform: translateY(1.125rem);
  }
}

@keyframes production-hero-fade {
  from {
    opacity: 0;
  }
}