/* ── LANDING — the cinematic reel ──────────────────────────────────────
   Full-bleed: the shell's .view padding is cancelled so the rows can run
   edge to edge. The work is the page; the sign-in is a corner button. */

.lp {
  margin: -14px -14px calc(-1 * (var(--tabbar-h) + var(--safe-b) + 34px));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── top bar ── */
.lp-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--border-ink);
}
.lp-mark {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--ink);
  font-size: 24px;
}
.lp-mark-img { width: 30px; height: 30px; }
.lp-top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* The bubble tail collides with the sticky bar's bottom border. */
.lp-join::after { display: none; }

/* ── the reel ── */
.lp-reel {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 0 8px;
  /* Fade the ends so tiles arrive and leave rather than popping. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.lp-row {
  display: flex; gap: 10px; width: max-content;
  /* Each row holds its tiles TWICE, so -50% lands exactly on the copy and the
     loop is seamless with no snap. */
  animation: lp-drift 60s linear infinite;
}
.lp-row--1 { animation-duration: 78s; animation-direction: reverse; }
.lp-row--2 { animation-duration: 68s; }
/* Pausing on hover lets someone actually read a caption before clicking, and
   pausing while the auth sheet is open keeps the form the only thing moving. */
.lp-reel:hover .lp-row,
.lp-reel:focus-within .lp-row,
.lp.is-sheet-open .lp-row { animation-play-state: paused; }

@keyframes lp-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.lp-tile {
  position: relative; flex: none;
  width: 168px; height: 210px;
  border: var(--border-ink); border-radius: var(--radius);
  overflow: hidden; background: var(--paper-sunk);
  box-shadow: var(--shadow-hard);
  text-decoration: none; color: inherit;
  transition: transform 0.14s ease-out, box-shadow 0.14s ease-out;
}
.lp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-tile:hover, .lp-tile:focus-visible {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-harder);
  z-index: 2;
}
.lp-tile-play {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--riso-pink); color: #fff;
  border: 2px solid var(--ink-line);
  font-size: 11px; padding-left: 2px;
}
.lp-tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 1px;
  padding: 18px 9px 8px;
  background: linear-gradient(transparent, rgba(26, 23, 18, 0.86));
  color: #fff;
}
.lp-tile-cap strong {
  font-family: var(--f-head); font-weight: 700; font-size: 12px; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lp-tile-cap em { font-style: normal; font-size: 10px; opacity: 0.78; }

.lp-empty { padding: 40px 16px; display: grid; place-items: center; gap: 10px; text-align: center; }

/* ── hero copy under the reel ── */
.lp-hero { padding: 22px 18px 40px; text-align: center; max-width: 640px; margin: 0 auto; }
.lp-title { font-size: 46px; line-height: 0.92; margin-bottom: 10px; }
.lp-sub { margin: 0 auto 16px; max-width: 46ch; color: var(--ink-soft); }
.lp-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.lp-fine { margin-top: 14px; }

/* ── auth sheet ── */
/* Centred with `margin: auto` on the CARD, never `align-items: center` on the
   scrim. Both centre while the card fits; only this one stays reachable when it
   does not. With align-items:center an over-tall card is centred on the
   overflow too, so its top hangs above the scroll origin and cannot be scrolled
   to — on a landscape phone that put the close button 44px off-screen. The
   library overlay already does it this way. */
.lp-sheet {
  position: fixed; inset: 0; z-index: 90;
  background: var(--overlay-scrim);
  display: flex; justify-content: center;
  padding: 18px; overflow-y: auto;
}
.lp-sheet-card { position: relative; margin: auto; width: 100%; max-width: 420px; }
/* z-index must beat .welcome-tabs (z-index: 2). The tab strip is full-width and
   has no background, so at an equal z-index it painted nothing but still won
   the hit test on the later DOM position — the ✕ looked fine and did nothing. */
.lp-sheet-x {
  position: absolute; top: -12px; right: -6px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--paper-2); border: var(--border-ink);
  box-shadow: 2px 2px 0 var(--panel-shadow);
  font-size: 14px; line-height: 1;
}

@media (min-width: 700px) {
  .lp-tile { width: 210px; height: 262px; }
  .lp-title { font-size: 68px; }
  .lp-hero { padding: 34px 18px 56px; }
}

/* Honour a reduced-motion preference: the reel becomes a normal scrollable
   row instead of moving on its own. */
@media (prefers-reduced-motion: reduce) {
  .lp-row { animation: none; width: auto; overflow-x: auto; }
  .lp-reel { -webkit-mask-image: none; mask-image: none; }
}