/* Biscotti, the friendly version. One look on purpose: orange ground, sunny
   yellow and cream highlights, dark brown ink for anything you read. Text
   that sits straight on the orange is either big (headlines, cream with an
   ink shadow) or ink. */
:root {
  --orange: #ff7a00;
  --orange-deep: #e85d00;
  --sun: #ffd84a;
  --cream: #fff6e6;
  --ink: #2b1400;
  --ink-soft: #5a3210;
  --leaf: #3f8a1c;
  --display: "Futura", "Futura PT", "Jost", "Baloo 2", system-ui, sans-serif;
  --body: "Nunito", ui-rounded, system-ui, -apple-system, sans-serif;
  --r-card: 28px;
  --chonk: 0 6px 0 var(--ink);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--orange); }
body {
  margin: 0;
  background: var(--orange);
  color: var(--ink);
  font: 500 18px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
img, video, canvas { max-width: 100%; display: block; }

.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ---------- type ---------- */
.big {
  font: 800 clamp(64px, 11vw, 148px)/0.86 var(--display);
  letter-spacing: -0.02em;
  color: var(--cream);
  text-shadow: 0 0.06em 0 var(--ink);
  margin: 0;
  text-wrap: balance;
}
.lede {
  font: 700 clamp(22px, 2.6vw, 32px)/1.2 var(--display);
  color: var(--ink);
  margin: 0;
  max-width: 17em;
  text-wrap: balance;
}
.h2 {
  font: 800 clamp(38px, 5vw, 64px)/0.95 var(--display);
  color: var(--cream);
  text-shadow: 0 0.06em 0 var(--ink);
  margin: 0;
  text-wrap: balance;
}
.eyebrow {
  font: 800 14px/1 var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- the tour pill ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--cream); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 999px;
  box-shadow: var(--chonk);
  padding: 8px 20px 8px 8px;
  font: 800 clamp(17px, 1.8vw, 21px)/1.1 var(--display);
  text-decoration: none;
  align-self: flex-start; justify-self: start;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
.pill b { white-space: nowrap; background: var(--sun); border: 3px solid var(--ink); border-radius: 999px; padding: 4px 12px 2px; font-weight: 800; }
.pill:hover { transform: translateY(-2px) rotate(-1deg); }

/* ---------- the memecoin line ---------- */
.funded {
  display: block; align-self: flex-start;
  font: 700 17px/1.6 var(--body); color: var(--ink); margin: 0;
}
.funded a { font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }
.coin {
  display: inline-block; background: #ffc800; color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: 9px; box-shadow: 0 2px 0 var(--ink);
  padding: 0 7px; font-weight: 900; letter-spacing: .01em; line-height: 1.35;
}
/* a hint of the treat fund, never the headline */
.fund { white-space: nowrap; font-weight: 800; }
.fund b { font: 800 1.12em/1 var(--display); font-variant-numeric: tabular-nums; }
.fund::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--leaf); margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(63, 138, 28, .22); }

/* ---------- cards ---------- */
.card {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--chonk);
  padding: clamp(20px, 3vw, 32px);
  min-width: 0;
}
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.card-head h3 { font: 800 30px/1 var(--display); margin: 0; }
.card-head .tag { font: 800 13px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; background: var(--sun); border: 2px solid var(--ink); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }

/* ---------- tour dates: big date, city, venue, rules between ---------- */
.dates { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.dates li {
  display: grid; grid-template-columns: 7.2em minmax(0, 1fr) auto; gap: 14px; align-items: baseline;
  padding: 14px 2px; border-bottom: 2px solid rgba(43, 20, 0, .18);
}
.dates li:last-child { border-bottom: 3px solid var(--ink); }
.dates .d { font: 800 26px/1 var(--display); color: var(--orange-deep); font-variant-numeric: tabular-nums; }
.dates .c { font: 800 21px/1.15 var(--display); }
.dates .v { font: 700 16px/1.2 var(--body); color: var(--ink-soft); text-align: right; }
.dates li.next .c::after { content: "next"; margin-left: 8px; font: 800 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; background: var(--sun); border: 2px solid var(--ink); border-radius: 999px; padding: 3px 7px; vertical-align: 4px; color: var(--ink); }
@media (max-width: 520px) {
  .dates li { grid-template-columns: 5.6em minmax(0, 1fr); }
  .dates .v { grid-column: 2; text-align: left; margin-top: -8px; }
  .dates .d { font-size: 22px; }
}

/* ---------- objectives ---------- */
.todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.todo li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; font: 700 18px/1.3 var(--body); }
.todo .box { width: 30px; height: 30px; border: 3px solid var(--ink); border-radius: 9px; display: grid; place-items: center; background: #fff; }
.todo .done { color: var(--ink-soft); }
.todo .done span:last-child { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(43,20,0,.45); }
.todo .done .box { background: var(--leaf); border-color: var(--ink); color: #fff; }
.todo .doing .box { background: var(--sun); }
.todo .doing .box::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); animation: pulse 1.4s ease-in-out infinite; }
.todo .doing em { display: inline-block; font: 800 12px/1 var(--body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-deep); margin-left: 6px; }
@keyframes pulse { 50% { transform: scale(.5); opacity: .5; } }

/* ---------- the trailer: portrait, muted clips cycling, sound on a tap ---------- */
.trailer {
  position: relative; aspect-ratio: 9 / 16; max-width: 100%;
  border: 3px solid var(--ink); border-radius: var(--r-card); box-shadow: var(--chonk);
  overflow: hidden; background: var(--ink);
}
.trailer video { width: 100%; height: 100%; object-fit: cover; }
.trailer .play {
  position: absolute; left: 50%; bottom: 18px; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font: 800 20px/1 var(--display); color: var(--ink);
  background: var(--sun); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink);
  padding: 12px 22px 10px 16px; cursor: pointer;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
.trailer .play:hover { transform: scale(1.05) rotate(-2deg); }
.trailer .play svg { width: 22px; height: 22px; }
.trailer.on .play { display: none; }

/* ---------- socials: chonky buttons, logo only ---------- */
.socials { display: flex; flex-wrap: wrap; gap: clamp(12px, 2vw, 20px); justify-content: center; }
.socials a {
  width: clamp(72px, 16vw, 104px); aspect-ratio: 1; display: grid; place-items: center;
  background: var(--cream); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 30%;
  box-shadow: var(--chonk);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .15s;
}
.socials a:nth-child(odd):hover { transform: translateY(-6px) rotate(-6deg); background: var(--sun); }
.socials a:nth-child(even):hover { transform: translateY(-6px) rotate(6deg); background: var(--sun); }
.socials a:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.socials svg { width: 46%; height: 46%; }

/* ---------- the stage: the sky first, then the live dog fades up on it ----------
   The sky here is the same gradient the 3D draws, so the hand-over is the dog
   and the planet arriving, not a picture swapping for another. The poster is
   only for when the 3D can't run at all. */
.stage {
  position: relative; overflow: hidden;
  background: linear-gradient(to bottom, #ff6400 0%, #ff7a00 55%, #ff9a2a 100%);
}
.stage > img, .stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage > img { opacity: 0; transition: opacity .6s ease; }
.stage.failed > img { opacity: 1; }
.stage > canvas { opacity: 0; transition: opacity 1.1s ease; touch-action: pan-y; }
.stage.live > canvas { opacity: 1; }
.stage .loading {
  position: absolute; left: 50%; bottom: 22%; translate: -50% 0; z-index: 2;
  font: 800 13px/1 var(--body); letter-spacing: .1em; text-transform: uppercase;
  background: var(--cream); border: 2px solid var(--ink); border-radius: 999px; padding: 7px 12px;
  transition: opacity .4s ease;
}
.stage.live .loading, .stage.failed .loading { opacity: 0; pointer-events: none; }

/* ---------- footer ---------- */
.foot { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; padding-block: 40px 56px; font: 800 18px/1.2 var(--body); }
.foot nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.foot nav a { text-decoration: none; border-bottom: 3px solid var(--ink); }
.foot .makers { display: flex; align-items: center; gap: 18px; }
.foot .makers img { height: 22px; width: auto; }
.foot .makers a { display: block; transition: transform .15s; }
.foot .makers a:hover { transform: translateY(-2px); }
.foot .jp { color: var(--ink-soft); font-weight: 700; }

/* ---------- everything arrives ----------
   <html class="pre"> until the fonts are in (or a second has passed), so
   nothing is drawn in a fallback face and then swapped mid-rise: that swap is
   the flash. The hero's pieces then rise in order; everything below rises as
   it scrolls into view, by scroll-driven animation where the browser has it
   and once, on load, where it doesn't. */
@keyframes rise { from { opacity: 0; transform: translateY(26px) scale(.97); } }
@keyframes pop { 0% { opacity: 0; transform: translateY(18px) scale(.5) rotate(-8deg); } 70% { transform: scale(1.06) rotate(2deg); } }
html.pre [data-in]:not([data-in^="view"]) { opacity: 0; }
html:not(.pre) [data-in]:not([data-in^="view"]) {
  animation: rise .8s cubic-bezier(.22, 1, .36, 1) backwards;
  animation-delay: calc(var(--i, 0) * 90ms + 60ms);
}
[data-in="1"] { --i: 1; } [data-in="2"] { --i: 2; } [data-in="3"] { --i: 3; } [data-in="4"] { --i: 4; } [data-in="5"] { --i: 5; }
@supports (animation-timeline: view()) {
  [data-in="view"] { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  [data-in="view-pop"] > * { animation: pop linear both; animation-timeline: view(); animation-range: entry 10% entry 60%; }
}
@supports not (animation-timeline: view()) {
  html.pre [data-in^="view"] { opacity: 0; }
  html:not(.pre) [data-in^="view"] { animation: rise .8s cubic-bezier(.22, 1, .36, 1) .3s backwards; }
}
/* With no figure to show, the treat fund line leaves itself out. */
.fund[data-fund=""] { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
[data-in="1"] { --i: 1; } [data-in="2"] { --i: 2; } [data-in="3"] { --i: 3; } [data-in="4"] { --i: 4; } [data-in="5"] { --i: 5; }
.card-head h3 .flag { display: inline-block; width: 1.25em; height: auto; margin-right: .35em; vertical-align: -0.08em; border: 2.5px solid var(--ink); border-radius: 5px; overflow: hidden; transform: rotate(-4deg); }
/* Horizon centres its opening lines, the tour pill with them. */
.top .pill { justify-self: center; }

/* ---------- a sprinkle of Japanese ---------- */
.jp-line { margin: 0; font: 800 clamp(15px, 1.6vw, 19px)/1.3 "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", var(--body); color: var(--ink-soft); letter-spacing: .04em; }

/* ---------- the objectives target ---------- */
.card-head h3 .target { display: inline-block; width: 1.05em; height: 1.05em; margin-right: .32em; vertical-align: -0.14em; transform: rotate(-6deg); }

/* ---------- the trailer: the whole tile plays it ---------- */
.trailer .play { display: none; }
.trailer .tap { position: absolute; inset: 0; border: 0; padding: 0; background: linear-gradient(to top, rgba(43,20,0,.35), rgba(43,20,0,0) 45%); cursor: pointer; display: grid; place-items: center; }
.trailer .playbtn { width: clamp(72px, 22%, 96px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--sun); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); transition: transform .18s cubic-bezier(.34,1.56,.64,1); }
.trailer .playbtn svg { width: 42%; height: 42%; margin-left: 8%; }
.trailer .tap:hover .playbtn, .trailer .tap:focus-visible .playbtn { transform: scale(1.1) rotate(-6deg); }
.trailer .tap:focus-visible { outline: 3px solid var(--cream); outline-offset: -8px; border-radius: inherit; }
.trailer.on .tap { display: none; }

/* ---------- butterflies, out of the frame ---------- */
.band .flutter { position: absolute; left: 0; width: 100%; top: -40%; height: 180%; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 1.1s ease; }
.band .stage.live ~ .flutter { opacity: 1; }

/* ---------- the lockup ----------
   "Meet" is the kicker, small and in ink; "Biscotti!" is the headline. The
   line under it is set to two balanced lines, the Japanese a quiet caption
   tight beneath, and long sentences break where they read, never past ~60
   characters. */
.big .meet {
  display: block; width: fit-content;
  font: 800 clamp(22px, 2.6vw, 34px)/1 var(--display); letter-spacing: .01em;
  color: var(--ink); text-shadow: none;
  margin: 0 0 .1em .08em;
}
/* The name as a 1930s cartoon title card: Futura, extra bold, every letter
   white with a hard dark-red shadow thrown down and to the right, each one
   tilted its own way and sitting a touch off the line, shouldered in close.
   Jost is Futura's stand-in where Futura isn't installed. */
.big .name {
  display: block;
  font-family: "Futura", "Futura PT", "Jost", var(--display);
  font-weight: 900;
  letter-spacing: -0.06em;
  color: #fff;
  text-shadow: none;
  white-space: nowrap;
}
.big .name span {
  display: inline-block;
  color: #fff;
  text-shadow:
    0.012em 0.012em 0 #7a1414, 0.024em 0.024em 0 #7a1414, 0.036em 0.036em 0 #7a1414,
    0.048em 0.048em 0 #7a1414, 0.06em 0.06em 0 #7a1414, 0.072em 0.072em 0 #7a1414;
  transform: rotate(var(--tilt, 0deg)) translateY(var(--lift, 0));
  transform-origin: 50% 70%;
}
.big .name span:nth-child(1) { --tilt: -7deg; --lift: .02em; }
.big .name span:nth-child(2) { --tilt: 6deg;  --lift: -.04em; }
.big .name span:nth-child(3) { --tilt: -4deg; --lift: .03em; }
.big .name span:nth-child(4) { --tilt: 5deg;  --lift: -.02em; }
.big .name span:nth-child(5) { --tilt: -6deg; --lift: .04em; }
.big .name span:nth-child(6) { --tilt: 4deg;  --lift: -.03em; }
.big .name span:nth-child(7) { --tilt: -5deg; --lift: .02em; }
.big .name span:nth-child(8) { --tilt: 7deg;  --lift: -.04em; }
.big .name span:nth-child(9) { --tilt: -8deg; --lift: .01em; }
.top .big .meet { margin-inline: auto; }
.top .big { font-size: clamp(84px, 15.5vw, 216px); line-height: .84; }
.lede { max-width: 15.5em; }
.top .lede { margin-top: 6px; }
.jp-line { margin-top: -6px; }
.funded { max-width: 36em; text-wrap: balance; }
.fund-row { display: block; margin-top: 4px; }
.meadow .funded { margin-inline: auto; }
.dates .v, .todo li { text-wrap: pretty; }

/* No butterfly ever ends in a hard line at the edge of its canvas. */
.band .flutter { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); }

/* The words sit above the butterflies: one that does pass behind them leaves
   them clean on top. */
.top { position: relative; z-index: 6; }

/* Under the objectives, the funded line reads as the end of that column. */
.meadow .stack .funded { text-align: left; margin: 0; padding: 4px 4px 0; max-width: 36em; }

/* ---------- phone fit ---------- */
/* A card title stays on one line; a long tag drops beneath it instead. */
.card-head { flex-wrap: wrap; row-gap: 10px; }
.card-head h3 { white-space: nowrap; }
/* On the meadow the fund dot is sun, not leaf, or it vanishes into the green. */
.meadow .fund::before { background: var(--sun); box-shadow: 0 0 0 3px rgba(255, 216, 74, .3); }
/* Every button on one row: they shrink together rather than orphan one. */
.socials { --g: clamp(10px, 2.4vw, 20px); gap: var(--g); flex-wrap: nowrap; width: 100%; max-width: 600px; }
.socials a { width: min(104px, calc((100% - 5 * var(--g)) / 6)); flex: none; }
@media (max-width: 520px) {
  .top .big { font-size: 25vw; }
  .top { padding-block: 32px 4px; }
}

/* The contract address: the thing people come to copy, so it reads big. */
main .card.ca code { font-size: clamp(15px, 2.1vw, 20px); font-weight: 800; letter-spacing: .01em; }

/* Before the first wallet snapshot there is no figure: leave the line out
   rather than show "in the fund" with nothing in front of it. */
.fund-total:has(.n:empty) { display: none; }