/* Device-native presentation for the exact navigation seal used in the hero. */

@media (max-width: 1023px), (max-width: 1180px) and (orientation: portrait) {
  .hero__grid {
    position: relative;
    grid-template-columns: 1fr;
    isolation: isolate;
  }

  .hero-seal-stage {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 0;
    width: min(66vw, 540px);
    opacity: .115;
    transform: translateY(-50%);
    justify-self: auto;
    pointer-events: none;
  }

  .hero-seal {
    width: 70%;
    filter: none;
    animation-duration: 96s;
  }

  .hero-seal-stage::before { opacity: .36; }
  .hero-seal-aura--outer {
    width: 68%;
    height: 68%;
    border-color: rgba(160, 125, 62, .13);
    border-top-color: rgba(160, 125, 62, .36);
    border-right-color: rgba(7, 24, 47, .16);
    box-shadow: none;
    animation-duration: 54s;
  }
  .hero-seal-aura--inner {
    width: 55%;
    height: 55%;
    border-color: rgba(7, 24, 47, .07);
  }
}

@media (max-width: 767px) {
  .hero-seal-stage {
    top: 44%;
    right: 0;
    width: min(88vw, 460px);
    opacity: .085;
  }

  .hero-seal { animation-duration: 120s; }
  .hero-seal-aura--outer { animation-duration: 72s; }
}

@media (max-width: 479px) {
  .hero-seal-stage {
    top: 42%;
    width: min(88vw, 380px);
    opacity: .07;
  }

  .hero-seal { animation-duration: 132s; }
}

@media (max-height: 650px) and (orientation: landscape) and (max-width: 1023px) {
  .hero-seal-stage {
    top: 50%;
    right: 0;
    width: min(48vw, 360px);
    opacity: .075;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-seal,
  .hero-seal-aura--outer { animation: none; }
}