/* ============================================================
   Pastel Motion Kit — engine stylesheet
   Grid-first layout, flex components, tokenised throughout.
   Visual identity: Dona Helena. All motion: transform/opacity.
   Brand tokens (colors, fonts) are overridden by tokens.css.
   ============================================================ */

:root {
  --white: #ffe5d9;
  --black: #854569;
  --blue:  #d8e2dc;
  --pink:  #ffcad4;

  --main-font: "PT Sans", sans-serif;
  --second-font: "Titan One", sans-serif;

  --display-1: 10rem;
  --display-2: 3.8rem;
  --h2: 2.2rem;
  --p: 1.1rem;
  --p1: 1.4rem;

  --pad-page: 2rem;
  --pad-box: 2rem;
  --pad-s: 1rem;
  --pad-m: 4rem;
  --pad-l: 8rem;
  --pad-section: 12rem;
  --radius: 4rem;

  --w-page: 1700px;
  --w-narrow: 1200px;
}

@media (max-width: 991px) {
  :root { --display-1: 7rem; --display-2: 3rem; --radius: 2rem; }
}
@media (max-width: 767px) {
  :root {
    --display-1: 5rem; --display-2: 2.6rem; --h2: 1.8rem;
    --pad-page: 1rem; --pad-l: 5rem; --pad-m: 3rem; --pad-section: 8rem;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--blue);
  font-family: var(--main-font);
  color: var(--black);
  font-size: var(--p);
  line-height: 1.4;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p { line-height: 120%; }
address { font-style: normal; }

.page { overflow: clip; }

/* ---------- typography ---------- */
.display-1 { font-family: var(--second-font); font-size: var(--display-1); line-height: 100%; text-align: center; }
.display-2 { font-family: var(--second-font); font-size: var(--display-2); line-height: 110%; }
.h2-styling { font-size: var(--h2); font-weight: 700; line-height: 120%; }
.p1 { font-size: var(--p1); line-height: 120%; }
.p1.bold { font-weight: 700; }
.paragraph { font-size: var(--p); text-decoration: none; color: var(--black); }
.paragraph.bold { font-weight: 700; }
.paragraph.link { transition: transform .2s; display: inline-block; will-change: transform; }
.paragraph.link:hover { transform: translateX(.1rem) scale(1.06); }

/* ---------- sections: grid-centred content column ---------- */
.hours, .menu, .find-us {
  display: grid;
  grid-template-columns: minmax(0, var(--w-page));
  justify-content: center;
  padding: var(--pad-section) var(--pad-page) 0;
}
.section-heading { padding-bottom: var(--pad-l); }

/* ---------- navbar ---------- */
.navbar { position: absolute; inset: 0 0 auto; z-index: 1000; }
.nav-menu {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem var(--pad-page) 0;
}
.menu-left, .menu-right { display: flex; align-items: center; gap: .5rem; }
.nav-link { padding: var(--pad-s); color: var(--black); font-weight: 700; text-decoration: none; }

.social-button {
  border-radius: var(--radius);
  background: var(--pink);
  color: var(--black);
  display: flex;
  padding: .8rem;
  transition: transform .2s;
}
.social-button:hover { transform: scale(.95); }
.social-button svg { width: 1.3rem; height: 1.3rem; }

/* ---------- buttons (text-swap hover) ---------- */
.b1 {
  border-radius: var(--radius);
  background: var(--pink);
  color: var(--black);
  font-size: var(--p);
  font-weight: 700;
  padding: .7rem 1.1rem .8rem;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.button-text-wrapper { display: block; height: 1.2rem; position: relative; z-index: 2; }
.button-text { display: block; }
.button-text-hover { position: absolute; inset: 0 auto auto 0; opacity: 0; }
.button-overlay {
  position: absolute; inset: 0; z-index: 1;
  border-radius: var(--radius);
  background: var(--blue);
  display: none;
}
.b1-map .button-overlay { background: var(--white); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, var(--w-narrow));
  justify-content: center;
  row-gap: var(--pad-l);
  padding: 6vw var(--pad-page) 0;
}
.hero-preloader {
  position: absolute; inset: 0;
  z-index: 4;
  background: var(--blue);
  transform-origin: bottom;
  display: none;
}
.hero-title-container { position: relative; }
.hero-tag {
  position: absolute; inset: auto 16% -18% auto;
  z-index: 2;
  padding: 1.5rem var(--pad-box);
  border-radius: var(--radius);
  background: var(--pink);
  font-size: var(--p1);
  font-weight: 700;
  line-height: 110%;
  text-align: center;
  transform: rotate(-15deg);
}
.hero-media {
  position: relative;
  z-index: 2;
  height: 55vw;
  border-radius: var(--radius);
  overflow: hidden;
}
.hero-media img, .hero-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* video slots fade in over their poster image once playable */
.slot-video { opacity: 0; transition: opacity .8s; }
.slot-video.is-playing { opacity: 1; }

/* hero waves */
.color-overlay-hero {
  position: absolute; inset: 40rem 0 0;
  pointer-events: none;
}
.color-wave-1, .color-wave-2 {
  position: absolute;
  width: 100%; height: auto;
  display: block;
}
.color-wave-1 { z-index: 1; color: var(--pink); bottom: 15vw; }
.color-wave-2 { z-index: 2; color: var(--blue); bottom: -1rem; }

/* ---------- opening hours ---------- */
.hours {
  background: var(--pink);
  position: relative;
  margin-top: -16vw;
  min-height: 100vh;
  padding-top: calc(var(--pad-section) + 16vw);
  padding-bottom: var(--pad-box);
  overflow: hidden;
}
.opening-list {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: end;
  gap: var(--pad-box);
}
.opening-item {
  border-radius: var(--radius);
  background: var(--white);
  padding: var(--pad-m);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--pad-s);
  transform: rotate(-5deg);
}
.opening-item:nth-child(2n) { background: var(--blue); transform: rotate(5deg); }

/* ---------- menu ---------- */
.menu { background: var(--pink); position: relative; row-gap: var(--pad-box); }
.menu-card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pad-l);
  padding: var(--pad-m) var(--pad-box);
  border-radius: var(--radius);
  background: var(--blue);
}
.menu-card.alt { background: var(--white); }
.menu-items { display: flex; flex-direction: column; gap: var(--pad-box); }
.list-menu { display: flex; flex-direction: column; gap: var(--pad-box); }
.item-menu {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--pad-box);
  align-items: center;
}
.item-menu h3 { grid-area: 1 / 1; }
.item-menu p  { grid-area: 2 / 1; }
.item-menu .price { grid-area: 1 / 2 / 3 / 3; white-space: nowrap; font-size: var(--p1); }
.menu-media {
  position: sticky; top: 5vh;
  align-self: start;
  height: min(90vh, 44rem);
  min-height: 50vh;
  border-radius: var(--radius);
  overflow: hidden;
}
.menu-media img, .menu-media video,
.location-media img, .location-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.color-wave-bottom {
  position: absolute; bottom: -15vw;
  left: 0; width: 100%; height: auto;
  z-index: 1;
  color: var(--pink);
  transform: rotate(180deg);
  pointer-events: none;
}

/* ---------- about (pinned gallery) ---------- */
.about { min-height: 180vh; padding-top: var(--pad-section); position: relative; }
.about-sticky {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: var(--pad-box);
  text-align: center;
  padding-inline: var(--pad-page);
}
.about-title { z-index: 7; }
.description-about { max-width: 46rem; z-index: 2; }
.about-img {
  position: absolute;
  z-index: 3;
  width: 10vw; height: 10vw;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
}
.about-img-1 { left: 18vw; top: 24vh; }
.about-img-4 { right: 14vw; bottom: 22vh; }
.about-img-5 { left: 15vw; bottom: 18vh; }

/* ---------- reviews marquee ---------- */
.reviews-band { overflow: hidden; margin-top: -4rem; }
.reviews { display: flex; }
.list-reviews {
  display: flex; align-items: stretch;
  gap: var(--pad-box);
  padding-right: var(--pad-box);
  flex: none;
}
.review-card {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--pad-box);
  width: 21rem;
  padding: var(--pad-m) var(--pad-box);
  border-radius: var(--radius);
  background: var(--pink);
  white-space: normal;
}
.review-card .paragraph { font-size: 1rem; }
.stars { color: #ffa600; font-size: 1.4rem; line-height: 1; letter-spacing: .1em; }

/* ---------- find us ---------- */
.find-us { padding-bottom: var(--pad-l); }
.location-card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pad-l);
  padding: var(--pad-m) var(--pad-box);
  border-radius: var(--radius);
  background: var(--pink);
}
.info-location {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: var(--pad-box);
  min-height: 30vw;
}
.location-media {
  position: relative;
  min-height: 30vw;
  border-radius: var(--radius);
  overflow: hidden;
}

/* ---------- footer ---------- */
.footer {
  position: relative;
  margin-top: var(--pad-section);
  background: var(--blue);
  display: grid;
  grid-template-columns: minmax(0, var(--w-narrow));
  justify-content: center;
}
.color-wave-footer {
  position: absolute; top: -5vw; left: 0;
  width: 100%; height: auto;
  z-index: 2;
  color: var(--blue);
  pointer-events: none;
}
.footer-inner {
  z-index: 5;
  display: flex; flex-direction: column;
  gap: var(--pad-l);
  padding: var(--pad-section) var(--pad-page) var(--pad-m);
}
.footer-top { display: flex; flex-direction: column; align-items: center; gap: var(--pad-m); }
.footer-socials { display: flex; gap: var(--pad-s); }
.footer-middle {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: var(--pad-box);
}
.footer-links-block { display: flex; flex-direction: column; gap: .5rem; }
.footer-title { padding-bottom: var(--pad-s); }
.list-openings-footer { display: flex; flex-direction: column; gap: .5rem; }
.list-openings-footer li { display: flex; gap: var(--pad-s); align-items: center; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--pad-box); }

/* ---------- mobile sticky action bar ---------- */
.mobile-action-bar {
  display: none;
  position: fixed;
  left: .75rem; right: .75rem; bottom: .75rem;
  z-index: 900;
  gap: .5rem;
}
.mobile-action {
  flex: 1;
  display: flex; justify-content: center; align-items: center;
  min-height: 48px;
  border-radius: var(--radius);
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .hero { padding-top: 25vw; }
  .hero-media { height: 90vw; }
  .hero-tag { bottom: -32%; right: 5%; }
  .color-wave-2 { display: none; }
  .menu-card, .location-card { grid-template-columns: 1fr; }
  .menu-media { min-height: 35rem; }
  .opening-item { padding: var(--pad-box); }
  .about-img { width: 15vw; height: 15vw; }
}

@media (max-width: 767px) {
  .hero { padding-top: 30vw; }
  .hero-media { justify-self: center; width: 85vw; height: 110vw; }
  .hero-tag { bottom: -46%; right: 4%; }
  .opening-list { flex-direction: column; align-items: center; gap: .5rem; max-width: 85vw; margin-inline: auto; }
  .opening-item { align-self: flex-start; }
  .opening-item:nth-child(2n) { align-self: flex-end; }
  .footer-middle { display: flex; flex-wrap: wrap; }
  .mobile-action-bar { display: flex; }
  .footer-inner { padding-bottom: 6rem; }
}

@media (max-width: 479px) {
  .hero { padding-top: 35vw; }
  .hero-media { width: 100%; height: 35rem; }
  .hero-tag { padding: 1rem var(--pad-s); font-size: var(--p); bottom: -25%; right: -1%; }
  .hours { margin-top: -100vw; padding-top: calc(var(--pad-section) + 100vw); }
  .color-overlay-hero { inset: 100vw 0 0; }
  .color-wave-1 { bottom: 98vw; }
  .display-1 { line-height: 5.5rem; }
  .nav-link { display: none; }
  .menu-card, .location-card { padding-top: var(--pad-box); padding-bottom: var(--pad-box); }
  .item-menu { column-gap: var(--pad-s); }
  .about-img { width: 20vw; height: 20vw; }
  .footer-middle { flex-direction: column; align-items: center; gap: var(--pad-m); }
  .footer-links-block { align-items: center; gap: .2rem; }
  .footer-bottom { flex-wrap: wrap; gap: 1rem .5rem; }
  .list-reviews { gap: var(--pad-s); padding-right: var(--pad-s); }
  .review-card { width: 17rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.has-js :is(.hero-title-container, .hero-tag, .navbar, .hero-preloader,
    .color-wave-1, .color-wave-2, .hero-media, .about-img,
    [stagger-scroll], .opening-item, .about-title, .description-about) {
    visibility: visible !important;
  }
}