/* Phone showcase (build/showcase.mjs). Everything is prefixed .lev-showcase / .lev-phone.
   Page tokens used: --lev-page, --lev-ink, --lev-muted, --lev-accent, --lev-sans. */

/* ---------- one phone: usable alone at any width ---------- */
.lev-phone {
  --lev-phone-bezel: #1c1c1e;
  --lev-phone-edge: rgba(10, 10, 11, 0.18);
  --lev-phone-shadow: 0 1px 2px rgba(10, 10, 11, 0.06), 0 18px 36px -18px rgba(10, 10, 11, 0.22),
    0 40px 80px -30px rgba(10, 10, 11, 0.35);
  container-type: inline-size;
  width: var(--lev-phone-w, 100%);
  max-width: 100%;
  margin: 0;
  flex: none;
}
.lev-phone-body {
  position: relative;
  padding: 2.4cqw;
  border-radius: 14cqw;
  background: var(--lev-phone-bezel);
  /* thin metal edge + faint inner highlight, no glow */
  box-shadow: 0 0 0 1px var(--lev-phone-edge), inset 0 0 0 1px rgba(255, 255, 255, 0.07), var(--lev-phone-shadow);
}
.lev-phone-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1206 / 2622;
  border-radius: 11.8cqw;
  background: #f2f2f2;
  isolation: isolate;
}
.lev-phone-screen picture,
.lev-phone-screen img {
  display: block;
  width: 100%;
  height: 100%;
}
.lev-phone-screen img {
  object-fit: cover;
  object-position: top center;
}
.lev-phone-island {
  position: absolute;
  top: 2.6cqw;
  left: 50%;
  width: 30cqw;
  height: 8.6cqw;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .lev-phone {
    --lev-phone-bezel: #2a2a2d;
    --lev-phone-edge: rgba(255, 255, 255, 0.1);
    --lev-phone-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.9);
  }
  .lev-phone-screen {
    background: #000;
  }
}

/* ---------- the section ---------- */
.lev-showcase {
  --lev-sc-centre: clamp(260px, 22vw, 380px);
  --lev-sc-side: calc(var(--lev-sc-centre) * 0.84);
  --lev-sc-overlap: calc(var(--lev-sc-centre) * 0.3);
  --lev-sc-drop: calc(var(--lev-sc-centre) * 0.16);
  position: relative;
  overflow: clip;
  padding-block: clamp(80px, 9vw, 160px) clamp(72px, 8vw, 140px);
  padding-inline: 24px;
  background: var(--lev-page, #f4f4f2);
  color: var(--lev-ink, #0a0a0b);
  font-family: var(--lev-sans, "Hanken Grotesk", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  -webkit-font-smoothing: antialiased;
}
.lev-showcase-head {
  max-width: 40rem;
  margin: 0 auto clamp(48px, 5vw, 88px);
  text-align: center;
}
.lev-showcase-title {
  margin: 0;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 4rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.lev-showcase-sub {
  margin: 0.9em auto 0;
  max-width: 30rem;
  font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem);
  line-height: 1.45;
  color: var(--lev-muted, rgba(10, 10, 11, 0.62));
  text-wrap: balance;
}

.lev-showcase-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  isolation: isolate;
}
/* underlay for the pencil drawing (filled by the page build) */
.lev-showcase-art {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 8%;
  width: min(1400px, 100vw);
  height: 84%;
  transform: translateX(-50%);
  pointer-events: none;
}
.lev-showcase-art > * {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lev-showcase-slot {
  position: relative;
  will-change: transform;
}
.lev-showcase-slot.is-centre {
  z-index: 3;
  width: var(--lev-sc-centre);
}
.lev-showcase-slot.is-left,
.lev-showcase-slot.is-right {
  z-index: 2;
  width: var(--lev-sc-side);
  margin-top: var(--lev-sc-drop);
}
.lev-showcase-slot.is-left {
  margin-right: calc(var(--lev-sc-overlap) * -1);
}
.lev-showcase-slot.is-right {
  margin-left: calc(var(--lev-sc-overlap) * -1);
}
/* side phones sit further back: a lighter, shorter shadow */
.lev-showcase-slot:not(.is-centre) .lev-phone {
  --lev-phone-shadow: 0 1px 2px rgba(10, 10, 11, 0.05), 0 30px 60px -30px rgba(10, 10, 11, 0.28);
}
@media (prefers-color-scheme: dark) {
  .lev-showcase-slot:not(.is-centre) .lev-phone {
    --lev-phone-shadow: none;
  }
  /* the back phones step down a touch so the front one leads */
  .lev-showcase-slot:not(.is-centre) .lev-phone-screen {
    filter: brightness(0.82);
  }
}

@media (min-width: 1800px) {
  .lev-showcase {
    --lev-sc-centre: clamp(380px, 21vw, 440px);
  }
}

/* phones: centre large, the two side phones peek in from the edges */
@media (max-width: 767px) {
  .lev-showcase {
    --lev-sc-centre: min(64vw, 300px);
    --lev-sc-side: min(50vw, 234px);
    --lev-sc-overlap: min(34vw, 160px);
    --lev-sc-drop: calc(var(--lev-sc-centre) * 0.2);
    padding-block: 72px 64px;
    padding-inline: 20px;
  }
  .lev-showcase-head {
    margin-bottom: 40px;
  }
  .lev-showcase-stage {
    margin-inline: -20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lev-showcase-slot {
    will-change: auto;
    transform: none !important;
  }
}