/* The homepage photo fills the viewport underneath the floating navigation. */
.home-page .site-chrome { position: fixed; inset: 0 0 auto; }
.home-page .fresh-hero { height: 100vh; height: 100dvh; min-height: 640px; max-height: none; }
.home-page .hero-content { padding-top: calc(var(--site-header-height, 76px) + 48px); }
html:not(.is-past-home-hero) .home-page .site-chrome::before {
  background: linear-gradient(125deg, #ffffff20, transparent 65%), #ffffff12;
  box-shadow: none;
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
}
html:not(.is-past-home-hero) .home-page .site-header { border-bottom-color: transparent; box-shadow: none; }
@media (min-width: 1700px) {
  .home-page .hero-content { padding-top: calc(var(--site-header-height, 76px) + 65px); }
}
@media (max-width: 760px) {
  .home-page .hero-content { padding-top: calc(var(--site-header-height, 68px) + 35px); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html:not(.is-past-home-hero) .home-page .site-chrome::before { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (scripting: none) {
  .home-page .site-chrome { position: sticky; }
  .home-page .hero-content { padding-top: 48px; }
}
/* The photo stays visible: one second for the title, then the remaining content. */
.hero-title-word { white-space: nowrap; }
.has-hero-intro .hero-title-letter {
  animation: hero-letter-in 200ms ease-out both;
  animation-delay: var(--letter-delay, 0ms);
}
.has-hero-intro .site-chrome,
.has-hero-intro .hero-content > .eyebrow,
.has-hero-intro .hero-bottom,
.has-hero-intro .voice-launch {
  animation: hero-rest-in 1000ms cubic-bezier(.22,1,.36,1) 1000ms both;
}
@keyframes hero-letter-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-rest-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .has-hero-intro .hero-title-letter,
  .has-hero-intro .site-chrome,
  .has-hero-intro .hero-content > .eyebrow,
  .has-hero-intro .hero-bottom,
  .has-hero-intro .voice-launch { animation: none; opacity: 1; }
}
