/* ============================================================
   Tamarack Medical Clinic — Motion
   Restrained, purposeful movement only: a soft page transition,
   a scroll reveal for content sections, header elevation on scroll,
   and gentle hover affordance on interactive elements. Nothing here
   fights the system's calm, no-gradient aesthetic. Fully disabled
   under prefers-reduced-motion.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  /* Page-to-page transition (route change) */
  .tmc-page-enter {
    animation: tmc-fade-up 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes tmc-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }

  /* Scroll reveal for section blocks */
  .tmc-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }

  .tmc-reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Mobile menu: soft slide-down instead of an instant snap */
  .tmc-mobile-nav-menu {
    animation: tmc-menu-open 0.22s ease-out;
    transform-origin: top;
  }

  @keyframes tmc-menu-open {
    from { opacity: 0; transform: scaleY(0.96) translateY(-4px); }
    to { opacity: 1; transform: none; }
  }

  /* Photography — a quiet zoom on hover, never on touch devices */
  @media (hover: hover) {
    .tmc-photo-frame { overflow: hidden; }
    .tmc-photo-frame img { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
    .tmc-photo-frame:hover img { transform: scale(1.035); }

    /* "Learn more ›" links — the chevron nudges forward on hover */
    .tmc-chevron { transition: transform 0.18s ease; }
    .tmc-text-link:hover .tmc-chevron { transform: translateX(3px); }
  }
}

/* Header elevation on scroll — kept outside the reduced-motion guard since
   it's a static shadow toggle, not an animation. */
.tmc-site-header > header {
  transition: box-shadow 0.25s ease;
}
.tmc-site-header.tmc-header-scrolled > header {
  box-shadow: 0 2px 20px rgba(15, 31, 61, 0.08);
}