/* Motion on the public pages (loaded by layouts/site.php, not the staff area).
   Opt-in through data attributes in the templates:
     data-reveal / data-reveal="left" / "right"  fade up, or slide in from that side, when scrolled into view
     data-reveal-group                         its children reveal one after another
     data-count                                the number in the text counts up from 0 (the real number stays in the HTML)
     data-lift                                 cards lift on hover
     data-pulse                                orange ring pulse (RMIJobs header button and the Active Intake badge only)
     data-arrows                               on a list: the › arrow slides right on row hover
   Nothing is hidden until motion.js adds .motion-ready to <html>, so without JavaScript every page is static
   and complete. All motion sits inside prefers-reduced-motion: no-preference, so with reduced motion
   everything shows in its final state. Only transform and opacity are animated. */

/* Stops the slide-ins from causing a horizontal scrollbar. clip, unlike hidden, keeps position: sticky working. */
main { overflow-x: clip; }

@media screen and (prefers-reduced-motion: no-preference) {
  .motion-ready [data-reveal],
  .motion-ready [data-reveal-group] > * {
    opacity: 0;
    transform: translateY(26px);
    /* Also lists the hover transitions the cards already have, because this declaration replaces theirs. */
    transition: opacity .7s ease-out var(--reveal-delay, 0ms), transform .7s ease-out var(--reveal-delay, 0ms),
                box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
  }
  .motion-ready [data-reveal="left"] { transform: translateX(-48px); }
  .motion-ready [data-reveal="right"] { transform: translateX(48px); }
  .motion-ready [data-reveal].is-visible,
  .motion-ready [data-reveal-group].is-visible > * { opacity: 1; transform: none; }

  /* About 125ms between the children of a group; the ninth and later children share the last delay. */
  [data-reveal-group] > :nth-child(2) { --reveal-delay: 125ms; }
  [data-reveal-group] > :nth-child(3) { --reveal-delay: 250ms; }
  [data-reveal-group] > :nth-child(4) { --reveal-delay: 375ms; }
  [data-reveal-group] > :nth-child(5) { --reveal-delay: 500ms; }
  [data-reveal-group] > :nth-child(6) { --reveal-delay: 625ms; }
  [data-reveal-group] > :nth-child(7) { --reveal-delay: 750ms; }
  [data-reveal-group] > :nth-child(n+8) { --reveal-delay: 875ms; }

  /* Keeps the number from changing width while it counts. */
  [data-count].is-counting { font-variant-numeric: tabular-nums; }

  @media (hover: hover) {
    /* The lift uses the separate translate property so it does not fight the reveal's transform. */
    [data-lift] { transition: translate .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease; }
    .motion-ready [data-reveal-group] > [data-lift],
    .motion-ready [data-lift][data-reveal] {
      transition: opacity .7s ease-out var(--reveal-delay, 0ms), transform .7s ease-out var(--reveal-delay, 0ms),
                  translate .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
    }
    [data-lift]:hover { translate: 0 -6px; box-shadow: 0 14px 28px -10px rgba(0, 35, 88, .28); }

    [data-arrows] a > [aria-hidden="true"] { transition: transform .2s ease; }
    [data-arrows] a:hover > [aria-hidden="true"],
    [data-arrows] a:focus-visible > [aria-hidden="true"] { transform: translateX(6px); }
  }

  [data-pulse] { position: relative; }
  [data-pulse]::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 2px solid #EF6C00;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    animation: ntc-pulse 2.4s ease-out infinite;
  }
  @keyframes ntc-pulse {
    0% { opacity: .7; transform: scale(1); }
    70%, 100% { opacity: 0; transform: scale(1.08, 1.45); }
  }
}