/* FastReceipt dev prototype — the page is a receipt.
   Early-morning backdrop, thermal paper, ink that warms as the story turns. */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --backdrop: #171412;
  --paper: #f6f2e9;
  --paper-shade: #ece6d8;
  --ink: #2b2723;
  --ink-muted: #948b7d;
  --accent: #e07b1f;        /* the lift */
  --verified: #1e9e5a;
  --pencil: #6f6a61;
  --paper-w: min(440px, 93vw);
}

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(120vw 80vh at 50% -10%, #241f1b 0%, var(--backdrop) 55%),
    var(--backdrop);
  font-family: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
  color: var(--ink);
  overflow-x: hidden;
}

/* ── the printer slot the paper hangs from ─────────────────────────────── */
.printer {
  position: fixed; top: 0; left: 0; right: 0; height: 26px; z-index: 30;
  background: linear-gradient(#0c0a09, #171412);
  box-shadow: 0 6px 18px rgba(0,0,0,.55);
}
.printer-slot {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 6px; width: calc(var(--paper-w) + 26px); height: 7px;
  background: #060505; border-radius: 4px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.9);
}

.dev-tag {
  position: fixed; top: 34px; right: 12px; z-index: 30;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: #6b625a; border: 1px solid #3a332e; border-radius: 3px;
  padding: 3px 7px; background: rgba(23,20,18,.7);
}

/* ── the paper ──────────────────────────────────────────────────────────── */
.paper {
  position: relative;
  width: var(--paper-w);
  margin: 0 auto;
  padding: 46px 26px 30px;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.012) 2px 4px),
    linear-gradient(90deg, var(--paper-shade) 0%, var(--paper) 7%, var(--paper) 93%, var(--paper-shade) 100%);
  box-shadow: 0 0 46px rgba(0,0,0,.6);
  font-size: 13.5px;
  line-height: 1.65;
}

/* torn top edge tucked under the printer */
.paper::before {
  content: ''; position: absolute; top: -6px; left: 0; right: 0; height: 6px;
  background: var(--paper);
}

/* vh paddings ballooned on tall/vertical monitors — cap them in px so the
   paper reads as one continuous document on every screen shape. */
.zone { padding: min(6vh, 56px) 0; }
.zone-hero { padding-top: 3vh; min-height: min(88vh, 900px); }
.zone-creed { min-height: min(60vh, 560px); display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; }

/* ── ambient side type — the empty margins get a whisper of brand ───────── */
.ambient {
  position: fixed; top: 50%; z-index: 1;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px; font-weight: 500; letter-spacing: .42em; white-space: nowrap;
  color: rgba(246, 242, 233, 0.05);
  pointer-events: none; user-select: none;
}
.ambient-l { left: 24px; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; }
.ambient-r { right: 24px; transform: translateY(-50%); writing-mode: vertical-rl; }
@media (max-width: 760px) { .ambient { display: none; } }

/* ── receipt lines ─────────────────────────────────────────────────────── */
.r-line { margin: .35em 0; }
.r-center { text-align: center; }
.r-brand { font-weight: 600; letter-spacing: .34em; font-size: 17px; padding-top: .6em; }
.r-rule { color: var(--ink); opacity: .8; overflow: hidden; white-space: nowrap; }
.r-meta { font-size: 11px; letter-spacing: .14em; }
.r-label { font-size: 11px; letter-spacing: .18em; color: var(--ink-muted); margin: 1.4em 0 .8em; }
.r-divider { border-bottom: 1.5px dashed rgba(43,39,35,.4); margin: 1.2em 0; }
.r-cue { color: var(--ink-muted); letter-spacing: .4em; margin-top: 8vh; animation: cue 1.6s ease-in-out infinite; }
@keyframes cue { 50% { transform: translateY(5px); opacity: .5; } }

.r-row { display: flex; align-items: baseline; gap: .6ch; white-space: nowrap; }
.r-row .dots { flex: 1; border-bottom: 1.5px dotted rgba(43,39,35,.45); transform: translateY(-3px); min-width: 2ch; }
.r-child { padding-left: 2.2ch; font-size: 12.5px; }
.r-total { font-weight: 600; font-size: 15px; margin-top: .5em; }

.muted-ink { color: var(--ink-muted); }
.sale-ink { color: var(--accent); }
.accent-ink { color: var(--accent); }
.guessing { font-style: italic; }

/* big spoken lines — the voiceover voice */
.statement {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600; font-size: clamp(24px, 5.4vw, 31px);
  line-height: 1.22; letter-spacing: -.01em;
  margin: 1.1em 0 .4em;
}
.statement-sub { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 17px; }
.prose { margin-top: 1.4em; font-size: 13px; }
.prose em { color: var(--accent); font-style: normal; }

/* ── S2 decompose ──────────────────────────────────────────────────────── */
.zone-story { position: relative; }
.scanline {
  position: absolute; left: -26px; right: -26px; top: 0; height: 44px;
  background: linear-gradient(rgba(224,123,31,0) 0%, rgba(224,123,31,.16) 45%, rgba(224,123,31,.32) 50%, rgba(224,123,31,.16) 55%, rgba(224,123,31,0) 100%);
  pointer-events: none; opacity: 0;
}
.opaque-line { transition: color .3s; }
.unpacked { overflow: hidden; }
.unpacked .r-row { margin-left: 1ch; }

/* ── S3 verified ───────────────────────────────────────────────────────── */
.check { width: 15px; height: 15px; vertical-align: -2px; }
.check path { stroke: var(--verified); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.verified-note { color: var(--verified); letter-spacing: .2em; font-size: 10px; }
.insight {
  border-left: 3px solid rgba(224,123,31,.5);
  padding: .25em 0 .25em 1ch; margin: .8em 0; font-size: 12.5px;
}
.insight-tag {
  font-size: 10px; letter-spacing: .12em; color: var(--paper);
  background: var(--accent); border-radius: 2px; padding: 1px 5px; margin-right: .8ch;
}

/* ── S4 pencil future ──────────────────────────────────────────────────── */
.pencil { color: var(--pencil); }
.pencil .dots { border-bottom-style: dashed; border-color: rgba(111,106,97,.5); }

/* ── S5 creed ──────────────────────────────────────────────────────────── */
.creed-line .w { display: inline-block; }

/* ── S6 tear-off ───────────────────────────────────────────────────────── */
.logo { display: block; margin: 1.4em auto .6em; width: 200px; max-width: 70%; }
.cta {
  display: inline-block; margin: 1.2em 0 1.6em;
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600;
  color: var(--paper); background: var(--ink);
  padding: 12px 26px; border-radius: 4px; text-decoration: none;
  letter-spacing: .02em;
}
.cta:hover { background: var(--accent); }
.barcode {
  height: 52px; margin: 1em auto .4em; width: 78%;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 11px,
    var(--ink) 11px 15px, transparent 15px 17px, var(--ink) 17px 18px, transparent 18px 24px,
    var(--ink) 24px 26px, transparent 26px 29px);
}
.tear-edge {
  height: 18px; width: var(--paper-w); margin: 0 auto 14vh;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% 30%, 97.5% 100%, 95% 30%, 92.5% 100%, 90% 30%, 87.5% 100%, 85% 30%, 82.5% 100%, 80% 30%, 77.5% 100%, 75% 30%, 72.5% 100%, 70% 30%, 67.5% 100%, 65% 30%, 62.5% 100%, 60% 30%, 57.5% 100%, 55% 30%, 52.5% 100%, 50% 30%, 47.5% 100%, 45% 30%, 42.5% 100%, 40% 30%, 37.5% 100%, 35% 30%, 32.5% 100%, 30% 30%, 27.5% 100%, 25% 30%, 22.5% 100%, 20% 30%, 17.5% 100%, 15% 30%, 12.5% 100%, 10% 30%, 7.5% 100%, 5% 30%, 2.5% 100%, 0 30%);
}

/* reduced motion: the whole story, printed and still */
@media (prefers-reduced-motion: reduce) {
  .r-cue { animation: none; }
  html { scroll-behavior: auto; }
}