/* Motion only: keyframes and the animations that use them. Layout and colour live in gmic-wireframe.css. */

@keyframes service-scroll {
  to {
    transform: translateX(-100%);
  }
}

.service-track {
  animation: service-scroll 30s linear infinite;
}

/* The strip's dot pattern drifts to the right, one tile at a time. The dots sit
   on their own layer, one tile wider than the strip, and the whole layer
   slides. The distance here must match the pattern's background size and the
   layer's extra width in the Style panel (10px). */
@keyframes service-dots {
  to {
    transform: translateX(10px);
  }
}

.service-dots {
  animation: service-dots .85s linear infinite;
}

.service-strip:hover .service-dots,
.service-strip:hover .service-track {
  animation-play-state: paused;
}

/* The mobile menu's links rise and fade in one after another when the menu
   opens. The menu is closed while it carries wc-closed, so the links animate
   each time that class comes off. */
@keyframes nav-link-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@media (max-width: 991px) {
  .nav-menu:not(.wc-closed) .nav-link {
    animation: nav-link-in .45s ease both;
  }

  .nav-menu:not(.wc-closed) .nav-link:nth-child(3) { animation-delay: .05s; }
  .nav-menu:not(.wc-closed) .nav-link:nth-child(4) { animation-delay: .1s; }
  .nav-menu:not(.wc-closed) .nav-link:nth-child(5) { animation-delay: .15s; }
  .nav-menu:not(.wc-closed) .nav-link:nth-child(6) { animation-delay: .2s; }
  .nav-menu:not(.wc-closed) .nav-link:nth-child(7) { animation-delay: .25s; }
}

/* Hovering an info card brings its photo forward: the picture layer grows a
   little and brightens while the text stays put. The speed is the photo's
   transition in the Style panel; this rule lives here because the panel
   cannot hold "a card's hover changes its photo". */
.hero-strip-wrapper:hover .hero-strip-photo {
  transform: scale(1.08);
  filter: brightness(1.5);
}

/* The red bar beside a section label opens out with the scroll. It grows from
   nothing to the width set in the Style panel; its min-width there is the
   size it starts from. */
@keyframes title-strip-grow {
  from {
    width: 0;
  }
}

@supports (animation-timeline: view()) {
  .section-title-strip {
    animation: title-strip-grow linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 90%;
  }
}

/* The mission picture drifts the same way inside its frame. It is enlarged by
   15% so the edges stay hidden as it slides, and the frame clips the overflow. */
@keyframes mission-image-drift {
  from {
    transform: translateY(-6%) scale(1.15);
  }
  to {
    transform: translateY(6%) scale(1.15);
  }
}

@supports (animation-timeline: view()) {
  .image-mission {
    animation: mission-image-drift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}

/* The hero picture falls behind as the hero scrolls away, so it seems to sit
   further back than the text. It uses translate, which adds to the transform
   set in the Style panel instead of replacing it. */
@keyframes hero-image-drift {
  to {
    translate: 0 25%;
  }
}

@supports (animation-timeline: view()) {
  .hero-image {
    animation: hero-image-drift linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu:not(.wc-closed) .nav-link,
  .service-dots,
  .service-track,
  .section-title-strip,
  .image-mission,
  .hero-image {
    animation: none;
  }
}