/* =========================================================================
   Village Butchers — motion layer
   Everything here only runs when the visitor hasn't asked their device to
   reduce motion, and only once js/motion.js has added .motion to <html>.
   Without JavaScript, or with reduced motion, the page is simply static.
   Only opacity and transforms move, so nothing shifts the layout.
   ========================================================================= */

:root {
  --m-ease: cubic-bezier(.16, 1, .3, 1);        /* long, soft ease-out */
  --m-spring: cubic-bezier(.34, 1.45, .64, 1);  /* small overshoot */
  --m-dist: 28px;
  --m-step: 75ms;                               /* stagger between siblings */
}

/* ---------- First screen: the shop opens up ----------
   Sign board settles → logo turns into place → name rises → awning edge
   drops → the window blind lifts on the photo → details follow → the phone
   icon rings once. About two seconds end to end, then everything is still. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-c__sign { animation: m-board .8s var(--m-ease) both; }
  .js .hero-c__roundel { animation: m-roundel 1.2s var(--m-spring) .15s both; }
  .js .hero-c__title { animation: m-rise 1s var(--m-ease) .25s both; }
  .js .hero-c__where { animation: m-slide-in 1s var(--m-ease) .45s both; }
  .js .hero-c__awning::after { animation: hc-drop .9s var(--m-ease) .55s both; }
  .js .hero-c__window { animation: m-fade .5s ease .4s both; }
  .js .hero-c__photo { animation: m-blind 1.1s cubic-bezier(.65, 0, .35, 1) .45s both; }
  .js .hero-c__photo img { animation: m-settle 2.4s var(--m-ease) .45s both; }
  .js .hero-c__panel > * { animation: m-rise .9s var(--m-ease) both; }
  .js .hero-c__panel > :nth-child(1) { animation-delay: .8s; }
  .js .hero-c__panel > :nth-child(2) { animation-delay: .9s; }
  .js .hero-c__panel > :nth-child(3) { animation-delay: 1s; }
  .js .hero-c__panel > :nth-child(4) { animation-delay: 1.1s; }
  .js .hero-c .btn--primary .icon { animation: m-ring .7s ease-in-out 2.1s 1 both; }
  .js .hero-c .rating .stars svg { animation: m-star .5s var(--m-spring) both; }
  .js .hero-c .rating .stars svg:nth-child(1) { animation-delay: 1.25s; }
  .js .hero-c .rating .stars svg:nth-child(2) { animation-delay: 1.32s; }
  .js .hero-c .rating .stars svg:nth-child(3) { animation-delay: 1.39s; }
  .js .hero-c .rating .stars svg:nth-child(4) { animation-delay: 1.46s; }
  .js .hero-c .rating .stars svg:nth-child(5) { animation-delay: 1.53s; }
  /* Gentle depth on large screens: the photo drifts a little slower than the page */
  .hero-c__photo img { translate: 0 var(--m-par, 0px); }
}
@keyframes m-board { from { opacity: 0; translate: 0 -12px; } to { opacity: 1; translate: 0 0; } }
@keyframes m-roundel { from { opacity: 0; rotate: -110deg; scale: .7; } to { opacity: 1; rotate: 0deg; scale: 1; } }
@keyframes m-rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes m-slide-in { from { opacity: 0; translate: 18px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-blind { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes m-settle { from { scale: 1.16; } to { scale: 1.06; } }
@keyframes m-star { from { opacity: 0; scale: .3; rotate: -40deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }

/* ---------- Micro-interactions (hover & press) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out), translate .25s var(--m-ease), box-shadow .25s var(--m-ease), transform .15s var(--ease-out); }
  @media (hover: hover) {
    .btn:hover { translate: 0 -2px; }
    .btn--primary:hover { box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 12px 26px rgb(35 86 197 / .34); }
    .btn:hover .icon { animation: m-nudge .5s var(--m-ease); }
    a[href^="tel:"]:hover .icon { animation: m-ring .6s ease-in-out; }
    .fascia__call { transition: background-color .2s var(--ease-out), translate .25s var(--m-ease), box-shadow .25s var(--m-ease); }
    .fascia__call:hover { translate: 0 -1px; box-shadow: 0 8px 20px rgb(0 0 0 / .25); }
    .review { transition: translate .35s var(--m-ease), box-shadow .35s var(--m-ease); }
    .review:hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px var(--paper-3), var(--shadow-2); }
    .board__photo img, .tray__plate img { transition: scale .6s var(--m-ease); }
    .board__item:hover .board__photo img, .tray:hover .tray__plate img { scale: 1.07; }
    .score__link .icon, .review--cta a .icon { transition: translate .3s var(--m-ease); }
    .score__link:hover .icon, .review--cta a:hover .icon { translate: 3px -3px; }
    .footer__roundel { transition: rotate 1.2s var(--m-ease); }
    .footer__roundel:hover { rotate: -12deg; }
  }
  .btn:active { translate: 0 0; }
}
@keyframes m-nudge { 0% { translate: 0 0; } 40% { translate: 3px 0; } 100% { translate: 0 0; } }
@keyframes m-ring { 0%, 100% { rotate: 0deg; } 20% { rotate: -14deg; } 40% { rotate: 12deg; } 60% { rotate: -8deg; } 80% { rotate: 5deg; } }

/* ---------- Live status: the dot breathes a few times, then rests ---------- */
@media (prefers-reduced-motion: no-preference) {
  .status-pill__dot, .topstrip__status { position: relative; }
  .status-pill.is-open .status-pill__dot::after,
  .status-pill.is-soon .status-pill__dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: currentColor; color: var(--open);
    animation: m-ping 1.8s var(--m-ease) 1.4s 4 both;
  }
  .status-pill.is-soon .status-pill__dot::after { color: #c77700; }
}
@keyframes m-ping { 0% { scale: 1; opacity: .55; } 80%, 100% { scale: 2.8; opacity: 0; } }

/* ---------- Scroll reveals ---------- */
@media (prefers-reduced-motion: no-preference) {
  .motion [data-reveal] {
    opacity: 0; translate: 0 var(--m-dist);
    transition: opacity .7s var(--m-ease), translate .9s var(--m-ease), scale .9s var(--m-ease), rotate 1s var(--m-spring);
    transition-delay: calc(var(--i, 0) * var(--m-step) + var(--d, 0ms));
  }
  .motion [data-reveal].is-in { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; }
  .motion [data-reveal="fade"] { translate: 0 0; }
  .motion [data-reveal="scale"] { translate: 0 0; scale: .95; }
  .motion [data-reveal="left"] { translate: calc(-1 * var(--m-dist)) 0; }
  .motion [data-reveal="right"] { translate: var(--m-dist) 0; }
  /* The old C. Fern sign swings in on its hooks, then the new sign rises into place */
  .motion [data-reveal="swing"] { translate: 0 -18px; rotate: -7deg; transform-origin: 30% 0; }
  .motion [data-reveal="rise"] { translate: 0 44px; --d: 380ms; }
  /* Footer roundel turns into place */
  .motion [data-reveal="spin"] { translate: 0 0; rotate: -120deg; scale: .85; }
  /* Hours rows cascade */
  .motion .hours tr[data-reveal] { translate: -14px 0; }
}

/* ---------- Map: pin drops onto the shop, callout pops ---------- */
@media (prefers-reduced-motion: no-preference) {
  .motion .map .map__pin { opacity: 0; translate: 0 -70px; transition: translate .8s var(--m-spring) .25s, opacity .3s ease .25s; }
  .motion .map .map__shadow { opacity: 0; scale: .3; transform-box: fill-box; transform-origin: center; transition: opacity .5s ease .5s, scale .8s var(--m-spring) .5s; }
  .motion .map .map__callout { opacity: 0; scale: .6; transform-box: fill-box; transform-origin: 100% 100%; transition: opacity .35s ease .95s, scale .6s var(--m-spring) .95s; }
  .motion .map.is-in .map__pin { opacity: 1; translate: 0 0; }
  .motion .map.is-in .map__shadow { opacity: .25; scale: 1; }
  .motion .map.is-in .map__callout { opacity: 1; scale: 1; }
}

/* ---------- Print: always show everything ---------- */
@media print {
  .motion [data-reveal], .motion .map .map__pin, .motion .map .map__callout { opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important; }
}