/* Dear Thoughts – Scroll Animations
   Hidden state only applies when JS is active (html.dt-js), so no-JS
   visitors always see full content. Reduced-motion visitors too. */

html.dt-js .section-head,
html.dt-js .card:not(.reveal),
html.dt-js .entry-content h2,
html.dt-js .entry-content h3,
html.dt-js .entry-content figure,
html.dt-js .entry-content > img,
html.dt-js .post-content h2,
html.dt-js .post-content h3,
html.dt-js .post-content figure,
html.dt-js .post-content > img,
html.dt-js .newsletter-band,
html.dt-js .site-footer .footer-col {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s ease-out, transform 0.65s ease-out;
  will-change: opacity, transform;
}

/* Reveal state: each selector carries .dt-in, so it always beats the
   matching hidden rule (equal or higher specificity). A single generic
   .dt-in rule is NOT enough — e.g. ".entry-content h2" outranks it and
   the element would stay invisible. Fixed in v1.0.1. */
html.dt-js .section-head.dt-in,
html.dt-js .card.dt-in:not(.reveal),
html.dt-js .entry-content h2.dt-in,
html.dt-js .entry-content h3.dt-in,
html.dt-js .entry-content figure.dt-in,
html.dt-js .entry-content > img.dt-in,
html.dt-js .post-content h2.dt-in,
html.dt-js .post-content h3.dt-in,
html.dt-js .post-content figure.dt-in,
html.dt-js .post-content > img.dt-in,
html.dt-js .newsletter-band.dt-in,
html.dt-js .site-footer .footer-col.dt-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html.dt-js .section-head,
  html.dt-js .card:not(.reveal),
  html.dt-js .entry-content h2,
  html.dt-js .entry-content h3,
  html.dt-js .entry-content figure,
  html.dt-js .entry-content > img,
  html.dt-js .post-content h2,
  html.dt-js .post-content h3,
  html.dt-js .post-content figure,
  html.dt-js .post-content > img,
  html.dt-js .newsletter-band,
  html.dt-js .site-footer .footer-col {
    opacity: 1;
    transform: none;
    transition: none;
  }
}