/*
Theme Name: Intro Dating App
Theme URI: https://intro.bgpstudios.com
Author: BGP Studios
Description: A minimalist dating app landing page for introverts.
Version: 1.1
*/

:root{
    --ink: #2B2622;
    --ink-soft: #5A5450;
    --paper: #F7F4EE;
    --paper-dim: #EFEBE2;
    --dusk: #34314A;
    --dusk-soft: #4A4666;
    --accent: #8C7BA6;
    --accent-soft: #C9BEDD;
    --moss: #6B7A5E;
    --line: rgba(43,38,34,0.12);
    --line-dark: rgba(247,244,238,0.14);
    --serif: 'Fraunces', serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: 'JetBrains Mono', monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

::selection{ background:var(--accent-soft); color:var(--ink); }
a{ color:inherit; }

.wrap{ max-width:1100px; margin:0 auto; padding:0 32px; }

/* ---------- reveal on scroll ----------
   Content is visible by default. It only starts hidden when JavaScript
   is running (the .js class), so nothing can get stuck invisible. */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity 0.9s cubic-bezier(.2,.7,.3,1), transform 0.9s cubic-bezier(.2,.7,.3,1); }
.js .reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- header ---------- */
header{ padding:32px 0 0; }
.wordmark{ font-family:var(--mono); font-size:13px; letter-spacing:0.32em; color:var(--ink-soft); text-transform:uppercase; }

/* ---------- hero ---------- */
.hero{ padding:64px 0 88px; }
.hero h1{ font-family:var(--serif); font-weight:400; font-size:clamp(40px, 6vw, 72px); line-height:1.04; letter-spacing:-0.01em; max-width:820px; }
.hero h1 em{ font-style:italic; font-weight:400; color:var(--accent); }
.hero p{ margin-top:24px; font-size:19px; color:var(--ink-soft); max-width:520px; }
.hero-link{ display:inline-block; margin-top:28px; font-family:var(--mono); font-size:13px; letter-spacing:0.08em; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent); padding-bottom:4px; transition:color 0.25s ease; }
.hero-link:hover{ color:var(--accent); }

/* ---------- rule ---------- */
.rule{ border:none; border-top:1px solid var(--line); margin:0; }

/* ---------- feature beats ---------- */
.beats{ padding:96px 0; }
.beats.beats-do{ padding-bottom:0; }
.beats.beats-dont{ padding-top:80px; }
.beats-eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:0.24em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:40px; }
.beat{ padding:38px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1.4fr; gap:24px; align-items:baseline; }
.beat:last-child{ border-bottom:1px solid var(--line); }
.beat h3{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:25px; color:var(--ink); }
.beat p{ color:var(--ink-soft); font-size:16.5px; max-width:440px; }
.beats-do .beat h3{ color:var(--accent); }
@media (max-width:680px){ .beat{ grid-template-columns:1fr; gap:8px; } }

/* ---------- AI guide preview ---------- */
.preview{ margin:56px 0 0; }
.preview-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.preview-row img{ width:100%; height:auto; display:block; }
.preview figcaption{ margin-top:16px; font-size:13.5px; color:var(--ink-soft); text-align:center; }
@media (max-width:760px){
  .preview-row{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:4px; margin:0 -32px; padding:0 20px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .preview-row::-webkit-scrollbar{ display:none; }
  .preview-row img{ flex:0 0 78%; scroll-snap-align:center; }
  .preview figcaption::after{ content:" Swipe to see more."; }
}

/* ---------- dusk section ---------- */
.dusk{ background:var(--dusk); color:var(--paper); padding:120px 0; position:relative; }
.dusk blockquote{ font-family:var(--serif); font-weight:400; font-style:italic; font-size:clamp(26px, 4vw, 42px); line-height:1.35; max-width:720px; color:#F0EDF7; }
.dusk cite{ display:block; margin-top:32px; font-family:var(--mono); font-style:normal; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent-soft); }

/* ---------- waitlist ---------- */
.waitlist{ padding:110px 0 130px; scroll-margin-top:24px; }
.waitlist-label{ font-family:var(--mono); font-size:12px; letter-spacing:0.24em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:44px; }
.convo{ max-width:640px; }
.convo-prompt{ display:flex; gap:14px; align-items:flex-start; }
.convo-tag{ font-family:var(--mono); font-size:12px; letter-spacing:0.1em; color:var(--accent); padding-top:6px; flex-shrink:0; }
.convo-prompt h2{ font-family:var(--serif); font-weight:400; font-size:clamp(24px, 3.4vw, 34px); line-height:1.3; }
.convo-reply{ margin-top:28px; margin-left:34px; }

form{ display:flex; flex-direction:column; gap:0; }
.field-answer{ width:100%; border:none; border-bottom:1px solid var(--line); background:transparent; font-family:var(--sans); font-size:17px; color:var(--ink); padding:12px 2px; outline:none; transition:border-color 0.3s ease; }
.field-answer:focus{ border-color:var(--accent); }
.field-answer::placeholder{ color:#A39C93; }

.email-row{ margin-top:26px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.field-email{ flex:1; min-width:220px; border:none; border-bottom:1px solid var(--line); background:transparent; font-family:var(--sans); font-size:16px; color:var(--ink); padding:10px 2px; outline:none; transition:border-color 0.3s ease; }
.field-email:focus{ border-color:var(--accent); }
.field-email::placeholder{ color:#A39C93; }

.submit-btn{ font-family:var(--mono); font-size:16px; letter-spacing:0.06em; background:var(--ink); color:var(--paper); border:none; padding:16px 30px; cursor:pointer; white-space:nowrap; transition:background 0.25s ease, transform 0.25s ease; }
.submit-btn:hover{ background:var(--accent); }
.submit-btn:active{ transform:scale(0.97); }
.submit-btn:focus-visible, .hero-link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width:520px){ .submit-btn{ width:100%; } }

.waitlist-note{ margin-top:18px; font-size:13.5px; color:var(--ink-soft); }
.success-msg{ display:none; font-family:var(--serif); font-style:italic; font-size:20px; color:var(--moss); margin-top:8px; }
.success-msg.show{ display:block; }

/* ---------- footer ---------- */
footer{ padding:44px 0 60px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
footer .studio{ font-family:var(--mono); font-size:12px; letter-spacing:0.12em; color:var(--ink-soft); }
footer .cursor{ display:inline-block; width:8px; height:14px; background:var(--accent); margin-left:2px; animation:blink 1.1s steps(2) infinite; vertical-align:-2px; }
@keyframes blink{ 50%{ opacity:0; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ transition:none; opacity:1; transform:none; }
  .cursor{ animation:none; }
}