/* Per-view layouts: the sky, the board, the desk, the pad, the terminal. */

/* ---------------------------------------------------------------------- sky */

.hero {
  position: relative;
  min-height: 800px;
  height: 92vh;
  max-height: 940px;
  /* Transparent: the fixed sky shows through. */
  background: transparent;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.balloon-stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.float-balloon {
  position: absolute;
  left: var(--x, 0);
  top: var(--y, 0);
  --toy-color: #cfe0f2;
  animation: float-rise var(--d, 9s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
  pointer-events: auto;
  cursor: grab;
  will-change: transform;
}
.float-balloon:active { cursor: grabbing; }

/*
 * The staging.
 *
 * Scale is the drama. Six balloons all between 60 and 110px read as a pattern,
 * not a sky — nothing is near, nothing is far, no focal point, and no amount of
 * colour rescues that. This spans almost 6x, from one cropped by the left edge
 * down to specks near the horizon, and the distant ones lose focus and contrast
 * the way distance actually takes them.
 *
 * `--x`/`--y` stay clear of the headline's box, `--s` multiplies --hero-balloon,
 * `--blur` is depth of field, `--fade` pushes the far ones into the haze, and
 * `--enter` staggers the arrival so the flock lands rather than simply being
 * there. It lives here, not in JavaScript, so the phone can re-stage it.
 */
.spot-0 { --x: -4%; --y: 34%; --s: .95; --d: 9.5s;  --delay: 0s;   --dx: 26px;  --blur: 0;     --fade: 1;   --enter: 90ms; }
.spot-1 { --x: 78%; --y: 9%;  --s: .82; --d: 8.2s;  --delay: 1.1s; --dx: -30px; --blur: 0;     --fade: 1;   --enter: 200ms; }
.spot-2 { --x: 83%; --y: 50%; --s: .70; --d: 10.4s; --delay: 2.2s; --dx: 22px;  --blur: .4px;  --fade: .97; --enter: 310ms; }
.spot-3 { --x: 11%; --y: 7%;  --s: .58; --d: 9s;    --delay: .6s;  --dx: 24px;  --blur: .7px;  --fade: .92; --enter: 420ms; }
.spot-4 { --x: 4%;  --y: 72%; --s: .48; --d: 11.2s; --delay: 1.7s; --dx: 30px;  --blur: 1px;   --fade: .85; --enter: 530ms; }
.spot-5 { --x: 65%; --y: 76%; --s: .40; --d: 12s;   --delay: .3s;  --dx: -24px; --blur: 1.3px; --fade: .8;  --enter: 640ms; }
/*
 * An even ladder rather than two extremes. The 6x spread read as one huge
 * balloon and a scatter of specks around it; these step down by roughly a
 * fifth at a time, so the depth is still ordered but the sizes stay in the
 * same family. The blur comes down with the range — heavy defocus on
 * something only twice as far away looks like a mistake, not distance.
 */
.float-balloon .balloon { width: calc(var(--hero-balloon, 200px) * var(--s, 1)); }
/* Distance takes focus and contrast with it. */
.float-balloon .float-sway { filter: blur(var(--blur, 0)); }
/* The near balloons are large enough that the component's default contact
   shadow reads as a smudge; at this size they want a real cast shadow and a
   breath of their own colour bounced into the air around them. */
.float-balloon .balloon .balloon-body {
  filter:
    drop-shadow(10px 22px 26px color-mix(in srgb, color-mix(in srgb, var(--toy-color) 45%, #241848) 26%, transparent))
    drop-shadow(0 0 34px color-mix(in srgb, var(--toy-color) 34%, transparent));
}


/*
 * Rise and sway are separate, on separate clocks. A balloon on a string
 * pendulums about its tether, not its middle, and it does not swing in time
 * with its own bobbing — running both off one keyframe set is what makes
 * floating things look mechanical.
 */
/*
 * The sway rotates; the entrance lifts. They have to be separate properties:
 * two animations writing `transform` do not compose — the later one simply
 * wins, and the entrance never plays at all. So the sway takes `transform` and
 * the entrance takes `translate`, which applies before it.
 */
.float-sway {
  display: block;
  transform-origin: 50% 136%;
  animation:
    float-sway calc(var(--d, 9s) * .63) ease-in-out infinite alternate var(--sway-delay, 0s),
    float-enter 1150ms cubic-bezier(.16, 1, .3, 1) var(--enter, 0ms) backwards;
  transition: scale 260ms var(--ease);
}
@keyframes float-enter {
  from { translate: 0 54px; opacity: 0; }
  to { translate: 0 0; opacity: var(--fade, 1); }
}
.float-balloon:hover .float-sway { scale: 1.05; }

@keyframes float-rise {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--dx, 24px), -30px, 0); }
}
@keyframes float-sway {
  from { transform: rotate(-5.5deg); }
  to { transform: rotate(5.5deg); }
}
/* The entrance settles on the depth fade, so it has to be the resting value. */
.float-sway { opacity: var(--fade, 1); }

body[data-motion='off'] .float-balloon,
body[data-motion='off'] .float-sway { animation-play-state: paused; }

/* On the board the balloons breathe rather than drift, so the grid stays
   scannable while still feeling inflated. */
.coin-art .balloon {
  animation: card-bob 5.2s ease-in-out infinite alternate;
  animation-delay: var(--bob-delay, 0s);
}
@keyframes card-bob {
  from { transform: translate3d(0, 0, 0) rotate(-1.4deg); }
  to { transform: translate3d(0, -7px, 0) rotate(1.4deg); }
}
body[data-motion='off'] .coin-art .balloon { animation-play-state: paused; }

.hero-copy {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 220px 24px 0;
  max-width: 890px;
  margin: 0 auto auto;
  pointer-events: none;
}
.hero-copy a, .hero-copy button { pointer-events: auto; }
.hero-copy > .eyebrow { margin-bottom: 26px; font-size: 10px; letter-spacing: 1.8px; }
/*
 * Set heavy. At 400 the headline was the same weight as the nav and the
 * footnote under it — nothing in the frame was louder than anything else, and
 * a hero with no loudest thing has no hook. The halo is not decoration: the
 * type sits on drifting cloud, and a little white behind it keeps the
 * counters open wherever a bright billow passes under a stroke.
 */
.hero h1 {
  font-size: clamp(52px, 8.4vw, 116px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.055em;
  text-shadow: 0 2px 44px rgba(255, 255, 255, .72), 0 1px 3px rgba(255, 255, 255, .6);
}
.hero-subtitle { font-size: 18px; margin-top: 28px; letter-spacing: -.3px; }
.hero-subtitle span { color: var(--blue); }
.hero-actions { margin-top: 31px; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.hero-cta { font-size: 14px; padding: 16px 29px; min-height: 53px; gap: 28px; }

.hero-bottom {
  position: relative;
  z-index: 3;
  padding: 0 70px 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 10px;
  gap: 16px;
}
.play-controls { display: flex; align-items: center; gap: 7px; }
.play-controls button { font-size: 10px; color: var(--muted); min-height: 44px; padding: 0 6px; }
.play-controls button:hover { color: var(--ink); }
.play-controls > span { opacity: .3; }
.grab-hint { font-size: 11px; display: flex; align-items: center; gap: 10px; }
.grab-hint > span { font-size: 18px; }
.scroll-hint { font-weight: 500; font-size: 9px; letter-spacing: 1px; display: flex; gap: 15px; align-items: center; min-height: 44px; text-transform: uppercase; }
.scroll-hint > span { font-size: 19px; }

/* ------------------------------------------------------------------- home */

.manifesto { padding: 105px 24px 130px; text-align: center; }
.manifesto-title { font-size: clamp(25px, 4vw, 38px); line-height: 1.48; letter-spacing: -1.45px; color: var(--ink); margin: 22px auto; max-width: 780px; }
.manifesto-title span { color: var(--blue); }
.manifesto > p:last-child { font-size: 14px; line-height: 1.9; }

.home-section { padding-bottom: 130px; }

.how-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; padding-bottom: 150px; }
.how-copy h2 { font-size: clamp(38px, 5vw, 52px); line-height: 1.16; margin-bottom: 36px; }
.how-step { display: flex; gap: 20px; margin: 24px 0; }
.how-step > span {
  font-weight: 500; font-size: 10px;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px; color: var(--muted);
}
.how-step h3 { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.how-step p { font-size: 12px; max-width: 300px; line-height: 1.85; }

.principles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 45px 70px; margin-top: 48px; }
.principles-grid article { position: relative; padding-left: 44px; }
.principles-grid h3 { font-weight: 500; font-size: 16px; margin-bottom: 10px; letter-spacing: -.3px; }
.principles-grid p { font-size: 12px; line-height: 1.9; max-width: 410px; }
.principle-mark { position: absolute; left: 0; top: 3px; font-weight: 500; font-size: 10px; color: var(--blue); }

.faq-list { max-width: 850px; margin: 0 auto; }
details { border-bottom: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; padding: 25px 0; font-size: 14px; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary > span { font-size: 21px; color: var(--muted); transition: transform 200ms var(--ease); }
details[open] summary > span { transform: rotate(45deg); }
details p { font-size: 12px; line-height: 2; max-width: 720px; padding: 0 28px 25px 0; }

.closing-section { position: relative; text-align: center; padding: 95px 24px 115px; overflow: hidden; }
.closing-section h2 { font-size: clamp(36px, 5vw, 54px); margin: 22px 0 28px; }
.closing-bubble {
  position: absolute;
  width: 130px; height: 130px;
  border-radius: 49%;
  background: radial-gradient(ellipse at 27% 22%, #fff, #99dff2 35%, #76a6c6 100%);
  box-shadow: inset -8px -5px 14px #25446225;
  pointer-events: none;
}
.bubble-a { left: 10%; top: 37%; transform: rotate(-20deg); }
.bubble-b { right: 11%; top: 24%; width: 88px; height: 92px; background: radial-gradient(ellipse at 27% 22%, #fff, #bcd8f2 35%, #8fb3d6 100%); }

/* ------------------------------------------------------------------- feed */

.feed-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.feed-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center; background: var(--panel); padding: 13px 18px; font-size: 12px; }
.feed-row .side { font-weight: 500; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; min-width: 34px; }
.feed-row .who { color: var(--muted); font-size: 10px; }
.feed-row.fresh { animation: feed-in 420ms var(--ease); }
@keyframes feed-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ board */

.board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 30px 0 25px; flex-wrap: wrap; }
.board-toolbar .search-sort { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* -------------------------------------------------------------------- desk */

.desk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.desk-cell {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  padding: 16px 18px;
  text-align: left;
  transition: transform 200ms var(--ease), border-color 200ms var(--ease);
  display: flex;
  gap: 13px;
  align-items: center;
}
.desk-cell:hover { transform: translateY(-3px); border-color: var(--blue); }
.desk-cell .code { font-size: 13px; color: var(--ink); font-weight: 500; letter-spacing: -.2px; }
.desk-cell .name { font-size: 10px; color: var(--muted); display: block; margin-top: 2px; }
.desk-cell .rate { font-size: 10px; color: var(--muted); display: block; margin-top: 5px; }
.desk-cell .glyph {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  /* A wall of 223 of these is the desk's whole visual: make each one a little
     inflated thing rather than a flat swatch. */
  color: color-mix(in srgb, var(--toy-color) 20%, #14121f);
  background:
    radial-gradient(circle at 32% 26%,
      color-mix(in srgb, var(--toy-color) 24%, #fff) 0%,
      color-mix(in srgb, var(--toy-color) 86%, #fff) 38%,
      var(--toy-color) 68%,
      color-mix(in srgb, var(--toy-color) 66%, #241848) 100%);
  box-shadow:
    inset 0 1px 1px #ffffff80,
    0 3px 7px -2px color-mix(in srgb, var(--toy-color) 55%, transparent);
}
.desk-cell .cell-body { min-width: 0; flex: 1; }

/* ------------------------------------------------------------------ launch */

.launch-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 46px; align-items: start; }
.launch-preview { position: sticky; top: 120px; }
.preview-stage {
  height: 250px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  /* Same three layers as a board card's well, so the preview is a preview. */
  background:
    radial-gradient(ellipse 58% 50% at 50% 47%,
      color-mix(in srgb, var(--card-glow, var(--card-color)) 30%, transparent) 0%,
      color-mix(in srgb, var(--card-glow, var(--card-color)) 13%, transparent) 54%,
      #fff0 80%),
    radial-gradient(ellipse at 48% 18%, var(--art-sheen), #fff0),
    color-mix(in srgb, var(--card-color) var(--art-mix), var(--bg));
  margin-bottom: 22px;
}
.summary-row { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.summary-row:last-child { border-bottom: 0; }
.summary-row strong { color: var(--ink); font-weight: 500; text-align: right; }

.currency-picker { position: relative; }
.picker-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0; right: 0;
  max-height: 264px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 16px 34px #17283c1f;
  padding: 6px;
}
.picker-results button {
  display: flex;
  width: 100%;
  gap: 11px;
  align-items: center;
  padding: 9px 11px;
  border-radius: 11px;
  text-align: left;
  font-size: 12px;
}
.picker-results button:hover, .picker-results button.active { background: var(--bg); }
.picker-results .pick-code { font-weight: 500; min-width: 52px; }
.picker-results .pick-name { color: var(--muted); font-size: 11px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-results .pick-rate { color: var(--muted); font-size: 10px; }

/* ---------------------------------------------------------------- terminal */

.terminal-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.terminal-head { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.terminal-head h1 { font-size: 42px; letter-spacing: -2px; line-height: 1.1; }
.price-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.price-line .big { font-size: 34px; letter-spacing: -1.4px; color: var(--ink); }
.price-line .usd { font-size: 13px; color: var(--muted); }

.ticket { position: sticky; top: 120px; }
.ticket .segmented { width: 100%; }
.ticket .segmented button { flex: 1; }

.wall-viz { height: 132px; position: relative; margin: 6px 0 4px; }
.wall-viz svg { width: 100%; height: 100%; display: block; overflow: visible; }

.feed-mini { max-height: 260px; overflow-y: auto; }

.kv-list { display: grid; gap: 0; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.kv:last-child { border-bottom: 0; }
.kv strong { color: var(--ink); font-weight: 500; text-align: right; }

.spark { display: block; width: 100%; height: 40px; overflow: visible; }

/* --------------------------------------------------------------- portfolio */

.holding-row { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.holding-row:last-child { border-bottom: 0; }
.holding-main { min-width: 0; }
.holding-main h3 { font-size: 16px; letter-spacing: -.5px; }
.holding-main p { font-size: 11px; margin-top: 3px; }
.holding-side { text-align: right; }
.holding-side .value { font-size: 16px; color: var(--ink); letter-spacing: -.5px; }
.holding-side .delta { font-size: 11px; margin-top: 3px; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .site-header { padding: 0 24px; }
  .desktop-nav { gap: 17px; font-size: 11px; }
  .nav-group { gap: 16px; }
  .how-section { gap: 45px; }
  .hero-bottom { padding-left: 35px; padding-right: 35px; }
  /* Between here and the phone breakpoint the headline widens faster than the
     frame does, and the near balloon is the only thing it can run into. The
     whole flock steps down with it rather than just that one moving, so the
     ladder keeps its spacing. */
  .hero { --hero-balloon: 178px; }
  .spot-0 { --x: -11%; }
  .terminal-layout { grid-template-columns: 1fr; }
  .ticket, .launch-preview { position: static; }
  .launch-layout { grid-template-columns: 1fr; gap: 34px; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
  .desktop-nav, .nav-ghost { display: none; }
  .menu-toggle { display: block; }
  .nav-rail { padding-left: 20px; }
  .hero-copy { padding-top: 240px; }
  .how-section { grid-template-columns: 1fr; gap: 45px; max-width: 660px; }
  .principles-grid { grid-template-columns: 1fr; gap: 30px; }
  .grab-hint { display: none; }
  .page-head h1 { font-size: 42px; letter-spacing: -1.8px; }
  .footer-top { flex-wrap: wrap; }
}

@media (max-width: 620px) {
  .site-header { top: calc(14px + env(safe-area-inset-top, 0px)); padding: 0 16px; }
  .nav-rail { min-height: 58px; padding: 6px 8px 6px 18px; gap: 8px; }
  .brand { font-size: 19px; }
  .nav-actions { gap: 4px; }
  .nav-cta { padding: 10px 14px; min-height: 42px; font-size: 10px; gap: 10px; }
  .hero { min-height: 740px; height: auto; padding-bottom: 20px; }
  /*
   * The headline has to win on a narrow screen. The six-balloon staging is a
   * landscape composition — there is no room beside the type on a phone — so
   * the flock is re-cast rather than merely shrunk: three balloons, positioned
   * against the edges, and the near one pushed far enough off the left that
   * only its lit shoulder is in frame. The two survivors are scaled up, since
   * at their desktop depths they would arrive as specks.
   */
  /* "with currencies" has to survive on one line: at the clamp's 52px floor it
     broke after "with" and left an orphan. Tied to the viewport instead of
     pinned, so it still fits on a 320px phone. */
  .hero h1 { font-size: min(12.4vw, 52px); }
  .hero { --hero-balloon: 176px; }
  /* The two mid-depth balloons have nowhere to be on a phone; the other four
     ring the copy instead of crossing it, and the near one comes down out of
     the crop so its mark is actually readable at this size. */
  .spot-2, .spot-3 { display: none; }
  .spot-0 { --x: -4%; --y: 69%; --s: .60; --blur: 0;    --fade: 1; }
  .spot-1 { --x: 65%; --y: 9%;  --s: .42; --blur: 0;    --fade: .95; }
  .spot-4 { --x: 4%;  --y: 10%; --s: .30; --blur: .6px; --fade: .8; }
  .spot-5 { --x: 75%; --y: 67%; --s: .30; --blur: .6px; --fade: .8; }
  .hero-copy { padding: 210px 14px 40px; }
  .hero-subtitle { font-size: 13px; max-width: 290px; margin-left: auto; margin-right: auto; }
  .hero-cta { font-size: 12px; min-height: 49px; padding: 14px 24px; }
  .hero-bottom { padding: 0 20px 20px; }
  .scroll-hint { font-size: 7px; gap: 8px; }
  h2 { font-size: 32px; letter-spacing: -1.4px; }
  .page { padding-top: 116px; }
  .page-head { padding: 0 20px; }
  .page-head h1 { font-size: 35px; letter-spacing: -1.5px; }
  .section-container { padding-left: 20px; padding-right: 20px; }
  .card-grid, .card-grid.two { grid-template-columns: 1fr; }
  .manifesto { padding: 75px 22px 85px; }
  .home-section { padding-bottom: 85px; }
  .how-section { padding-bottom: 90px; }
  .desk-grid { grid-template-columns: 1fr 1fr; }
  .desk-cell { padding: 13px; gap: 10px; }
  .desk-cell .glyph { width: 32px; height: 32px; font-size: 11px; }
  .terminal-head h1 { font-size: 32px; }
  .price-line .big { font-size: 27px; }
  .feed-row { grid-template-columns: auto 1fr auto; font-size: 11px; padding: 11px 14px; }
  .feed-row .who { display: none; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .holding-row { grid-template-columns: auto 1fr; gap: 12px; }
  .holding-side { grid-column: 1 / -1; text-align: left; display: flex; gap: 16px; align-items: baseline; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .closing-bubble { width: 60px; height: 64px; left: -14px; top: 46%; }
  .bubble-b { left: auto; right: -12px; top: 26%; width: 50px; height: 54px; }
  .search-field input { width: 100%; }
  .board-toolbar .search-sort { width: 100%; }
  .board-toolbar .search-field { flex: 1; }
}