.ember-hero-stage { position: relative; }
.ember-hero [hidden] { display: none; }
.ember-hero-slide {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(38rem, 54vw, 54rem);
}
.ember-hero-slide::after, .ember-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.ember-hero-image { object-fit: cover; }
.ember-hero-slide::after {
  content: "";
  background: linear-gradient(90deg, #201811ef, #201811a8 54%, #20181150), linear-gradient(0deg, #201811c9, transparent 40%);
}
.ember-hero-content { padding-block: clamp(8rem, 13vw, 12rem) 7.5rem; }
.ember-hero-actions a { display: inline-flex; gap: .5rem; align-items: center; padding: .85rem 1.2rem; color: #fff; text-decoration: none; }
.ember-hero-primary { background: #984725; }
.ember-hero-primary:hover { background: #793719; }
.ember-hero-secondary { border: 1px solid #ffefdb8c; background: #20181155; }
.ember-hero-secondary:hover { background: #201811c9; }
.ember-hero-controls { position: absolute; z-index: 2; inset: auto 0 1.3rem; display: flex; align-items: center; justify-content: space-between; }
.ember-hero-dots, .ember-hero-arrows { display: flex; gap: .5rem; }
.ember-hero-controls button { cursor: pointer; color: #fff; border-radius: 50%; background: #20181180; border: 1px solid #ffefdb8c; }
.ember-hero-dots button { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; }
.ember-hero-dots button::after { content: ""; width: .38rem; height: .38rem; border-radius: 50%; background: currentColor; }
.ember-hero-dots button[aria-pressed="true"], .ember-hero-controls button:hover { background: #984725; border-color: #eab496; }
.ember-hero-arrows button { width: 2.75rem; height: 2.75rem; font-size: 1.2rem; }
.ember-hero :is(a, button):focus-visible { outline: 2px solid #ffd7bf; outline-offset: 3px; }

[data-demo-result]:not(:empty) {
  padding: 1rem;
  border: 1px solid #b5ccba;
  border-radius: .75rem;
  background: #e9efe6;
  color: #263a2d;
}

[data-demo-form] button:focus-visible {
  outline: 2px solid #984725;
  outline-offset: 3px;
}

[data-demo-form] button:disabled { opacity: .6; }

#reservation-form :is(.party-size-pill, .time-slot-pill) {
  background: #f9f3e9;
  border-color: #e8dfd2;
  color: #263a2d;
}

#reservation-form :is(.party-size-pill, .time-slot-pill)[aria-pressed="true"] {
  background: #263a2d;
  border-color: #263a2d;
  color: #fff;
}

#reservation-form .reservation-submit {
  background: #984725;
  color: #fff;
}

#reservation-form :is(.party-size-pill, .time-slot-pill, .reservation-submit):focus-visible {
  outline: 2px solid #984725;
  outline-offset: 3px;
}

@media (hover: hover) {
  #reservation-form :is(.party-size-pill, .time-slot-pill)[aria-pressed="false"]:hover {
    background: #e9efe6;
    border-color: #8da493;
  }

  #reservation-form :is(.party-size-pill, .time-slot-pill)[aria-pressed="true"]:hover {
    background: #374b3e;
    border-color: #374b3e;
  }

  #reservation-form .reservation-submit:enabled:hover {
    background: #793719;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ember-slide-entering .ember-hero-image { animation: ember-hero-fade 1.1s ease-out backwards; }
  .ember-slide-entering .ember-hero-content { animation: ember-rise-in 850ms ease-out 100ms backwards; }
  .ember-hero :is(a, button) { transition: background-color 200ms ease, border-color 200ms ease; }

  #reservation-form :is(.party-size-pill, .time-slot-pill, .reservation-submit) {
    transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  }

  .ember-revealed {
    animation: ember-rise-in 880ms cubic-bezier(.2, .65, .35, 1) var(--ember-delay, 160ms) backwards;
  }

  .ember-revealed:focus-within {
    animation: none;
  }
}

@keyframes ember-rise-in {
  from { opacity: .58; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ember-hero-fade {
  from { opacity: .25; }
  to { opacity: 1; }
}