/* Shared motion layer for the inner pages (Menu, Catering, About, Contact).
   Paired with site-motion.js. The home page has its own home-motion.* files.
   Uses the individual `translate` / `scale` properties so it composes with the
   transforms already set by each page's stylesheet. */

:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-red: #b52331;
  --motion-gold: #ffad32;
}

/* ---------- Scroll progress bar and header shadow ---------- */
.motion-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 3px;
  background: linear-gradient(90deg, var(--motion-red), var(--motion-gold));
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll-progress, 0));
  pointer-events: none;
}
.header {
  transition: background .25s, box-shadow .25s;
}
.motion-scrolled .header {
  box-shadow: 0 10px 30px -18px #0009;
}

/* ---------- Page heroes: staggered entrance ---------- */
.motion-ready :is(.page-hero, .editorial-hero-content, .about-intro, .contact-hero) > :not(h1) {
  animation: motion-rise .9s var(--motion-ease) both;
  animation-delay: calc(.55s + var(--hero-i, 0) * .12s);
}
.motion-ready :is(.page-hero, .editorial-hero-content, .about-intro, .contact-hero) > .eyebrow:first-child,
.motion-ready :is(.page-hero, .editorial-hero-content, .about-intro, .contact-hero) > .about-kicker:first-child {
  animation-delay: .1s;
}
/* Hold the headline until the script splits it; show it anyway if the script never runs. */
.motion-ready :is(.page-hero, .editorial-hero-content, .about-intro, .contact-hero) > h1:not(:has(.motion-line)) {
  animation: motion-rise .6s 1.2s both;
}

.motion-line {
  display: block;
  overflow: hidden;
  padding-bottom: .06em;
}
.motion-line > span {
  display: inline-block;
  animation: motion-line-up 1s var(--motion-ease) both;
  animation-delay: calc(.2s + var(--line, 0) * .14s);
}
@keyframes motion-line-up {
  from { translate: 0 110%; }
  to { translate: 0 0; }
}
@keyframes motion-rise {
  from { opacity: 0; translate: 0 24px; }
  to { opacity: 1; translate: 0 0; }
}

/* ---------- Buttons: shine sweep and arrow nudge ---------- */
:is(.button, .about-button, .contact-btn, .modality-action a, .package-card a) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: translate .25s var(--motion-ease), box-shadow .25s, background-color .2s, color .2s;
}
:is(.button, .about-button, .contact-btn, .modality-action a, .package-card a)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, #ffffff60 50%, transparent 70%);
  translate: -120% 0;
  transition: translate .7s var(--motion-ease);
  pointer-events: none;
}
:is(.button, .about-button, .contact-btn, .modality-action a, .package-card a):hover::after {
  translate: 120% 0;
}
:is(.button, .about-button, .contact-btn, .modality-action a, .package-card a):hover {
  translate: 0 -2px;
  box-shadow: 0 12px 24px -12px #0008;
}
:is(.button, .about-button, .contact-btn, .about-text-link, .contact-link, .modality-action a) [aria-hidden="true"] {
  display: inline-block;
  transition: translate .3s var(--motion-ease);
}
:is(.button, .about-button, .contact-link, .modality-action a):hover [aria-hidden="true"] {
  translate: 3px -3px;
}
:is(.contact-btn, .about-text-link):hover [aria-hidden="true"] {
  translate: 0 3px;
}

/* ---------- Cards: lift and shadow ---------- */
:is(.modality-card, .package-card, .contact-routes a, .menu-item) {
  transition: translate .4s var(--motion-ease), box-shadow .4s var(--motion-ease);
}
:is(.modality-card, .package-card, .contact-routes a):hover {
  translate: 0 -6px;
  box-shadow: 0 24px 40px -24px #3a0a0ecc;
}
.menu-item:hover {
  translate: 0 -3px;
}
.contact-routes a b {
  display: inline-block;
  transition: translate .3s var(--motion-ease), rotate .3s var(--motion-ease);
}
.contact-routes a:hover b {
  translate: 3px -3px;
}

/* Menu category chips. */
.category-selector a {
  transition: background-color .2s, color .2s, translate .25s var(--motion-ease);
}
.category-selector a:hover {
  translate: 0 -2px;
}

/* ---------- Photos: subtle zoom on hover ---------- */
:is(.modality-card-media, .contact-location-photo, .editorial-photo) {
  overflow: hidden;
}
:is(.modality-card-media, .contact-location-photo, .editorial-photo) img {
  transition: scale 1.2s var(--motion-ease);
}
:is(.modality-card, .contact-location-photo, .editorial-photo):hover img {
  scale: 1.05;
}

/* ---------- Scroll reveal ---------- */
.motion-ready [data-reveal] {
  opacity: 0;
  translate: 0 36px;
  transition:
    opacity .9s var(--motion-ease),
    translate .9s var(--motion-ease),
    clip-path 1.1s var(--motion-ease),
    box-shadow .4s var(--motion-ease),
    background-color .2s;
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
}
.motion-ready [data-reveal="left"] { translate: -48px 0; }
.motion-ready [data-reveal="right"] { translate: 48px 0; }
.motion-ready [data-reveal="photo"] {
  translate: 0 0;
  clip-path: inset(12% 8% 12% 8% round 10px);
}
.motion-ready [data-reveal].is-revealed {
  opacity: 1;
  translate: 0 0;
  clip-path: inset(0 0 0 0 round 0);
}
/* Hover lifts must win over the settled reveal position. */
.motion-ready :is(.modality-card, .package-card, .contact-routes a).is-revealed:hover {
  translate: 0 -6px;
}
.motion-ready .menu-item.is-revealed:hover {
  translate: 0 -3px;
}

/* ---------- Reduced motion: keep the polish, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .motion-ready :is(.page-hero, .editorial-hero-content, .about-intro, .contact-hero) > *,
  .motion-line > span {
    animation: none !important;
  }
  .motion-ready [data-reveal] {
    opacity: 1;
    translate: none;
    clip-path: none;
    transition: none;
  }
  :is(.modality-card, .package-card, .contact-routes a, .menu-item, .category-selector a):hover,
  .motion-ready :is(.modality-card, .package-card, .contact-routes a, .menu-item).is-revealed:hover {
    translate: none;
  }
}