/* Motion enhancements. Content remains visible unless JavaScript enables these states. */
:root {
  --motion-ease: cubic-bezier(.22, .61, .36, 1);
  --motion-fast: 220ms;
  --motion-base: 680ms;
}

.photo-placeholder,
.priority-card,
.credentials-card,
.statement-card,
.social-links a,
.button,
.text-link,
.desktop-nav a,
.mobile-nav a {
  transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}

.photo-placeholder {
  overflow: hidden;
  isolation: isolate;
}

.photo-placeholder > * {
  transition: transform 420ms var(--motion-ease);
}

.hero::before {
  animation: decorative-float 9s ease-in-out infinite alternate;
}

.js .hero .eyebrow,
.js .hero h1,
.js .hero .hero-lead,
.js .hero .hero-actions,
.js .hero .hero-facts,
.js .hero .hero-photo {
  opacity: 0;
}

.js .hero .eyebrow,
.js .hero h1,
.js .hero .hero-lead,
.js .hero .hero-actions,
.js .hero .hero-facts {
  transform: translateY(22px);
}

.js .hero .hero-photo {
  transform: scale(1.035);
}

.js .hero.hero--animate .eyebrow,
.js .hero.hero--animate h1,
.js .hero.hero--animate .hero-lead,
.js .hero.hero--animate .hero-actions,
.js .hero.hero--animate .hero-facts {
  animation: hero-rise var(--motion-base) var(--motion-ease) forwards;
}

.js .hero.hero--animate .eyebrow { animation-delay: 80ms; }
.js .hero.hero--animate h1 { animation-delay: 160ms; }
.js .hero.hero--animate .hero-lead { animation-delay: 300ms; }
.js .hero.hero--animate .hero-actions { animation-delay: 430ms; }
.js .hero.hero--animate .hero-facts { animation-delay: 540ms; }
.js .hero.hero--animate .hero-photo {
  animation: hero-photo-in 1.05s var(--motion-ease) 120ms forwards;
}

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 620ms var(--motion-ease), transform 620ms var(--motion-ease);
}

.js .reveal.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.js .reveal[data-reveal-delay="1"] { transition-delay: 70ms; }
.js .reveal[data-reveal-delay="2"] { transition-delay: 140ms; }
.js .reveal[data-reveal-delay="3"] { transition-delay: 210ms; }

.desktop-nav a.is-active,
.mobile-nav a.is-active {
  color: var(--blue);
}

.desktop-nav .nav-cta.is-active {
  color: var(--gold);
}

.social-links a:focus-visible,
.button:focus-visible,
.text-link:focus-visible,
.desktop-nav a:focus-visible,
.mobile-nav a:focus-visible,
.photo-placeholder:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .priority-card:hover,
  .credentials-card:hover,
  .statement-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 30px rgba(8, 31, 50, .14);
  }

  .button:hover,
  .social-links a:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(8, 31, 50, .16);
  }

  .text-link:hover,
  .desktop-nav a:not(.nav-cta):hover,
  .mobile-nav a:hover {
    transform: translateY(-2px);
  }

  .photo-placeholder:hover > * {
    transform: scale(1.025);
  }

  a,
  .photo-placeholder {
    cursor: pointer;
  }
}

@keyframes hero-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-photo-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes decorative-float {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(14px, 12px, 0); }
}