/* V35: one crisp character family across landing and service. */

.landing-backdrop {
  --landing-art: url("../assets/meowa/background/full-scene-landscape-runtime-v23.png");
}

.landing-backdrop::before {
  filter: blur(18px) brightness(.54) saturate(.62) contrast(.96);
}

.landing-backdrop img {
  object-fit: cover;
  object-position: center;
  filter: brightness(.64) saturate(.78) contrast(1.04);
}

.landing-foreground {
  display: none;
}

.landing-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgb(4 7 15 / 88%) 0%,
    rgb(4 7 15 / 72%) 28%,
    rgb(4 7 15 / 24%) 52%,
    transparent 72%
  );
}

.landing-cast {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.landing-character {
  position: absolute;
  display: block;
  width: clamp(440px, 46vw, 710px);
  height: clamp(440px, 46vw, 710px);
  object-fit: contain;
  object-position: center bottom;
  image-rendering: auto;
  filter: none;
}

.landing-character-lotus {
  right: 18%;
  bottom: -14%;
  z-index: 2;
}

.landing-character-ink {
  right: -7%;
  bottom: -18%;
  z-index: 1;
}

.landing-copy,
.landing-actions {
  z-index: 3;
}

.landing-copy {
  width: min(560px, 50vw);
}

.landing-copy h1 {
  font-size: clamp(38px, 4.8vw, 66px);
  white-space: nowrap;
}

@media (min-width: 721px) and (min-height: 500px) {
  .shop .customer:is(
    .guest-lotus,
    .guest-ink,
    .guest-jade,
    .guest-opera,
    .guest-silver,
    .guest-guardian
  ):not(.preview) .alien-wrap {
    top: -23%;
    height: 128%;
    animation: none;
  }

  .shop .customer:nth-child(1):is(
    .guest-lotus,
    .guest-ink,
    .guest-jade,
    .guest-opera,
    .guest-silver,
    .guest-guardian
  ):not(.preview) .alien-wrap {
    right: -12%;
    left: 28%;
  }

  .shop .customer:nth-child(2):is(
    .guest-lotus,
    .guest-ink,
    .guest-jade,
    .guest-opera,
    .guest-silver,
    .guest-guardian
  ):not(.preview) .alien-wrap {
    right: 28%;
    left: -12%;
  }

  .shop .customer:is(
    .guest-lotus,
    .guest-ink,
    .guest-jade,
    .guest-opera,
    .guest-silver,
    .guest-guardian
  ):not(.preview) .alien-figure,
  .shop .customer:is(
    .guest-lotus,
    .guest-ink,
    .guest-jade,
    .guest-opera,
    .guest-silver,
    .guest-guardian
  ):not(.preview) .alien-art {
    width: min(52vw, 720px);
    height: min(52vw, 720px);
  }

  .shop .customer:is(
    .guest-lotus,
    .guest-ink,
    .guest-jade,
    .guest-opera,
    .guest-silver,
    .guest-guardian
  ):not(.preview) .alien-art {
    object-fit: contain;
    object-position: center bottom;
    image-rendering: auto;
    filter: none;
  }

  .shop .customer:is(
    .guest-lotus,
    .guest-ink,
    .guest-jade,
    .guest-opera,
    .guest-silver,
    .guest-guardian
  ):is(.urgent, .mismatch, .serve-ready, .served):not(.preview) .alien-wrap {
    animation-duration: .56s;
  }
}

@media (min-width: 721px) and (min-height: 500px) and (max-width: 1100px) {
  .shop .customer:not(.preview) .speech {
    width: 190px;
    padding: 34px 15px 20px 32px;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: 24px 20px 6px;
    column-gap: 7px;
  }

  .shop .customer:not(.preview) .order-dish {
    width: 52px;
    height: 52px;
  }

  .shop .customer:not(.preview) .order-line {
    font-size: 10px;
  }

  .shop .customer:not(.preview) .order-level,
  .shop .customer:not(.preview) .preference.special,
  .shop .customer:not(.preview) .trait-line {
    font-size: 9px;
  }
}

@media (min-width: 721px) and (min-height: 500px) and (max-height: 690px) {
  .shop .customer:is(
    .guest-lotus,
    .guest-ink,
    .guest-jade,
    .guest-opera,
    .guest-silver,
    .guest-guardian
  ):not(.preview) .alien-wrap {
    top: -27%;
  }

  .shop .customer:is(
    .guest-lotus,
    .guest-ink,
    .guest-jade,
    .guest-opera,
    .guest-silver,
    .guest-guardian
  ):not(.preview) .alien-figure,
  .shop .customer:is(
    .guest-lotus,
    .guest-ink,
    .guest-jade,
    .guest-opera,
    .guest-silver,
    .guest-guardian
  ):not(.preview) .alien-art {
    width: min(50vw, 560px);
    height: min(50vw, 560px);
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  .landing-backdrop {
    --landing-art: url("../assets/meowa/background/full-scene-portrait-runtime-v8.png");
  }

  .landing-surface::after {
    background: linear-gradient(
      180deg,
      rgb(4 7 15 / 76%) 0%,
      rgb(4 7 15 / 18%) 34%,
      rgb(4 7 15 / 10%) 62%,
      rgb(4 7 15 / 78%) 100%
    );
  }

  .landing-character {
    width: min(132vw, 540px);
    height: min(132vw, 540px);
  }

  .landing-character-lotus {
    right: -14%;
    bottom: 12%;
  }

  .landing-character-ink {
    display: none;
  }

  .landing-copy {
    width: calc(100% - 36px);
  }

  .landing-copy h1 {
    font-size: clamp(35px, 10.4vw, 44px);
  }
}

@media (max-height: 430px) and (orientation: landscape) {
  .landing-character {
    width: min(42vw, 360px);
    height: min(42vw, 360px);
  }

  .landing-character-lotus {
    right: 15%;
    bottom: -27%;
  }

  .landing-character-ink {
    right: -5%;
    bottom: -30%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-character,
  .shop .customer[class*="guest-"] .alien-wrap {
    animation: none !important;
  }
}