:root {
  --logo-star-accent: #1066a1;
  --logo-star-middle: #1c598d;
  --logo-star-deep: #142245;
  --site-intro-canvas: var(--white);
  --site-intro-symbol-size: min(92vw, 82svh, 52rem);
  --site-intro-lockup-size: min(92vw, 44rem);
  --site-intro-enter-distance: 0.875rem;
  --site-intro-blank: 40ms;
  --site-intro-ribbon-top: 260ms;
  --site-intro-ribbon-left: 270ms;
  --site-intro-ribbon-right: 280ms;
  --site-intro-ribbon-lower: 300ms;
  --site-intro-ribbon-left-delay: 70ms;
  --site-intro-ribbon-right-delay: 140ms;
  --site-intro-ribbon-lower-delay: 210ms;
  --site-intro-lock: 90ms;
  --site-intro-hold: 40ms;
  --site-intro-brand-flight: 320ms;
  --site-intro-canvas-reveal: 200ms;
  --site-intro-letter: 130ms;
  --site-intro-letter-stagger: 32ms;
  --site-intro-menu: 150ms;
  --site-intro-menu-stagger: 30ms;
  --site-intro-handoff: 90ms;
  --site-intro-hero-line: 380ms;
  --site-intro-hero-node: 130ms;
  --site-intro-hero-node-stagger: 8ms;
  --site-intro-route-line: 260ms;
  --site-intro-route-item: 180ms;
  --site-intro-route-item-stagger: 55ms;
  --site-intro-type: 180ms;
  --site-intro-type-stagger: 60ms;
  --site-intro-final-hold: 0ms;
  --site-intro-watchdog: 1900ms;
  --site-intro-ribbon-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --site-intro-lock-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --site-intro-wordmark-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html.brand-intro-boot,
html.brand-intro-active { scroll-behavior: auto; }

html.brand-intro-active,
html.brand-intro-active body { overflow: hidden; }

html.brand-intro-boot .route-flow,
html.brand-intro-boot .route-node,
html.brand-intro-active .route-flow,
html.brand-intro-active .route-node { animation-play-state: paused; }

html.brand-intro-active.brand-route-live .route-flow { animation-play-state: running; }

@keyframes siteIntroRouteLine {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

html.brand-intro-boot body > .site-header,
html.brand-intro-boot body > main,
html.brand-intro-boot body > footer { opacity: 0; }

html.brand-intro-active body > .site-header,
html.brand-intro-active body > main,
html.brand-intro-active body > footer { opacity: 1; }

.brand-intro-overlay {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  background-color: var(--site-intro-canvas);
  isolation: isolate;
  pointer-events: none;
}

.brand-intro-symbol-anchor {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.brand-intro-symbol {
  display: block;
  width: var(--site-intro-symbol-size);
  height: auto;
  overflow: visible;
  opacity: 0;
  shape-rendering: geometricPrecision;
  transform-origin: center;
  will-change: opacity, transform;
}

.brand-intro-final {
  display: block;
  width: var(--site-intro-lockup-size);
  height: auto;
  overflow: visible;
  shape-rendering: geometricPrecision;
  transform-origin: center;
  will-change: opacity, transform, filter;
}

.brand-intro-ribbon-brush {
  fill: none;
  stroke: var(--white);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-intro-mask { mask-type: alpha; }

.brand-intro-star-lock,
.brand-intro-lockup-star,
.brand-intro-lockup-final { opacity: 0; }

html.brand-intro-boot .mobile-call { opacity: 0; }
html.brand-intro-active .mobile-call { opacity: 1; transition: opacity 200ms ease; }

.brand-intro-letter-clip {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
}

@media (max-width: 48rem) {
  :root {
    --site-intro-symbol-size: min(92vw, 76svh);
    --site-intro-lockup-size: min(92vw, 35rem);
  }
}

@media (max-width: 59.99rem) {
  html.brand-intro-active .route-list::before {
    transform: scaleY(0);
    transform-origin: top;
  }

  html.brand-intro-active.brand-route-draw .route-list::before {
    animation: siteIntroRouteLine var(--site-intro-route-line) var(--site-intro-ribbon-ease) both;
  }
}

@media (orientation: landscape) and (max-height: 32rem) {
  :root { --site-intro-symbol-size: min(84vw, 72svh); }
}

@media (prefers-reduced-motion: reduce) {
  html.brand-intro-boot body > .site-header,
  html.brand-intro-boot body > main,
  html.brand-intro-boot body > footer,
  html.brand-intro-active body > .site-header,
  html.brand-intro-active body > main,
  html.brand-intro-active body > footer { opacity: 1; }

  .brand-intro-overlay { display: none; }
  html.brand-intro-boot .mobile-call,
  html.brand-intro-active .mobile-call { opacity: 1; transition: none; }
}