/* Motion enhances the existing layout; content is visible without JavaScript. */
:root { --motion-ease: cubic-bezier(.22, .68, .25, 1); }
html { scroll-padding-top: 110px; }
.site-header.is-scrolled { box-shadow: 0 5px 24px #08283d10; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .site-header { transition: box-shadow 240ms ease; }

  .reveal-in {
    animation: section-arrive 600ms var(--motion-ease) var(--reveal-delay, 0ms) backwards;
  }
  .reveal-in:focus-within { animation: none; }
  .hero-visual.reveal-in { animation-name: photo-arrive; }

  .hero-visual.has-parallax { overflow: hidden; border-radius: 8px; }
  .has-parallax .hero-home {
    transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1.05);
    will-change: transform;
  }

  .button, .main-nav .nav-call, .topic-link, .menu-toggle {
    transition: transform 180ms var(--motion-ease), box-shadow 220ms ease,
      background-color 180ms ease, border-color 180ms ease;
  }
  .service-row { transition: background-color 200ms ease; }
  .text-link, .related-links a { transition: border-color 180ms ease; }
  .text-link > span, .related-links a > span, .topic-link > span,
  .service-link-label > span {
    display: inline-block;
    transition: transform 220ms var(--motion-ease);
  }
  .main-nav > a:focus-visible::after { transform: scaleX(1); }
  .menu-symbol { display: inline-block; transition: transform 220ms ease; }
  .menu-toggle[aria-expanded="true"] .menu-symbol { transform: rotate(180deg); }

  .button:active, .main-nav .nav-call:active, .topic-link:active {
    transform: translateY(0) scale(.985);
    box-shadow: none;
  }
  .menu-toggle:active { transform: scale(.97); }
  .faq-list details[open] > p { animation: answer-arrive 260ms ease-out; }

  /* Native navigation stays intact, including back/forward and new tabs. */
  @view-transition { navigation: auto; }
  ::view-transition-group(root) { animation-duration: 220ms; }
  ::view-transition-old(root) { animation: page-leave 180ms ease both; }
  ::view-transition-new(root) { animation: page-arrive 220ms ease both; }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .button:hover, .main-nav .nav-call:hover, .topic-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 14px #08283d20;
  }
  .button:active, .main-nav .nav-call:active, .topic-link:active {
    transform: translateY(0) scale(.985);
    box-shadow: none;
  }
  .service-row:hover { background-color: #08283d06; }
  .text-link:hover, .related-links a:hover { border-color: var(--forest); }
  .text-link:hover > span, .related-links a:hover > span, .topic-link:hover > span {
    transform: translateX(3px);
  }
  .service-row:hover .service-link-label > span { transform: translateX(5px); }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
  .has-js .main-nav.is-open { animation: menu-arrive 220ms var(--motion-ease); }
}

@keyframes section-arrive {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes photo-arrive { from { opacity: .25; } to { opacity: 1; } }
@keyframes answer-arrive {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes menu-arrive {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes page-leave { to { opacity: 0; } }
@keyframes page-arrive { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  .reveal-in, .has-js .main-nav.is-open, .faq-list details[open] > p { animation: none; }
  .has-parallax .hero-home { transform: none; will-change: auto; }
}
@media print {
  .reveal-in { animation: none !important; opacity: 1 !important; transform: none !important; }
  .has-parallax .hero-home { transform: none !important; will-change: auto; }
  .site-header.is-scrolled { box-shadow: none; }
}