/* Elijah — a storybook page. Little Prince night sky → dawn, Wild-Things crown, Seuss-bouncy letters. */
@font-face { font-family: "Fraunces"; src: url(fonts/fraunces.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Caveat"; src: url(fonts/caveat.woff2) format("woff2"); font-weight: 500 700; font-display: swap; }
:root {
  --paper: #f7efe1; --card: #fffaf2; --ink: #2b3358; --mute: #6d6878; --line: rgb(43 51 88 / .1);
  --blue: #9fb3d9; --butter: #f4d98a; --blush: #efc3bd; --gold: #c9973c; --night: #232c52;
  --serif: "Fraunces", ui-serif, Georgia, serif; --hand: "Caveat", "Segoe Print", cursive;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --out: cubic-bezier(.23, 1, .32, 1);
  --spring: linear(0, .066, .225, .423, .624, .8, .94, 1.038, 1.096, 1.123, 1.125, 1.111, 1.088, 1.062, 1.038, 1.017, 1.002, .992, .986, .984, 1);
  --shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 1px 2px rgb(80 50 20 / .06), 0 10px 24px -10px rgb(80 50 20 / .16), 0 30px 50px -30px rgb(43 51 88 / .25);
  color-scheme: light; -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { background: var(--paper); color: var(--ink); font: 400 1rem/1.5 var(--sans); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body {
  min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding: max(14px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  background: linear-gradient(#c9d4ec, #ead4dc 22rem, #f7e6c8 38rem, var(--paper) 52rem) no-repeat;
}
body::after { /* paper grain */
  content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .22;
  background: 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px dashed var(--ink); outline-offset: 3px; border-radius: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: .84em; letter-spacing: -.01em; }
.hand { font: 600 1.7rem/1 var(--hand); color: var(--gold); }

/* language: both live in the HTML, CSS shows one */
html[data-lang="de"] [lang="en"], html[data-lang="en"] [lang="de"] { display: none !important; }

/* entrance: a little hop up (spring), staggered */
.in { animation: hop .9s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 70ms + var(--base, 120ms)); }
.turned { --base: 520ms; }
@keyframes hop { from { opacity: 0; translate: 0 22px; scale: .96; filter: blur(4px); } }

/* ——— sky: twinkling stars + drifting clouds ——— */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sky i { position: absolute; width: var(--s, 10px); aspect-ratio: 1; background: var(--butter); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: twinkle 3.2s ease-in-out infinite alternate, drift 26s ease-in-out infinite alternate; }
.sky i:nth-child(1) { top: 8%; left: 10%; --s: 12px; }
.sky i:nth-child(2) { top: 14%; left: 82%; --s: 9px; animation-delay: -1s, -6s; }
.sky i:nth-child(3) { top: 30%; left: 6%; --s: 7px; animation-delay: -2s, -12s; }
.sky i:nth-child(4) { top: 4%; left: 58%; --s: 8px; animation-delay: -.5s, -3s; }
.sky i:nth-child(5) { top: 38%; left: 90%; --s: 13px; animation-delay: -1.6s, -9s; }
.sky i:nth-child(6) { top: 22%; left: 34%; --s: 6px; animation-delay: -2.4s, -15s; }
.sky i:nth-child(7) { top: 52%; left: 16%; --s: 9px; animation-delay: -.8s, -18s; }
.sky i:nth-child(8) { top: 60%; left: 78%; --s: 7px; animation-delay: -2.8s, -21s; }
.sky b { position: absolute; top: 18%; left: -30%; width: 220px; height: 60px; border-radius: 50%; background: #fff; opacity: .55; filter: blur(14px); animation: cloud 70s linear infinite; }
.sky b + b { top: 44%; width: 300px; height: 80px; opacity: .45; animation-duration: 95s; animation-delay: -50s; }
@keyframes twinkle { from { opacity: .35; scale: .7; } to { opacity: 1; scale: 1.1; } }
@keyframes drift { to { translate: 14px -18px; rotate: 20deg; } }
@keyframes cloud { to { translate: 170vw 0; } }

/* ——— name: storybook serif, letters bob like a Seuss rhyme ——— */
.name {
  position: relative; font: 800 clamp(4.6rem, 25vw, 9.5rem)/.9 var(--serif); letter-spacing: -.03em; color: var(--ink);
  user-select: none; cursor: default; padding-top: .12em;
}
.name span { display: inline-block; animation: bob 2.8s ease-in-out infinite alternate; transition: scale .5s var(--spring); }
.name span:nth-child(odd) { animation-delay: -1.4s; }
.name span:nth-of-type(1) { rotate: -6deg; } .name span:nth-of-type(2) { rotate: 4deg; translate: 0 -.04em; } .name span:nth-of-type(3) { rotate: -3deg; }
.name span:nth-of-type(4) { rotate: 5deg; } .name span:nth-of-type(5) { rotate: -4deg; translate: 0 -.03em; } .name span:nth-of-type(6) { rotate: 3deg; }
.name span:hover, .name span:active { scale: 1.18; }
@keyframes bob { from { transform: translateY(.03em); } to { transform: translateY(-.05em); } }
.crown { position: absolute; left: -.06em; top: 0; width: .42em; rotate: -18deg; fill: var(--butter); stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; animation: bob 2.2s ease-in-out infinite alternate; }

.moon {
  width: min(66vw, 290px); aspect-ratio: 1; border-radius: 50%;
  mask: radial-gradient(circle, #000 56%, transparent 71%); animation: float 7s ease-in-out infinite alternate;
}
@keyframes float { from { translate: 0 -6px; rotate: -1.5deg; } to { translate: 0 6px; rotate: 1.5deg; } }

/* language switch — pill follows with a spring */
.seg { position: relative; display: inline-grid; grid-auto-flow: column; padding: 3px; border-radius: 999px; background: rgb(43 51 88 / .08); }
.seg button { position: relative; z-index: 1; width: 44px; height: 32px; border-radius: 999px; font-size: .76rem; font-weight: 700; letter-spacing: .08em; color: var(--mute); transition: color .2s, scale .15s var(--out); }
.seg button[aria-pressed="true"] { color: var(--ink); }
.seg-pill { position: absolute; inset: 3px auto 3px 3px; width: 44px; border-radius: 999px; background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 2px 8px rgb(0 0 0 / .06); transition: translate .55s var(--spring); }
html[data-lang="en"] .seg-pill { translate: 100%; }
button:active { scale: .95; }

/* ——— the cover (password screen): night sky ——— */
.lock {
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: max(20px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom)); text-align: center; color: #f6efe1; overflow: hidden;
  background: linear-gradient(#1d2549, #2f3a6e 45%, #6d6c9c 78%, #d9a9a8 100%);
  transform-origin: 0 50%; backface-visibility: hidden;
}
.lock .sky { position: absolute; z-index: 0; } .lock > :not(.sky) { position: relative; }
.lock .seg { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; background: rgb(255 255 255 / .12); }
.lock .seg button { color: rgb(246 239 225 / .7); } .lock .seg button[aria-pressed="true"] { color: var(--ink); }
.lock .moon { width: min(62vw, 260px); margin-bottom: 4px; }
.lock .name { color: #fbf3e4; font-size: clamp(4.2rem, 22vw, 7.5rem); text-shadow: 0 4px 30px rgb(244 217 138 / .25); }
.lock .hand { color: var(--butter); margin-top: 6px; }
.gate { width: 100%; max-width: 360px; display: grid; gap: 10px; margin-top: 16px; }
.gate label { font-size: .92rem; color: rgb(246 239 225 / .78); }
.field { position: relative; }
.field input {
  width: 100%; height: 60px; padding: 0 64px 0 24px; border: 0; border-radius: 999px; background: var(--card); color: var(--ink);
  font: 600 1.05rem var(--sans); letter-spacing: .08em; text-align: center; box-shadow: 0 10px 30px -10px rgb(0 0 0 / .5); transition: box-shadow .25s var(--out);
}
.field input::placeholder { color: #c7b98f; letter-spacing: .3em; }
.field input:focus { outline: none; box-shadow: 0 10px 30px -10px rgb(0 0 0 / .5), 0 0 0 4px rgb(244 217 138 / .55); }
.go { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; border-radius: 50%; background: var(--butter); display: grid; place-items: center; transition: scale .4s var(--spring), rotate .6s var(--spring); }
.go svg { width: 22px; height: 22px; fill: var(--ink); }
.go:hover { rotate: 72deg; scale: 1.06; }
[data-state="unlocking"] .go svg { animation: spin 1s linear infinite; }
@keyframes spin { to { rotate: 1turn; } }
.err { min-height: 1.4em; font-size: .9rem; color: var(--blush); }
.shake { animation: shake .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 20%, 60% { translate: -8px 0; } 40%, 80% { translate: 8px 0; } }
/* the cover swings open like a book page */
.lock.opening { animation: turn 1.1s cubic-bezier(.65, 0, .3, 1) forwards; pointer-events: none; }
@keyframes turn { 0% { transform: perspective(1600px) rotateY(0); box-shadow: 0 0 0 rgb(0 0 0 / 0); }
  60% { box-shadow: 40px 0 80px rgb(43 51 88 / .35); opacity: 1; } 100% { transform: perspective(1600px) rotateY(-112deg); opacity: 0; } }

/* ——— the page ——— */
.bar { width: 100%; max-width: 1080px; display: flex; justify-content: flex-end; }
main:not(.lock) { width: 100%; max-width: 480px; display: grid; gap: 18px; }
.hero { display: grid; justify-items: center; text-align: center; padding: 0 0 14px; }
.hero .hand { margin-top: 2px; }
.fullname { font: 600 1.05rem var(--serif); color: var(--ink); margin-top: .9rem; letter-spacing: .01em; }
.born { font-size: 1.35rem; color: var(--mute); margin-top: 4px; }
.lede { max-width: 32ch; margin-top: 14px; font-size: 1.06rem; text-wrap: balance; }

.gifts { display: grid; gap: 18px; }
.card {
  position: relative; padding: 22px 20px 20px; background: var(--card); box-shadow: var(--shadow);
  border-radius: 30px 38px 32px 36px / 36px 30px 38px 32px; outline: 1.5px dashed rgb(43 51 88 / .14); outline-offset: -9px;
  transition: translate .6s var(--spring), rotate .6s var(--spring);
}
.card:nth-child(odd) { rotate: -.6deg; } .card:nth-child(even) { rotate: .5deg; }
@media (hover: hover) { .card:hover { translate: 0 -5px; rotate: 0deg; } .card:hover .ico { animation: wiggle .7s var(--out); } }
.ico { position: absolute; top: -14px; right: 4px; width: 92px; pointer-events: none; }
@keyframes wiggle { 25% { rotate: -8deg; scale: 1.06; } 50% { rotate: 6deg; } 75% { rotate: -3deg; } }
.body { display: grid; gap: 8px; min-width: 0; }
h3 { font: 700 1.5rem/1.15 var(--serif); padding-right: 84px; min-height: 30px; }
.note { color: var(--mute); font-size: .95rem; text-wrap: pretty; }
.card .note { padding-right: 56px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 22px; margin-top: 6px; border-radius: 999px; text-decoration: none; font-weight: 650; transition: scale .4s var(--spring), translate .4s var(--spring); }
.primary { background: var(--ink); color: #fbf3e4; box-shadow: 0 2px 0 rgb(255 255 255 / .12) inset, 0 8px 18px -8px rgb(43 51 88 / .7); }
.btn:hover { translate: 0 -2px; } .btn:active { scale: .95; }
.card .btn { width: 100%; }

.rows { display: grid; margin-top: 2px; }
.rows > div { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t b" "d b"; align-items: center; column-gap: 8px; padding: 8px 0; border-top: 1.5px dashed var(--line); }
.rows > div:first-child { border-top: 0; }
dt { grid-area: t; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
dd { grid-area: d; font-weight: 550; overflow-wrap: anywhere; }

/* copy: icon pops copy → check */
.copy { grid-area: b; position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgb(159 179 217 / .22); transition: background .2s, scale .4s var(--spring); }
.copy:hover { background: rgb(159 179 217 / .38); }
.copy::before, .copy::after { content: ""; position: absolute; inset: 12px; background: var(--ink); transition: opacity .25s var(--out), scale .45s var(--spring), filter .25s var(--out); }
.copy::before { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='3'/%3E%3Cpath d='M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E") center / contain no-repeat; }
.copy::after { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; scale: .4; filter: blur(3px); }
.copy.done { background: var(--butter); }
.copy.done::before { opacity: 0; scale: .4; filter: blur(3px); }
.copy.done::after { opacity: 1; scale: 1; filter: none; }

/* secondary */
h2.hand { font-size: 1.9rem; color: var(--ink); margin: 0 8px 10px; rotate: -1.5deg; }
.more, .now { padding-top: 22px; }
.list { list-style: none; padding: 4px 0; background: var(--card); box-shadow: var(--shadow); border-radius: 34px 28px 36px 30px / 28px 36px 30px 34px; }
.list li + li { border-top: 1.5px dashed var(--line); }
.list a, .row { display: grid; grid-template-columns: 52px 1fr auto; grid-template-areas: "p t i" "p s i"; align-items: center; column-gap: 12px; padding: 12px 16px; text-decoration: none; }
.list img, .dot { grid-area: p; width: 52px; transition: rotate .5s var(--spring), scale .5s var(--spring); }
.dot { font-style: normal; text-align: center; font-size: 1.5rem; color: var(--gold); }
.list a:hover img { rotate: -10deg; scale: 1.1; }
.list b { grid-area: t; font: 700 1.1rem var(--serif); }
.list small { grid-area: s; color: var(--mute); font-size: .86rem; overflow-wrap: anywhere; }
.list a > span[aria-hidden], .row .copy { grid-area: i; }
.list a > span[aria-hidden] { font-size: 1.1rem; color: var(--mute); transition: translate .4s var(--spring); }
.list a:hover > span[aria-hidden] { translate: 3px -3px; }

.chips { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chips li {
  display: grid; justify-items: center; gap: 4px; padding: 14px 12px 16px; text-align: center; font-size: .9rem; line-height: 1.3; text-wrap: balance;
  background: var(--card); box-shadow: var(--shadow); border-radius: 28px 34px 26px 32px / 32px 26px 34px 28px; transition: translate .5s var(--spring), rotate .5s var(--spring);
}
.chips .c1 { rotate: -1.5deg; } .chips .c2 { rotate: 1.2deg; } .chips .c3 { rotate: .8deg; } .chips .c4 { rotate: -1deg; }
.chips img { width: 104px; }
.chips li:hover, .chips li:active { translate: 0 -4px; rotate: 0deg; }
.chips li:hover img, .chips li:active img { animation: wiggle .7s var(--out); }
.c4 img { animation: wave 1.8s ease-in-out infinite alternate; transform-origin: 50% 90%; }
@keyframes wave { from { rotate: -5deg; } to { rotate: 5deg; } }

/* placeholder badge so Jerry sees what still needs real details */
.ph :is(h3, b)::after { content: "Platzhalter"; margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: #fbe3dc; color: #a2524a; font: 700 .58rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }
html[data-lang="en"] .ph :is(h3, b)::after { content: "Placeholder"; }

.foot { padding: 44px 0 8px; color: var(--mute); font-size: .92rem; text-align: center; line-height: 1.6; }
.foot .hand { font-size: 2.1rem; color: var(--ink); }

/* toasts (Sonner-style stack) */
.toasts { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 40; pointer-events: none; }
.toast {
  position: absolute; bottom: 0; left: 50%; translate: -50% 16px; scale: .9; opacity: 0; white-space: nowrap;
  padding: 12px 18px; border-radius: 999px; background: var(--ink); color: #fbf3e4; font-size: .9rem; font-weight: 600; box-shadow: 0 10px 30px -10px rgb(0 0 0 / .45);
  transition: translate .5s var(--spring), scale .5s var(--spring), opacity .3s var(--out);
}
.toast::before { content: "✦ "; color: var(--butter); }
.toast.on { opacity: calc(1 - var(--n) * .25); translate: -50% calc(var(--n) * -10px); scale: calc(1 - var(--n) * .05); }
.toast.out { opacity: 0; translate: -50% 10px; scale: .9; }

@media (min-width: 860px) {
  body { padding-inline: 40px; }
  main:not(.lock) { max-width: 1080px; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .hero, .gifts { grid-column: 1 / -1; }
  .hero { padding-bottom: 30px; }
  .gifts { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .card { display: flex; flex-direction: column; padding: 26px; }
  .card .body { flex: 1; display: flex; flex-direction: column; }
  .card .note { padding-right: 0; }
  .card .btn { margin-top: auto; }
  .ico { position: static; width: 120px; margin: -46px 0 4px -6px; }
  h3 { padding-right: 0; }
  .gifts { margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* money rails: lightning / bitcoin / base / nostr — QR on tap, copy, and a tiny "how to gift sats" */
.list small:has(.hint) { display: grid; gap: 1px; }
.hint { font-size: .8rem; opacity: .85; }
.acts { grid-area: i; display: flex; gap: 6px; }
.acts .copy { grid-area: auto; }
.qr { position: relative; width: 44px; height: 44px; border-radius: 50%; background: rgb(159 179 217 / .22); transition: background .2s, scale .4s var(--spring); }
.qr:hover, .qr[aria-expanded="true"] { background: rgb(159 179 217 / .38); }
.qr:active, .copy:active { scale: .92; }
.qr::before { content: ""; position: absolute; inset: 12px; background: var(--ink); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Cpath d='M14 14h3v3M21 14v.01M14 21h.01M17.5 21H21v-3.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.qrbox { display: grid; justify-items: center; gap: 8px; padding: 2px 16px 18px; animation: qr-in .45s var(--spring); }
.qrbox svg { width: min(220px, 70vw); height: auto; padding: 10px; background: #fff; border-radius: 22px 18px 24px 20px; box-shadow: 0 10px 24px -14px rgb(43 51 88 / .5); }
.qrbox svg path { fill: var(--ink); }
.qrbox p { color: var(--mute); font-size: .75rem; overflow-wrap: anywhere; text-align: center; max-width: 30ch; }
@keyframes qr-in { from { opacity: 0; scale: .9; filter: blur(4px); } }
.how { margin: 12px 8px 0; padding: 4px 16px; border-radius: 26px 22px 28px 24px; background: rgb(255 250 242 / .6); }
.how summary { cursor: pointer; padding: 10px 0; font: 700 1rem var(--serif); list-style: none; }
.how summary::before { content: "✦ "; color: var(--gold); }
.how summary::-webkit-details-marker { display: none; }
.how ol { margin: 0 0 8px 1.2rem; color: var(--ink); font-size: .92rem; display: grid; gap: 4px; }
.how .note { padding: 0 0 12px; font-size: .86rem; }
.list .row b { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .qrbox { animation: none; } }

/* crypto-only: fiat cards stay in the markup, hidden unless config "fiat" is true */
body:not(.fiat-on) [data-fiat] { display: none !important; }
.rows .acts { grid-area: b; }
.card .qrbox { padding: 6px 0 4px; }
.how b { font-weight: 700; }
@media (min-width: 860px) { body:not(.fiat-on) .gifts { grid-template-columns: repeat(2, 1fr); } }
.pair-hint { grid-column: 1 / -1; max-width: 46ch; margin: -2px auto 0; padding: 0 12px; text-align: center; color: var(--mute); font-size: .9rem; text-wrap: balance; }
.pair-hint > span[aria-hidden] { color: var(--gold); }
.fiat-on .pair-hint { display: none; }