:root {
  --phone-black: #080a09;
  --phone-edge: #383b39;
}

* { box-sizing: border-box; }

html,
body { width: 100%; min-height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: #241a12;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

.demo {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.restaurant-backdrop,
.ambient-shade {
  position: absolute;
  inset: 0;
}

.restaurant-backdrop {
  z-index: -3;
  background: url("assets/restaurant-background.png") center center / cover no-repeat;
  transform: scale(1.025);
  animation: settle 1.4s cubic-bezier(.2, .7, .2, 1) both;
}

.ambient-shade {
  z-index: -2;
  background:
    radial-gradient(ellipse at center, rgba(24, 16, 10, .02) 0%, rgba(24, 16, 10, .15) 43%, rgba(11, 12, 9, .52) 100%),
    linear-gradient(180deg, rgba(7, 18, 13, .12), rgba(7, 18, 13, .3));
  backdrop-filter: blur(2px) saturate(.94);
}

.client-scene,
.team-scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity .75s ease, transform .85s cubic-bezier(.2, .82, .22, 1), filter .75s ease;
}

.client-scene { z-index: 1; }

.team-scene {
  z-index: 2;
  padding: clamp(24px, 4vh, 48px) clamp(16px, 4vw, 56px) clamp(20px, 3vh, 34px);
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(16px, 3vh, 28px);
  opacity: 0;
  transform: translateY(34px) scale(.975);
  pointer-events: none;
}

.demo.is-team .client-scene {
  opacity: 0;
  transform: translateY(-24px) scale(.96);
  filter: blur(12px);
  pointer-events: none;
}

.demo.is-team .team-scene {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.team-heading {
  max-width: 980px;
  color: #fff;
  text-align: center;
  text-shadow: 0 4px 28px rgba(0, 0, 0, .38);
}

.team-heading p {
  margin: 0 0 8px;
  color: #f8a8cb;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.team-heading h1 {
  margin: 0;
  font-size: clamp(27px, 3.1vw, 52px);
  line-height: 1;
  letter-spacing: -.045em;
}

.team-heading em { color: #f8a8cb; font-style: normal; }

.iphone {
  position: relative;
  z-index: 1;
  height: min(92svh, 920px);
  aspect-ratio: 604 / 1104;
  padding: 12px;
  border: 2px solid var(--phone-edge);
  border-radius: clamp(38px, 5.5vh, 62px);
  background: var(--phone-black);
  box-shadow:
    0 46px 100px rgba(0, 0, 0, .52),
    0 10px 28px rgba(0, 0, 0, .38),
    inset 0 0 0 1px rgba(255, 255, 255, .14);
  animation: phone-in .8s cubic-bezier(.2, .82, .22, 1) both;
}

.iphone::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: calc(clamp(38px, 5.5vh, 62px) - 6px);
  pointer-events: none;
}

.iphone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(clamp(38px, 5.5vh, 62px) - 13px);
  overflow: hidden;
  background: #f2f1f3;
}

.iphone video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #f2f1f3;
}

.iphone-button {
  position: absolute;
  width: 3px;
  border-radius: 3px;
  background: #303330;
}

.iphone-button--silent { left: -5px; top: 13%; height: 4%; }
.iphone-button--volume-one { left: -5px; top: 20%; height: 7%; }
.iphone-button--volume-two { left: -5px; top: 29%; height: 7%; }
.iphone-button--power { right: -5px; top: 23%; height: 11%; }

.ipad {
  position: relative;
  align-self: center;
  width: min(84vw, 1120px, calc((100svh - 185px) * 4 / 3));
  aspect-ratio: 4 / 3;
  padding: clamp(8px, 1.05vw, 15px);
  border: 2px solid #4a4d4b;
  border-radius: clamp(24px, 3vw, 46px);
  background: #090b0a;
  box-shadow:
    0 46px 100px rgba(0, 0, 0, .54),
    0 10px 34px rgba(0, 0, 0, .35),
    inset 0 0 0 1px rgba(255, 255, 255, .16);
  overflow: visible;
}

.ipad::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 4;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: calc(clamp(24px, 3vw, 46px) - 5px);
  pointer-events: none;
}

.ipad-camera {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: clamp(3px, .45vw, 7px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1c2621;
  box-shadow: inset 0 0 0 1px rgba(90, 125, 107, .32);
  transform: translateY(-50%);
}

.ipad-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(clamp(24px, 3vw, 46px) - 12px);
  overflow: hidden;
  background: #f4f4f6;
}

.team-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: opacity .7s ease, transform 4.8s cubic-bezier(.2, .62, .3, 1);
}

.team-shot--calm {
  opacity: 1;
  transform: scale(1);
}

.team-shot--request {
  opacity: 0;
  transform: scale(1.018);
}

.team-scene.has-request .team-shot--calm {
  opacity: 0;
  transform: scale(1.018);
}

.team-scene.has-request .team-shot--request {
  opacity: 1;
  transform: scale(1);
}

.request-pulse {
  position: absolute;
  z-index: 3;
  top: 17.2%;
  left: 1.1%;
  right: 1.1%;
  height: 8.3%;
  border-radius: 15px;
  border: 3px solid rgba(239, 63, 146, .82);
  box-shadow: 0 0 0 0 rgba(239, 63, 146, .42);
  opacity: 0;
  pointer-events: none;
}

.team-scene.has-request .request-pulse {
  animation: request-arrives 1.35s .65s ease-out 2;
}

@keyframes phone-in {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes settle {
  from { opacity: .76; transform: scale(1.07); }
  to { opacity: 1; transform: scale(1.025); }
}

@keyframes request-arrives {
  0% { opacity: 0; box-shadow: 0 0 0 0 rgba(239, 63, 146, .5); }
  24% { opacity: 1; }
  100% { opacity: 0; box-shadow: 0 0 0 16px rgba(239, 63, 146, 0); }
}

@media (max-width: 680px) {
  .demo { min-height: 500px; }
  .restaurant-backdrop { background-position: 54% center; }
  .ambient-shade {
    background:
      radial-gradient(ellipse at center, rgba(24, 16, 10, .02), rgba(11, 12, 9, .48)),
      linear-gradient(180deg, rgba(7, 18, 13, .15), rgba(7, 18, 13, .32));
  }
  .iphone {
    height: min(90svh, calc((100vw - 24px) * 1104 / 604), 820px);
    padding: 8px;
    border-radius: 42px;
  }
  .iphone::before { border-radius: 36px; }
  .iphone-screen { border-radius: 34px; }
  .team-scene {
    padding: 46px 12px 34px;
    grid-template-rows: auto auto;
    align-content: center;
    gap: 28px;
  }
  .team-heading { max-width: 360px; }
  .team-heading h1 { font-size: clamp(27px, 8vw, 37px); }
  .ipad { width: min(94vw, 700px, calc((100svh - 250px) * 4 / 3)); padding: 6px; border-radius: 22px; }
  .ipad::after { border-radius: 17px; }
  .ipad-screen { border-radius: 15px; }
  .request-pulse { border-width: 2px; border-radius: 7px; }
}

@media (max-height: 650px) and (orientation: landscape) {
  .iphone { height: 92svh; }
}

@media (prefers-reduced-motion: reduce) {
  .iphone,
  .restaurant-backdrop,
  .request-pulse { animation: none !important; }
}