/* Motion follows the existing typography and fine rules. Content is visible
   by default, including when JavaScript is unavailable. */
.intro {
  min-height: calc(100svh - var(--masthead-height, 116px));
  align-items: center;
}

.intro-scroll-cue { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="ready"][data-intro-focus] .intro-scroll-cue {
    display: flex;
    position: fixed;
    z-index: 20;
    left: 50%;
    bottom: max(24px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    color: var(--ink);
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: .02em;
    text-decoration: none;
    opacity: calc(1 - var(--intro-reveal, 0));
  }

  html[data-motion="ready"][data-intro-focus="expanded"] .intro-scroll-cue {
    visibility: hidden;
    pointer-events: none;
  }

  html[data-motion="ready"][data-intro-focus] .gold-focus {
    color: var(--intro-gold, var(--ink));
  }

  html[data-motion="ready"][data-intro-focus] .intro .cta-row .button {
    background: var(--intro-button, var(--ink));
    border-color: var(--intro-button, var(--ink));
    color: var(--intro-button-text, white);
    transition: transform 260ms cubic-bezier(.22, 1, .36, 1), box-shadow 260ms ease;
  }

  html[data-motion="ready"][data-intro-focus] .masthead {
    opacity: var(--intro-reveal, 0);
  }

  html[data-motion="ready"][data-intro-focus] .intro-copy > :not(h1),
  html[data-motion="ready"][data-intro-focus] .intro .intro-support {
    opacity: var(--intro-reveal, 0);
    transform: translate3d(0, var(--intro-shift, 12px), 0);
    transition: none;
    transition-delay: 0ms;
  }

  html[data-motion="ready"][data-intro-focus="focused"] .masthead,
  html[data-motion="ready"][data-intro-focus="focused"] .intro-copy > :not(h1),
  html[data-motion="ready"][data-intro-focus="focused"] .intro .intro-support {
    pointer-events: none;
  }

  html[data-motion="ready"] .motion-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 680ms cubic-bezier(.22, 1, .36, 1),
                transform 760ms cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--motion-delay, 0ms);
  }

  html[data-motion="ready"] .motion-reveal.is-visible,
  html[data-motion="ready"] .motion-reveal:focus-within {
    opacity: 1;
    transform: none;
  }

  html[data-motion="ready"] .masthead {
    position: relative;
    border-bottom-color: transparent;
  }

  html[data-motion="ready"] .masthead::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--ink);
    transform-origin: left;
    animation: rule-arrives 1000ms cubic-bezier(.22, 1, .36, 1) both;
  }

  html[data-motion="ready"] .editor-note .note-mark {
    transform: translateY(8px) rotate(-12deg);
    transform-origin: left center;
    transition: transform 950ms cubic-bezier(.22, 1, .36, 1) 170ms;
  }

  html[data-motion="ready"] .editor-note.is-visible .note-mark {
    transform: none;
  }

  .button {
    transition: background 220ms ease, color 220ms ease,
                transform 260ms cubic-bezier(.22, 1, .36, 1), box-shadow 260ms ease;
  }

  .button > span[aria-hidden], .text-link > span[aria-hidden] {
    display: inline-block;
    transition: transform 280ms cubic-bezier(.22, 1, .36, 1);
  }

  .monogram {
    display: inline-block;
    transform-origin: center 70%;
    transition: transform 360ms cubic-bezier(.22, 1, .36, 1);
  }

  .masthead nav a {
    position: relative;
    text-decoration: none;
  }

  .masthead nav a::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
  }

  .masthead nav a[aria-current="page"]::after,
  .masthead nav a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .details-list > div > span,
  .research-steps li::before {
    transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
  }

  .request-panel input, .request-panel textarea {
    transition: box-shadow 200ms ease, border-color 200ms ease;
  }

  .request-panel input:focus, .request-panel textarea:focus {
    box-shadow: 0 0 0 5px rgb(24 27 24 / 5%);
  }

  @media (hover: hover) and (pointer: fine) {
    html[data-motion="ready"][data-intro-focus] .intro .cta-row .button:hover {
      background: white;
      border-color: var(--ink);
      color: var(--ink);
    }

    .button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgb(24 27 24 / 8%);
    }
    .button:hover > span[aria-hidden], .text-link:hover > span[aria-hidden] {
      transform: translate(3px, -3px);
    }
    .button:hover > span[data-arrow="down"], .text-link:hover > span[data-arrow="down"] {
      transform: translateY(4px);
    }
    .button:active {
      transform: none;
      box-shadow: none;
    }
    .brand:hover .monogram {
      transform: translateY(-1px) rotate(-6deg);
    }
    .masthead nav a:hover::after {
      transform: scaleX(1);
      transform-origin: left;
    }
    .details-list > div:hover > span, .research-steps li:hover::before {
      transform: translateX(4px);
    }
  }

  @keyframes rule-arrives {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

@media (max-width: 760px) {
  .intro { min-height: 0; }
  .intro-copy {
    min-height: calc(100svh - var(--masthead-height, 142px) - 98px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .intro-support { display: block; }
  .intro-support .note-mark { display: none; }
}

.reading-progress {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reading-progress { display: none; }
  .intro-support { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
}

@media print {
  .intro-scroll-cue { display: none !important; }
  .motion-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reading-progress { display: none; }
  .intro { min-height: 0; }
  .intro-copy { min-height: 0; }
  .intro-support { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .gold-focus { color: var(--ink) !important; }
  .masthead, .intro-copy > :not(h1) { opacity: 1 !important; transform: none !important; }
}