/* Calm, finite motion. Native scrolling and all content remain available. */
@media (prefers-reduced-motion: no-preference) {
  .button { transition: transform .28s ease, background-color .28s ease, box-shadow .28s ease; }
  .button .cta-icon { transition: transform .28s ease; }
  .header nav a { transition: color .25s ease; }
  .journey-number, .journey-step, .journey-select { transition: border-color .3s ease, background-color .3s ease, color .3s ease; }
  .testimonial, .package-card { transition: box-shadow .35s ease, border-color .35s ease; }
  .faq-items summary > span { transition: transform .28s ease; }
  .faq-items details[open] summary > span { transform: rotate(45deg); }
  .journey-steps.motion-track::before {
    transform-origin: left center;
    animation: timeline-connect-x 1.2s cubic-bezier(.22,.75,.25,1) both;
  }
  @keyframes timeline-connect-x { from { transform: scaleX(0); opacity: .35; } to { transform: scaleX(1); opacity: 1; } }
  @keyframes timeline-connect-y { from { transform: scaleY(0); opacity: .35; } to { transform: scaleY(1); opacity: 1; } }
  @media (max-width: 760px) {
    .journey-steps.motion-track::before {
      transform-origin: center top;
      animation-name: timeline-connect-y;
      animation-duration: .9s;
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .button:hover { box-shadow: 0 7px 18px #06392c16; }
    .testimonial:hover, .package-card:hover { border-color: #8dceb6; box-shadow: 0 12px 32px #06392c0d; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button:hover, .button:hover .cta-icon { transform: none; }
}

/* Build the existing illustrations in a short, one-time sequence. */
@property --ring-progress { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.stat-ring {
  --ring-progress: var(--share);
  background: conic-gradient(from -90deg, var(--accent) var(--ring-progress), #e7f4ed 0);
}
.confidence-bar i { transform-origin: center bottom; }
.mini-treatment-lines > i { transform-origin: left center; }
.triangle-signal { fill: none; stroke: #a3ffdd; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 8 110; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .optimization-icon { transition: transform .4s ease, box-shadow .4s ease; }
  .optimization-features li:hover .optimization-icon { transform: translateY(-3px); box-shadow: 0 9px 24px #00543c18; }
}