/* ============================================================
   Manslator — brand site
   Register: brand. Loud, meme-y, screenshottable. Dark + drenched.
   Type: Clash Display (display) + Satoshi (body), Fontshare.
   ============================================================ */

:root {
  /* Color — OKLCH, purple-tinted dark, committed/drenched */
  --ink:        oklch(15% 0.03 295);
  --ink-2:      oklch(19% 0.035 295);
  --ink-3:      oklch(24% 0.04 295);
  --paper:      oklch(96% 0.012 295);
  --muted:      oklch(76% 0.022 295);
  --line:       oklch(100% 0 0 / 0.10);

  --violet:      oklch(62% 0.235 300);   /* loud accent, large text / fills */
  --violet-deep: oklch(42% 0.205 300);   /* drench background (white text passes AA) */
  --acid:        oklch(90% 0.19 128);    /* the pop, used rarely */
  --acid-ink:    oklch(28% 0.10 140);    /* text on acid */

  --bubble-grey: oklch(88% 0.006 295);   /* "what you said" iMessage grey */
  --bubble-ink:  oklch(22% 0.02 295);

  /* Type */
  --font-display: "Clash Display", "Satoshi", system-ui, sans-serif;
  --font-body: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing (4pt) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;

  --radius: 18px;
  --radius-lg: 28px;
  --measure: 66ch;

  /* Motion */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);

  --maxw: 1180px;
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 450;
  background: var(--ink);
  color: var(--paper);
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.02;
  letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
img { max-width: 100%; display: block; }

::selection { background: var(--acid); color: var(--acid-ink); }

:focus-visible {
  outline: 3px solid var(--acid);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2 * var(--s-5), var(--maxw)); margin-inline: auto; }
.section { padding-block: clamp(var(--s-8), 12vw, var(--s-10)); }
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--violet);
}
.section--violet .eyebrow { color: var(--acid); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: oklch(15% 0.03 295 / 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--s-3);
}
.brand-lockup { display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  letter-spacing: -0.01em; text-decoration: none; }
.brand-lockup img { width: 34px; height: 34px; border-radius: 9px; }

/* ---------- Store badges (official artwork) ---------- */
.store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.store-badge { display: inline-block; line-height: 0;
  transition: transform 160ms var(--ease-expo); }
.store-badge img { height: 52px; width: auto; display: block; }
a.store-badge:hover { transform: translateY(-2px); }
a.store-badge:active { transform: translateY(0); }

.btn-ghost-sm {
  display: inline-flex; align-items: center; gap: var(--s-2);
  text-decoration: none; font-weight: 700; font-size: 0.95rem;
  padding: 9px 16px; border-radius: 11px;
  border: 1.5px solid var(--line); color: var(--paper);
  transition: border-color 160ms var(--ease-expo), background 160ms var(--ease-expo);
}
.btn-ghost-sm:hover { border-color: var(--violet); background: oklch(62% 0.235 300 / 0.12); }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }
.cta-note { font-size: 0.95rem; color: var(--muted); }
.cta-note b { color: var(--acid); font-weight: 700; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(var(--s-7), 9vw, var(--s-9)); padding-bottom: clamp(var(--s-7), 9vw, var(--s-9)); }
.hero .wrap { display: grid; gap: clamp(var(--s-6), 6vw, var(--s-9));
  grid-template-columns: 1fr; align-items: center; }
@media (min-width: 920px) {
  .hero .wrap { grid-template-columns: 1.15fr 0.85fr; }
}
.hero h1 {
  font-size: clamp(3.2rem, 11vw, 7.5rem);
  margin-block: var(--s-4) var(--s-5);
}
.hero h1 .pop { color: var(--violet); display: inline-block; }
.hero .lede { font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--muted);
  max-width: 30ch; margin-bottom: var(--s-7); }

.hero-art { position: relative; display: grid; place-items: center; }
.hero-badge {
  width: min(78%, 360px); aspect-ratio: 1; border-radius: 26%;
  background: linear-gradient(150deg, var(--ink-2), var(--ink-3));
  display: grid; place-items: center;
  box-shadow: 0 40px 90px oklch(0% 0 0 / 0.5), inset 0 1px 0 oklch(100% 0 0 / 0.08);
  position: relative;
}
.hero-badge img { width: 100%; height: 100%; border-radius: inherit; }
.hero-spark { position: absolute; font-family: var(--font-display); font-weight: 700;
  background: var(--acid); color: var(--acid-ink); padding: 8px 14px; border-radius: 999px;
  font-size: 0.95rem; transform: rotate(-6deg); box-shadow: 0 10px 24px oklch(0% 0 0 / 0.35); }
.hero-spark.one { top: 4%; right: 2%; }
.hero-spark.two { bottom: 6%; left: -2%; transform: rotate(5deg);
  background: var(--violet); color: var(--paper); }

/* ---------- The bit: two-panel meme ---------- */
.section--violet { background: var(--violet-deep); color: var(--paper); }
.section--violet h2 { color: var(--paper); }

.meme { display: grid; gap: var(--s-5); margin-top: var(--s-7);
  grid-template-columns: 1fr; align-items: center; }
@media (min-width: 800px) { .meme { grid-template-columns: 1fr auto 1fr; } }

.panel { border-radius: var(--radius-lg); padding: clamp(var(--s-5), 4vw, var(--s-7)); }
.panel .tag { font-family: var(--font-body); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--s-4); display: block; }
.panel .said { font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.12; }
.panel .verdict { margin-top: var(--s-4); font-weight: 700; }

.panel--her { background: var(--bubble-grey); color: var(--bubble-ink);
  border-bottom-left-radius: 6px; }
.panel--her .tag { color: oklch(45% 0.02 295); }
.panel--her .verdict { color: oklch(45% 0.02 295); }

.panel--him { background: var(--ink); color: var(--paper);
  border: 1.5px solid var(--line); border-bottom-right-radius: 6px;
  position: relative; }
.panel--him .tag { color: var(--acid); }
.panel--him .verdict { color: var(--acid); }
.panel--him .stache { width: 56px; height: 56px; border-radius: 14px; margin-bottom: var(--s-4); }

.meme-arrow { display: grid; place-items: center; font-family: var(--font-display);
  font-weight: 700; font-size: 1.5rem; color: var(--paper); }
.meme-arrow span { background: oklch(100% 0 0 / 0.14); width: 56px; height: 56px;
  border-radius: 999px; display: grid; place-items: center; }
@media (max-width: 799px) { .meme-arrow { transform: rotate(90deg); margin: var(--s-2) 0; } }

.waveform { display: flex; align-items: center; gap: 4px; height: 40px; margin-top: var(--s-5); }
.waveform i { flex: 1; background: var(--violet); border-radius: 3px;
  height: var(--h, 40%); transform-origin: bottom; }

/* ---------- How it works: editorial steps ---------- */
.steps { display: grid; gap: clamp(var(--s-6), 5vw, var(--s-8)); margin-top: var(--s-8); }
.step { display: grid; gap: var(--s-3); grid-template-columns: 1fr;
  padding-bottom: clamp(var(--s-6), 5vw, var(--s-8)); border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 760px) { .step { grid-template-columns: 0.4fr 1fr; gap: var(--s-7); align-items: baseline; } }
.step .num { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 5rem); color: var(--violet); line-height: 0.9; }
.step h3 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: var(--s-3); }
.step p { color: var(--muted); font-size: 1.1rem; max-width: 40ch; }

/* ---------- Slider gag ---------- */
.gag { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(var(--s-6), 5vw, var(--s-8)); margin-top: var(--s-7); text-align: center; }
.gag .level { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 9vw, 5.5rem); line-height: 1; color: var(--violet);
  transition: color 200ms var(--ease-quart); min-height: 1.05em; }
.gag .bars { display: flex; align-items: flex-end; justify-content: center; gap: 6px;
  height: 90px; margin: var(--s-6) 0; }
.gag .bars i { width: 14px; background: var(--violet-deep); border-radius: 4px;
  height: 20%; transition: height 240ms var(--ease-quart), background 240ms var(--ease-quart); }
.gag .bars i.lit { background: var(--violet); }
.slider-label { display: flex; justify-content: space-between; font-weight: 700;
  font-size: 0.85rem; color: var(--muted); margin-top: var(--s-5); }
input[type="range"].manliness {
  -webkit-appearance: none; appearance: none; width: 100%; height: 10px;
  border-radius: 999px; background: var(--ink-3); margin-top: var(--s-3); cursor: pointer;
}
input[type="range"].manliness::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--violet); border: 4px solid var(--ink-2); box-shadow: 0 4px 12px oklch(0% 0 0 / 0.4);
}
input[type="range"].manliness::-moz-range-thumb {
  width: 28px; height: 28px; border: 4px solid var(--ink-2); border-radius: 50%;
  background: var(--violet); }

/* ---------- Privacy flex ---------- */
.section--privacy { background: var(--ink); }
.flex-card { border: 1.5px solid var(--violet); border-radius: var(--radius-lg);
  padding: clamp(var(--s-7), 6vw, var(--s-9)); text-align: center;
  background: radial-gradient(120% 120% at 50% 0%, oklch(62% 0.235 300 / 0.14), transparent 60%); }
.flex-card .lock { font-size: 2.5rem; }
.flex-card h2 { font-size: clamp(2.2rem, 6vw, 4rem); margin: var(--s-4) 0; }
.flex-card p { color: var(--muted); max-width: 50ch; margin: 0 auto var(--s-6);
  font-size: 1.15rem; }

/* ---------- Final CTA ---------- */
.finale { text-align: center; }
.finale h2 { font-size: clamp(3rem, 12vw, 8rem); line-height: 0.95; margin-bottom: var(--s-6); }
.finale .cta-row { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: var(--s-7); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--s-5);
  align-items: center; justify-content: space-between; }
.site-footer nav { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.site-footer a { color: var(--muted); text-decoration: none; font-weight: 600; }
.site-footer a:hover { color: var(--paper); }
.site-footer .copy { color: oklch(60% 0.02 295); font-size: 0.9rem; }

/* ---------- Long-form prose (privacy / support) ---------- */
.prose-head { padding-top: clamp(var(--s-8), 10vw, var(--s-9)); padding-bottom: var(--s-6); }
.prose-head h1 { font-size: clamp(2.8rem, 9vw, 5.5rem); }
.prose-head .updated { color: var(--muted); margin-top: var(--s-3); font-weight: 600; }
.prose { max-width: var(--measure); padding-bottom: var(--s-10); }
.prose h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin-top: var(--s-8); margin-bottom: var(--s-3); }
.prose p { color: var(--muted); margin-bottom: var(--s-4); font-size: 1.08rem; }
.prose a { color: var(--violet); font-weight: 600; text-underline-offset: 3px; }
.prose .callout { background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-5) var(--s-6); margin: var(--s-6) 0;
  color: var(--paper); }
.prose .callout b { color: var(--acid); }
.faq-q { font-family: var(--font-display); font-weight: 600; color: var(--paper);
  font-size: 1.25rem; margin-top: var(--s-7); margin-bottom: var(--s-2); }

/* ---------- Utilities ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gag .gag-sub { color: var(--muted); margin-top: var(--s-2); font-size: 1.05rem; min-height: 1.5em; }
.flex-card .read-link { display: inline-flex; margin-top: var(--s-2); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-expo),
  transform 700ms var(--ease-expo); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}