/* Hero with the animated logo (MX-04 v4). Ported from the prototype homepage (scripts/templates/home.html,
   ddf9b78). Script: assets/js/hero-logo-motion.js. */
.logo-hero { position: relative; isolation: isolate; min-height: 650px; display: grid; place-items: center; overflow: hidden; background: var(--color-surface); }
.logo-hero__inner { position: relative; z-index: 1; width: min(920px, calc(100% - 48px)); display: flex; flex-direction: column; align-items: center; text-align: center; padding: 54px 0 46px; }
.logo-hero__title { width: 100%; margin: 0; }
.animated-wordmark { display: block; width: min(600px, 100%); margin: 0 auto; color: var(--color-text); }
.animated-wordmark svg { display: block; width: 100%; height: auto; overflow: visible; }
.animated-wordmark .motion-shape, .animated-wordmark .motion-shadow { fill: currentColor; }
.logo-hero .hero-house-line { margin: -1.5rem 0 1.6rem; font-size: 1rem; letter-spacing: .08em; color: var(--color-text); }
.logo-hero .wp-block-buttons { justify-content: center; }

@media (max-width: 900px) {
  .logo-hero { min-height: 540px; }
  .logo-hero__inner { padding: 42px 0 38px; }
  .animated-wordmark { width: min(500px, 100%); }
}
@media (min-width: 768px) {
  /* The lockup is centred and the eclipse plays to the right of it: on tablets the mark is capped so
     the circles stay inside the viewport. */
  .animated-wordmark { max-width: calc(59vw - 10px); }
}
@media (max-width: 767px) {
  /* MX-04 plays on phones too: the mark is capped so its (compact) eclipse stage stays in view. */
  .animated-wordmark { max-width: 64vw; }
}
@media (max-width: 600px) {
  .logo-hero { min-height: 460px; }
  .logo-hero__inner { width: calc(100% - 32px); padding: 34px 0; }
  .animated-wordmark { width: min(300px, 100%); }
  .logo-hero .hero-house-line { margin-top: -.7rem; font-size: .9rem; }
}