/* ═══════════════════════════════════════════════════════════════════════════
* DeHook Landing Page — Style System
* "Ethereal Stoicism" — ported from extension smoke.css + design-tokens.ts
* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ────────────────────────────────────────────────────────── */

:root {
--color-background: #000000;
--color-text: #e0e0e0;
--color-text-dim: #666666;
--color-alma: #bbbbbb;
--color-accent: #999999;
--color-warn: #cc3333;

--font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-size-hero: 20px;
--font-size-title: 18px;
--font-size-body: 15px;
--font-size-subtitle: 13px;
--font-size-label: 10px;
--font-size-version: 11px;

--letter-spacing-body: 1px;
--letter-spacing-label: 3px;
--letter-spacing-button: 2px;
--letter-spacing-hero: 2px;

--reveal-duration-ms: 1200ms;
--vanish-duration-ms: 1500ms;
--vanish-stagger-ms: 20ms;
--style-transition-ms: 400ms;
--screen-padding-h: 32px;
--max-content-width: 720px;
}

/* ── Reset & Base ─────────────────────────────────────────────────────────── */

*, *::before, *::after {
box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: 1.7;
  letter-spacing: var(--letter-spacing-body);
  text-transform: uppercase;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333333; border-radius: 2px; }

/* ── Layout ───────────────────────────────────────────────────────────────── */


body {
scroll-snap-type: y mandatory;
}

.lp-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--screen-padding-h);
  max-width: var(--max-content-width);
  margin: 0 auto;
  text-align: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.lp-section.is-offscreen {
  opacity: 0;
  pointer-events: none;
}

.lp-content {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}

/* ── Smoke Text ───────────────────────────────────────────────────────────── */

.smoke-text {
display: inline;
white-space: pre-wrap;
overflow-wrap: break-word;
word-break: break-word;
}

.smoke-text .smoke-word {
display: inline;
white-space: nowrap;
}

.smoke-text span {
  display: inline;
  opacity: 0;
  filter: blur(8px);
  will-change: opacity, filter;
  transition:
    opacity calc(var(--reveal-duration-ms) * 0.8) ease-out,
    filter calc(var(--reveal-duration-ms) * 0.8) ease-out;
  transition-delay: var(--reveal-delay, 0ms);
}

.smoke-text[data-smoke="revealed"] span {
  opacity: 1;
  filter: blur(0px);
}

.smoke-text[data-smoke="hidden"] span {
  opacity: 0;
  filter: blur(8px);
  transition: none;
}

.smoke-text[data-smoke="vanished"] span {
  opacity: 0;
  filter: blur(12px);
  transition-duration: var(--vanish-duration-ms);
  transition-delay: var(--vanish-delay, 0ms);
}

.smoke-text.quick-vanish span {
  transition-duration: 600ms !important;
  transition-delay: 0ms !important;
}

.smoke-text.hidden span {
  opacity: 0 !important;
  filter: blur(8px) !important;
  transition: none !important;
}

.smoke-text.no-transition span {
  transition: none !important;
}

/* ── Block-level smoke text ───────────────────────────────────────────────── */

.lp-content > .smoke-text,
.lp-content .lp-columns .smoke-text,
.lp-content .lp-step .smoke-text,
.lp-content .lp-comparison-row .smoke-text {
display: block;
}

/* ── Typography Hierarchy ─────────────────────────────────────────────────── */

.lp-h1 {
font-size: 28px;
font-weight: 700;
letter-spacing: 3px;
color: var(--color-text);
line-height: 1.3;
max-width: 540px;
}

.lp-h2 {
font-size: var(--font-size-hero);
font-weight: 400;
letter-spacing: var(--letter-spacing-hero);
color: var(--color-accent);
line-height: 1.5;
max-width: 520px;
}

.lp-section-header {
font-size: var(--font-size-title);
font-weight: 700;
letter-spacing: var(--letter-spacing-hero);
color: var(--color-text);
margin-bottom: 32px;
max-width: 100%;
overflow-wrap: break-word;
word-break: break-word;
}

.lp-micro {
font-size: var(--font-size-subtitle);
letter-spacing: var(--letter-spacing-body);
color: var(--color-text-dim);
}

/* ── Section 1: Hero ──────────────────────────────────────────────────────── */

.lp-hero .lp-content {
gap: 24px;
}

.lp-hero .lp-h1 {
margin-bottom: 8px;
}

/* ── Input ────────────────────────────────────────────────────────────────── */

.lp-input-group {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
max-width: 320px;
padding-bottom: 8px;
margin-top: 16px;
position: relative;
opacity: 1;
transition: opacity 0.6s ease-out, filter 0.6s ease-out;
}

.lp-input-group[data-smoke="vanished"] {
opacity: 0;
filter: blur(8px);
pointer-events: none;
}

.lp-input-group.hidden {
opacity: 0;
pointer-events: none;
transition: none;
}

.smoke-input-hint {
position: absolute;
left: 0;
right: 0;
text-align: center;
pointer-events: none;
color: var(--color-text-dim);
white-space: nowrap;
font-size: var(--font-size-body);
letter-spacing: var(--letter-spacing-button);
}

.smoke-input {
flex: 1;
background: none;
border: none;
color: var(--color-text);
font-family: inherit;
font-size: var(--font-size-body);
letter-spacing: var(--letter-spacing-body);
text-transform: uppercase;
outline: none;
padding: 0;
line-height: 1.4;
text-align: center;
caret-color: transparent;
width: 100%;
}

.smoke-input::placeholder {
color: var(--color-text-dim);
opacity: 0.5;
letter-spacing: var(--letter-spacing-button);
}

/* ── Button ───────────────────────────────────────────────────────────────── */

.smoke-button-wrapper {
display: inline-block;
background: none;
border: none;
padding: 0;
margin-top: 16px;
cursor: pointer;
letter-spacing: var(--letter-spacing-button);
color: var(--color-text);
font-family: inherit;
font-size: var(--font-size-body);
text-transform: uppercase;
line-height: 1.7;
text-shadow: 0 0 8px currentColor;
transition: text-shadow var(--style-transition-ms) ease-out, color var(--style-transition-ms) ease-out;
}

.smoke-button-wrapper:hover {
text-shadow: 0 0 14px currentColor, 0 0 28px currentColor;
color: #ffffff;
}

.smoke-button-wrapper:focus {
outline: none;
text-shadow: 0 0 14px currentColor, 0 0 28px currentColor;
}

.smoke-button-wrapper.hidden {
opacity: 0;
pointer-events: none;
}

/* ── Section 2: Mirror Columns ────────────────────────────────────────────── */


.lp-columns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
width: 100%;
margin-top: 16px;
}

.lp-column {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
text-align: center;
}

.lp-col-title {
font-size: var(--font-size-subtitle);
font-weight: 700;
letter-spacing: var(--letter-spacing-hero);
color: var(--color-text-dim);
}

.lp-col-body {
font-size: var(--font-size-subtitle);
letter-spacing: var(--letter-spacing-body);
color: var(--color-accent);
line-height: 1.6;
overflow-wrap: break-word;
word-break: break-word;
}

@media (max-width: 600px) {
.lp-columns {
grid-template-columns: 1fr;
gap: 32px;
}
}

/* ── Section 3: Architecture Steps ────────────────────────────────────────── */

.lp-steps-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
width: 100%;
margin-top: 16px;
}

.lp-step {
display: flex;
flex-direction: column;
gap: 8px;
text-align: center;
}

.lp-step-label {
font-size: var(--font-size-subtitle);
font-weight: 700;
letter-spacing: var(--letter-spacing-hero);
color: var(--color-text-dim);
}

.lp-step-body {
font-size: var(--font-size-subtitle);
letter-spacing: var(--letter-spacing-body);
color: var(--color-alma);
line-height: 1.6;
overflow-wrap: break-word;
word-break: break-word;
}

@media (max-width: 600px) {
.lp-steps-grid {
grid-template-columns: 1fr;
gap: 32px;
}
}

/* ── Section 4: Kill Chart ────────────────────────────────────────────────── */

.lp-comparison-row {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 32px;
width: 100%;
overflow-wrap: break-word;
word-break: break-word;
}

.lp-comparison-row:last-child {
margin-bottom: 0;
}

.lp-row-category {
font-size: var(--font-size-subtitle);
font-weight: 700;
letter-spacing: var(--letter-spacing-hero);
color: var(--color-text-dim);
margin-bottom: 4px;
}

.lp-row-competitor {
font-size: var(--font-size-subtitle);
letter-spacing: var(--letter-spacing-body);
color: var(--color-accent);
line-height: 1.5;
overflow-wrap: break-word;
word-break: break-word;
}

.lp-row-alma {
font-size: var(--font-size-subtitle);
letter-spacing: var(--letter-spacing-body);
color: var(--color-alma);
line-height: 1.5;
overflow-wrap: break-word;
word-break: break-word;
}

/* ── Section 5: Receipts ──────────────────────────────────────────────────── */

.lp-receipt {
font-size: var(--font-size-subtitle);
letter-spacing: var(--letter-spacing-body);
color: var(--color-accent);
line-height: 1.6;
max-width: 520px;
font-style: italic;
margin-bottom: 0;
}

.lp-receipt-attribution {
font-size: var(--font-size-label);
letter-spacing: var(--letter-spacing-label);
color: var(--color-text-dim);
margin-bottom: 16px;
font-style: normal;
}

.lp-receipts .lp-content {
gap: 4px;
}

.lp-receipt-stat {
font-size: var(--font-size-body);
letter-spacing: var(--letter-spacing-hero);
color: var(--color-text);
line-height: 1.6;
max-width: 520px;
font-weight: 700;
}

/* ── Section 6: Final Lock ────────────────────────────────────────────────── */

.lp-final-lock {
min-height: 100vh;
padding-top: 25vh;
padding-bottom: 25vh;
}

.lp-final-lock .lp-content {
gap: 24px;
}