/* Caring Hearts Careers — calm, progressive-enhancement motion.
   Ported from the main-site redesign's motion.css (Sept 30, 2026). */
:root { --motion-quick: 220ms; --motion-settle: cubic-bezier(.22, 1, .36, 1); }

/* Scroll reveals: content is visible by default; JS only hides what is still below the fold. */
.reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
.reveal.motion-pending { opacity: 0; }
.reveal.motion-pending:focus-within { opacity: 1; }
.hero__inner > * { animation-duration: 650ms; }

/* Header: soft shadow once the page has scrolled. */
.site-header { transition: box-shadow 300ms var(--motion-settle); }
.site-header.site-header--scrolled { box-shadow: var(--shadow-sm); }

/* Cards (benefits, positions): warmer shadow on hover, no lift competing with reveals. */
.card, .card.reveal, .job, .job.reveal {
  transition: box-shadow 240ms var(--motion-settle), border-color 240ms var(--motion-settle);
  transform: none;
}
.card:hover, .card:focus-within, .job:hover, .job:focus-within {
  transform: none;
  box-shadow: 0 8px 20px rgb(34 54 69 / .09), 0 20px 42px rgb(34 54 69 / .08);
}
.card__icon { transition: transform 220ms var(--motion-settle), background-color 220ms var(--motion-settle); }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__icon { transform: translateY(-2px); }
}
@media (hover: none) {
  .card:active, .job:active { box-shadow: 0 2px 8px rgb(34 54 69 / .12); }
}

/* Buttons and links: one consistent feedback system. */
.btn, .nav a.header-cta, .header-cta {
  transition: background-color 220ms var(--motion-settle), color 220ms var(--motion-settle),
    border-color 220ms var(--motion-settle), box-shadow 220ms var(--motion-settle), transform 160ms var(--motion-settle);
}
.btn:active, .header-cta:active { transform: translateY(1px); }
.btn:focus-visible, .header-cta:focus-visible, .chip:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.btn svg { transition: transform 220ms var(--motion-settle); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover svg:first-child + *, .btn:hover > svg { transform: translateX(2px); }
}
.chip { transition: background-color 200ms var(--motion-settle), color 200ms var(--motion-settle), border-color 200ms var(--motion-settle); }

/* Navigation: underline reveal on hover/focus; current page stays underlined. */
@media (min-width: 1101px) {
  .nav a:not(.header-cta):not(.header-phone)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px;
    background: var(--red); transform: scaleX(0); transform-origin: left;
    transition: transform 220ms var(--motion-settle);
  }
  .nav a:not(.header-cta):not(.header-phone):hover::after,
  .nav a:not(.header-cta):not(.header-phone):focus-visible::after,
  .nav a[aria-current="page"]::after { transform: scaleX(1); }
}
.nav { transition: transform 300ms var(--motion-settle), visibility 300ms; }

/* Two approved photographs receive a one-time camera push; logos and badges never move. */
.photo-motion-frame { overflow: hidden; border-radius: var(--radius-lg); }
.photo-motion-frame > img { transform-origin: 50% 45%; }
.photo-motion-active { animation: care-photo-push 4s var(--motion-settle) both; }
@keyframes care-photo-push { from { transform: scale(1); } to { transform: scale(1.025); } }

/* Stats: counted once, then still. */
.stat__num { font-variant-numeric: tabular-nums; }

/* FAQ: rotating plus, soft highlight when open, height animated by motion.js. */
.faq-item summary { transition: background-color 200ms ease, color 200ms ease; }
.faq-item summary::after { transition: transform 260ms var(--motion-settle); }
.faq-item[open] summary { background-color: var(--red-soft); }
.faq-item[open] summary::after { content: "+"; transform: rotate(45deg); }

/* Testimonials and trust signals: a single soft entrance, then still. */
.quote, .trust-strip__item, .footer__badges img { transform: none; }

/* Native cross-document transitions; unsupported browsers navigate normally. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: care-page-out 180ms ease both; }
::view-transition-new(root) { animation: care-page-in 240ms ease both; }
.site-header { view-transition-name: care-header; }
::view-transition-old(care-header), ::view-transition-new(care-header) { animation: none; mix-blend-mode: normal; }
@keyframes care-page-out { to { opacity: 0; } }
@keyframes care-page-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .reveal.motion-pending { opacity: 1; }
  .photo-motion-active { animation: none; transform: none; }
  .card:hover .card__icon, .btn:hover > svg { transform: none; }
  .hero__inner > * { animation: none; }
  .faq-item summary::after, .nav a::after, .btn, .card, .job, .chip { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}