/* Lirih pre-register page (templates/landing.html). Loaded after app.css, which gives it the
   tokens in all four theme states (the phone's setting and the night switch) and .sr. Every
   class here starts with lp-, so nothing in the app's stylesheet reaches the page by name. */

/* the pressed and hovered fill of the solid button, one step under --accent in each theme */
:root {
  --accent-press: #923f25;
  --dur: 260ms;
  --hush: 60ms;
}

@media (prefers-color-scheme: dark) {
  :root { --accent-press: #9c482b; }
}

:root[data-theme="light"] { --accent-press: #923f25; }
:root[data-theme="dark"] { --accent-press: #9c482b; }

/* a page that scrolls, not the app's shell: the browser's own overscroll comes back */
html {
  overscroll-behavior: auto;
  scroll-padding-top: 8px;
}

.lp { line-height: 1.5; }

:where(.lp) :is(h1, h2, p, dl, dd, ul, fieldset) { margin: 0; padding: 0; }
.lp [hidden] { display: none !important; }

/* Top bar: the wordmark and who the page is for */

.lp-top {
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  border-bottom: 1px solid var(--line);
}

.lp-top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  max-width: calc(40rem - 2 * var(--gutter));
  margin: 0 auto;
}

.lp-mark {
  padding-bottom: 2px;
  font-family: var(--serif);
  font-size: 29px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1;
}

.lp-age { margin-left: auto; color: var(--muted); font-size: 13px; }

/* Column */

.lp-main,
.lp-wrap {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.lp-h1,
.lp-h2 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.lp-h1 { font-size: clamp(34px, 9.6vw, 40px); line-height: 1.08; }
.lp-h2 { font-size: 26px; line-height: 1.15; }

.lp-lede {
  max-width: 34rem;
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
}

/* Hero */

.lp-hero { padding: 20px 0 14px; }

.lp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid var(--accent-ink);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: transform 160ms var(--ease);
}

.lp-btn:active { transform: scale(.97); background: var(--accent-press); }
.lp-btn[aria-disabled="true"] { cursor: default; }

.lp-btn.lp-o {
  border-color: var(--field-line);
  background: var(--surface);
  color: var(--ink);
}

.lp-btn.lp-o:active { background: var(--skeleton); }

.lp-cta { margin-top: 12px; }

/* The room: four photos taken in one living room, one of the four in each. A frame is a button
   that sets its radio in the form, so one choice lives in one place. Under 960px the four
   stand in one row the width of the screen and the chosen one opens; from 960px they are four
   whole photos across. Nothing scrolls sideways. */

.rm { --lamp: 450ms; }

.rm-view { overflow: hidden; }

.rm-who {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.rm-pic {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--skeleton);
}

.rm-who img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  pointer-events: none;
  transition: transform var(--dur) var(--ease);
}

/* the evening photo lies over the day one; --night is app.css's own 0 or 1 in every theme state */
.rm-who .rm-night {
  opacity: var(--night);
  transition: opacity var(--lamp) var(--ease-ink), transform var(--dur) var(--ease);
}

/* the hush: a veil in the page's own ground over the three not chosen, and a lighter one under a press */
.rm-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: var(--veil, 0);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}

.rm-who:active { --veil: .14; }

/* Phone and tablet. Every frame is as wide as an open one and lies under the next, so a strip
   is the part of a frame its neighbour leaves uncovered, and opening one is a slide (transform)
   for the frames, the photos and the names, never a change of width.
   --f a whole photo's width at this height, --c the open frame, --r a strip at rest,
   --o a strip beside an open frame, --u the strip in use, --v what shows of this frame. */
@media (max-width: 959.98px) {
  /* the height: what the screen has left after the bar, the two-line headline (it grows with
     the screen's width), the names, the line under them and the button; never so short that a
     strip is wider than its photo */
  .rm { --rm-h: max(clamp(280px, calc(100vh - 292px - min(20.8vw, 87px)), 520px), 44.5vw); }
  @supports (height: 1svh) { .rm { --rm-h: max(clamp(280px, calc(100svh - 292px - min(20.8vw, 87px)), 520px), 44.5vw); } }

  .rm {
    --f: calc(var(--rm-h) * 9 / 16);
    --c: min(52vw, var(--f));
    --r: calc((100vw - 6px) / 4);
    --o: calc((100vw - 6px - var(--c)) / 3);
    --u: var(--r);
  }

  .lp:has(.lp-tr:checked) .rm { --u: var(--o); }

  .rm-strip { position: relative; height: calc(var(--rm-h) + 30px); }

  .rm-who {
    --v: var(--u);
    position: absolute;
    top: 0;
    left: 0;
    width: var(--c);
    text-align: left;
    transform: translateX(calc(var(--i) * (var(--u) + 2px) + var(--push, 0) * (var(--c) - var(--o))));
    transition: transform var(--dur) var(--ease);
  }

  .rm-who:nth-child(1) { --i: 0; }
  .rm-who:nth-child(2) { --i: 1; }
  .rm-who:nth-child(3) { --i: 2; }
  .rm-who:nth-child(4) { --i: 3; }

  /* the frames after the open one move over by what it gained */
  .lp:has(#t-rara:checked) .rm-who:nth-child(n+2),
  .lp:has(#t-maira:checked) .rm-who:nth-child(n+3),
  .lp:has(#t-juna:checked) .rm-who:nth-child(n+4) { --push: 1; }

  .lp:has(#t-rara:checked) .rm-who[data-t="rara"],
  .lp:has(#t-maira:checked) .rm-who[data-t="maira"],
  .lp:has(#t-juna:checked) .rm-who[data-t="juna"],
  .lp:has(#t-adrian:checked) .rm-who[data-t="adrian"] { --v: var(--c); }

  .rm-pic { height: var(--rm-h); }
  .rm-who + .rm-who .rm-pic { box-shadow: -2px 0 0 var(--bg); }

  /* each one stands in the middle of their photo, so the photo is centred on what shows */
  .rm-who img {
    width: var(--f);
    max-width: none;
    transform: translateX(calc((var(--v) - var(--f)) / 2));
  }

  .rm-name {
    display: block;
    width: max-content;
    margin-top: 6px;
    padding: 0 3px;
    color: var(--muted);
    font-size: 13px;
    line-height: 20px;
    transform: translateX(calc(var(--v) / 2 - 50%));
    transition: transform var(--dur) var(--ease);
  }

  .lp:has(#t-rara:checked) [data-t="rara"] .rm-name,
  .lp:has(#t-maira:checked) [data-t="maira"] .rm-name,
  .lp:has(#t-juna:checked) [data-t="juna"] .rm-name,
  .lp:has(#t-adrian:checked) [data-t="adrian"] .rm-name { color: var(--ink); font-weight: 600; }

  .rm-say { display: none; }
}

/* from 960px, what each one says: a bubble that hangs from the frame's bottom edge, over the
   last of the floor and never over the person */
.rm-say {
  position: absolute;
  top: calc(100% - 64px);
  left: 50%;
  z-index: 1;
  width: max-content;
  max-width: calc(100% - 20px);
  padding: 7px 12px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  translate: -50% 0;
}

.rm-line { display: block; animation: lp-in 150ms var(--ease); }

/* the room's night switch, at the end of the top bar */
.rm-lamp {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 -8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.rm-lamp svg {
  display: block;
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 7px;
  border: 1px solid var(--field-line);
  border-radius: 50%;
  background: var(--surface);
  transition: transform 160ms var(--ease);
}

.rm-lamp:active svg { transform: scale(.9); }

/* The one moment: the chosen one comes closer, then the other three go lirih, a beat later
   (the choice is the cause, the hush its effect). */

.lp:has(.lp-tr:checked) .rm-who { --veil: .5; }
.lp:has(.lp-tr:checked) .rm-pic::after { transition-delay: var(--hush); }

.lp:has(#t-rara:checked) .rm-who[data-t="rara"],
.lp:has(#t-maira:checked) .rm-who[data-t="maira"],
.lp:has(#t-juna:checked) .rm-who[data-t="juna"],
.lp:has(#t-adrian:checked) .rm-who[data-t="adrian"] { --veil: 0; }

.lp:has(#t-rara:checked) .rm-who[data-t="rara"]:active,
.lp:has(#t-maira:checked) .rm-who[data-t="maira"]:active,
.lp:has(#t-juna:checked) .rm-who[data-t="juna"]:active,
.lp:has(#t-adrian:checked) .rm-who[data-t="adrian"]:active { --veil: .14; }

.lp:has(#t-rara:checked) [data-t="rara"] .rm-pic::after,
.lp:has(#t-maira:checked) [data-t="maira"] .rm-pic::after,
.lp:has(#t-juna:checked) [data-t="juna"] .rm-pic::after,
.lp:has(#t-adrian:checked) [data-t="adrian"] .rm-pic::after { transition-delay: 0s; }

.lp:has(#t-rara:checked) [data-t="rara"] .rm-say,
.lp:has(#t-maira:checked) [data-t="maira"] .rm-say,
.lp:has(#t-juna:checked) [data-t="juna"] .rm-say,
.lp:has(#t-adrian:checked) [data-t="adrian"] .rm-say {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

/* Under the room: what the page is, then who was picked. Every line shares one cell, and the
   cell is as tall as its tallest line, so the button under it stays where it is */

.lp-pick { padding: 8px 0 26px; }

.lp-said {
  display: grid;
  min-height: 5.9rem;
  font-size: 15px;
}

.lp-s {
  grid-area: 1 / 1;
  visibility: hidden;
}

.lp-s0 { font-size: 16px; visibility: visible; }
.lp-tap { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; }
.lp-wide { display: none; }
.lp:has(.lp-tr:checked) .lp-s0 { visibility: hidden; }

.lp-who { display: flex; align-items: baseline; gap: 8px; }
.lp-cn { font-size: 19px; font-weight: 600; line-height: 1.3; }
.lp-ln { color: var(--muted); }
.lp-lk { display: none; }
.lp-pick .lp-lede { margin-top: 14px; font-size: 13px; }

/* under 960px, what the chosen one says, as a message from them */
.lp-q {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 6px;
  padding: 8px 13px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  line-height: 1.35;
  animation: lp-in 150ms var(--ease);
}

.lp:has(#t-rara:checked) .lp-s[data-t="rara"],
.lp:has(#t-maira:checked) .lp-s[data-t="maira"],
.lp:has(#t-juna:checked) .lp-s[data-t="juna"],
.lp:has(#t-adrian:checked) .lp-s[data-t="adrian"] {
  visibility: visible;
  animation: lp-in var(--dur) var(--ease);
}

@keyframes lp-in {
  from { opacity: 0; }
}

/* What the character can do: ruled rows, no cards */

.lp-facts {
  padding: 30px 0 34px;
  border-top: 1px solid var(--line);
}

.lp-dl { margin-top: 16px; }
.lp-dl > div { padding: 13px 0 14px; border-top: 1px solid var(--line); }
.lp-dl > div:last-child { padding-bottom: 0; }
.lp-dl dt { font-weight: 600; }
.lp-dl dd { max-width: 34rem; margin-top: 2px; color: var(--muted); font-size: 15px; }

/* The form */

.lp-form {
  padding: 30px 0 36px;
  border-top: 1px solid var(--line);
}

.lp-f {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 22px;
}

.lp-lab {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
}

.lp-opt { margin-left: 6px; color: var(--muted); font-size: 13px; font-weight: 400; }

.lp-in {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
}

.lp-in::placeholder { color: var(--muted); opacity: 1; }

.lp-in[aria-invalid="true"] {
  padding: 0 15px;
  border: 2px solid var(--accent-ink);
}

.lp-hint,
.lp-err {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.4;
}

/* the reason and the nudge share one cell: the swap happens on blur, in the middle of a
   click on the next control, and a line that grew there would move the control away */
.lp-hint { display: grid; color: var(--muted); }
.lp-hint span { grid-area: 1 / 1; }
.lp-nudge { color: var(--ink); visibility: hidden; }
.is-nudge .lp-why { visibility: hidden; }
.is-nudge .lp-nudge { visibility: visible; }
.lp-hint .lp-err { margin-top: 0; }
.lp-hint:has(.lp-err:not([hidden])) :is(.lp-why, .lp-nudge) { visibility: hidden; }

.lp-err { color: var(--accent-ink); font-weight: 600; }
.lp-ferr { margin-top: 0; }

.lp-fs { min-width: 0; border: 0; }
.lp-fs .lp-lab { margin-bottom: 4px; }

.lp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
}

.lp-chip {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  height: 44px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* the hidden bold copy holds the width, so a chosen chip does not push its neighbours */
.lp-chip span {
  display: grid;
  align-content: center;
  justify-items: center;
  height: 36px;
  padding: 0 13px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 14px;
}

.lp-chip span::after {
  content: attr(data-l);
  height: 0;
  overflow: hidden;
  font-weight: 600;
  visibility: hidden;
}

.lp-chip input:checked + span {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
}

.lp-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
}

.lp-box {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--bg);
}

.lp-box svg { display: block; width: 16px; height: 16px; visibility: hidden; }
.lp-check input:checked + .lp-box { border-color: var(--ink); background: var(--ink); }
.lp-check input:checked + .lp-box svg { visibility: visible; }
.lp-check input[aria-invalid="true"] + .lp-box { border: 2px solid var(--accent-ink); }

.lp-field .lp-check + .lp-err { margin-top: 2px; }

.lp-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.lp-note a { color: inherit; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* the address is something people copy; app.css takes selection off every link */
.lp-note a,
.lp-links a[href^="mailto:"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

.lp-pv { margin: 0 0 -10px -8px; }

.lp-pv a,
.lp-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
  touch-action: manipulation;
}

/* After a sign-up */

.lp-ok p { margin-top: 10px; }
.lp-ok .lp-btn { margin-top: 22px; }
.lp-addr { font-weight: 600; overflow-wrap: anywhere; }

/* Footer */

.lp-foot {
  padding: 22px var(--gutter) calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.lp-foot-in { max-width: calc(40rem - 2 * var(--gutter)); margin: 0 auto; }
.lp-mean .lp-mark { padding: 0; color: var(--ink); font-size: 22px; }
.lp-links { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 2px 0 0 -8px; }

/* Privasi before launch (templates/privasi_daftar.html) is the app's Privasi layout; this is
   its one link, an address people copy */

.lp-a {
  color: inherit;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

.lp-a:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* Keyboard focus, the app's ring */

.lp-btn:focus-visible,
.rm-lamp:focus-visible svg,
.rm-who:focus-visible .rm-say,
.rm-who:focus-visible .rm-name,
.lp-in:focus-visible,
.lp-note a:focus-visible,
.lp-pv a:focus-visible,
.lp-links a:focus-visible,
.lp-check input:focus-visible + .lp-box,
.lp-chip input:focus-visible + span,
.lp-ok h2:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

.rm-who:focus-visible,
.rm-lamp:focus-visible { outline: none; }

.lp-pv a:focus-visible,
.lp-links a:focus-visible,
.rm-who:focus-visible .rm-name,
.lp-ok h2:focus-visible { border-radius: var(--radius-s); }

@media (hover: hover) and (pointer: fine) {
  .lp-touch { display: none; }
  .lp-wide { display: inline; }
  .rm-lamp:hover svg { border-color: var(--ink); }
  .lp-chip:hover span { border-color: var(--ink); }
  .lp-btn:hover { background: var(--accent-press); }
  .lp-btn.lp-o:hover { background: var(--surface); border-color: var(--ink); }
  .lp-pv a:hover,
  .lp-links a:hover { color: var(--ink); }
}

@media (min-width: 600px) {
  .lp-h1 { font-size: 48px; letter-spacing: -.02em; }
  .lp-hero { padding: 32px 0 20px; }
  .lp-cta { display: inline-flex; width: auto; min-width: 11rem; }
}

/* Desktop: the page on the left, the form beside it the whole way down */

@media (min-width: 960px) {
  .lp-top { padding-right: 2rem; padding-left: 2rem; }
  .lp-top-in { max-width: 66rem; }

  .lp-wrap { max-width: 70rem; padding: 0 2rem; }

  .lp-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24.5rem;
    max-width: 70rem;
    padding: 0 2rem;
  }

  .lp-pick,
  .lp-facts { grid-column: 1; margin-right: 3.5rem; }

  .lp-h1 { font-size: 56px; line-height: 1.04; }
  .lp-hero { padding: 48px 0 28px; }
  .lp-pick { padding: 10px 0 36px; }
  .lp-said { min-height: 0; }
  .lp-s0 { font-size: 17px; }
  .lp-q { display: none; }
  .lp-lk { display: inline; }

  /* the whole row: four frames across, each with room under it for what its person says */
  .rm { max-width: 84rem; margin: 0 auto; padding: 0 2rem; }
  .rm-strip { display: flex; gap: 2px; }
  .rm-who { position: relative; flex: 1 1 0; min-width: 0; padding: 0 0 46px; }
  .rm-pic { aspect-ratio: 9 / 16; }
  .rm-who img { width: 100%; object-fit: cover; }
  .rm-who:first-child .rm-pic { border-radius: var(--radius) 0 0 var(--radius); }
  .rm-who:last-child .rm-pic { border-radius: 0 var(--radius) var(--radius) 0; }
  .rm-name { display: none; }
  .lp-cta { display: none; }

  .lp-dl > div { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.5rem; }
  .lp-dl dd { margin-top: 0; }

  .lp-form {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: 0 0 0 2.5rem;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .lp-form-in { padding: 26px 0 40px; }

  .lp-foot { padding-right: 2rem; padding-left: 2rem; }
  .lp-foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; max-width: 66rem; }
  .lp-links { margin: 0 0 0 auto; }
}

@media (min-width: 960px) and (min-height: 720px) {
  .lp-form-in { position: sticky; top: 0; }
}

/* from 960px the chosen one comes a little closer */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .lp:has(#t-rara:checked) [data-t="rara"] img,
  .lp:has(#t-maira:checked) [data-t="maira"] img,
  .lp:has(#t-juna:checked) [data-t="juna"] img,
  .lp:has(#t-adrian:checked) [data-t="adrian"] img { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --hush: 0ms; }

  .lp-btn,
  .rm-who,
  .rm-who img,
  .rm-who .rm-night,
  .rm-name,
  .rm-pic::after,
  .rm-lamp svg { transition: none; }

  .lp-btn:active,
  .rm-lamp:active svg { transform: none; }

  .rm-line,
  .lp-q,
  .lp:has(#t-rara:checked) .lp-s[data-t="rara"],
  .lp:has(#t-maira:checked) .lp-s[data-t="maira"],
  .lp:has(#t-juna:checked) .lp-s[data-t="juna"],
  .lp:has(#t-adrian:checked) .lp-s[data-t="adrian"] { animation: none; }
}