/* Mekuri pre-launch site: shared styles.
   Aesthetic: "calm washi editorial". Warm paper ground, the app's indigo kept as
   primary for brand continuity, a vermilion seal-red accent, Fraunces (display) +
   Hanken Grotesk (body). Layout utilities come from the Tailwind Play CDN; this file
   owns fonts, palette tokens, atmosphere (grain + washes), motion, and article prose. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..700&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
	--paper:      #faf6ef; /* warm washi ground (vs the app's slate-50) */
	--paper-2:    #f3ecdf; /* slightly deeper, for raised sections */
	--card:       #fffdf8; /* near-white card face */
	--ink:        #1c1b22; /* near-black body ink */
	--ink-soft:   #56525f; /* muted prose / captions */
	--ink-faint:  #8b8794; /* hints, meta */
	--indigo:     #4f46e5; /* brand primary, matches the app's bg-indigo-600 */
	--indigo-700: #4338ca;
	--indigo-50:  #eef2ff;
	--seal:       #df4a2d; /* vermilion accent (hanko seal red) */
	--seal-soft:  #fbe9e3;
	--emerald:    #059669; /* reused from the app for "new / positive" */
	--amber:      #b45309; /* reused for cautions */
	--line:       rgba(28, 27, 34, 0.12);
	--line-soft:  rgba(28, 27, 34, 0.07);
	--shadow:     0 1px 2px rgba(28,27,34,.05), 0 12px 30px -12px rgba(28,27,34,.18);
	--shadow-lg:  0 2px 4px rgba(28,27,34,.06), 0 30px 60px -24px rgba(55,48,163,.30);
}

html { scroll-behavior: smooth; }

body {
	background-color: var(--paper);
	color: var(--ink);
	font-feature-settings: "kern", "liga", "calt";
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Atmosphere: a quiet washi grain over the whole page plus two soft indigo/seal washes
   anchored to the corners. Pointer-events off so they never intercept clicks. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(60rem 40rem at 8% -10%, rgba(79,70,229,.10), transparent 60%),
		radial-gradient(50rem 36rem at 105% 8%, rgba(223,74,45,.08), transparent 55%);
}
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .5;
	/* fractal-noise grain, inlined so there is no extra request */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}

/* ---- type helpers ---- */
.font-display { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; }
.font-sans    { font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif; }
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

/* A small seal/eyebrow label used above section titles. */
.eyebrow {
	font-family: 'Hanken Grotesk', sans-serif;
	font-weight: 700;
	font-size: .72rem;
	letter-spacing: .14em;
	color: var(--seal);
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}
.eyebrow::before {
	content: "";
	width: 1.4rem;
	height: 1px;
	background: var(--seal);
	display: inline-block;
}

/* The "coming soon" pill. */
.tag-soon {
	font-family: 'Hanken Grotesk', sans-serif;
	font-weight: 700;
	font-size: .68rem;
	letter-spacing: .1em;
	color: var(--seal);
	background: var(--seal-soft);
	border: 1px solid rgba(223,74,45,.25);
	border-radius: 999px;
	padding: .2rem .6rem;
}

/* Primary / secondary buttons (the app uses indigo; we keep it). */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-family: 'Hanken Grotesk', sans-serif;
	font-weight: 600;
	border-radius: .7rem;
	padding: .7rem 1.15rem;
	transition: transform .15s ease, box-shadow .2s ease, background-color .15s ease;
	cursor: pointer;
}
.btn-primary { background: var(--indigo); color: #fff; box-shadow: 0 10px 24px -12px rgba(79,70,229,.8); }
.btn-primary:hover { background: var(--indigo-700); transform: translateY(-1px); }
.btn-ghost { border: 1px solid var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--card); transform: translateY(-1px); }

/* When a button sits inside article .prose, the generic ".prose a" link styling
   (indigo text + underline) outranks ".btn-primary" by specificity and makes the
   label near-invisible on the indigo fill. Re-assert the button's own colours. */
.prose a.btn { text-decoration: none; }
.prose a.btn-primary, .prose a.btn-primary:hover { color: #fff; }
.prose a.btn-ghost, .prose a.btn-ghost:hover { color: var(--ink); }

/* Surface card. */
.surface {
	background: var(--card);
	border: 1px solid var(--line-soft);
	border-radius: 1.1rem;
	box-shadow: var(--shadow);
}

/* ---- the flashcard-flip hero motif (Mekuri = turning a page) ---- */
.flip {
	perspective: 1400px;
	width: 100%;
	max-width: 22rem;
	aspect-ratio: 5 / 3;
}
.flip-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	animation: flip-cycle 9s ease-in-out infinite;
}
.flip:hover .flip-inner,
.flip:focus-within .flip-inner { animation-play-state: paused; }
.flip-face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	border-radius: 1.1rem;
	backface-visibility: hidden;
	background: var(--card);
	border: 1px solid var(--line-soft);
	box-shadow: var(--shadow-lg);
	padding: 1.5rem;
	text-align: center;
}
.flip-back { transform: rotateY(180deg); }

@keyframes flip-cycle {
	0%, 38%   { transform: rotateY(0deg); }
	50%, 88%  { transform: rotateY(180deg); }
	100%      { transform: rotateY(360deg); }
}

/* ---- entrance motion: staggered fade-up on load ---- */
@keyframes fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; animation: fade-up .7s cubic-bezier(.2,.7,.2,1) forwards; }
.reveal-1 { animation-delay: .05s; }
.reveal-2 { animation-delay: .15s; }
.reveal-3 { animation-delay: .25s; }
.reveal-4 { animation-delay: .35s; }
.reveal-5 { animation-delay: .45s; }
.reveal-6 { animation-delay: .55s; }

/* a gentle idle float for the hero card */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.float { animation: float 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; animation: none; }
	.flip-inner, .float { animation: none; }
	html { scroll-behavior: auto; }
}

/* ---- article prose (the Tailwind typography plugin is not on the Play CDN) ---- */
.prose { color: var(--ink); font-size: 1.075rem; line-height: 1.75; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
	font-family: 'Fraunces', serif;
	font-weight: 600;
	font-size: 1.7rem;
	line-height: 1.2;
	letter-spacing: -.01em;
	margin-top: 2.4rem;
	scroll-margin-top: 6rem;
}
.prose h3 {
	font-family: 'Fraunces', serif;
	font-weight: 600;
	font-size: 1.3rem;
	margin-top: 1.8rem;
	scroll-margin-top: 6rem;
}
.prose p, .prose li { color: #322f3a; }
.prose a { color: var(--indigo-700); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--seal); }
.prose strong { font-weight: 700; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; padding-left: 1.1rem; }
.prose ul > li::before {
	content: "";
	position: absolute;
	left: 0; top: .68em;
	width: .42rem; height: .42rem;
	border-radius: 999px;
	background: var(--seal);
}
.prose ol { list-style: decimal; }
.prose ol > li { padding-left: .3rem; }
.prose li + li { margin-top: .45rem; }
.prose blockquote {
	border-left: 3px solid var(--indigo);
	background: var(--indigo-50);
	padding: .85rem 1.15rem;
	border-radius: 0 .7rem .7rem 0;
	color: #2c2940;
	font-style: italic;
}
.prose blockquote p { margin: 0; }
.prose code {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: .9em;
	background: var(--paper-2);
	border: 1px solid var(--line-soft);
	border-radius: .35rem;
	padding: .1rem .35rem;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.2rem 0; }
.prose .lead { font-size: 1.22rem; line-height: 1.6; color: var(--ink-soft); }

/* A callout box used inside articles (honest "where Mekuri fits" notes, cautions). */
.callout {
	border: 1px solid var(--line);
	border-radius: 1rem;
	padding: 1.1rem 1.25rem;
	background: var(--card);
	margin-top: 1.6rem;
}
.callout--note { border-color: rgba(79,70,229,.3); background: linear-gradient(0deg, var(--indigo-50), var(--card)); }
.callout--warn { border-color: rgba(180,83,9,.3); background: #fdf6ec; }
.callout-title { font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; font-size: .95rem; margin-bottom: .35rem; }

/* table of contents / inline nav */
.toc a { color: var(--ink-soft); text-decoration: none; }
.toc a:hover { color: var(--indigo-700); }

/* Furigana-style ruby, used lightly in examples. */
ruby rt { font-size: .58em; color: var(--ink-faint); font-weight: 500; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, .btn:focus-visible {
	outline: 2px solid var(--indigo);
	outline-offset: 2px;
	border-radius: .4rem;
}

/* ---- waitlist form (the "get notified" email capture) ---- */
.wl-input {
	width: 100%;
	font-family: 'Hanken Grotesk', sans-serif;
	font-size: 1rem;
	color: var(--ink);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: .7rem;
	padding: .7rem .95rem;
}
.wl-input::placeholder { color: var(--ink-faint); }
.wl-input:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* honeypot: kept in the DOM for bots, hidden from people and assistive tech */
.wl-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wl-status:empty { display: none; }
.wl-status--ok { color: var(--emerald); font-weight: 600; }
.wl-status--error { color: var(--seal); font-weight: 600; }