/* Static outlines are the default, including when JavaScript is unavailable. */
.ch-hero__issue-path {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6px;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 767px) {
  .ch-hero__issue-path { stroke-width: 1.1px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* The small head script sets this before the hero can first paint. */
  .ch-home-motion .ch-hero__issue-art { opacity: 0; }
  .ch-home-motion .ch-hero__result { clip-path: inset(0 100% 0 0); }
  .ch-home-motion .ch-hero :is(.ch-hero__eyebrow, .ch-hero__wo, .ch-hero__title, .ch-hero__description, .ch-hero__button, .ch-hero__nav) {
    opacity: 0;
    transform: translateY(10px);
  }
  .ch-hero__eyebrow { --ch-entry-delay: 0ms; --ch-entry-duration: 220ms; }
  .ch-hero__wo { --ch-entry-delay: 200ms; --ch-entry-duration: 180ms; }
  .ch-hero__title { --ch-entry-delay: 650ms; --ch-entry-duration: 320ms; }
  .ch-hero__description { --ch-entry-delay: 760ms; }
  .ch-hero__button { --ch-entry-delay: 840ms; }
  .ch-hero__nav { --ch-entry-delay: 920ms; }
  .ch-home-motion .ch-hero.is-entering :is(.ch-hero__eyebrow, .ch-hero__wo, .ch-hero__title, .ch-hero__description, .ch-hero__button, .ch-hero__nav) {
    animation: ch-hero-enter var(--ch-entry-duration, 280ms) cubic-bezier(.22, .61, .36, 1) var(--ch-entry-delay, 0ms) both;
  }
  .ch-home-motion .ch-hero__issue-art.is-drawing { opacity: 1; }
  .ch-home-motion .is-drawing .ch-hero__issue-path {
    stroke-dasharray: var(--ch-issue-length);
    stroke-dashoffset: var(--ch-issue-length);
    animation: ch-issue-trace 700ms cubic-bezier(.22, .61, .36, 1) var(--ch-issue-delay, 0ms) both;
  }
  .ch-home-motion .ch-hero__result.is-revealing {
    animation: ch-result-reveal 950ms cubic-bezier(.76, 0, .24, 1) var(--ch-result-delay, 560ms) both;
  }
}

@keyframes ch-issue-trace {
  from { stroke-dashoffset: var(--ch-issue-length); }
  to { stroke-dashoffset: 0; }
}

@keyframes ch-result-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

@keyframes ch-hero-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ch-hero__issue-art, .ch-hero__result,
  .ch-hero :is(.ch-hero__eyebrow, .ch-hero__wo, .ch-hero__title, .ch-hero__description, .ch-hero__button, .ch-hero__nav) {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
  .ch-hero__issue-path {
    animation: none !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
}