/* 07-reveal-and-tablet-breakpoint.css — the scroll-reveal fade (.reveal,
   .reveal-img), then the RESPONSIVE breakpoint notes and the 900px .text-columns
   override, which must load after 04. The phone blocks the notes name (640px
   "large phone", 480px "phone") are in 13, and so is this 900px rule's
   @container shell copy. */

/* REVEAL ANIMATIONS */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 1000ms var(--ease-out), transform 1000ms var(--ease-out);
  }
  .reveal.is-revealed { opacity: 1; transform: none; }
  .reveal--delay-1 { transition-delay:  80ms; }
  .reveal--delay-2 { transition-delay: 160ms; }

  .reveal-img {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 1000ms var(--ease-out), transform 1200ms var(--ease-out);
  }
  .reveal-img.is-revealed { opacity: 1; transform: none; }
}

/* FOOTER — lives in css/footer.css (shared with /op and /privacy/). */

/* ===========================================================
   RESPONSIVE
   Breakpoints: 900px (tablet), 640px (large phone), 480px (phone)
   =========================================================== */

/* — tablet — */
@media (max-width: 900px) {
  .text-columns { grid-template-columns: 1fr; }


}