/* The phone layout. A script in <head> puts .m on <html> for a phone in either orientation, or a
   window 860px wide or less; every rule here hangs off it. The page is one column at most 440px
   wide that only moves up and down: nothing reaches past its 16px gutters, screens stack one per
   row at the column's full width, and the decks (the hero, June) stack their cards vertically, the
   ones behind peeking out above the front one, and swipe sideways. No blur on a phone: the lights
   are mobile-glow.css. */

/* ---------- the page does not slide sideways ---------- */
/* Each screen's light runs up to 100px past the screen. The root's overflow-x: clip hides it, but
   a phone still lets you drag the page sideways to reach it, so main clips it as well. clip, not
   hidden: hidden would make main a scroll box and unpin the night's sticky screen. */
.m main {
  overflow-x: clip;
}
html.m {
  overscroll-behavior-x: none;
}

/* ---------- chrome ---------- */
.m .top {
  max-width: 440px;
  padding: 18px 16px 0;
}
.m .brand {
  font-size: 22px;
}
.m .brand img {
  width: 28px;
  height: 28px;
}
.m .contact {
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
}
.m .join {
  flex-direction: column;
}
.m .join input {
  flex: none;
}
.m .join button {
  width: 100%;
}

/* ---------- hero: the three screens in a stack, the two behind peeking out on top ---------- */
.m .hero {
  max-width: 440px;
  grid-template-columns: 1fr;
  padding: 28px 16px 40px;
  min-height: 0;
}
.m .hero .sub {
  text-wrap: pretty;
}
.m .fan {
  height: auto;
  aspect-ratio: 1 / 2.08;
  margin: 28px 0 0;
}
/* The width is a share of the column and the offsets a share of the card, so the stack fits any
   phone. Scaling from the top edge is what makes the cards behind show above the front one. The
   front card changes over halfway through a turn, not at its start. */
.m .card-screen {
  --w: 90%;
  transform-origin: 50% 0;
  transform: translateY(3%);
  transition:
    transform 900ms var(--ease),
    z-index 0s linear 380ms;
}
.m .card-screen > .glass {
  /* the frozen radius is a share of --w; as a percentage it would turn the corners into ellipses */
  border-radius: 28px;
}
/* the cards behind are dimmed by a black layer's opacity, which a phone animates cheaply (a
   filter: brightness() did the same but had to be redrawn every frame) */
.m .card-screen::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 28px;
  background: #000;
  opacity: 0;
  transition: opacity 900ms var(--ease);
  pointer-events: none;
}
.m .card-screen.x-d1::after,
.m .card-screen.x-d2::after {
  opacity: 0.38;
}
.m .card-screen.x-d0 {
  z-index: 3;
  transform: translateY(3%);
}
.m .card-screen.x-d1 {
  z-index: 2;
  transform: scale(0.94);
}
.m .card-screen.x-d2 {
  z-index: 1;
  transform: translateY(-3%) scale(0.88);
}

/* both stacks (the hero, June) can be swiped sideways: the page keeps vertical moves, the stack
   gets the sideways ones (page.js, swipe) */
.m .fan,
.m .sx-june .x-jw-deck {
  touch-action: pan-y;
}
.m .fan .card-screen.x-drag,
.m .fan .card-screen.x-snap,
.m .sx-june .x-jw-deck > .x-bs.x-drag,
.m .sx-june .x-jw-deck > .x-bs.x-snap {
  transition: none;
}
.m .fan .card-screen.x-fly,
.m .sx-june .x-jw-deck > .x-bs.x-fly {
  transition: transform 240ms cubic-bezier(0.4, 0, 1, 1);
}
/* the Pia button inside the screens: no backdrop blur on a phone */
.m .fab {
  backdrop-filter: none;
}

/* ---------- sections ---------- */
.m .sx {
  max-width: 440px;
  padding: 110px 16px 0;
}
/* one left edge all the way down; only the last call stays centred */
.m .sx-center {
  text-align: left;
}
.m .sx-center .sx-l {
  margin-inline: 0;
}
.m .sx .x-cap {
  font-size: 19px;
}
.m .sx .x-crop > .glass {
  aspect-ratio: 390 / 560;
  border-radius: 26px;
}

/* every day, and where you're going: one screen per row, its name above it */
.m .sx-day .x-dy-row,
.m .sx-plan .x-pl-row {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.m .sx-day .x-dy,
.m .sx-plan .x-pl,
.m .sx-day .x-dy:nth-child(even),
.m .sx-plan .x-pl.x-side {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.m .sx-day .x-dy > .x-cap,
.m .sx-plan .x-pl > .x-cap {
  order: -1;
  margin: 0 0 16px;
}
.m .sx-day .x-dy > .x-bs,
.m .sx-plan .x-pl > .x-bs,
.m .sx-plan .x-pl.x-mid > .x-bs {
  --w: 100%;
}
.m .sx-day .x-more {
  margin-top: 64px;
  grid-template-columns: 1fr;
  gap: 10px;
}
.m .sx-day .x-more > li {
  padding: 16px 18px 18px;
}
.m .sx-day .x-more b {
  font-size: 19px;
}
.m .sx-day .x-more span {
  margin-top: 4px;
  font-size: 15px;
}

/* Ask Pia */
.m .sx-pia .x-pia-grid {
  grid-template-columns: 1fr;
  gap: 0;
}
.m .sx-pia .x-pia-mode {
  margin-top: 16px;
  font-size: 21px;
}
.m .sx-pia .x-pia-screen {
  --w: 100%;
  margin: 40px 0 0;
}

/* The night: the heading scrolls away, then the beat line and the screen hold still while the
   scroll plays the night. The screen is sized to the height left under the beat line, so it fits
   a phone with its browser bars showing (100svh). */
.m .sx-night {
  padding-top: 110px;
}
.m .sx-night .x-nt-track {
  height: 280vh;
}
.m .sx-night .x-nt-stage {
  position: static;
  display: block;
  height: 100%;
  padding: 0 0 24px;
}
.m .sx-night .x-nt-stage > div:first-child {
  display: contents;
}
.m .sx-night .sx-h {
  text-wrap: wrap;
}
.m .sx-night .x-nt-beats {
  position: sticky;
  top: 12px;
  z-index: 2;
  margin: 14px 0 0;
  display: block;
  height: 30px;
}
.m .sx-night .x-nt-beats li {
  position: absolute;
  inset: 0;
  display: block;
  white-space: nowrap;
  font-size: min(21px, 5.6vw);
  color: var(--ink);
  opacity: 0;
  transition: opacity 420ms var(--ease);
}
.m .sx-night .x-nt-beats li::before {
  display: none;
}
.m .sx-night .x-nt-beats li.on {
  opacity: 1;
}
.m .sx-night .x-nt-screen {
  position: sticky;
  top: 54px;
  --w: min(100%, calc((100svh - 66px) * 390 / 844));
  margin: 12px auto 0;
}

/* June: the frames stack like the hero, the next one peeking out on top */
.m .sx-june .x-jw {
  height: auto;
  margin-top: 40px;
}
.m .sx-june .x-jw-deck {
  position: relative;
  inset: auto;
  aspect-ratio: 1 / 2.04;
}
.m .sx-june .x-jw-deck > .x-bs {
  --w: 92%;
  margin-left: -46%;
  transform-origin: 50% 0;
}
.m .sx-june .x-jw-deck > .x-bs.x-cur {
  transform: translateY(2.5%);
}
.m .sx-june .x-jw-deck > .x-bs.x-next {
  transform: scale(0.93);
}
.m .sx-june .x-jw-deck > .x-bs.x-prev {
  transform: translateY(8%);
  opacity: 0;
  pointer-events: none;
}
.m .sx-june .x-jw-deck > .x-bs.x-far-l,
.m .sx-june .x-jw-deck > .x-bs.x-far-r {
  transform: scale(0.86);
}
.m .sx-june .x-jw-ctl {
  position: static;
  transform: none;
  justify-content: center;
  margin-top: 20px;
}

/* private, questions, last call */
.m .sx-safe .x-sf {
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 32px;
}
.m .sx-safe .x-sf > li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
}
.m .sx-safe .x-sf svg {
  margin: 0;
  flex: none;
}
.m .sx-faq .x-fq {
  grid-template-columns: 1fr;
}
.m .sx-faq .x-fq summary {
  font-size: 17px;
}
.m .sx-last {
  padding-bottom: 110px;
}
.m .ft {
  max-width: 440px;
  padding: 24px 16px 32px;
}

@media (prefers-reduced-motion: reduce) {
  .m .card-screen,
  .m .card-screen::after {
    transition: none;
  }
}