/* ─────────────────────────────────────────────────────────────────────
   kabiy — one day's sky.

   The whole page sits on a single fixed gradient that runs from morning
   at the top to deep night at the bottom, so scrolling the story is the
   same motion as the day passing. Everything else stays quiet: the
   pictures are full-bleed with no frame, no shadow and no hover lift,
   and the only animation that isn't asked for is the name arriving once
   on load.
   ───────────────────────────────────────────────────────────────────── */

:root{
  --dawn:#E6F0F5;
  --day:#BCDCEC;
  --gold:#F7CB92;
  --dusk:#D98E88;
  --night:#2C4266;
  --deep:#141F36;

  --ink:#1B2A3F;          /* on the light half */
  --ink-soft:#4C5F77;
  --snow:#FFFFFF;         /* the cat's own white, used for text on the dark half */
  --snow-soft:#C3D2E4;

  --font-d:'Baloo 2', ui-rounded, system-ui, sans-serif;
  --font-b:'Lora', Georgia, 'Times New Roman', serif;
  /* The contract address is case-sensitive and must never be set in a
     display face that redraws letterforms. Mono, always. */
  --font-m:ui-monospace, SFMono-Regular, Menlo, 'DejaVu Sans Mono', monospace;

  --col:34rem;            /* narration measure — about 68 characters of Lora */
  --gut:clamp(1.1rem, 5vw, 2.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font-b);
  font-size:clamp(1rem, .96rem + .35vw, 1.15rem);
  line-height:1.75;
  color:var(--ink);
  background:var(--day);
  /* fixed, so the sky stays put and the story moves through it */
  background-image:linear-gradient(
    180deg,
    var(--dawn)  0%,
    var(--day)   18%,
    var(--gold)  44%,
    var(--dusk)  58%,
    var(--night) 78%,
    var(--deep)  100%);
  background-attachment:fixed;
  background-size:cover;
  overflow-x:hidden;
}

/* height:auto, or the width/height attributes on an <img> set a real height and
   every aspect-ratio below is quietly ignored. */
img{ max-width:100%; height:auto; display:block; }
video{ max-width:100%; display:block; }

a{ color:inherit; }

:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; border-radius:2px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:50;
  background:var(--snow); color:var(--ink); padding:.7rem 1rem;
  font-family:var(--font-d); text-decoration:none;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* ── the bar ─────────────────────────────────────────────────────── */

.bar{
  display:flex; align-items:center; gap:1rem 1.4rem; flex-wrap:wrap;
  padding:.9rem var(--gut);
}

.bar__name{
  font-family:var(--font-d); font-weight:800;
  font-size:1.35rem; letter-spacing:.01em;
  margin-right:auto;
}

.bar__links{ display:flex; gap:1.1rem; font-family:var(--font-d); font-weight:600; font-size:.95rem; }
.bar__links a{ text-decoration:none; border-bottom:2px solid rgba(27,42,63,.25); padding-bottom:1px; }
.bar__links a:hover{ border-bottom-color:currentColor; }

.bar__ca{
  display:inline-flex; align-items:baseline; gap:.5rem;
  font:inherit; color:inherit; cursor:pointer;
  background:rgba(255,255,255,.62);
  border:1.5px solid rgba(27,42,63,.22);
  border-radius:999px; padding:.3rem .85rem;
  max-width:100%;
}
.bar__ca:hover{ background:rgba(255,255,255,.85); }
.bar__ca-label{ font-family:var(--font-d); font-weight:600; font-size:.8rem; color:var(--ink-soft); }
.bar__ca-value{ font-family:var(--font-m); font-size:.78rem; overflow:hidden; text-overflow:ellipsis; }

/* Before the coin exists there is nothing to copy, so the pill says so and
   stops pretending to be a button. */
body[data-ca="pending"] .bar__ca{ cursor:default; }
body[data-ca="pending"] .bar__ca-value{ font-family:var(--font-d); font-weight:600; font-style:italic; }

/* ── hero ────────────────────────────────────────────────────────── */

.hero{ margin:clamp(.5rem,2vw,1.5rem) 0 clamp(2rem,6vw,3.5rem); }

.hero__frame{
  width:100%;
  aspect-ratio:16/9;
  max-height:min(72vh, 620px);
  overflow:hidden;
  background:var(--night);
}
.hero__frame video{ width:100%; height:100%; object-fit:cover; }

.wordmark{
  --wm-size:clamp(3.5rem, 19vw, 11rem);
  margin:clamp(-7rem,-13vw,-2.6rem) var(--gut) 0;
  font-family:var(--font-d); font-weight:800;
  font-size:var(--wm-size); line-height:.82;
  letter-spacing:-.02em;
  color:var(--snow);
  /* a soft outline so the name holds up over any frame of the video */
  text-shadow:0 2px 0 rgba(20,31,54,.18), 0 .06em .5em rgba(20,31,54,.35);
  position:relative;
}
.wordmark__inner{ display:inline-block; white-space:nowrap; }
.wordmark span{ display:inline-block; }

/* The one page-load moment: the letters drop into place, once. */
.wordmark__inner span{
  animation:settle .62s cubic-bezier(.2,.9,.3,1) backwards;
  animation-delay:calc(var(--i) * 55ms + 120ms);
}
@keyframes settle{
  from{ opacity:0; transform:translateY(-.22em) rotate(-4deg); }
  to  { opacity:1; transform:none; }
}

.hero__line{
  margin:.9rem var(--gut) 0;
  max-width:var(--col);
  font-style:italic; font-size:1.1rem; color:var(--ink);
}

.acts{ display:flex; flex-wrap:wrap; gap:.7rem; margin:1.3rem var(--gut) 0; }

.act{
  display:inline-block;
  font-family:var(--font-d); font-weight:600; font-size:1rem;
  text-decoration:none; cursor:pointer;
  padding:.62rem 1.4rem;
  border:2px solid var(--ink); border-radius:999px;
  background:transparent; color:var(--ink);
}
.act:hover{ background:var(--ink); color:var(--snow); }
.act--buy{ background:var(--ink); color:var(--snow); }
.act--buy:hover{ background:transparent; color:var(--ink); }
.act--quiet{ border-color:transparent; text-decoration:underline; text-underline-offset:3px; padding-left:.4rem; padding-right:.4rem; }
.act--quiet:hover{ background:transparent; color:inherit; }

/* With no address there is nothing to look up. */
body[data-ca="pending"] [data-scan-link]{ display:none; }

/* ── narration ───────────────────────────────────────────────────── */

.told{
  max-width:var(--col);
  margin:clamp(2.4rem,7vw,4.5rem) auto;
  padding:0 var(--gut);
  text-align:center;
  text-wrap:pretty;
}
.told p{ margin:0 0 1rem; }
.told p:last-child{ margin-bottom:0; }
.told--dark{ color:var(--snow); }

/* ── scenes ──────────────────────────────────────────────────────── */
/* Full-bleed and unframed. The sky shows above and below, never around. */

.scene{
  margin:clamp(2.4rem,7vw,4.5rem) 0;
}
.scene > img,
.scene > video{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  background:var(--night);
}
.scene--tall > img{ aspect-ratio:4/3; }

.scene--pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
}
.scene--pair > img,
.scene--pair > video{ aspect-ratio:1; }
.scene--pair figcaption{ grid-column:1 / -1; }

.scene figcaption{
  margin:.85rem var(--gut) 0;
  font-size:.98rem; font-style:italic;
  color:var(--ink-soft);
  max-width:var(--col);
}

/* Captions sit on the sky, so the ones low enough to be on the night half
   are marked in the markup — counting siblings guessed wrong on the dusk band. */
.scene--night figcaption{ color:var(--snow-soft); }

/* ── ticker ──────────────────────────────────────────────────────── */

.ticker{
  overflow:hidden;
  padding:.8rem 0;
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.18);
  margin:clamp(2.4rem,7vw,4rem) 0;
}
.ticker__row{
  display:flex; width:max-content;
  animation:slide 34s linear infinite;
}
.ticker__row span{
  font-family:var(--font-d); font-weight:500; font-size:1rem;
  color:var(--snow); opacity:.85;
  padding-right:2.6rem; white-space:nowrap;
}
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── buy ─────────────────────────────────────────────────────────── */

.buy{
  max-width:46rem;
  margin:0 auto clamp(3rem,8vw,5rem);
  padding:0 var(--gut);
  color:var(--snow);
}
.buy h2{
  font-family:var(--font-d); font-weight:800;
  font-size:clamp(1.7rem,5vw,2.4rem); line-height:1.15;
  margin:0 0 1.8rem;
}

.steps{
  list-style:none; counter-reset:step;
  margin:0 0 2.6rem; padding:0;
}
.steps li{
  counter-increment:step;
  position:relative;
  padding:0 0 1.5rem 3.2rem;
}
.steps li::before{
  content:counter(step);
  position:absolute; left:0; top:-.1rem;
  width:2.2rem; height:2.2rem;
  display:grid; place-items:center;
  font-family:var(--font-d); font-weight:600; font-size:1.05rem;
  color:var(--deep); background:var(--snow);
  border-radius:999px;
}
.steps h3{
  font-family:var(--font-d); font-weight:600; font-size:1.2rem;
  margin:0 0 .25rem;
}
.steps p{ margin:0; color:var(--snow-soft); }

.addr{
  border:1.5px solid rgba(255,255,255,.3);
  border-radius:1.2rem;
  padding:clamp(1.1rem,4vw,1.7rem);
}
.addr__label{
  display:block;
  font-family:var(--font-d); font-weight:600; font-size:.88rem;
  color:var(--snow-soft); margin-bottom:.5rem;
}
.addr__value{
  display:block;
  font-family:var(--font-m);
  font-size:clamp(.74rem,2.5vw,.95rem);
  line-height:1.6;
  word-break:break-all;
  color:var(--snow);
}
.addr__acts{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin-top:1.1rem; }
.addr .act{ border-color:var(--snow); color:var(--snow); }
.addr .act:hover{ background:var(--snow); color:var(--deep); }
.addr .act--buy{ background:var(--snow); color:var(--deep); }
.addr .act--buy:hover{ background:transparent; color:var(--snow); }
.addr .act--quiet{ border-color:transparent; }
.addr .act--quiet:hover{ background:transparent; color:var(--snow); }

.addr__pending{
  margin:1rem 0 0;
  font-size:.95rem; font-style:italic; color:var(--snow-soft);
}
body[data-ca="live"] .addr__pending{ display:none; }
body[data-ca="pending"] .addr__value{ font-family:var(--font-d); font-style:italic; }
body[data-ca="pending"] .addr [data-copy]{ display:none; }

/* ── foot ────────────────────────────────────────────────────────── */

.foot{
  text-align:center;
  padding:0 var(--gut) clamp(2.5rem,7vw,4rem);
  color:var(--snow-soft);
}
.foot__face{
  width:clamp(5rem,16vw,7.5rem); height:auto;
  margin:0 auto 1.2rem;
  border-radius:50%;
}
.foot__line{
  max-width:34rem; margin:0 auto 1.2rem;
  font-size:.92rem; line-height:1.7;
}
.foot__links{ display:flex; justify-content:center; gap:1.4rem; font-family:var(--font-d); font-weight:600; }
.foot__links a{ text-decoration:none; border-bottom:2px solid rgba(195,210,228,.4); }
.foot__links a:hover{ border-bottom-color:currentColor; }

/* ── toast ───────────────────────────────────────────────────────── */

.toast{
  position:fixed; left:50%; bottom:1.4rem; z-index:40;
  transform:translate(-50%, 1rem);
  margin:0; padding:.65rem 1.2rem;
  background:var(--deep); color:var(--snow);
  font-family:var(--font-d); font-weight:500; font-size:.95rem;
  border-radius:999px;
  max-width:calc(100vw - 2rem);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.toast.is-up{ opacity:1; transform:translate(-50%, 0); }

/* ── narrow ──────────────────────────────────────────────────────── */

@media (max-width:34rem){
  .scene--pair{ grid-template-columns:1fr; }
  .scene--pair > img,
  .scene--pair > video{ aspect-ratio:16/10; }
  .bar{ gap:.7rem 1rem; }
  .bar__name{ margin-right:0; width:100%; }
  .bar__ca{ order:3; width:100%; justify-content:center; }
  .hero__frame{ aspect-ratio:4/3; }
}

/* Some phones can't fix a background to the viewport without tearing on
   scroll; a scrolling sky is the safer default there. */
@media (hover:none){
  body{ background-attachment:scroll; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .wordmark__inner span{ animation:none; }
}