/* Calm, finite interactions. No parallax, scroll hijacking or looping decorations. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: 220ms;
  --motion-gentle: 420ms;
}
.button {
  transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease);
}
.button svg, .text-link > span[aria-hidden], .brand-sun, .care-icon,
.modality-top > svg, .reminder > svg {
  transition: transform var(--motion-gentle) var(--motion-ease);
  transform-origin: center;
}
.care-card, .modality-card, .reminder {
  transition: transform var(--motion-gentle) var(--motion-ease),
    box-shadow var(--motion-gentle) ease, border-color var(--motion-fast) ease;
}
.text-link, .footer-credit a, .contact-email, .contact-instagram, summary {
  transition: color var(--motion-fast) ease, text-decoration-color var(--motion-fast) ease,
    text-underline-offset var(--motion-fast) ease;
}
.main-nav > a:not(.button) { position: relative; }
.main-nav > a:not(.button)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 6px;
  height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--motion-fast) var(--motion-ease);
}
.main-nav > a:not(.button):hover { text-decoration: none; }
.main-nav > a:not(.button):focus-visible::after { transform: scaleX(1); }
.button:focus-visible { box-shadow: 0 5px 14px #35483324; }
.modality-card:focus-within { border-color: #859377; box-shadow: 0 8px 22px #352f290c; }
.text-link:focus-visible, .footer-credit a:focus-visible { text-underline-offset: 7px; }

/* Fixed vector decorations: never use a platform emoji or font glyph. */
.note-spark, .pause-doodle { width: 1em; height: 1em; stroke-width: 2.5; }

/* FAQ height and opacity are animated in faq.js, in both directions. */
.faq-panel { min-width: 0; }
.faq-list summary[aria-expanded="false"]::after { content: '+'; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero-photo img { transition: transform 700ms var(--motion-ease); }
  .button:active { transform: translateY(0) scale(.985); }
  @media (max-width: 800px) {
    .js .main-nav.is-open { animation: sol-menu-in 200ms var(--motion-ease); }
    @keyframes sol-menu-in {
      from { opacity: .5; transform: translateY(-6px); }
      to { opacity: 1; transform: translateY(0); }
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .button:hover { transform: translateY(-2px); box-shadow: 0 7px 18px #35483324; }
    .button:hover svg, .button:focus-visible svg { transform: translate(2px, -2px); }
    .text-link:hover > span[aria-hidden] { transform: translate(2px, -2px); }
    .hero-actions .text-link:hover > span[aria-hidden] { transform: translateY(3px); }
    .care-card:hover, .modality-card:hover { transform: translateY(-4px); border-color: #a3ab94; box-shadow: 0 12px 28px #352f2910; }
    .reminder:hover { transform: translateY(-4px); box-shadow: 0 12px 28px #352f2910; }
    .care-card:hover .care-icon, .modality-card:hover .modality-top > svg,
    .reminder:hover > svg { transform: rotate(-5deg); }
    .brand:hover .brand-sun { transform: rotate(18deg); }
    .hero-art:hover .hero-photo img { transform: scale(1.018); }
    .main-nav > a:not(.button):hover::after { transform: scaleX(1); }
    .footer-credit a:hover, .contact-email:hover, .contact-instagram:hover { text-underline-offset: 7px; }
  }
}
/* Avoid persistent hover movement on touchscreens. Keep color/focus feedback. */
@media (hover: none) { .button:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .button:hover, .button:active, .button:focus-visible { transform: none; }
  [data-reveal], .faq-list { opacity: 1 !important; translate: none !important; }
}
@media print {
  [data-reveal], .faq-list { opacity: 1 !important; translate: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* The scroll controller stages its own paused animation, not hidden CSS classes.
   Missing or stale CSS therefore cannot disable it or strand invisible content. */