/* Levante editorial film treatment. The base stylesheet remains the static fallback. */
.page-progress {
  position: fixed;
  z-index: 32;
  top: calc(var(--ribbon-h) + var(--header-h));
  left: 0;
  width: 100%;
  height: 2px;
  background: #d8aa73;
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left center;
  pointer-events: none;
}

.story-stage,
.signature-stage {
  isolation: isolate;
}
.story-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent calc(33.333% - .5px), rgba(75, 69, 54, .065) 33.333%, transparent calc(33.333% + .5px)),
    linear-gradient(90deg, transparent calc(66.666% - .5px), rgba(75, 69, 54, .065) 66.666%, transparent calc(66.666% + .5px));
}

.story-scene--overture,
.signature-scene--overture {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.story-overture-copy,
.signature-overture-copy {
  width: min(100%, 1130px);
  margin: auto;
  position: relative;
  z-index: 2;
}
.story-overture-copy h2,
.signature-overture-copy h2 {
  font-size: clamp(80px, 9.4vw, 165px);
  line-height: .87;
  margin: 26px 0 28px;
}
.story-overture-copy h2 em,
.signature-overture-copy h2 em { color: var(--pomegranate); }
.story-overture-copy > p:last-child,
.signature-overture-copy > p:last-child {
  font-size: clamp(18px, 1.7vw, 26px);
  line-height: 1.35;
  color: var(--muted);
}

.menu-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #211b16;
}
.menu-film {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 54%;
  filter: saturate(.76) contrast(1.05);
  transform: scale(var(--menu-scale, 1.04));
  will-change: transform;
}
.menu-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(24, 19, 15, .91), rgba(24, 19, 15, .62) 45%, rgba(24, 19, 15, .48)),
    linear-gradient(180deg, rgba(13, 11, 9, .3), transparent 42%, rgba(13, 11, 9, .48));
}
.menu-stage-content { width: min(100%, 1510px); margin: auto; }
.menu-choice a {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(247, 241, 230, .3);
  background: rgba(238, 232, 218, .12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background .45s var(--ease), transform .55s var(--ease), border-color .45s var(--ease);
}
.menu-choice a::after {
  content: "";
  position: absolute;
  left: 27px;
  right: 27px;
  bottom: 23px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.menu-choice a:hover,
.menu-choice a:focus-visible {
  background: rgba(238, 232, 218, .23);
  border-color: rgba(247, 241, 230, .7);
  color: var(--cream);
  transform: translateY(-7px);
}
.menu-choice a:hover::after,
.menu-choice a:focus-visible::after { transform: scaleX(1); }
.menu-choice a+a { border-left: 1px solid rgba(247, 241, 230, .3); }

.signature-stage { padding: 0; }
.signature-kicker {
  position: absolute;
  z-index: 4;
  top: calc(var(--ribbon-h) + var(--header-h) + 30px);
  left: clamp(22px, 5.8vw, 110px);
  margin: 0;
  pointer-events: none;
}
.signature-scenes { width: 100%; margin: 0; }
.signature-scene {
  position: relative;
  display: block;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  background: var(--paper);
}
.signature-scene--overture { display: flex; }
.signature-media {
  position: absolute;
  z-index: 1;
  top: calc(var(--ribbon-h) + var(--header-h));
  left: 0;
  width: 100%;
  height: calc(100svh - var(--ribbon-h) - var(--header-h) - 94px);
  max-height: none;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
  background: var(--paper);
  overflow: hidden;
}
.signature-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--paper) 0%, var(--paper) 9%, transparent 20%, transparent 67%, rgba(238, 232, 218, .18) 72%, var(--paper) 100%);
}
.signature-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.97) contrast(1.03);
  transform: scale(var(--media-scale, 1));
  will-change: transform;
}
.signature-scene[data-scene="signature-bread"] .signature-media video { object-position: 50% 61%; }
.signature-scene[data-scene="signature-dips"] .signature-media video { object-position: 50% 57%; }
.signature-scene[data-scene="signature-table"] .signature-media video { object-position: 50% 52%; }
.signature-copy {
  position: absolute;
  z-index: 3;
  left: clamp(22px, 5.8vw, 110px);
  right: clamp(22px, 5.8vw, 110px);
  bottom: clamp(26px, 5vh, 55px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: clamp(35px, 6vw, 110px);
  max-width: none;
}
.signature-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(74px, 7vw, 130px);
  line-height: .82;
  white-space: nowrap;
}
.signature-copy h2 em { color: var(--pomegranate); }
.signature-aside { width: 33%; max-width: 390px; display: flex; flex-direction: column; gap: 14px; padding-bottom: 3px; }
.signature-aside p { max-width: none; margin: 0; font-size: clamp(17px, 1.45vw, 22px); line-height: 1.35; }
.signature-aside .text-button { min-width: 0; width: max-content; padding: 0 0 4px; }

.closing-stage {
  position: relative;
  isolation: isolate;
  background: #572a23;
}
.closing-film {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  filter: saturate(.72) brightness(.72);
  transform: scale(var(--closing-scale, 1.045));
  will-change: transform;
}
.closing-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(48, 21, 18, .77), rgba(70, 28, 23, .53)),
    linear-gradient(180deg, rgba(35, 15, 13, .36), transparent 42%, rgba(35, 15, 13, .58));
  transition: background .6s var(--ease);
}
.closing-stage[data-active-scene="closing-study"]::before {
  background: rgba(70, 28, 23, .88);
}
.closing-scenes { position: relative; z-index: 2; }
.closing-scene--image { align-items: center; text-align: center; }
.closing-scene--image h2 { max-width: 1300px; }

/* Damascene tilework frames the two text-only overtures; the center stays calm. */
.story-scene--overture,
.signature-scene--overture {
  position: relative;
  isolation: isolate;
}
.story-scene--overture::before,
.signature-scene--overture::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -3%;
  bottom: -3%;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  pointer-events: none;
  background: url("media/damascus-tile-pattern.webp") center / cover no-repeat;
  opacity: .3;
  -webkit-mask-image: radial-gradient(ellipse 29% 25% at center, transparent 0 70%, rgba(0, 0, 0, .38) 91%, #000 100%);
  mask-image: radial-gradient(ellipse 29% 25% at center, transparent 0 70%, rgba(0, 0, 0, .38) 91%, #000 100%);
  transform: scale(1.025);
}
.story-overture-copy,
.signature-overture-copy {
  z-index: 1;
  isolation: isolate;
}
.story-overture-copy::before,
.signature-overture-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -22%;
  bottom: -22%;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  pointer-events: none;
  background: radial-gradient(ellipse 48% 58% at center,
    rgba(238, 232, 218, .98) 0%,
    rgba(238, 232, 218, .94) 58%,
    rgba(238, 232, 218, .58) 82%,
    rgba(238, 232, 218, 0) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .story-scene--overture::before,
  .signature-scene--overture::before {
    animation: damascus-tile-drift 28s ease-in-out infinite alternate;
    will-change: transform;
  }
  @keyframes damascus-tile-drift {
    from { transform: scale(1.025) translate3d(0, 0, 0); }
    to { transform: scale(1.075) translate3d(-.35%, .25%, 0); }
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  @keyframes levante-type-rise {
    from { opacity: 0; clip-path: inset(0 0 100%); transform: translateY(30px); }
    to { opacity: 1; clip-path: inset(0 0 0); transform: translateY(0); }
  }
  html.is-motion-ready .hero-scene--intro.is-active .eyebrow { animation: levante-type-rise .85s .08s var(--ease) both; }
  html.is-motion-ready .hero-scene--intro.is-active h1 { animation: levante-type-rise 1.15s .16s var(--ease) both; }
  html.is-motion-ready .hero-scene--intro.is-active .hero-primary-cta { animation: levante-type-rise .95s .46s var(--ease) both; }
  html.is-motion-ready .story-scene--overture.is-active .story-overture-copy,
  html.is-motion-ready .signature-scene--overture.is-active .signature-overture-copy {
    animation: levante-type-rise 1s .06s var(--ease) both;
  }

  .story-content,
  .signature-scenes { overflow: visible; }

  .story-scene:not(.story-scene--overture) {
    display: block;
    padding: 0;
  }
  .story-scene:not(.story-scene--overture) .story-copy {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 0;
    width: 59%;
    transform: translateY(-50%);
  }
  .story-scene:not(.story-scene--overture) .story-copy h2 {
    font-size: clamp(72px, 8.1vw, 140px);
    max-width: 780px;
  }
  .story-media {
    position: absolute;
    z-index: 1;
    right: calc(-1 * clamp(24px, 5.8vw, 96px));
    top: 50%;
    width: min(60vw, 980px);
    height: min(77svh, 850px);
    max-height: none;
    aspect-ratio: auto;
    overflow: hidden;
    background: transparent;
    transform: translateY(-50%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 100%);
  }
  .story-media video {
    object-fit: cover;
    object-position: center;
    filter: saturate(.83) contrast(.97);
    transform: translateY(var(--media-shift, 0px)) scale(var(--media-scale, 1.06));
    will-change: transform;
  }
  .story-scene[data-scene="story-bread"] .story-media video { object-position: center 53%; }
  .story-scene[data-scene="story-plate"] .story-media video { object-position: center 48%; }
  .story-scene[data-scene="story-table"] .story-media video { object-position: center 55%; }
  .story-media .media-label { display: none; }

  .menu-stage {
    display: block;
    padding-left: clamp(36px, 5vw, 94px);
    padding-right: clamp(36px, 5vw, 94px);
  }
  .menu-stage-content {
    position: relative;
    z-index: 2;
    min-height: calc(100svh - var(--header-h) - var(--ribbon-h) - 70px);
    display: grid;
    grid-template-columns: minmax(0, .91fr) minmax(0, 1.09fr);
    grid-template-rows: auto auto auto;
    align-content: center;
    align-items: start;
    gap: 18px clamp(50px, 6vw, 120px);
    text-align: left;
  }
  .menu-stage-content > .eyebrow,
  .menu-stage-content > h2,
  .menu-stage-content > .menu-intro { grid-column: 1; }
  .menu-stage h2 {
    font-size: clamp(64px, 5.8vw, 104px);
    line-height: .91;
    margin: 0;
  }
  .menu-intro { margin: 4px 0 0; }
  .menu-choice {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
    margin: 0;
    border: 0;
  }
  .menu-choice a {
    min-width: 0;
    min-height: clamp(270px, 43vh, 470px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 27px;
  }
  .menu-choice a strong {
    max-width: 210px;
    font-size: clamp(29px, 2.8vw, 51px);
    line-height: .96;
  }
  .menu-choice a span:last-child { font-size: 24px; }
  html.is-motion-ready .stage--menu .menu-choice a {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .9s var(--ease), transform .9s var(--ease), background .45s var(--ease), border-color .45s var(--ease);
  }
  html.is-motion-ready .stage--menu.is-revealed .menu-choice a { opacity: 1; transform: translateY(0); }
  html.is-motion-ready .stage--menu.is-revealed .menu-choice a:nth-child(2) { transition-delay: .13s; }
  html.is-motion-ready .stage--menu.is-revealed .menu-choice a:hover,
  html.is-motion-ready .stage--menu.is-revealed .menu-choice a:focus-visible { transform: translateY(-7px); }

  html.is-motion-ready .signature-scenes { height: 100%; }
  .signature-scene:not(.signature-scene--overture) { display: block; }

  .closing-scene--image h2 { font-size: clamp(80px, 10vw, 170px); }
}

@media (max-width: 1023px) {
  .page-progress { display: none; }
  .story-scene--overture,
  .signature-scene--overture {
    min-height: 50svh;
    padding: 48px 0 65px;
  }
  .signature-scene--overture:first-child {
    padding: calc(var(--ribbon-h) + var(--header-h) + 30px) 0 32px;
  }
  .story-overture-copy h2,
  .signature-overture-copy h2 { font-size: clamp(65px, 9vw, 108px); }
  .story-media {
    border-radius: 46% 46% 0 0 / 18% 18% 0 0;
    background: transparent;
  }
  .story-media .media-label { display: none; }
  .signature-scene:not(.signature-scene--overture) { min-height: 100svh; }
  .signature-media { height: 60svh; }
  .signature-copy { display: block; bottom: 42px; }
  .signature-copy h2 { white-space: normal; font-size: clamp(64px, 10vw, 80px); line-height: .84; }
  .signature-copy h2 em { display: block; }
  .signature-aside { width: 100%; max-width: 540px; margin-top: 18px; }
  .signature-aside p { font-size: 18px; }
  .menu-stage-content { position: relative; z-index: 2; }
  .menu-choice { border: 0; gap: 12px; }
  .menu-choice a,
  .menu-choice a+a { border: 1px solid rgba(247, 241, 230, .34); }
  .closing-film { height: min(100svh, 900px); }
}

@media (max-width: 767px) {
  .story-stage::before,
  .signature-stage::before { display: none; }
  .story-scene--overture,
  .signature-scene--overture { min-height: 42svh; }
  .story-overture-copy h2,
  .signature-overture-copy h2 {
    font-size: clamp(61px, 13vw, 86px);
    line-height: .94;
  }
  .story-overture-copy > p:last-child,
  .signature-overture-copy > p:last-child { font-size: 17px; }
  .story-scene--overture::before,
  .signature-scene--overture::before {
    top: -1%;
    bottom: -1%;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    background-size: auto 125%;
    opacity: .25;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .3) 17%, transparent 34%, transparent 66%, rgba(0, 0, 0, .3) 83%, #000 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .3) 17%, transparent 34%, transparent 66%, rgba(0, 0, 0, .3) 83%, #000 100%);
  }
  .story-overture-copy::before,
  .signature-overture-copy::before {
    top: -30%;
    bottom: -30%;
    background: radial-gradient(ellipse 82% 66% at center,
      rgba(238, 232, 218, .98) 0%,
      rgba(238, 232, 218, .93) 60%,
      rgba(238, 232, 218, .52) 84%,
      rgba(238, 232, 218, 0) 100%);
  }
  .story-media {
    width: calc(100% + 44px);
    aspect-ratio: 1.17;
    max-height: none;
    margin-left: -22px;
    border-radius: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 13%, #000 88%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 13%, #000 88%, transparent);
  }
  .story-media video { filter: saturate(.85); }
  .menu-stage { padding-top: calc(var(--header-h) + var(--ribbon-h) + 65px); }
  .menu-stage h2 { font-size: clamp(60px, 12vw, 90px); }
  .menu-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .menu-choice a,
  .menu-choice a+a {
    min-height: 174px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 18px;
  }
  .menu-choice a strong { font-size: clamp(25px, 7vw, 33px); }
  .menu-choice a span:last-child { align-self: flex-end; }
  .menu-choice a:hover,
  .menu-choice a:focus-visible { transform: none; }
  .signature-media { height: 62svh; }
  .signature-copy { left: 22px; right: 22px; bottom: 39px; }
  .signature-copy h2 { font-size: clamp(64px, 17vw, 80px); }
  .signature-aside p { font-size: 17px; }
  .signature-scene[data-scene="signature-bread"] .signature-media video { object-position: 51% 50%; }
  .signature-scene[data-scene="signature-dips"] .signature-media video { object-position: 39% 51%; }
  .signature-scene[data-scene="signature-table"] .signature-media video { object-position: 50% 53%; }
  .closing-stage::before { background: rgba(70, 28, 23, .82); }
  .closing-scene--image { min-height: 68svh; }
}

@media (max-width: 380px) {
  .menu-choice { grid-template-columns: 1fr; }
  .menu-choice a,
  .menu-choice a+a { min-height: 120px; }
  .story-overture-copy h2,
  .signature-overture-copy h2 { font-size: 56px; }
  .signature-media { height: 56svh; }
  .signature-copy { bottom: 19px; }
  .signature-copy h2 { font-size: 56px; }
  .signature-aside { margin-top: 12px; gap: 9px; }
  .signature-aside p { font-size: 16px; line-height: 1.3; }
}

@media (prefers-reduced-motion: reduce) {
  .story-scene--overture::before,
  .signature-scene--overture::before {
    animation: none;
    transform: none;
    will-change: auto;
  }
  .page-progress { display: none; }
  .menu-stage { background: linear-gradient(rgba(24, 19, 15, .68), rgba(24, 19, 15, .68)), url('media/menu-table.webp') center / cover; }
  .closing-stage { background: linear-gradient(rgba(70, 28, 23, .83), rgba(70, 28, 23, .83)), url('media/closing-toast.webp') center / cover; }
  .story-scene:nth-child(2) .story-media { background: url('media/dough-hands.webp') center / cover; }
  .story-scene:nth-child(3) .story-media { background: url('media/preparation.webp') center / cover; }
  .story-scene:nth-child(4) .story-media { background: url('media/dining.webp') center / cover; }
  .signature-scene:nth-child(3) .signature-media { background: url('media/dip-hummus.webp') center / cover; }
  .signature-scene:nth-child(4) .signature-media { background: url('media/mezze-platter.webp') center / cover; }
}
