/* --------------------------------------------------------------------------
   Motion system

   Rules this file encodes:
   1. Only opacity and transform animate. Nothing animates layout.
   2. Entry motion happens once, never on re-scroll, never above 700 ms.
   3. Never moves: the header, the sticky call bar, phone numbers, opening
      hours, the open/closed status dot. Facts hold still. The call pill
      moves only when it is opened, and only itself.
   4. Hover motion is gated behind `hover: hover` so it never fires on touch.
   5. `prefers-reduced-motion` removes all of it, including the smooth scroll.
   -------------------------------------------------------------------------- */

/* Scroll reveal.

   Nothing is hidden by the stylesheet alone. On load JS arms only the blocks
   that are still below the fold and then reveals them as they come into view.
   If the bundle never arrives — blocked, failed, disabled — the page simply
   stays as the server rendered it: complete and readable. */
.reveal[data-armed] {
  opacity: 0;
  transform: translate3d(0, 1.15rem, 0);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal[data-armed][data-in] { opacity: 1; transform: none; }

/* Hero entrance: plays immediately on load, staggered by index. */
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 1.4rem, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hero-settle {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

.enter {
  opacity: 0;
  animation: rise 750ms var(--ease) forwards;
  animation-delay: var(--enter-delay, 0ms);
}

.hero__media img { animation: hero-settle 1600ms var(--ease) forwards; }
.hero__scrim { animation: fade 900ms var(--ease) forwards; }

/* Hover / press states, pointer devices only. */
@media (hover: hover) and (pointer: fine) {
  .card__media img {
    transition: transform var(--slow) var(--ease);
  }
  .card:hover .card__media img,
  .card:focus-within .card__media img {
    transform: scale(1.045);
  }
  .card {
    transition: border-color var(--base) ease, background var(--base) ease,
      transform var(--base) var(--ease);
  }
  .card:hover { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .reveal[data-armed],
  .enter { opacity: 1 !important; transform: none !important; }
}