/* Coming-soon page for muchmeme.com. The tool itself lives at /app with its own stylesheet. */
@font-face { font-family: "Anton"; src: url("/fonts/Anton-Regular.ttf") format("truetype"); font-display: swap; }

/* Layout: wordmark row; a hero with the pitch on the left and a looping caption-to-meme demo on the right
   (stacked on phones); Doge-style phrases scattered behind. */
:root {
  --bg: #f3efe4;
  --surface: #ffffff;
  --ink: #15130f;
  --muted: #5e5a50;
  --line: #ddd5c2;
  --accent: #c98a00;
  --frame: #15171b;
  --d1: #d4007a; --d2: #0a8f50; --d3: #0067c0; --d4: #c25a00; --d5: #7a33d6; --d6: #b8007a;
  --display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --doge: "Comic Neue", "Comic Sans MS", "Chalkboard SE", cursive;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14130f; --surface: #1d1b16; --ink: #f2eee4; --muted: #a8a294; --line: #332f26; --accent: #f2b632; --frame: #08090b;
    --d1: #ff5cb4; --d2: #3ddc8a; --d3: #5cb2ff; --d4: #ffa04d; --d5: #b98cff; --d6: #ff7ad1;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14130f; --surface: #1d1b16; --ink: #f2eee4; --muted: #a8a294; --line: #332f26; --accent: #f2b632; --frame: #08090b;
  --d1: #ff5cb4; --d2: #3ddc8a; --d3: #5cb2ff; --d4: #ffa04d; --d5: #b98cff; --d6: #ff7ad1;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--text);
  padding-inline: max(16px, env(safe-area-inset-left));
  padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px);
  overflow-x: hidden;
}
main, header.site, footer.site { width: 100%; max-width: 1120px; margin-inline: auto; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

header.site { padding-block: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wordmark { font: 400 24px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.soon {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border: 1.5px solid var(--ink); border-radius: 999px; padding: 5px 12px;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(40px, 8vw, 88px);
}
.pitch { position: relative; z-index: 1; display: grid; gap: 20px; justify-items: start; }
h1 {
  margin: 0;
  font: 400 clamp(52px, 9vw, 104px)/.96 var(--display);
  text-transform: uppercase;
  text-wrap: balance;
}
/* Second line set like meme text: white with a heavy black outline. */
h1 span { color: #fff; -webkit-text-stroke: clamp(2px, .55vw, 5px) #000; paint-order: stroke fill; }
.lede { margin: 0; max-width: 46ch; font-size: 19px; color: var(--muted); }

/* Doge asides: Comic font, loud colors, tilted, gently bobbing. */
.doge { position: absolute; inset: 0; pointer-events: none; }
.doge span { position: absolute; font: 700 clamp(17px, 2vw, 26px)/1 var(--doge); white-space: nowrap; animation: bob 4s ease-in-out infinite; }
.d1 { color: var(--d1); top: 2%;  left: 38%; rotate: -8deg; font-size: clamp(22px, 3vw, 36px) !important; }
.d2 { color: var(--d2); bottom: 2%; left: 0; rotate: 6deg; animation-delay: -1s !important; }
.d3 { color: var(--d3); bottom: 4%; left: 30%; rotate: -4deg; animation-delay: -2s !important; }
.d4 { color: var(--d4); top: 0;   right: 2%; rotate: 9deg; animation-delay: -.5s !important; }
.d5 { color: var(--d5); bottom: 0; right: 6%; rotate: -10deg; animation-delay: -3s !important; }
.d6 { color: var(--d6); top: 60%; left: 48%; rotate: 12deg; animation-delay: -1.5s !important; }
@keyframes bob { 50% { translate: 0 -6px; } }

/* Demo: a typed caption above the meme it becomes. */
.demo {
  position: relative; z-index: 1; margin: 0;
  background: var(--surface); border: 2px solid var(--ink); border-radius: 16px;
  box-shadow: 8px 8px 0 var(--ink);
  overflow: hidden; display: grid; min-width: 0;
}
.typed {
  min-height: 3.6em; padding: 14px 16px; border-bottom: 2px solid var(--ink);
  font-size: 17px; line-height: 1.35; font-weight: 500;
}
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.15em; background: var(--ink); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.frame { position: relative; background: var(--frame); height: clamp(250px, 34vw, 380px); display: flex; align-items: center; justify-content: center; padding: 26px 12px 12px; }
.frame canvas { display: block; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; width: auto; height: auto; opacity: 0; transform: scale(.96); transition: opacity .35s, transform .35s; }
.frame canvas.shown { opacity: 1; transform: none; }
.sticker {
  position: absolute; z-index: 2; top: -18px; right: 14px; rotate: 6deg;
  font: 700 22px/1 var(--doge); color: #15130f; background: #f2b632;
  padding: 6px 10px; border-radius: 8px; box-shadow: 3px 3px 0 #000;
  opacity: 0; scale: .6; transition: opacity .25s, scale .25s cubic-bezier(.3, 1.6, .5, 1);
}
.sticker.shown { opacity: 1; scale: 1; }
figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 14px; color: var(--muted); }
figcaption button {
  flex: none; cursor: pointer; font: 700 14px/1 var(--text); color: var(--ink);
  background: transparent; border: 1.5px solid var(--ink); border-radius: 999px; padding: 8px 14px;
}
figcaption button:hover { background: var(--ink); color: var(--bg); }

footer.site { border-top: 1px solid var(--line); padding-block: 18px 28px; color: var(--muted); font-size: 14px; }
footer.site p { margin: 0; }

@media (max-width: 820px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 52px; }
  .d1 { top: 12px; left: 0; }
  .d2 { top: 14px; bottom: auto; left: auto; right: 0; }
  .d5 { bottom: 8px; right: 4%; }
  .d3, .d4, .d6 { display: none; }
  .frame { height: clamp(220px, 70vw, 360px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}