/* Visual polish and motion layer for the home page. Paired with home-motion.js.
   Uses the individual `translate` / `scale` properties so it composes with the
   transforms already set by the base stylesheets. */

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

/* ---------- Scroll progress bar ---------- */
.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: soft shadow once the page scrolls ---------- */
.header {
  transition: background .25s, box-shadow .25s;
}
.motion-scrolled .header {
  box-shadow: 0 10px 30px -18px #0009;
}

/* ---------- Hero ---------- */
.restaurant-hero-video.is-active {
  animation: motion-ken-burns 6s ease-out both;
}
@keyframes motion-ken-burns {
  from { scale: 1.12; }
  to { scale: 1; }
}

.restaurant-hero-overlay {
  background:
    radial-gradient(ellipse at 50% 45%, transparent 0, #0000 35%, #0007 100%),
    linear-gradient(180deg, #00000035, #00000065 55%, #000000a0) !important;
}

.restaurant-hero-content {
  translate: 0 var(--hero-shift, 0);
  opacity: var(--hero-fade, 1);
  will-change: translate, opacity;
}

.motion-ready .restaurant-hero-content > * {
  animation: motion-rise .9s var(--motion-ease) both;
}
.motion-ready .restaurant-hero-content > .eyebrow { animation-delay: .1s; }
.motion-ready .restaurant-hero-content > h1 { animation: none; }
/* Hold the headline until the script splits it; show it anyway if the script never runs. */
.motion-ready .restaurant-hero-content > h1:not(:has(.motion-line)) {
  animation: motion-rise .6s 1.2s both;
}
.motion-ready .restaurant-hero-content > p:not(.eyebrow) { animation-delay: .65s; }
.motion-ready .restaurant-hero-content > .button-row { animation-delay: .8s; }

/* Each headline line slides up from behind a mask. */
.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(.25s + var(--line, 0) * .14s);
}
.motion-line:nth-child(2) > span {
  color: var(--motion-gold);
}
@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; }
}

/* Scroll cue under the hero buttons. */
.motion-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  z-index: 2;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border: 2px solid #ffffffb0;
  border-radius: 14px;
  opacity: var(--hero-fade, 1);
  animation: motion-rise 1s 1.3s var(--motion-ease) both;
}
.motion-scroll-cue::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--motion-gold);
  animation: motion-scroll-dot 1.8s ease-in-out infinite;
}
@keyframes motion-scroll-dot {
  0% { opacity: 0; translate: 0 0; }
  30% { opacity: 1; }
  100% { opacity: 0; translate: 0 14px; }
}

/* ---------- Buttons: shine sweep and arrow nudge ---------- */
.restaurant-home :is(.button, .layered-promo-join, .featured-menu-cta, .featured-menu-order) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: translate .25s var(--motion-ease), box-shadow .25s, background-color .2s;
}
.restaurant-home :is(.button, .layered-promo-join, .featured-menu-cta)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, #ffffff70 50%, transparent 70%);
  translate: -120% 0;
  transition: translate .7s var(--motion-ease);
  pointer-events: none;
}
.restaurant-home :is(.button, .layered-promo-join, .featured-menu-cta):hover::after {
  translate: 120% 0;
}
.restaurant-home :is(.button, .layered-promo-join, .featured-menu-cta):hover {
  translate: 0 -2px;
  box-shadow: 0 12px 24px -12px #0008;
}
.restaurant-home :is(.button, .layered-promo-join, .featured-menu-cta, .home-visit-link, .home-paths a) [aria-hidden="true"],
.restaurant-home .home-paths a span {
  display: inline-block;
  transition: translate .3s var(--motion-ease);
}
.restaurant-home :is(.button, .layered-promo-join, .featured-menu-cta, .home-visit-link):hover [aria-hidden="true"] {
  translate: 3px -3px;
}

/* ---------- Featured menu cards: lift, shadow and tilt ---------- */
.restaurant-home .featured-menu-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform .4s var(--motion-ease), translate .4s var(--motion-ease);
}
.restaurant-home .featured-menu-card:hover {
  translate: 0 -6px;
}
.restaurant-home .featured-menu-photo {
  transition: box-shadow .4s var(--motion-ease);
}
.restaurant-home .featured-menu-card:hover .featured-menu-photo {
  box-shadow: 0 22px 40px -20px #3a0a0ecc;
}
.restaurant-home .featured-menu-photo img {
  transition: transform .7s var(--motion-ease) !important;
}

/* ---------- Home path links ---------- */
.restaurant-home .home-paths a {
  position: relative;
  transition: color .25s, padding-left .35s var(--motion-ease);
}
.restaurant-home .home-paths a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--motion-gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .5s var(--motion-ease);
}
.restaurant-home .home-paths a:hover {
  color: var(--motion-gold);
  padding-left: .5rem;
}
.restaurant-home .home-paths a:hover::before {
  transform: scaleX(1);
}
.restaurant-home .home-paths a:hover span {
  translate: 4px 0;
}

/* ---------- Chicanos Together: totopo bob ---------- */
.restaurant-home .melting-totopo {
  animation: motion-bob 3.2s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes motion-bob {
  0%, 100% { translate: 0 0; rotate: -4deg; }
  50% { translate: 0 -8%; rotate: 4deg; }
}

/* ---------- Photos: subtle zoom on hover ---------- */
.restaurant-home :is(.together-menu-photo, .layered-promo-desktop-photo, .layered-promo-mobile-photo) {
  overflow: hidden;
}
.restaurant-home :is(.together-menu-photo, .layered-promo-desktop-photo, .layered-promo-mobile-photo) img {
  transition: scale 1.2s var(--motion-ease);
}
.restaurant-home :is(.together-menu-card, .layered-promo-desktop, .layered-promo-mobile):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),
    transform .4s var(--motion-ease),
    box-shadow .25s,
    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="zoom"] { translate: 0 0; scale: .94; transition-property: opacity, scale; }
.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;
  scale: 1;
  clip-path: inset(0 0 0 0 round 0);
}
/* Hover lifts must win over the settled reveal position. */
.motion-ready .restaurant-home .featured-menu-card.is-revealed:hover {
  translate: 0 -6px;
}
.motion-ready .restaurant-home :is(.featured-menu-cta, .layered-promo-join).is-revealed:hover {
  translate: 0 -2px;
}

/* ---------- Reduced motion: keep the polish, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .restaurant-hero-video.is-active,
  .motion-ready .restaurant-hero-content > *,
  .motion-line > span,
  .motion-scroll-cue,
  .motion-scroll-cue::after,
  .restaurant-home .melting-totopo {
    animation: none !important;
  }
  .restaurant-hero-content { translate: none; opacity: 1; }
  .motion-ready [data-reveal] {
    opacity: 1;
    translate: none;
    scale: none;
    clip-path: none;
    transition: none;
  }
  .restaurant-home .featured-menu-card { transform: none; }
}