/* ============================================================
   Locul pre-launch marketing site
   Tokens copied verbatim from the Locul design system handoff
   (_ds/.../tokens/*.css). Keep in sync if the DS changes.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  /* Paprika (primary) */
  --paprika-50: #FCEDE7;
  --paprika-100: #F8D7C8;
  --paprika-200: #F1B199;
  --paprika-300: #E98B6B;
  --paprika-400: #E26A45;
  --paprika-500: #D9502B;
  --paprika-600: #BC3F1F;
  --paprika-700: #97321A;

  /* Herb (green) */
  --herb-50: #ECF3EC;
  --herb-100: #D3E4D4;
  --herb-300: #7CAD80;
  --herb-400: #5B9260;
  --herb-500: #4E7A51;
  --herb-600: #3E6341;

  /* Gold (ratings) */
  --gold-100: #F6E1AE;
  --gold-300: #EDC15C;
  --gold-400: #E8B54A;
  --gold-500: #E0A21A;
  --gold-600: #B98214;

  /* Warm neutrals */
  --sand-0: #FFFFFF;
  --sand-25: #FFFDF9;
  --sand-50: #FBF6EE;
  --sand-100: #F3ECE0;
  --sand-200: #E7DDCC;
  --sand-300: #D2C5B0;
  --sand-400: #A99C86;
  --sand-500: #837A6B;
  --sand-600: #6B5F4F;
  --sand-800: #352E24;
  --sand-900: #26211C;

  /* Semantic aliases */
  --page: var(--sand-50);
  --surface-card: var(--sand-25);
  --text-strong: var(--sand-900);
  --text-body: var(--sand-800);
  --text-muted: var(--sand-600);
  --text-subtle: var(--sand-500);
  --text-link: var(--paprika-600);
  --text-link-hover: var(--paprika-700);
  --border: var(--sand-200);
  --agree: var(--herb-500);

  --shadow-xs: 0 1px 2px rgba(58, 42, 28, 0.06);
  --shadow-sm: 0 2px 6px rgba(58, 42, 28, 0.08);
  --shadow-md: 0 6px 18px rgba(58, 42, 28, 0.10);
  --ring: 0 0 0 3px rgba(217, 80, 43, 0.28);

  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  font-family: var(--font-sans);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }

:focus-visible { outline: 3px solid var(--paprika-400); outline-offset: 2px; border-radius: 4px; }

.screen { min-height: 100vh; min-height: 100dvh; background: var(--page); display: flex; flex-direction: column; }
.stage { flex: 1; display: flex; flex-direction: column; animation: fadeIn .4s ease-out; }
.hidden { display: none !important; }

/* ---- header ---- */
.hd {
  display: flex; align-items: center; gap: 24px; padding: 20px 56px;
}
.brand {
  font-family: var(--font-serif); font-size: 30px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--text-strong);
}
.brand-sub { font-size: 13px; color: var(--text-subtle); }
.hd-spacer { flex: 1; }
.coming-soon { font-size: 13px; color: var(--gold-600); font-weight: 600; letter-spacing: .06em; }

/* ---- hero / splash ---- */
.hero {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 32px 56px; text-align: center;
}
.eyebrow {
  font-size: 12px; letter-spacing: .14em; color: var(--gold-600); font-weight: 700;
  text-transform: uppercase; animation: fadeUp .5s ease-out;
}
.hero-h1 {
  font-family: var(--font-serif); font-size: 58px; font-weight: 500; letter-spacing: -0.02em;
  margin: 14px 0 0; color: var(--text-strong); max-width: 660px;
  animation: fadeUp .5s ease-out .08s backwards;
}
.hero-p {
  font-size: 17px; color: var(--text-muted); margin: 14px 0 0; max-width: 500px; line-height: 1.6;
  animation: fadeUp .5s ease-out .16s backwards;
}

/* ---- doors ---- */
.doors-viewport { width: 100%; display: flex; justify-content: center; }
.doors { display: flex; gap: 20px; margin-top: 44px; align-items: stretch; animation: fadeUp .5s ease-out .24s backwards; }
.doors-dots { display: none; }
.doors-dot { width: 24px; height: 22px; padding: 7px; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.doors-dot::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--sand-400); transition: width .3s ease, background .3s ease; }
.doors-dot[data-active="true"]::before { width: 22px; background: var(--paprika-500); }
.doors-hint { display: none; }
.door {
  width: 270px; border-radius: 18px; padding: 26px 24px; background: var(--surface-card);
  cursor: pointer; text-align: left; display: flex; flex-direction: column;
  font: inherit; color: inherit;
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}
.door-primary { border: 1.5px solid var(--paprika-400); box-shadow: var(--shadow-sm); }
.door-secondary { border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.door:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: inherit; }
.door-emoji { font-size: 30px; }
.door-title { font-family: var(--font-serif); font-size: 22px; margin-top: 10px; color: var(--text-strong); }
.door-body { font-size: 13px; color: var(--text-muted); margin-top: 6px; line-height: 1.55; }
.door-cta { margin-top: auto; padding-top: 16px; }
.door-cta-fill {
  display: inline-block; background: var(--paprika-500); color: #fff; border-radius: 999px;
  padding: 9px 20px; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.door-cta-outline {
  display: inline-block; border: 1.5px solid var(--sand-400); border-radius: 999px;
  padding: 9px 20px; font-size: 13px; font-weight: 600; color: var(--text-body); white-space: nowrap;
}
.text-link-sm {
  margin-top: 26px; font-size: 13px; color: var(--text-link); cursor: pointer;
  background: none; border: none; font-family: inherit; animation: fadeUp .5s ease-out .32s backwards;
}

/* ---- primary button (shared) ---- */
.btn {
  font-family: inherit; border: none; cursor: pointer; border-radius: 999px; font-weight: 600;
}
.btn-primary { background: var(--paprika-500); color: #fff; }
.btn-primary:hover { background: var(--paprika-600); }
.btn-lg { padding: 13px 32px; font-size: 16px; }
.btn-md { padding: 10px 26px; font-size: 14px; }
.btn-join { padding: 12px 28px; font-size: 15px; }

/* ---- tour ---- */
.tour { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; animation: fadeIn .4s ease-out; }
.tour-eyebrow { font-size: 12px; letter-spacing: .14em; color: var(--gold-600); font-weight: 700; }
.card-row { display: flex; align-items: center; gap: 18px; margin-top: 24px; }
.nav-arrow { font-size: 34px; color: var(--sand-400); cursor: pointer; user-select: none; padding: 8px; background: none; border: none; line-height: 1; }
.nav-arrow:hover { color: var(--paprika-600); }
.nav-arrow:disabled { color: transparent; cursor: default; }
.tour-card {
  width: 390px; height: 500px; border: 1px solid var(--border); border-radius: 18px;
  background: var(--surface-card); box-shadow: var(--shadow-md); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; padding: 30px 34px; cursor: pointer;
}
.card-swap { animation: fadeUp .35s ease-out; }
.card-title { font-family: var(--font-serif); font-size: 22px; color: var(--text-strong); line-height: 1.3; text-align: center; }
.card-body { font-size: 14px; color: var(--text-muted); line-height: 1.65; text-align: center; }
.dots { display: flex; gap: 4px; margin-top: 24px; }
.dot { width: 25px; height: 25px; padding: 8px; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dot::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--sand-300); transition: background .3s; }
.dot[data-state="active"]::before { background: var(--paprika-500); }
.dot[data-state="past"]::before { background: var(--paprika-300); }
.tour-skip { margin-top: 18px; font-size: 13px; color: var(--text-subtle); cursor: pointer; background: none; border: none; font-family: inherit; }

/* ---- waitlist ---- */
.waitlist { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; text-align: center; animation: fadeIn .4s ease-out; }
/* center every element (heading, copy, and the form) on one axis */
#wl-form-view, #wl-done-view { display: flex; flex-direction: column; align-items: center; width: 100%; }
.wl-h { font-family: var(--font-serif); font-size: 40px; color: var(--text-strong); margin-top: 14px; animation: fadeUp .5s ease-out .06s backwards; }
.wl-p { font-size: 15px; color: var(--text-muted); max-width: 460px; margin: 14px 0 0; line-height: 1.65; animation: fadeUp .5s ease-out .12s backwards; }
.wl-row { display: flex; justify-content: center; gap: 10px; margin-top: 28px; animation: fadeUp .5s ease-out .2s backwards; }
.wl-col { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; width: 340px; animation: fadeUp .5s ease-out .2s backwards; }
.wl-input {
  border: 1.5px solid var(--sand-400); border-radius: 999px; padding: 12px 20px; font-size: 15px;
  font-family: inherit; background: var(--surface-card); color: var(--text-body); outline: none;
}
.wl-row .wl-input { width: 280px; }
.wl-input-soft { border-color: var(--sand-300); font-size: 14px; }
.wl-fieldnote { font-size: 12px; color: var(--text-subtle); margin: 6px 0 -2px; text-align: center; }
.wl-input.is-invalid { border-color: var(--paprika-600); }
.wl-note { margin-top: 14px; font-size: 12px; color: var(--text-subtle); animation: fadeUp .5s ease-out .26s backwards; min-height: 16px; }
.wl-restart { margin-top: 22px; font-size: 12px; color: var(--text-subtle); cursor: pointer; background: none; border: none; font-family: inherit; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.emoji-xl { font-size: 44px; animation: gentlePulse 2.4s ease-in-out infinite; }

/* ============================================================
   Keyframes (from the design handoff teasers)
   ============================================================ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes foodLoop { 0% { stroke-dashoffset: 90; } 4% { stroke-dashoffset: 90; } 20% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes svcLoop { 0% { stroke-dashoffset: 40; } 26% { stroke-dashoffset: 40; } 40% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes ambLoop { 0% { stroke-dashoffset: 40; } 48% { stroke-dashoffset: 40; } 62% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes totalLoop { 0% { opacity: .2; } 62% { opacity: .2; } 74% { opacity: 1; } 100% { opacity: 1; } }
@keyframes rowPulseA { 0%, 100% { opacity: 1; } 8% { opacity: 1; } 14% { opacity: .45; } 22% { opacity: 1; } }
@keyframes rowPulseB { 0%, 100% { opacity: 1; } 30% { opacity: 1; } 36% { opacity: .45; } 44% { opacity: 1; } }
@keyframes rowPulseC { 0%, 100% { opacity: 1; } 52% { opacity: 1; } 58% { opacity: .45; } 66% { opacity: 1; } }
@keyframes avatarFlip { 0% { transform: rotateY(0); } 12% { transform: rotateY(180deg); } 50% { transform: rotateY(180deg); } 62% { transform: rotateY(360deg); } 100% { transform: rotateY(360deg); } }
@keyframes agreePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes nbDraw1 { 0%, 2% { stroke-dashoffset: 400; } 16%, 100% { stroke-dashoffset: 0; } }
@keyframes nbDraw2 { 0%, 32% { stroke-dashoffset: 400; } 46%, 100% { stroke-dashoffset: 0; } }
@keyframes nbDraw3 { 0%, 62% { stroke-dashoffset: 400; } 76%, 100% { stroke-dashoffset: 0; } }
@keyframes nbFill1 { 0%, 15% { fill-opacity: 0; } 22%, 100% { fill-opacity: .14; } }
@keyframes nbFill2 { 0%, 45% { fill-opacity: 0; } 52%, 100% { fill-opacity: .14; } }
@keyframes nbFill3 { 0%, 75% { fill-opacity: 0; } 82%, 100% { fill-opacity: .14; } }
@keyframes nbPin1 { 0%, 17% { opacity: 0; transform: translateY(-8px); } 22%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes nbPin2 { 0%, 47% { opacity: 0; transform: translateY(-8px); } 52%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes nbPin3 { 0%, 77% { opacity: 0; transform: translateY(-8px); } 82%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes nbGroupFade { 0%, 93% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes diceRollLoop { 0% { transform: rotate(0); } 4% { transform: rotate(-18deg); } 8% { transform: rotate(14deg); } 12% { transform: rotate(-10deg); } 16% { transform: rotate(6deg); } 20% { transform: rotate(0); } 100% { transform: rotate(0); } }
@keyframes resultLoop { 0%, 20% { opacity: 0; transform: translateY(10px); } 28%, 94% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes checkPulseA { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.25); } 20% { transform: scale(1); } }
@keyframes checkPulseB { 0%, 100% { transform: scale(1); } 36% { transform: scale(1); } 46% { transform: scale(1.25); } 56% { transform: scale(1); } }
@keyframes checkPulseC { 0%, 100% { transform: scale(1); } 66% { transform: scale(1); } 76% { transform: scale(1.25); } 86% { transform: scale(1); } }
@keyframes sunRise { 0% { transform: translateY(16px); } 22% { transform: translateY(0); } 78% { transform: translateY(0); } 100% { transform: translateY(16px); } }
@keyframes rayGlow { 0%, 100% { opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } }
@keyframes rayTurn { from { transform: rotate(0); } to { transform: rotate(30deg); } }
@keyframes gentlePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes pinDrop { 0% { transform: translateY(-16px); opacity: 0; } 60% { transform: translateY(3px); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes spotCycle { 0% { opacity: 0; transform: translateY(8px); } 4% { opacity: 1; transform: translateY(0); } 23% { opacity: 1; transform: translateY(0); } 27% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 0; } }
@keyframes revCycle { 0% { opacity: 0; transform: translateY(8px); } 4% { opacity: 1; transform: translateY(0); } 29% { opacity: 1; transform: translateY(0); } 33% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 0; } }
@keyframes followerPop1 { 0%, 10% { opacity: 0; transform: scale(.7); } 18%, 100% { opacity: 1; transform: scale(1); } }
@keyframes followerPop2 { 0%, 30% { opacity: 0; transform: scale(.7); } 38%, 100% { opacity: 1; transform: scale(1); } }
@keyframes followerPop3 { 0%, 50% { opacity: 0; transform: scale(.7); } 58%, 100% { opacity: 1; transform: scale(1); } }
@keyframes followerPop4 { 0%, 70% { opacity: 0; transform: scale(.7); } 78%, 100% { opacity: 1; transform: scale(1); } }

/* ---- responsive ---- */
@media (max-width: 640px) {
  .hd {
    padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
             16px max(20px, env(safe-area-inset-left));
  }
  /* center when it fits, but fall back to top-aligned so a tall splash never
     clips the headline or the first card on short viewports */
  .hero { justify-content: safe center; padding: 24px max(28px, env(safe-area-inset-right)) 48px max(28px, env(safe-area-inset-left)); }
  .hero-h1 { font-size: 38px; }
  .hero-p { font-size: 16px; }

  /* doors become a peeking carousel: a sliver of the next card always shows,
     so it's obvious there's a second one. It auto-rotates and swipes. */
  .doors-viewport {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    margin-top: 36px;
    padding: 6px 0;
  }
  .doors-viewport::-webkit-scrollbar { display: none; }
  .doors { margin: 0; gap: 14px; padding: 0 12vw; }
  .door { flex: 0 0 76vw; max-width: 340px; width: auto; scroll-snap-align: center; }
  /* in the carousel, every door starts neutral and the centered one lights up */
  .door-primary, .door-secondary { border: 1.5px solid var(--border); box-shadow: var(--shadow-xs); }
  .door--focus { border-color: var(--paprika-400); box-shadow: var(--shadow-sm); }
  .doors-dots { display: flex; gap: 7px; justify-content: center; align-items: center; margin-top: 14px; }
  .doors-hint { display: block; margin-top: 8px; font-size: 12px; color: var(--text-subtle); }

  .nav-arrow { display: none; }
  .tour-card { width: min(390px, 88vw); }
  .wl-row { flex-direction: column; align-items: stretch; width: min(340px, 86vw); }
  .wl-row .wl-input { width: auto; }
  .wl-col { width: min(340px, 86vw); }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}