/* Stamp Discovery - coming soon
   Light look "Papaya", dark look "Plum rose" (the app's two looks). Mobile first, no JS. */

/* ------------------------------------------------------------------ fonts (SIL OFL, see /assets/fonts/OFL.txt) */
@font-face { font-family: "Fredoka"; src: url("/assets/fonts/fredoka-600.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/assets/fonts/nunito-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/assets/fonts/nunito-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/assets/fonts/caveat-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

/* ------------------------------------------------------------------ tokens */
:root {
  color-scheme: light;
  --paper: #FEFBF5;
  --tint: #FDEFE3;
  --blob: #FBDCC4;
  --card: #FFFFFF;
  --stitch: #CABC9D;
  --ink: #4D3014;
  --ink-soft: #6E5E44;
  --muted: #76664F;
  --accent-text: #B25617;
  --coral: #F0904F;
  --glint: #F6A86F;
  --sparkle: #E8B848;
  --sparkle-2: #F0904F;
  --stamp-shadow: drop-shadow(0 3px 6px rgb(77 48 20 / .14));
  --shadow-s: 0 1px 2px rgb(77 48 20 / .08), 0 4px 12px rgb(77 48 20 / .07);
  --focus: #B25617;

  --font-head: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;

  --col: 520px;   /* text column on wide screens */
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #190019;
    --tint: #24092E;
    --blob: #351444;
    --card: #2B124C;
    --stitch: #6A3F72;
    --ink: #FBE4D8;
    --ink-soft: #DFB6B2;
    --muted: #C9A5B0;
    --accent-text: #F0C9A8;
    --coral: #DFB6B2;
    --glint: #FFFFFF;
    --sparkle: #DFB6B2;
    --sparkle-2: #F0C9A8;
    --stamp-shadow: drop-shadow(0 4px 10px rgb(0 0 0 / .45));
    --shadow-s: 0 1px 2px rgb(0 0 0 / .3), 0 4px 12px rgb(0 0 0 / .3);
    --focus: #F0C9A8;
  }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 12% 6%, var(--blob) 0, transparent 38%),
    radial-gradient(circle at 92% 96%, var(--blob) 0, transparent 34%),
    radial-gradient(ellipse at 50% 45%, var(--tint) 0, transparent 60%);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 2.5px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

/* ------------------------------------------------------------------ page frame */
.page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;           /* stamps drift off the edges, never a sideways scroll */
  padding: 0 16px;
}

.hero {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: 132px 0 28px;      /* top band = room for the stamps above */
}

.logo { width: 104px; height: 104px; margin-bottom: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .logo { animation: logo-in .7s cubic-bezier(.3, 1.5, .5, 1) .1s both; }
}

.brand {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: .01em;
  color: var(--ink-soft);
}

.headline {
  position: relative;
  margin: .1em 0 .15em;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2.3rem, 12vw, 5rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--ink);
}
.headline::before,
.headline::after {
  content: "✦";
  position: absolute;
  font-size: .32em;
  line-height: 1;
  color: var(--sparkle);
  pointer-events: none;
}
.headline::before { left: -.55em; top: .05em; }
.headline::after  { right: -.5em; bottom: .1em; font-size: .24em; color: var(--sparkle-2); }

.shine {
  display: inline-block;
  color: var(--ink);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media (prefers-reduced-motion: no-preference) {
    .shine {
      background-image: linear-gradient(100deg, var(--ink) 0 38%, var(--glint) 47%, var(--ink) 56% 100%);
      background-size: 260% 100%;
      background-position: 100% 0;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      animation: shimmer 6s ease-in-out 1.6s infinite;
    }
  }
}

.tagline {
  margin: 0 0 .6em;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(1.35rem, 5.6vw, 2.1rem);
  line-height: 1.15;
  text-wrap: balance;
  color: var(--accent-text);
}

.lede {
  margin: 0 auto 1.6em;
  max-width: 32ch;
  text-wrap: balance;
  font-size: 1.0625rem;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------ store badges (not links) */
.badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.badge {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 166px;
  padding: 9px 14px 9px 12px;
  border-radius: 14px;
  border: 1.5px dashed var(--stitch);
  background: var(--card);
  box-shadow: var(--shadow-s);
  text-align: left;
  color: var(--ink);
  cursor: default;
}
.badge-mark { flex: none; color: var(--ink); }
.badge-mark .cut { stroke: var(--card); }
.badge-text { display: flex; flex-direction: column; line-height: 1.15; }
.badge-small { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.badge-big { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; }

/* ------------------------------------------------------------------ footer */
.foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0 140px;       /* bottom band = room for the stamps below */
  font-size: .9375rem;
  color: var(--muted);
  text-align: center;
}
.foot a { font-weight: 700; overflow-wrap: anywhere; }
.copy { font-size: .875rem; }

/* ------------------------------------------------------------------ decoration layer */
.deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.stamp {
  position: absolute;
  width: var(--s, 72px);
  height: var(--s, 72px);
  max-width: none;
  transform: rotate(var(--r, 0deg));
  filter: var(--stamp-shadow);
  user-select: none;
  --dx: 6px; --dy: -8px; --dr: 4deg; --dur: 9s; --delay: 0s;
}

/* phone: three stamps in the band above, three in the band below */
.st-1    { --s: 74px; left: 3%;  top: 16px;  --r: -11deg; --dx: 5px; --dy: 7px; --dr: 5deg; --dur: 8.5s; --delay: .5s; }
.st-2    { --s: 50px; left: 35%; top: 10px;  --r: 14deg;  --dx: -4px; --dy: 6px; --dr: -6deg; --dur: 7s; --delay: .8s; }
.st-land { --s: 92px; right: 4%; top: 18px;  --r: 9deg;   --dx: -6px; --dy: 6px; --dr: -4deg; --dur: 10s; --delay: 1.3s; }
.st-3    { --s: 70px; left: 5%;  bottom: 22px; --r: 8deg;  --dx: 6px; --dy: -6px; --dr: -5deg; --dur: 9.5s; --delay: .9s; }
.st-4    { --s: 50px; left: 38%; bottom: 66px; --r: -16deg; --dx: -5px; --dy: -7px; --dr: 6deg; --dur: 7.5s; --delay: 1.1s; }
.st-5    { --s: 84px; right: 4%; bottom: 18px; --r: -7deg; --dx: -6px; --dy: -5px; --dr: 4deg; --dur: 11s; --delay: 1.2s; }
.st-6, .st-7, .st-8, .st-9, .st-10, .st-11 { display: none; }

/* the hero's top band is a bit taller on small phones with the big stamp */
@media (max-width: 359px) {
  .st-1 { --s: 64px; }
  .st-2 { --s: 44px; left: 34%; }
  .st-land { --s: 82px; }
  .st-3 { --s: 62px; }
  .st-5 { --s: 74px; }
}

/* wide screens: the stamps move to the sides of the text column */
@media (min-width: 760px) {
  .hero { padding: 64px 0 24px; }
  .foot { padding: 8px 0 32px; }
  .logo { width: 120px; height: 120px; }

  .stamp { top: auto; bottom: auto; left: auto; right: auto; }
  .st-6, .st-7, .st-8, .st-9, .st-10, .st-11 { display: block; }

  /* left side: offset = distance from the column edge */
  .st-1, .st-3, .st-7, .st-9, .st-11, .st-2 { left: max(-24px, calc(50% - var(--col) / 2 - var(--s) - var(--o))); }
  .st-land, .st-4, .st-5, .st-6, .st-8, .st-10 { right: max(-24px, calc(50% - var(--col) / 2 - var(--s) - var(--o))); }

  .st-1    { --s: clamp(80px, 9vw, 136px);  --o: 7vw;  top: 6%; }
  .st-2    { --s: clamp(54px, 5.5vw, 86px); --o: 1.5vw; top: 30%; }
  .st-3    { --s: clamp(74px, 8vw, 124px);  --o: 10vw; top: 48%; bottom: auto; }
  .st-7    { --s: clamp(56px, 6vw, 92px);   --o: 2vw;  top: 70%; --r: 12deg; --dx: 6px; --dy: -8px; --dur: 8s; --delay: 1.4s; }
  .st-9    { --s: clamp(70px, 8vw, 118px);  --o: 12vw; top: 84%; --r: -9deg; --dx: -5px; --dy: -6px; --dur: 10s; --delay: 1.6s; }
  .st-11   { --s: clamp(46px, 4.5vw, 70px); --o: 16vw; top: 26%; --r: 18deg; --dx: 4px; --dy: 7px; --dur: 7s; --delay: 1.8s; }

  .st-land { --s: clamp(96px, 10vw, 150px); --o: 6vw;  top: 7%; }
  .st-4    { --s: clamp(56px, 5.5vw, 88px); --o: 14vw; top: 32%; bottom: auto; }
  .st-5    { --s: clamp(76px, 8.5vw, 128px); --o: 2vw; top: 44%; bottom: auto; }
  .st-6    { --s: clamp(54px, 5.5vw, 86px); --o: 12vw; top: 64%; --r: 10deg; --dx: -6px; --dy: 7px; --dur: 9s; --delay: 1.5s; }
  .st-8    { --s: clamp(74px, 8vw, 120px);  --o: 4vw;  top: 78%; --r: -13deg; --dx: 5px; --dy: -6px; --dur: 8.5s; --delay: 1.7s; }
  .st-10   { --s: clamp(44px, 4vw, 64px);   --o: 1vw;  top: 92%; --r: 20deg; --dx: -4px; --dy: -5px; --dur: 7.5s; --delay: 1.9s; }
}

/* very narrow wide-screens: keep the inner stamps out of the text */
@media (min-width: 760px) and (max-width: 979px) {
  .st-2, .st-4, .st-11, .st-7, .st-10 { display: none; }
}

/* ------------------------------------------------------------------ sparkles */
.sparkles span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-size: var(--f, 14px);
  line-height: 1;
  color: var(--sparkle);
  opacity: var(--o, .7);
  transform: scale(var(--k, 1));
}
.sparkles span:nth-child(3n)   { color: var(--sparkle-2); }
.sparkles span:nth-child(1)  { --x: 4%;  --y: 2%;  --f: 16px; --d: 0s;   --t: 3.2s; }
.sparkles span:nth-child(2)  { --x: 28%; --y: 7%;  --f: 11px; --d: 1.1s; --t: 2.6s; }
.sparkles span:nth-child(3)  { --x: 58%; --y: 3%;  --f: 13px; --d: .4s;  --t: 3.8s; }
.sparkles span:nth-child(4)  { --x: 74%; --y: 11%; --f: 10px; --d: 2.2s; --t: 2.9s; }
.sparkles span:nth-child(5)  { --x: 93%; --y: 4%;  --f: 14px; --d: 1.6s; --t: 3.4s; }
.sparkles span:nth-child(6)  { --x: 2%;  --y: 22%; --f: 10px; --d: .7s;  --t: 2.4s; }
.sparkles span:nth-child(7)  { --x: 94%; --y: 26%; --f: 12px; --d: 2.8s; --t: 3.1s; }
.sparkles span:nth-child(8)  { --x: 3%;  --y: 41%; --f: 13px; --d: 1.9s; --t: 3.6s; }
.sparkles span:nth-child(9)  { --x: 95%; --y: 47%; --f: 9px;  --d: .2s;  --t: 2.7s; }
.sparkles span:nth-child(10) { --x: 2%;  --y: 63%; --f: 9px;  --d: 2.5s; --t: 2.5s; }
.sparkles span:nth-child(11) { --x: 96%; --y: 66%; --f: 14px; --d: 1.3s; --t: 3.9s; }
.sparkles span:nth-child(12) { --x: 4%;  --y: 79%; --f: 12px; --d: .9s;  --t: 3.3s; }
.sparkles span:nth-child(13) { --x: 30%; --y: 86%; --f: 10px; --d: 3.1s; --t: 2.8s; }
.sparkles span:nth-child(14) { --x: 62%; --y: 91%; --f: 15px; --d: 1.7s; --t: 3.5s; }
.sparkles span:nth-child(15) { --x: 88%; --y: 82%; --f: 10px; --d: .5s;  --t: 2.6s; }
.sparkles span:nth-child(16) { --x: 18%; --y: 96%; --f: 12px; --d: 2.4s; --t: 3.0s; }
.sparkles span:nth-child(17) { --x: 47%; --y: 1%;  --f: 9px;  --d: 3.4s; --t: 2.3s; }
.sparkles span:nth-child(18) { --x: 82%; --y: 97%; --f: 11px; --d: 1.0s; --t: 3.7s; }
.sparkles span:nth-child(19) { --x: 17%; --y: 13%; --f: 9px;  --d: 2.0s; --t: 2.2s; }
.sparkles span:nth-child(20) { --x: 50%; --y: 97%; --f: 9px;  --d: .3s;  --t: 2.9s; }
.sparkles span:nth-child(21) { --x: 1%;  --y: 52%; --f: 11px; --d: 3.0s; --t: 3.2s; }
.sparkles span:nth-child(22) { --x: 97%; --y: 36%; --f: 10px; --d: 2.6s; --t: 2.8s; }
.sparkles span:nth-child(23) { --x: 97%; --y: 57%; --f: 12px; --d: .6s;  --t: 3.4s; }
.sparkles span:nth-child(24) { --x: 3%;  --y: 32%; --f: 14px; --d: 1.4s; --t: 4.1s; }

@media (min-width: 760px) {
  .sparkles span { font-size: calc(var(--f, 14px) * 1.6); }
  .sparkles span:nth-child(2)  { --x: 22%; --y: 18%; }
  .sparkles span:nth-child(6)  { --x: 12%; --y: 40%; }
  .sparkles span:nth-child(9)  { --x: 86%; --y: 56%; }
  .sparkles span:nth-child(13) { --x: 24%; --y: 74%; }
  .sparkles span:nth-child(15) { --x: 78%; --y: 24%; }
  .sparkles span:nth-child(19) { --x: 15%; --y: 62%; }
  .sparkles span:nth-child(22) { --x: 82%; --y: 70%; }
}

/* ------------------------------------------------------------------ motion (only when wanted) */
@media (prefers-reduced-motion: no-preference) {
  .stamp {
    animation:
      stamp-in .9s ease-out var(--delay) backwards,
      drift var(--dur) ease-in-out var(--delay) infinite alternate;
  }
  .st-land {
    animation:
      land 1s cubic-bezier(.25, 1, .4, 1) .45s backwards,
      drift var(--dur) ease-in-out 1.45s infinite alternate;
  }
  .sparkles span {
    opacity: 0;
    animation: twinkle var(--t, 3s) ease-in-out var(--d, 0s) infinite;
  }
  .headline::before { animation: twinkle 2.8s ease-in-out .6s infinite; }
  .headline::after  { animation: twinkle 3.4s ease-in-out 1.9s infinite; }
}

@keyframes stamp-in {
  from { opacity: 0; transform: translateY(10px) scale(.85) rotate(var(--r)); }
}
@keyframes drift {
  from { transform: translate(0, 0) rotate(var(--r)); }
  to   { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) + var(--dr))); }
}
@keyframes land {
  0%   { opacity: 0; transform: translateY(-46px) scale(1.55) rotate(calc(var(--r) - 14deg)); }
  45%  { opacity: 1; transform: translateY(0) scale(.86) rotate(var(--r)); }
  62%  { transform: translateY(0) scale(1.06) rotate(var(--r)); }
  80%  { transform: translateY(0) scale(.98) rotate(var(--r)); }
  100% { transform: translateY(0) scale(1) rotate(var(--r)); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  50%      { opacity: .95; transform: scale(1) rotate(45deg); }
}
@keyframes shimmer {
  0%   { background-position: 100% 0; }
  45%, 100% { background-position: 0% 0; }
}
@keyframes logo-in {
  from { opacity: 0; transform: translateY(8px) scale(.9) rotate(-6deg); }
}

/* 404 */
.home-link {
  display: inline-block;
  margin-top: .2em;
  font-weight: 700;
}