/* Blend between staging pages while the browser handles normal navigation. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-group(root) {
    animation-duration: 180ms;
    animation-timing-function: ease-out;
  }

  .stage-hero-in-view[data-stage-hero-motion] {
    animation: stage-hero-reveal 1.1s ease-out both;
  }
  .stage-hero-in-view[data-stage-hero-motion="vehicle"] {
    animation: stage-hero-vehicle 1.6s cubic-bezier(.2,.75,.25,1) both;
  }
  .stage-hero-in-view[data-stage-hero-motion="release"] {
    animation: stage-hero-release 1.2s ease-out both;
  }
  .stage-hero-in-view[data-stage-hero-motion="route"] {
    animation: stage-hero-route 1.3s ease-out both;
  }
  .stage-hero-in-view[data-stage-hero-motion="signal"] {
    animation: stage-hero-signal 1.4s ease-out both;
  }
  .stage-hero-in-view[data-stage-hero-motion="editorial-image"] {
    animation: stage-editorial-image 2.4s cubic-bezier(.2,.65,.3,1) both;
  }
}

@media (max-width: 800px) {
  [data-stage-hero-motion="editorial-image"] {
    --stage-editorial-start-scale: 1;
  }
}

@keyframes stage-editorial-image {
  from { opacity: .66; scale: var(--stage-editorial-start-scale, 1.045); translate: 0 6px; }
  to { opacity: 1; scale: 1; translate: 0 0; }
}

@keyframes stage-hero-reveal {
  from { opacity: .62; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes stage-hero-vehicle {
  from { opacity: .48; translate: -20px 0; scale: .96; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes stage-hero-release {
  from { opacity: .65; clip-path: inset(0 15% 0 0); }
  to { opacity: 1; clip-path: inset(0); }
}
@keyframes stage-hero-route {
  from { opacity: .65; translate: -14px 0; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes stage-hero-signal {
  0% { opacity: .58; scale: .96; }
  55% { opacity: 1; scale: 1.015; }
  100% { opacity: 1; scale: 1; }
}

/* Keep the reading order consistent across CMS and snapshot article headers. */
body[data-theme-night-signal] #main :is(.cms-document--guide, .cms-document--owner_answer, .cms-document--software_update, .cms-document--manual, .cms-document--article) .cms-document-hero:has(> .cms-document-hero-media),
body.reading-theme :is(.reading-lead, .reading-feature-lead, .reading-release-lead):has(> .reading-art) {
  display: grid;
  grid-template-areas: "copy art";
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 4rem);
}

body[data-theme-night-signal] #main :is(.cms-document--guide, .cms-document--owner_answer, .cms-document--software_update, .cms-document--manual, .cms-document--article) .cms-document-hero:has(> .cms-document-hero-media) > .cms-document-hero-content,
body.reading-theme :is(.reading-lead, .reading-feature-lead, .reading-release-lead):has(> .reading-art) > div {
  grid-area: copy;
  min-width: 0;
}

body[data-theme-night-signal] #main :is(.cms-document--guide, .cms-document--owner_answer, .cms-document--software_update, .cms-document--manual, .cms-document--article) .cms-document-hero > .cms-document-hero-media,
body.reading-theme :is(.reading-lead, .reading-feature-lead, .reading-release-lead) > .reading-art {
  display: block;
  grid-area: art;
  align-self: center;
  justify-self: end;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

body[data-theme-night-signal] #main :is(.cms-document--guide, .cms-document--owner_answer, .cms-document--software_update, .cms-document--manual, .cms-document--article) .cms-document-hero-media img {
  transform: none;
}

.stage-owner-help-art {
  width: min(100%, 23rem);
  margin: 1.25rem 0 0;
}

.stage-owner-help-art img {
  display: block;
  width: 100%;
  height: auto;
}

.hh-path .stage-owner-help-art {
  margin: .75rem auto;
}

body[data-theme-night-signal] #main :is(.cms-question-index, .owner-help-background > summary, .stage-reading-banner a, .cms-document .ma) {
  color: #c8c8c8;
}

@media (max-width: 50rem) {
  body[data-theme-night-signal] #main :is(.cms-document--guide, .cms-document--owner_answer, .cms-document--software_update, .cms-document--manual, .cms-document--article) .cms-document-hero:has(> .cms-document-hero-media),
  body.reading-theme :is(.reading-lead, .reading-feature-lead, .reading-release-lead):has(> .reading-art) {
    grid-template-areas: "copy" "art";
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-theme-night-signal] #main :is(.cms-document--guide, .cms-document--owner_answer, .cms-document--software_update, .cms-document--manual, .cms-document--article) .cms-document-hero > .cms-document-hero-media,
  body.reading-theme :is(.reading-lead, .reading-feature-lead, .reading-release-lead) > .reading-art {
    justify-self: center;
    width: min(100%, 24rem);
  }

  body[data-theme-night-signal] #main :is(.cms-document--guide, .cms-document--owner_answer, .cms-document--software_update, .cms-document--manual, .cms-document--article) .cms-document-hero-media img {
    max-height: 14rem;
  }
}

@media (max-width: 50rem) {
  body[data-theme-night-signal] #main :is(.cms-document--manual, .cms-document--article) .cms-document-hero > .cms-document-hero-media {
    display: block !important;
  }
}

@media (max-width: 50rem) {
  body[data-theme-night-signal] #main .cms-document-hero > .cms-document-hero-media {
    max-inline-size: min(100%, calc(100vw - 6rem)) !important;
    margin-inline: auto;
    inset-inline: auto;
    transform: none;
  }
}