/* Zorched — shared tokens + shell for all mockups.
   Brand: kitchen at 1am. Cool charcoal night, ember accent, neutral off-white slips
   for anything that pretends to be printed. One accent only. Light + dark both designed. */

:root {
  /* light theme — daylight, cool charcoal */
  --bg:          #E9ECEF;
  --surface:     #F7F8FA;
  --raised:      #DEE2E7;
  --line:        #C9CFD7;
  --line-soft:   #DEE2E7;
  --ink:         #14171B;
  --muted:       #5B6470;
  --accent:      #E0341B;
  --accent-soft: #FBDDD6;
  --accent-ink:  #FFF5F3;
  --paper:       #F4F5F7;
  --paper-ink:   #171A1E;
  --paper-line:  #D4D9E0;
  --stamp:       #C8281A;
  --shadow:      0 1px 2px rgba(20, 23, 27, .07), 0 8px 24px rgba(20, 23, 27, .08);
  --shadow-lift: 0 2px 4px rgba(20, 23, 27, .10), 0 18px 44px rgba(20, 23, 27, .16);
  --screen-bg:   #111417;   /* phone screens stay night in both themes */
  --focus:       #E0341B;

  /* motion palette — lives on the night screen, so it is theme-independent.
     Defined once here, therefore present in BOTH themes. Cool greys only, no brown. */
  --w-ink:        #EEF1F4;  /* live text on the screen */
  --w-dim:        #7C8B9E;  /* secondary on the screen (5.3:1 on --screen-bg) */
  --w-ember:      #FF5A3C;  /* the accent: fire, caret, hiss */
  --w-ember-hot:  #FF9070;
  --w-ash:        #49525D;  /* cool ash grey the burn dies into */
  --w-steam:      #C3CCD6;  /* steam at the reading point */
  --w-steam-thin: #6E7A88;  /* steam dispersing */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0F1215;
    --surface:     #171B20;
    --raised:      #21262D;
    --line:        #313842;
    --line-soft:   #282E36;
    --ink:         #EEF1F4;
    --muted:       #9AA3AE;
    --accent:      #FF5A3C;
    --accent-soft: #40141A;
    --accent-ink:  #1A0906;
    --paper:       #F1F3F5;
    --paper-ink:   #171A1E;
    --paper-line:  #CBD2DA;
    --stamp:       #D22E1C;
    --shadow:      0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .45);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, .55), 0 22px 60px rgba(0, 0, 0, .6);
    --screen-bg:   #111417;
    --focus:       #FF7B5F;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}

a { color: var(--accent); }

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

/* ---------- presentation shell (the sheet the screens sit on) ---------- */

.sheet {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 20px 72px;
}

.sheet-head { margin: 0 0 28px; }

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  transform: translateY(-1px);
}
.wordmark .sub { font-weight: 500; color: var(--muted); }

h1.title {
  margin: 18px 0 6px;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.015em;
  font-weight: 700;
}
p.lede {
  margin: 0;
  max-width: 60ch;
  font-size: 15px;
  color: var(--muted);
}

.frames {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 36px;
  align-items: flex-start;
}

.frame-wrap { flex: 1 1 300px; max-width: 360px; min-width: 0; }

.caption {
  margin: 14px 2px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.caption b { color: var(--ink); font-weight: 600; }

/* phone body */
.phone {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 34px;
  padding: 10px;
  box-shadow: var(--shadow-lift);
}
.screen {
  background: var(--screen-bg);
  color: #EEF1F4;
  border-radius: 26px;
  min-height: 600px;
  padding: 20px 18px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* in-product header inside a screen */
.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex: none;
}
.app-mark {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: #EEF1F4;
}
.app-mark i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #FF5A3C; display: block;
}
.app-hint { font-size: 12px; color: #7C8B9E; }

/* buttons inside the product */
.btn {
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 15px 18px;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  width: 100%;
  background: #FF5A3C;
  color: #1A0906;
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn[disabled] {
  background: #20252B;
  color: #5C6A7C;
  cursor: not-allowed;
  filter: none;
}
.btn-quiet {
  background: transparent;
  color: #AAB4C1;
  border: 1px solid #313842;
  font-weight: 550;
}
.btn-quiet:hover { color: #EEF1F4; border-color: #3C4550; filter: none; }

/* ---------- motion: one law for the whole product, text never rests ----------
   Two motions, one mechanic. The writer BURNS (heat in): a word chars and ashes a few
   seconds behind the cursor. The box VENTS (heat out): a word lights at the reading
   point and rises away as steam. Both live here so the two pages cannot drift apart.

   Both use the same collapse trick: while the word animates away it also pulls its own
   width out of the line (negative margin-right set from JS), so the line closes up
   smoothly instead of jumping, and a finished word takes no space at all. */

.w, .s {
  display: inline-block;
  vertical-align: baseline;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* the burn — writer side */
.w { margin-right: .26em; color: var(--w-ink); }
.w.burning { animation: wb-char var(--wb-burn, 1000ms) cubic-bezier(.35,.02,.5,1) forwards; }

@keyframes wb-char {
  0%   { opacity: 1;   filter: blur(0);     transform: translateY(0);     color: var(--w-ink); }
  18%  {                                                                  color: var(--w-ember-hot); }
  44%  { opacity: .92; filter: blur(.7px);  transform: translateY(-3px);  color: var(--w-ember); }
  72%  { opacity: .42; filter: blur(2.6px); transform: translateY(-8px);  color: var(--w-ash); }
  100% { opacity: 0;   filter: blur(6px);   transform: translateY(-15px); color: var(--w-ash); }
}

/* the caret — an ember sitting where you are */
.wb-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  vertical-align: -.16em;
  border-radius: 2px;
  background: var(--w-ember);
  box-shadow: 0 0 6px 1px rgba(255, 90, 60, .6), 0 0 18px 5px rgba(255, 90, 60, .25);
  animation: wb-blink 1.15s steps(1, end) infinite;
}
@keyframes wb-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .2; } }

/* the steam — reading side. The three colours are per-element custom properties so the
   same animation works on the night screen (defaults) and straight on the page ground in
   both themes (landing overrides them with --ink / --muted / --line). */
.s {
  margin-right: .3em;
  --dx: 0px;
  --steam-lit:  var(--w-ink);
  --steam-mid:  var(--w-steam);
  --steam-thin: var(--w-steam-thin);
  color: var(--steam-lit);
}
.s.rising { animation: wb-steam var(--wb-steam, 1600ms) cubic-bezier(.15,.55,.35,1) forwards; }

@keyframes wb-steam {
  0%   { opacity: 1;   filter: blur(0);     transform: translate(0, 0)                        scale(1);    color: var(--steam-lit); }
  14%  { opacity: .88; filter: blur(.7px);  transform: translate(calc(var(--dx) * .2), -20px) scale(1.02); color: var(--steam-mid); }
  28%  { opacity: .72; filter: blur(1.5px); transform: translate(calc(var(--dx) * .3), -32px) scale(1.04); color: var(--steam-mid); }
  62%  { opacity: .34; filter: blur(4.5px); transform: translate(calc(var(--dx) * .7), -60px) scale(1.1);  color: var(--steam-thin); }
  100% { opacity: 0;   filter: blur(10px);  transform: translate(var(--dx), -96px)            scale(1.18); color: var(--steam-thin); }
}

/* ---------- the box: the ONE object in this product ----------
   No pot, no lid, no envelope, no slip of paper. A closed body with a seam it vents
   through. Used by mockup-02 (live) and mockup-04 (landing), so it lives here.
   Contract: put .is-idle on an ancestor for the pressure hint + tremor,
   .is-hissing for the moment it lets go, .is-spent once it has gone quiet. */
.boxobj {
  position: relative;
  display: block;
  width: 138px;
  height: 94px;
  flex: none;
  padding: 0;
  border: 1px solid #3B434F;
  border-radius: 11px;
  background: linear-gradient(180deg, #262D36 0%, #1A1F25 58%, #13171C 100%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.boxobj .seam,
.boxobj .pressure,
.boxobj .hiss {
  position: absolute;
  left: 13px; right: 13px; top: 33px;
  height: 2px;
  border-radius: 2px;
}
.boxobj .seam {
  background: #0B0E11;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05);
}
.boxobj .pressure {
  background: linear-gradient(90deg, transparent, var(--w-ember) 30%, var(--w-ember-hot) 50%, var(--w-ember) 70%, transparent);
  opacity: .22;
  box-shadow: 0 0 10px 2px rgba(255, 90, 60, .3);
}
.boxobj .hiss {
  background: linear-gradient(90deg, transparent, var(--w-ember-hot), transparent);
  opacity: 0;
  pointer-events: none;
}

.is-idle .boxobj   { animation: wb-tremor 3.4s ease-in-out infinite; }
.is-idle .pressure { animation: wb-pressure 3.4s ease-in-out infinite; }
.is-hissing .hiss  { animation: wb-hiss 480ms cubic-bezier(.2,.7,.3,1) forwards; }
.is-spent .pressure { opacity: 0; transition: opacity 600ms ease; }

@keyframes wb-pressure { 0%, 74%, 100% { opacity: .16; } 84% { opacity: .55; } 92% { opacity: .24; } }
@keyframes wb-tremor {
  0%, 78%, 100% { transform: translate(0, 0) rotate(0); }
  83% { transform: translate(-1px, .5px) rotate(-.5deg); }
  88% { transform: translate(1px, -.5px) rotate(.5deg); }
  93% { transform: translate(-.5px, 0) rotate(-.25deg); }
}
@keyframes wb-hiss {
  0%   { opacity: 0; transform: scaleX(.2)  scaleY(1);   filter: blur(0); }
  22%  { opacity: 1; transform: scaleX(1)   scaleY(2.6); filter: blur(1px); }
  100% { opacity: 0; transform: scaleX(1.5) scaleY(1);   filter: blur(5px); }
}

/* the paper slip — printed things: the stamp and its sheet */
.paper {
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--paper-line), 0 1px 0 rgba(255,255,255,.5) inset, 0 10px 26px rgba(0,0,0,.35);
}

.msg-text {
  font-family: ui-serif, Georgia, "Iowan Old Style", serif;
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: -.005em;
}

/* the stamp */
.stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 18px 11px;
  border: 2.5px solid var(--stamp);
  border-radius: 6px;
  color: var(--stamp);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: none;
  transform: rotate(-6deg);
  box-shadow: 0 0 0 1.5px var(--stamp) inset;
  opacity: .92;
}
.stamp .word { font-size: 22px; line-height: 1.1; }
.stamp .sub {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  opacity: .85;
}

@media (max-width: 700px) {
  .sheet { padding: 24px 14px 56px; }
  h1.title { font-size: 25px; }
  .frames { gap: 32px 0; }
  .frame-wrap { max-width: 100%; flex-basis: 100%; }
  .phone { border-radius: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}