/* myuki landing page — night rose over the brand film.
   Every rule is scoped under .landing so styles.css stays the source of truth
   for privacy.html, terms.html and the door pages, which never carry that class.
   No gradients: the video is dimmed by one flat scrim, the plate is one flat ink.
   Text never sits on the film — it lives on the plate (design spec §6). */

/* @font-face lives in styles.css so the legal pages get the same faces. */

.landing {
  /* tokens mirrored from src/theme/colors.ts + layout.ts, scoped so no other page inherits them */
  --lp-ink-deep: #060506;
  --lp-surface-alt: #1b1518;
  --lp-border: #2b2226;
  --lp-border-bright: #3a2e34;
  --lp-pink-soft: #ff9ad5;
  --lp-on-pink: #2b0a1f;
  --lp-danger: #ff6b6b;
  --lp-plate: rgba(11, 9, 10, 0.94);
  --lp-scrim: rgba(6, 5, 6, 0.42);
  --lp-radius: 26px;
  --lp-display: 'Fraunces', Georgia, 'Iowan Old Style', serif;
  --lp-body: 'Figtree', -apple-system, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;

  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--lp-body);
  line-height: 1.5;
  background: var(--lp-ink-deep);
  overflow-x: hidden;
}

/* ---------- the film ---------- */

.landing .lp-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--lp-ink-deep) url('/bg/bg-poster.v1.jpg') center 38% / cover no-repeat;
}

.landing .lp-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 38%;
  opacity: 0;
  transition: opacity 700ms ease;
}

.landing .lp-video.is-playing {
  opacity: 1;
}

.landing .lp-scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--lp-scrim);
  pointer-events: none;
}

/* ---------- the plate ---------- */

.landing .lp-stage {
  position: relative;
  z-index: 2;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.landing .lp-plate {
  width: 100%;
  max-width: 640px;
  margin: 0 auto clamp(20px, 5vh, 52px);
  padding: clamp(22px, 2.5vw, 30px);
  background: var(--lp-plate);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  box-shadow: 0 8px 24px rgba(6, 5, 6, 0.5);
}

.landing .lp-mark {
  display: inline-block;
  margin: 0 0 14px;
}

.landing .lp-mark img {
  display: block;
  width: 116px;
  height: auto;
}

.landing .lp-lede {
  margin: 0 0 10px;
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 31px);
  line-height: 1.18;
  letter-spacing: -0.4px;
  color: var(--text);
}

/* No measure cap: the lede above it has none either, so a narrower paragraph
   just leaves a ragged gap down the right of the plate. The plate's own
   max-width keeps the line length honest. */
.landing .lp-sub {
  margin: 0 0 20px;
  font-family: var(--lp-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---------- waitlist ---------- */

.landing .lp-form {
  margin: 0;
}

.landing .lp-label {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.landing .lp-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.landing .lp-field {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  font-family: var(--lp-body);
  /* 16px is a hard floor: anything smaller makes iOS Safari zoom the viewport on focus */
  font-size: 16px;
  color: var(--text);
  background: var(--lp-surface-alt);
  border: 1px solid var(--lp-border-bright);
  border-radius: 14px;
  caret-color: var(--pink);
  transition: border-color 140ms ease-out, box-shadow 140ms ease-out;
}

.landing .lp-field::placeholder {
  color: rgba(250, 247, 248, 0.45);
}

.landing .lp-field:hover {
  border-color: #5e5257;
}

.landing .lp-field:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(247, 134, 205, 0.3);
}

.landing .lp-field::selection {
  background: rgba(247, 134, 205, 0.3);
  color: var(--text);
}

/* honeypot — visible to scripts, never to people */
.landing .lp-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.landing .lp-submit {
  position: relative;
  flex: 0 0 auto;
  height: 52px;
  padding: 0 22px;
  font-family: var(--lp-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.2px;
  color: var(--lp-on-pink);
  background: var(--pink);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  /* dim until the field holds something email-shaped: the glow is a reward, not decor */
  opacity: 0.45;
  box-shadow: 0 0 0 rgba(247, 134, 205, 0);
  transition: opacity 180ms ease-out, box-shadow 180ms ease-out,
    background-color 140ms ease-out, transform 140ms ease-out;
}

.landing .lp-form.is-ready .lp-submit {
  opacity: 1;
  box-shadow: 0 0 24px rgba(247, 134, 205, 0.35);
}

.landing .lp-form.is-ready .lp-submit:hover {
  box-shadow: 0 0 36px rgba(247, 134, 205, 0.55);
  transform: translateY(-1px);
}

.landing .lp-submit:active {
  background: var(--pink-bright);
  transform: scale(0.97);
}

.landing .lp-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--lp-plate), 0 0 0 5px var(--pink);
}

.landing .lp-submit[data-busy='true'] {
  cursor: progress;
}

.landing .lp-submit[data-busy='true'] .lp-submit-label {
  opacity: 0;
}

.landing .lp-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(43, 10, 31, 0.25);
  border-top-color: var(--lp-on-pink);
  border-radius: 50%;
  animation: lp-spin 800ms linear infinite;
}

@keyframes lp-spin {
  to {
    transform: rotate(360deg);
  }
}

.landing .lp-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.landing .lp-note.is-error {
  color: var(--lp-danger);
}

.landing .lp-field.is-error {
  border-color: var(--lp-danger);
}

.landing .lp-field.is-error:focus {
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.3);
}

/* success replaces the row in place, at the same height, so nothing reflows */
.landing .lp-done {
  display: none;
  align-items: center;
  gap: 10px;
  /* matches label (18) + its margin (8) + row (52) so success swaps in without moving the card */
  min-height: 78px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}

.landing .lp-form.is-done .lp-label,
.landing .lp-form.is-done .lp-row {
  display: none;
}

.landing .lp-form.is-done .lp-done {
  display: flex;
  animation: lp-rise 220ms cubic-bezier(0.22, 0.61, 0.36, 1) 60ms both;
}

.landing .lp-done svg {
  flex: 0 0 auto;
  color: var(--pink);
}

@keyframes lp-rise {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- store row ---------- */

.landing .lp-store {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 20px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--lp-border);
}

/* Apple's artwork is already black-and-white, so grayscale() would be a no-op that
   only forces a compositing layer. Opacity alone reads as "not yet". */
.landing .lp-badge {
  height: 40px;
  width: auto;
  opacity: 0.4;
  user-select: none;
  pointer-events: none;
}

.landing .lp-store-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ---------- footer ---------- */

.landing .lp-foot {
  max-width: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-faint);
}

.landing .lp-foot a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 140ms ease-out;
}

.landing .lp-foot a:hover {
  color: var(--lp-pink-soft);
}

.landing .lp-foot span {
  color: var(--text-faint);
}

/* Native select on purpose: it gets the platform's own picker on phones, is
   keyboard and screen-reader complete for free, and color-scheme makes the
   dropdown itself render dark instead of a white sheet over a black page. */
.landing .lp-lang {
  margin-left: auto;
  color-scheme: dark;
  padding: 4px 8px;
  font-family: var(--lp-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--lp-surface-alt);
  border: 1px solid var(--lp-border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 140ms ease-out, color 140ms ease-out;
}

.landing .lp-lang:hover {
  color: var(--text);
  border-color: var(--lp-border-bright);
}

.landing .lp-lang:focus-visible {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(247, 134, 205, 0.3);
}

/* ---------- pause control (WCAG 2.2.2 — the film runs longer than five seconds) ---------- */

.landing .lp-pause {
  position: fixed;
  z-index: 3;
  right: clamp(16px, 4vw, 32px);
  top: clamp(16px, 4vw, 32px);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--text);
  background: rgba(11, 9, 10, 0.94);
  border: 1px solid var(--lp-border-bright);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 140ms ease-out;
}

.landing .lp-pause:hover {
  border-color: #5e5257;
}

.landing .lp-pause:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(247, 134, 205, 0.3);
}

.landing .lp-pause[hidden] {
  display: none;
}

/* ---------- entrance ---------- */

.landing .lp-plate {
  animation: lp-enter 380ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes lp-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- small screens ---------- */

@media (max-width: 640px) {
  /* Stays a card rather than becoming a bottom sheet: edge to edge, the plate
     reads as the page and the film reads as a header behind it. Keeping a
     margin on all four sides lets the film run past it on every edge, which is
     the whole reason there is a film. */
  .landing .lp-plate {
    max-width: none;
    /* width:100% from the base rule would ignore these margins and stay edge to
       edge; stretching the flex item instead makes the card fill what is left
       after them. */
    width: auto;
    align-self: stretch;
    margin: 0 12px calc(12px + env(safe-area-inset-bottom));
    padding: 22px 18px 24px;
    box-shadow: 0 8px 24px rgba(6, 5, 6, 0.5);
  }

  /* 44px is the comfortable thumb target; 36 was sized for a mouse. */
  .landing .lp-pause {
    width: 44px;
    height: 44px;
  }

  .landing .lp-mark img {
    width: 128px;
  }

  .landing .lp-mark {
    margin-bottom: 18px;
  }

  .landing .lp-lede {
    font-size: clamp(24px, 6.4vw, 30px);
    letter-spacing: -0.3px;
  }

  .landing .lp-sub {
    font-size: 15px;
    margin-bottom: 22px;
  }

  .landing .lp-row {
    flex-direction: column;
  }

  .landing .lp-submit {
    width: 100%;
  }

  /* stacked row: label (18+8) + field (50) + gap (10) + button (50) */
  .landing .lp-done {
    min-height: 136px;
  }

  .landing .lp-store {
    margin-top: 22px;
    padding-top: 22px;
  }

  .landing .lp-badge {
    height: 40px;
  }
}

/* ---------- reduced motion: the film stops, nothing else changes ---------- */

@media (prefers-reduced-motion: reduce) {
  .landing .lp-plate {
    animation: none;
  }

  .landing .lp-video {
    transition: none;
  }

  .landing .lp-spinner {
    animation: none;
    border-top-color: transparent;
  }

  .landing .lp-form.is-done .lp-done {
    animation: none;
  }

  .landing .lp-submit:active {
    transform: none;
  }

  .landing .lp-form.is-ready .lp-submit:hover {
    transform: none;
  }
}

/* ---------- print ----------
   styles.css turns the page white for printing, but its `body` selector (0,0,1)
   loses to `.landing` (0,1,0) even inside the print query, so the landing page
   has to restate it. The legal pages' own print rules are untouched. */

@media print {
  .landing {
    background: #fff;
    color: #111;
  }

  .landing .lp-bg,
  .landing .lp-scrim,
  .landing .lp-form,
  .landing .lp-pause,
  .landing .lp-lang,
  .landing .lp-badge {
    display: none;
  }

  .landing .lp-stage {
    min-height: 0;
    display: block;
  }

  .landing .lp-plate {
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
  }

  .landing .lp-lede {
    color: #111;
  }

  .landing .lp-sub,
  .landing .lp-note,
  .landing .lp-store-note,
  .landing .lp-foot,
  .landing .lp-foot a {
    color: #333;
  }

  .landing .lp-store {
    border-top-color: #ccc;
  }
}