/* ---------- Landing page (signed-out visitors) ----------

   What someone sees before they have an account (routing: js/auth.js,
   interactions: js/landing.js). Colors come from .brand-theme (base.css),
   so the page is always Slate's own purple whatever theme a previous
   account cached on this device. The hero board reuses the app's real
   .card and .hstats, so it looks exactly like the app; only the posters
   are drawn here (.lp-art), as made-up films.
   Breakpoints: responsive.css (LANDING PAGE tier). */

.landing-screen {
  position: relative;
  min-height: 100%;
  overflow-x: clip;
  background:
    radial-gradient(70% 900px at 85% 0%, color-mix(in srgb, var(--accent-strong) 20%, transparent), transparent 70%),
    radial-gradient(60% 1100px at 0% 30%, color-mix(in srgb, var(--pop) 9%, transparent), transparent 70%),
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.04) 0 2px, transparent 3px),
    radial-gradient(circle at 60% 70%, rgba(0, 0, 0, 0.35) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.03) 0 2px, transparent 3px),
    var(--bg);
  background-size: 100% 1800px, 100% 2400px, 70px 70px, 90px 90px, 110px 110px, 100% 100%;
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, no-repeat;
}

/* The login card lies over the page (which stays rendered, so "back" lands
   at the same spot) — the page underneath must not scroll meanwhile. Only
   the root: that stops the window scrolling but keeps its position. With
   body hidden too, body would clip the page to one screen's height and
   the window would snap back to the top. */
html.auth-open {
  overflow: hidden;
}

.landing-screen a {
  color: inherit;
}

/* ---------- shared bits ---------- */

.lp-paper {
  background: var(--paper);
  color: var(--ink);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --accent: var(--accent-deep);
}

.lp-sticker {
  display: inline-block;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-hand);
  font-size: 18px;
  line-height: 1.3;
  padding: 4px 15px 3px 12px;
  transform: rotate(-2deg);
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.35);
}

.lp-sticker--pop {
  background: var(--pop);
  color: #fff;
  transform: rotate(1.5deg);
}

.lp-h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 54px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin-top: 16px;
}

/* Same raised-sticker recipe as the app's own primary / secondary buttons
   (.add-btn / .sort-btn) — its own class, since .add-btn is wired to open
   the search modal. */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 3px 4px 0 var(--accent-deep);
  transition: transform var(--transition), box-shadow var(--transition);
}

.landing-screen .lp-btn--solid {
  background: var(--accent-strong);
  color: #fff;
  transform: rotate(-1deg);
}

.landing-screen .lp-btn--paper {
  background: var(--paper);
  color: var(--ink);
  transform: rotate(1deg);
}

.landing-screen .lp-btn:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 4px 6px 0 var(--accent-deep);
}

.landing-screen .lp-btn:active {
  transform: rotate(0deg) translateY(0);
  box-shadow: 1px 2px 0 var(--accent-deep);
}

.lp-btn:focus-visible,
.lp-footer a:focus-visible,
.lp-brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.lp-btn--sm {
  padding: 9px 16px;
  font-size: 12.5px;
}

.lp-btn--lg {
  padding: 15px 26px;
  font-size: 15px;
}

/* ---------- nav ---------- */

.lp-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.lp-nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--border), 0 10px 30px rgba(0, 0, 0, 0.25);
}

.lp-nav-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  width: min(1180px, calc(100% - 48px));
  height: 74px;
  margin: 0 auto;
}

.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  justify-self: start;
  text-decoration: none;
}

.lp-brand-logo {
  width: 42px;
  border-radius: 11px;
  box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.4);
}

.lp-brand-name {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.lp-nav-actions {
  display: flex;
  gap: 14px;
  justify-self: end;
}

/* ---------- hero ---------- */

.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  width: min(1180px, calc(100% - 48px));
  min-height: calc(100vh - 74px);
  margin: 0 auto;
  padding: 48px 0 88px;
  scroll-margin-top: 74px;
}

.lp-hero-title {
  margin: 24px 0 22px;
  font-family: var(--font-display);
  font-size: clamp(46px, 6.2vw, 86px);
  font-weight: 700;
  line-height: 0.94;
  text-transform: uppercase;
}

.lp-hl {
  color: var(--accent);
}

.lp-hero-lede {
  max-width: 540px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-muted);
}

.lp-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 34px;
}

/* The board: a few pinned things, gently floating. `translate` (the
   individual property) carries the float so each piece keeps its own
   `transform: rotate()`. */
/* width: a grid item with an aspect-ratio isn't stretched across its
   column (it sizes to content — here, nothing, everything inside is
   absolutely positioned), so it needs its width spelled out. */
.lp-hero-board {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.96;
}

.lp-hero-board > *,
.lp-hero-board > .lp-note {
  position: absolute;
}

.landing-screen .lp-hero-board .card {
  padding: 10px 10px 14px;
  gap: 8px;
}

.lp-hb-a {
  left: 0;
  top: 12%;
  width: 33%;
  transform: rotate(-7deg);
}

.lp-hb-b {
  left: 31%;
  top: 0;
  width: 38%;
  transform: rotate(3deg);
  z-index: 2;
}

.lp-hb-c {
  right: 0;
  top: 17%;
  width: 31%;
  transform: rotate(8deg);
}

.lp-hb-strip {
  left: 7%;
  bottom: 6%;
  z-index: 3;
  transform: rotate(-2.5deg);
}

.lp-hb-note {
  right: 2%;
  bottom: 22%;
  z-index: 4;
  width: 38%;
  transform: rotate(4deg);
}

.lp-hb-stub {
  left: 3%;
  top: 0;
  z-index: 3;
  transform: rotate(-12deg);
}

@keyframes lp-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -10px;
  }
}

.lp-float {
  animation: lp-float 6s ease-in-out infinite;
}

.lp-float:nth-child(2) { animation-delay: -1.2s; }
.lp-float:nth-child(3) { animation-delay: -2.4s; }
.lp-float:nth-child(4) { animation-delay: -3.6s; animation-duration: 7s; }
.lp-float:nth-child(5) { animation-delay: -0.6s; animation-duration: 5s; }
.lp-float:nth-child(6) { animation-delay: -4.2s; animation-duration: 8s; }

/* A handwritten note on paper with a strip of tape. */
.lp-note {
  position: relative;
  padding: 16px 18px 14px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-hand);
  box-shadow: 3px 8px 18px rgba(0, 0, 0, 0.4);
}

.lp-note::before {
  content: "";
  position: absolute;
  top: -9px;
  left: calc(50% - 26px);
  width: 52px;
  height: 17px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  transform: rotate(-4deg);
}

.lp-note p {
  font-size: 21px;
  line-height: 1.2;
}

.lp-note span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-muted);
}

/* A torn-off cinema ticket stub. */
.lp-stub {
  display: grid;
  justify-items: center;
  padding: 12px 18px 12px 22px;
  background: var(--accent-strong);
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
  box-shadow: 3px 6px 14px rgba(0, 0, 0, 0.45);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 8px, #000 8.5px);
  mask: radial-gradient(circle at 0 50%, transparent 8px, #000 8.5px);
}

.lp-stub span {
  font-size: 11px;
  letter-spacing: 0.3em;
  opacity: 0.85;
}

.lp-stub strong {
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.08em;
}

/* ---------- film strip ---------- */

.lp-filmstrip {
  position: relative;
  margin: 10px -30px 0;
  padding: 26px 0;
  overflow: hidden;
  background: #07060c;
  transform: rotate(-1.6deg);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

/* Sprocket holes along both edges. */
.lp-filmstrip::before,
.lp-filmstrip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 9px;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--paper) 80%, transparent) 0 16px,
    transparent 16px 34px
  );
}

.lp-filmstrip::before {
  top: 8px;
}

.lp-filmstrip::after {
  bottom: 8px;
}

.lp-filmstrip-track {
  display: flex;
  width: max-content;
  animation: lp-marquee 40s linear infinite;
}

.lp-fs-set {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
}

.lp-fs-set span {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.6vw, 72px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
}

.lp-fs-set span.is-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
}

.lp-fs-set img {
  width: 46px;
  border-radius: 11px;
}

@keyframes lp-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- plain sections ---------- */

.lp-section {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding-top: 130px;
  scroll-margin-top: 30px;
}

.lp-section-head {
  margin-bottom: 52px;
  text-align: center;
}

.lp-lede {
  max-width: 620px;
  margin: 18px auto 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* A device that once ran the app in "compact" cards keeps that attribute
   on <html>; the page itself always shows the comfortable size. */
.landing-screen .card {
  gap: 10px;
  padding: 12px 12px 16px;
}

.landing-screen .card-title {
  font-size: 17px;
}

.landing-screen .card-rating .stars {
  display: block;
}

.landing-screen .card-rating .stars-value::before {
  content: none;
}

/* ---------- the problem: three handwritten notes ---------- */

.lp-problems {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 36px;
  max-width: 1040px;
  margin: 0 auto;
}

.lp-problem {
  padding: 30px 26px 26px;
}

.lp-problem:nth-child(1) { transform: rotate(-2deg); }
.lp-problem:nth-child(2) { transform: rotate(1.5deg); margin-top: 26px; }
.lp-problem:nth-child(3) { transform: rotate(-0.8deg); }

.lp-problem p {
  font-size: 30px;
  line-height: 1.1;
}

.lp-problem span {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.55;
}

/* ---------- the answer: three pinned cards ---------- */

.lp-things {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  max-width: 1040px;
  margin: 0 auto;
}

.lp-thing {
  position: relative;
  padding: 30px 26px 28px;
  box-shadow: 3px 8px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lp-thing:nth-child(1) { transform: rotate(-1.2deg); }
.lp-thing:nth-child(2) { transform: rotate(0.9deg); }
.lp-thing:nth-child(3) { transform: rotate(-0.6deg); }

.lp-thing:hover {
  transform: rotate(0deg) translateY(-4px);
}

/* The same push-pin as the app's stat cards. */
.lp-thing::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 20px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-strong);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4), inset -2px -2px 3px rgba(0, 0, 0, 0.3),
    inset 2px 2px 2px rgba(255, 255, 255, 0.5);
}

.lp-thing-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--accent-strong);
  color: #fff;
  border-radius: 12px;
  box-shadow: 2px 3px 0 var(--accent-deep);
}

.lp-thing-icon svg {
  width: 23px;
  height: 23px;
}

.lp-thing h3 {
  margin: 18px 0 8px;
  font-family: var(--font-display);
  font-size: 21px;
  text-transform: uppercase;
}

.lp-thing p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* ---------- love note ---------- */

.lp-letter {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 46px 52px 20px;
  font-family: var(--font-hand);
  font-size: 23px;
  line-height: 39px;
  /* Ruled paper: a line under every text line (46px padding + 33px to
     just below the first baseline = 79px = 41 + 38). */
  background:
    repeating-linear-gradient(transparent 0 38px, rgba(13, 12, 21, 0.1) 38px 39px) 0 41px,
    var(--paper);
  box-shadow: 4px 14px 34px rgba(0, 0, 0, 0.45);
  transform: rotate(-1deg);
}

/* A new paragraph is indented, as in a handwritten letter, rather than
   spaced out: a gap would knock the text off the ruled lines. Not the
   greeting, and not the signature. */
.lp-letter p + p:not(.lp-letter-sign) {
  text-indent: 1.6em;
}

.lp-letter-sign {
  text-align: right;
  color: var(--accent-deep);
}

.lp-letter-tape {
  position: absolute;
  top: -12px;
  width: 86px;
  height: 26px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

.lp-letter-tape--l {
  left: -18px;
  transform: rotate(-24deg);
}

.lp-letter-tape--r {
  right: -18px;
  transform: rotate(22deg);
}

/* ---------- final call: one big admission ticket ---------- */

.lp-final {
  display: flex;
  width: min(980px, calc(100% - 48px));
  margin: 140px auto 0;
  filter: drop-shadow(6px 18px 30px rgba(0, 0, 0, 0.5));
  transform: rotate(-1deg);
}

.lp-final-stub {
  position: relative;
  display: grid;
  flex: 0 0 120px;
  place-items: center;
  background: var(--accent-strong);
  color: #fff;
}

.lp-final-stub span {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* Perforation between stub and ticket. */
.lp-final-stub::after {
  content: "";
  position: absolute;
  top: 0;
  right: -7px;
  bottom: 0;
  width: 14px;
  background: radial-gradient(circle at 7px 10px, var(--bg) 4px, transparent 4.5px) 0 0 / 14px 20px repeat-y;
}

.lp-final-body {
  flex: 1;
  padding: 52px 56px 54px;
}

.lp-final-eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.lp-final-title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 58px);
  line-height: 1;
  text-transform: uppercase;
}

.lp-final-copy {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.lp-final .lp-btn--paper {
  box-shadow: 3px 4px 0 var(--accent-deep), inset 0 0 0 2px color-mix(in srgb, var(--ink) 15%, transparent);
}

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

.lp-footer {
  margin-top: 130px;
  padding: 40px 0 46px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
}

.lp-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.lp-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}

.lp-footer-links a {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
}

.lp-footer-links a:hover {
  color: var(--text);
}

.lp-footer-fine {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px dashed var(--border);
}

.lp-footer-fine small {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.lp-footer-fine a {
  color: var(--accent);
}

/* ---------- scroll reveal (js/landing.js adds .lp-js) ---------- */

.lp-js .reveal {
  opacity: 0;
  translate: 0 30px;
  transition: opacity 0.7s ease, translate 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.lp-js .reveal.is-in {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .lp-js .reveal {
    opacity: 1;
    translate: none;
    transition: none;
  }

  .lp-float,
  .lp-filmstrip-track {
    animation: none;
  }
}

/* Settings > Reduce animations, if a past account on this device set it.
   base.css shrinks every animation to ~0ms, which would turn an infinite
   loop into jitter — these are switched off outright instead. */
[data-reduce-motion="true"] .lp-float,
[data-reduce-motion="true"] .lp-filmstrip-track {
  animation: none !important;
}

[data-reduce-motion="true"] .lp-js .reveal {
  opacity: 1;
  translate: none;
}

/* =====================================================================
   Posters — made-up films drawn in CSS. Each is a container, so its
   title (cqw units) scales with whatever size the poster is shown at.
   ===================================================================== */

.lp-art {
  position: relative;
  display: block;
  overflow: hidden;
  container-type: inline-size;
  background: #1c1727;
}

.lp-art::before,
.lp-art::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.lp-art-title {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 7%;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 12.5cqw;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Midnight Drive — synthwave sun over a neon grid. */
.lp-art--drive {
  background: linear-gradient(180deg, #120a2e 0%, #3b1260 42%, #b8327a 66%, #f59e6b 78%, #1a0b2e 78%);
}

.lp-art--drive::before {
  left: 50%;
  top: 26%;
  width: 62%;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe29a, #ff6fa3 80%);
  -webkit-mask: linear-gradient(#000 0 52%, transparent 52%), repeating-linear-gradient(180deg, #000 0 7%, transparent 7% 11%);
  mask: linear-gradient(#000 0 52%, transparent 52%), repeating-linear-gradient(180deg, #000 0 7%, transparent 7% 11%);
}

.lp-art--drive::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 110, 200, 0.55) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(180deg, rgba(255, 110, 200, 0.55) 0 1px, transparent 1px 25%);
}

/* Paper Moons — two moons on cream paper. */
.lp-art--moons {
  background: #efe3c8;
}

.lp-art--moons::before {
  left: 50%;
  top: 12%;
  width: 66%;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff7e0, #e8b55a 72%);
  box-shadow: 0 0 0 5cqw rgba(232, 181, 90, 0.18);
}

.lp-art--moons::after {
  right: 10%;
  top: 8%;
  width: 20%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #c9703d;
}

.lp-art--moons .lp-art-title {
  color: #2b2318;
  text-shadow: none;
}

/* Northbound — layered mountains at dawn. */
.lp-art--north {
  background: linear-gradient(180deg, #8ec5ff 0%, #f6b7c9 55%, #f7d9b0 100%);
}

.lp-art--north::before {
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  background: #5b6fa8;
  clip-path: polygon(0 55%, 18% 22%, 34% 50%, 55% 8%, 76% 46%, 100% 18%, 100% 100%, 0 100%);
}

.lp-art--north::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: #2c3a66;
  clip-path: polygon(0 62%, 24% 26%, 44% 60%, 70% 20%, 100% 58%, 100% 100%, 0 100%);
}