/* =========================================================
   CHONKETHA design system
   caramel brown / chocolate / cream / near-black ink
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;800&family=Nunito:wght@700;900&display=swap');

:root{
  /* palette */
  --caramel:      #C08552;
  --caramel-deep: #A96C3E;
  --choco:        #3B2416;
  --choco-soft:   #4E3120;
  --cream:        #F6E4C8;
  --cream-hi:     #FFF6E6;
  --ink:          #1A120B;
  --orange:       #E08A3C;

  /* mascot */
  --fur:          #A9682F;
  --fur-dark:     #8A5326;
  --fur-light:    #E9C89A;

  /* form */
  --bw:      4px;             /* border width */
  --bw-thin: 3px;
  --r:       28px;            /* radius */
  --r-lg:    44px;
  --shadow:      6px 7px 0 var(--ink);
  --shadow-lg:   10px 12px 0 var(--ink);
  --shadow-soft: 5px 6px 0 rgba(26,18,11,.28);

  --display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --body:    'Nunito', system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.34,1.56,.64,1);   /* chunky overshoot */
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--caramel);
  color:var(--ink);
  font-family:var(--body);
  font-weight:700;
  font-size:clamp(16px,1.05vw + 13px,19px);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:var(--display); font-weight:800; margin:0; line-height:.95; letter-spacing:-.01em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }

::selection{ background:var(--orange); color:var(--ink); }

/* focus: visible and on-brand */
:focus-visible{
  outline:var(--bw) solid var(--ink);
  outline-offset:4px;
  border-radius:8px;
}

.skip-link{
  position:absolute; left:-9999px; top:12px; z-index:999;
  background:var(--cream); color:var(--ink);
  border:var(--bw) solid var(--ink); border-radius:16px;
  padding:.6rem 1.1rem; text-decoration:none;
}
.skip-link:focus{ left:12px; }

/* ---------- shared ink treatment for SVG shapes ---------- */
.ink{ stroke:var(--ink); stroke-width:7; stroke-linejoin:round; }
.ink-line{ stroke:var(--ink); stroke-width:6; stroke-linecap:round; }

/* =========================================================
   Reusable chunks
   ========================================================= */
.card{
  background:var(--cream);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}

.section-title{
  font-size:clamp(2rem,6.2vw,4.6rem);
  text-align:center;
  text-transform:uppercase;
  text-wrap:balance;
  -webkit-text-stroke:2px var(--ink);
  paint-order:stroke fill;
  color:var(--cream);
  text-shadow:5px 6px 0 var(--ink);
}
.section-title--cream{ color:var(--cream-hi); }

.section-sub{
  text-align:center; margin-top:.7rem;
  color:var(--choco); font-style:italic; opacity:.85;
}

section{ padding:clamp(4.5rem,10vw,9rem) clamp(1rem,4vw,3rem); position:relative; }

/* ---------------- buttons ---------------- */
.btn{
  --btn-bg:var(--cream);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.05rem,1.9vw,1.5rem);
  text-transform:uppercase; text-decoration:none; letter-spacing:.02em;
  color:var(--ink); background:var(--btn-bg);
  border:var(--bw) solid var(--ink);
  border-radius:999px;
  padding:.85em 1.7em;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s ease;
}
.btn:hover{ transform:translate(-3px,-4px) rotate(-1.2deg); box-shadow:var(--shadow-lg); }
.btn:active{ transform:translate(3px,4px); box-shadow:2px 2px 0 var(--ink); }
.btn--primary{ --btn-bg:var(--orange); }
.btn--secondary{ --btn-bg:var(--cream); }

.btn--mega{
  font-size:clamp(1.6rem,6vw,4rem);
  padding:.6em 1.1em;
  --btn-bg:var(--orange);
  border-width:6px;
  box-shadow:12px 14px 0 var(--ink);
}
.btn--mega:hover{ box-shadow:18px 20px 0 var(--ink); }

.btn-row{ display:flex; gap:clamp(.8rem,2.5vw,1.5rem); flex-wrap:wrap; justify-content:center; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  min-height:100svh;
  /* content row + cue row: the scroll cue is a real flow item, so it can never
     land under the buttons the way an absolutely-positioned one did */
  display:grid; grid-template-rows:1fr auto;
  justify-items:center; align-items:center;
  /* generous bottom padding: the ticker below pulls itself up 1.4rem with a
     negative margin, so the cue needs clearance or it tucks under the ticker */
  padding-block:clamp(1.5rem,4vh,3rem) clamp(2.2rem,4.5vh,3.2rem);
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 78%, var(--caramel-deep) 0 42%, transparent 43%) no-repeat,
    var(--caramel);
}
.hero__inner{ text-align:center; max-width:1100px; width:100%; position:relative; z-index:2; }

.hero__eyebrow{
  font-size:.82rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--choco); margin-bottom:clamp(.4rem,1.4vh,1rem);
}

.hero__title{
  display:flex; flex-direction:column; align-items:center;
  /* height-aware so the whole hero (mascot, buttons and cue) holds the fold.
     The vh term is the binding one on short laptop viewports. */
  font-size:clamp(2.2rem,min(10vw,8.8vh),6.5rem);
  /* Tilting a wide line inflates its box height, so line-height alone can't
     keep the lines apart. Flex gap separates them regardless of transform,
     and has to clear the hard shadow too. */
  line-height:1;
  gap:.3em;
  color:var(--cream);
  -webkit-text-stroke:3px var(--ink); paint-order:stroke fill;
  text-shadow:5px 6px 0 var(--ink);
}
.hero__title span{ display:block; }
.hero__title span:nth-child(1){ transform:rotate(-1.2deg); }
.hero__title span:nth-child(2){ transform:rotate(.7deg); }
.hero__title-pop{ color:var(--orange); transform:rotate(-1.8deg) scale(1.03); }

.hero__sub{
  margin:clamp(.5rem,1.4vh,1.1rem) auto 0; max-width:34ch;
  font-size:clamp(.95rem,min(2.3vw,2.4vh),1.4rem);
  color:var(--choco);
}

/* mascot stage */
.hero__stage{ position:relative; margin:clamp(.3rem,1.4vh,1.2rem) auto; }
.chonk-holder{
  width:min(70vw,24vh,320px); margin-inline:auto;
  cursor:pointer; border-radius:50%;
  filter:drop-shadow(9px 12px 0 rgba(26,18,11,.32));
  transition:transform .25s var(--ease);
}
.chonk-holder:hover{ transform:scale(1.04) rotate(-1.5deg); }
.chonk-holder.is-poked{ animation:poke .65s var(--ease); }
@keyframes poke{
  0%{transform:scale(1)} 25%{transform:scale(1.14) rotate(6deg)}
  55%{transform:scale(.94) rotate(-6deg)} 100%{transform:scale(1)}
}
.chonk{ width:100%; height:auto; display:block; overflow:visible; }

.chonk-hint{
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--choco); opacity:.7; margin-top:.4rem;
  transition:opacity .4s ease;
}
.chonk-hint.is-hidden{ opacity:0; }

/* soft flat background blobs (parallax) */
.hero__clouds{ position:absolute; inset:0; pointer-events:none; }
.blob{
  position:absolute; border-radius:50%;
  background:var(--caramel-deep); border:var(--bw) solid rgba(26,18,11,.18);
}
.blob--1{ width:26vw; height:26vw; left:-6vw;  top:14vh; }
.blob--2{ width:17vw; height:17vw; right:-4vw; top:9vh; }
.blob--3{ width:12vw; height:12vw; right:16vw; bottom:12vh; }

.hero__scroll{
  display:grid; justify-items:center; gap:.4rem;
  margin-top:clamp(.9rem,2.4vh,1.8rem);
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--choco);
}
/* a scroll cue is least useful and most likely to crowd on a short viewport */
@media (max-height:800px){ .hero__scroll{ display:none; } }

/* On a short viewport the CTA matters more than the flavour text: drop the
   eyebrow and the poke hint so the buttons stay above the fold. */
@media (max-height:640px){
  .hero__eyebrow,.chonk-hint{ display:none; }
}
.hero__scroll i{
  width:14px; height:14px; border-right:var(--bw-thin) solid var(--ink);
  border-bottom:var(--bw-thin) solid var(--ink); rotate:45deg;
  animation:bob 1.7s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{translate:0 0} 50%{translate:0 7px} }

/* =========================================================
   TICKER
   ========================================================= */
.ticker{
  background:var(--cream);
  border-top:var(--bw) solid var(--ink);
  border-bottom:var(--bw) solid var(--ink);
  overflow:hidden; padding:.75rem 0;
  rotate:-1.1deg; margin-block:-1.4rem; position:relative; z-index:5;
}
.ticker__track{
  display:flex; width:max-content;
  animation:marquee 26s linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__item{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.1rem,2.6vw,1.9rem);
  text-transform:uppercase; white-space:nowrap;
  padding-inline:1.1rem; color:var(--ink);
}
.ticker__dot{ color:var(--orange); padding-inline:.2rem; }
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* =========================================================
   VIRAL FEED: embedded X posts on a corkboard
   ========================================================= */
.feed{ background:var(--caramel); }

.feed__lead{
  margin:clamp(1rem,2.5vw,1.6rem) auto 0; max-width:34ch;
  text-align:center; text-wrap:balance;
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.15rem,3.2vw,2rem);
  color:var(--cream); text-shadow:4px 5px 0 var(--ink);
  -webkit-text-stroke:2px var(--ink); paint-order:stroke fill;
}
.feed__lead span{ display:block; color:var(--orange); }

/* makes clear these are real third-party posts about beavers, not about the token */
.feed__note{
  margin:.8rem auto 0; max-width:44ch;
  text-align:center; font-size:.9rem; font-style:italic;
  color:var(--choco); opacity:.85;
}

/* Multi-column, not grid: tweet heights vary wildly (a Community Note can add
   300px), and grid rows are as tall as their tallest card, which left large
   dead gaps under the short ones. Columns pack vertically instead.
   Done in CSS rather than JS masonry on purpose: JS would have to move cards
   between column elements, and reparenting an <iframe> reloads it. */
.feed__grid{
  --feed-gap:clamp(1rem,2.2vw,1.8rem);
  max-width:1180px; margin:clamp(2.5rem,5vw,4rem) auto 0;
  columns:3; column-gap:var(--feed-gap);
}
.feed__item{
  /* inline-block + width:100% keeps WebKit from splitting a card across
     columns even with break-inside:avoid */
  display:inline-block; width:100%;
  break-inside:avoid; -webkit-column-break-inside:avoid;
  margin:0 0 var(--feed-gap);
  background:var(--cream);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:.85rem;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
/* stable hand-pinned tilts */
.feed__item:nth-child(3n+1){ rotate:-1.3deg; }
.feed__item:nth-child(3n+2){ rotate:.9deg; }
.feed__item:nth-child(3n+3){ rotate:-.5deg; }
.feed__item:hover,.feed__item:focus-within{
  transform:translateY(-8px); rotate:0deg; box-shadow:var(--shadow-lg);
}

/* the widget swaps the blockquote for an iframe, so both must sit flush */
.feed__item .twitter-tweet{ margin:0 !important; width:100% !important; }
.feed__item iframe{ border-radius:16px !important; }

/* Fallback: if widgets.js is blocked the blockquote stays. Style it so the
   section still reads as a feed rather than raw quoted text. */
.feed__item blockquote.twitter-tweet:not(.twitter-tweet-rendered){
  font-family:var(--body); font-weight:700; font-size:.98rem;
  color:var(--ink); padding:.4rem .3rem;
}
.feed__item blockquote.twitter-tweet:not(.twitter-tweet-rendered) p{ margin-bottom:.6rem; }
.feed__item blockquote.twitter-tweet:not(.twitter-tweet-rendered) a{
  color:var(--caramel-deep); font-weight:900;
  /* comfortable tap target in the fallback state (X's own embed handles its
     own hit areas once the widget renders) */
  display:inline-block; padding:.55rem 0; min-height:44px;
}

@media (max-width:1100px){ .feed__grid{ columns:2; max-width:820px; } }
@media (max-width:700px){ .feed__grid{ columns:1; max-width:520px; } }

/* =========================================================
   STATS
   ========================================================= */
.stats{ background:var(--choco); }
.stat-grid{
  display:grid; gap:clamp(1rem,2.6vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  max-width:1200px; margin:clamp(2.5rem,5vw,4rem) auto 0;
}
.stat{
  padding:clamp(1.6rem,3vw,2.6rem) 1.2rem;
  text-align:center; border-radius:var(--r-lg);
  transition:transform .25s var(--ease);
}
.stat:nth-child(odd){ rotate:-1.4deg; }
.stat:nth-child(even){ rotate:1.2deg; }
.stat:hover{ transform:translateY(-8px) rotate(0deg); }
.stat__val{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(2.4rem,6vw,4rem); line-height:1;
  color:var(--caramel-deep); -webkit-text-stroke:2px var(--ink); paint-order:stroke fill;
  /* nowrap so a long value overflows rather than wrapping. JS then measures
     it and scales it down to fit. Single digits keep the full size; only long
     strings ("BILLIONS", and "1,000,000,000" mid count-up) shrink. */
  white-space:nowrap;
  transform-origin:50% 50%;
}
.stat__label{
  display:block; margin-top:.6rem;
  font-size:.9rem; text-transform:uppercase; letter-spacing:.09em; color:var(--choco);
}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery{ background:var(--caramel); }
.table{
  margin-top:clamp(2rem,4vw,3.4rem);
  padding:clamp(1.4rem,3vw,2.6rem) 0;
  border-block:var(--bw) solid var(--ink);
  background:
    repeating-linear-gradient(90deg,#8A5A33 0 62px,#7E5130 62px 64px),
    #8A5A33;
  box-shadow:inset 0 8px 0 rgba(26,18,11,.16);
}
.rail{
  display:flex; gap:clamp(1rem,2.4vw,1.9rem);
  padding-inline:clamp(1rem,5vw,4rem);
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; cursor:grab;
  scroll-snap-type:x proximity;
}
.rail::-webkit-scrollbar{ display:none; }
.rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.rail.is-dragging .meme{ pointer-events:none; }

.meme{
  flex:0 0 auto; width:clamp(190px,26vw,290px);
  background:var(--cream-hi);
  border:var(--bw) solid var(--ink); border-radius:20px;
  padding:.7rem .7rem 0;
  box-shadow:var(--shadow);
  scroll-snap-align:center;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
  will-change:transform;
}
.meme:hover,.meme:focus-within{
  transform:scale(1.09) rotate(0deg) translateY(-10px) !important;
  box-shadow:var(--shadow-lg); z-index:3;
}
.meme img{
  width:100%; aspect-ratio:1; object-fit:cover;
  border:var(--bw-thin) solid var(--ink); border-radius:12px;
  background:var(--caramel);
}
.meme figcaption{
  font-family:var(--display); font-weight:800;
  text-align:center; text-transform:uppercase;
  font-size:.9rem; padding:.55rem .2rem .7rem; color:var(--ink);
}

/* =========================================================
   TOKEN: blueprint
   ========================================================= */
.token{ background:var(--choco); }
.blueprint{
  position:relative;
  max-width:1000px; margin-inline:auto;
  padding:clamp(2rem,5vw,4rem) clamp(1.2rem,4vw,3.4rem);
  background:
    linear-gradient(var(--choco-soft),var(--choco-soft)),
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(246,228,200,.14) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(246,228,200,.14) 39px 40px);
  background-blend-mode:multiply,normal,normal;
  border:var(--bw) dashed var(--cream);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  text-align:center;
  color:var(--cream);
}
.blueprint::before,.blueprint::after{
  content:''; position:absolute; width:22px; height:22px;
  border:var(--bw-thin) solid var(--cream); border-radius:50%;
}
.blueprint::before{ left:18px; top:18px; }
.blueprint::after{ right:18px; bottom:18px; }

.blueprint__stamp{
  display:inline-block; margin-bottom:1.2rem;
  font-family:var(--display); letter-spacing:.2em; font-size:.78rem;
  color:var(--choco); background:var(--orange);
  border:var(--bw-thin) solid var(--ink); border-radius:8px;
  padding:.35rem .9rem; rotate:-2.5deg;
}

.token__big{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.2rem,8.6vw,5.6rem); line-height:1;
  margin-top:1.4rem; color:var(--orange);
  -webkit-text-stroke:2px var(--ink); paint-order:stroke fill;
  font-variant-numeric:tabular-nums;
}
.token__cap{ font-size:clamp(1rem,2.4vw,1.5rem); margin-top:.4rem; color:var(--cream); }

.specs{
  /* 2x2 rather than auto-fit, so four chips never break 3 + 1 orphan */
  display:grid; gap:.9rem; grid-template-columns:repeat(2,minmax(0,1fr));
  margin:clamp(2rem,4vw,3rem) 0 0; text-align:left;
}
@media (max-width:600px){ .specs{ grid-template-columns:1fr; } }
.spec{
  display:flex; align-items:center; gap:.7rem;
  background:var(--cream); color:var(--ink);
  border:var(--bw-thin) solid var(--ink); border-radius:18px;
  padding:.85rem 1.1rem;
  font-family:var(--display); font-weight:800; font-size:1.02rem;
  box-shadow:var(--shadow-soft);
  transition:transform .2s var(--ease);
}
.spec:hover{ transform:translate(-2px,-3px) rotate(-1deg); }
.spec__tick{
  flex:none; width:1.7em; height:1.7em; border-radius:50%;
  display:grid; place-items:center;
  background:var(--orange); border:var(--bw-thin) solid var(--ink);
}

/* contract address */
.ca{ margin-top:clamp(2rem,4vw,3rem); text-align:left; }
.ca__label{
  display:block; font-size:.75rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cream); margin-bottom:.5rem;
}
.ca__row{ display:flex; gap:.7rem; flex-wrap:wrap; }
.ca__input{
  flex:1 1 260px; min-width:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9rem;
  background:var(--cream); color:var(--ink);
  border:var(--bw) solid var(--ink); border-radius:16px;
  padding:.85rem 1rem;
  text-overflow:ellipsis;
}
.btn--copy{ --btn-bg:var(--cream); font-size:1rem; padding:.75em 1.5em; border-radius:16px; }

/* offsite payment CTA: near-black reads as a payment button and still sits
   inside the palette (it's the ink colour, not a foreign brand colour) */
.btn--pay{
  --btn-bg:var(--ink);
  color:var(--cream);
  width:100%; margin-top:1.1rem;
  gap:.7rem; border-radius:18px;
  font-size:clamp(1rem,1.6vw,1.25rem);
}
.btn--pay:hover{ --btn-bg:#2A1D12; }
/* the FOMO icon is near-black navy on a near-black button, so a cream ring
   separates it and matches the outlined treatment used everywhere else */
.btn__ico{
  width:1.7em; height:1.7em; flex:none;
  border-radius:.45em;
  border:2px solid var(--cream);
}

.ca__offsite{
  margin-top:.6rem; text-align:center;
  font-size:.78rem; color:var(--cream); opacity:.7;
}
.btn--copy.is-done{ --btn-bg:var(--orange); }
.ca__note{ min-height:1.5em; margin-top:.6rem; font-size:.85rem; color:var(--cream); opacity:.85; }

/* =========================================================
   HOW TO BUY
   ========================================================= */
.buy{ background:var(--caramel); }
.buy__grid{
  display:grid; gap:clamp(2rem,4vw,3.4rem);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:start;
  max-width:1200px; margin:clamp(2.5rem,5vw,4rem) auto 0;
}
.steps{ display:grid; gap:clamp(.9rem,2vw,1.4rem); }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.1rem;
  padding:clamp(1.1rem,2.4vw,1.7rem);
  opacity:.45; translate:0 18px;
  transition:opacity .5s ease, translate .5s var(--ease), transform .25s var(--ease);
}
.step.is-on{ opacity:1; translate:0 0; }
.step:hover{ transform:rotate(-1deg) scale(1.015); }
.step__n{
  grid-row:1 / span 2; align-self:start;
  width:2.3em; height:2.3em; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:1.3rem;
  background:var(--orange); color:var(--ink);
  border:var(--bw) solid var(--ink);
}
.step h3{ font-size:clamp(1.15rem,2.6vw,1.7rem); text-transform:uppercase; }
.step p{ color:var(--choco); font-size:.96rem; font-weight:700; }

.dam-wrap{ position:sticky; top:14vh; text-align:center; }
.dam{ width:100%; height:auto; overflow:visible; filter:drop-shadow(7px 9px 0 rgba(26,18,11,.28)); }
.dam__count{
  margin-top:.9rem; font-family:var(--display); font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; color:var(--cream);
  text-shadow:3px 3px 0 var(--ink);
}
.log{ opacity:0; transform-box:fill-box; transform-origin:50% 50%; }
.log.is-on{ animation:drop .55s var(--ease) forwards; }
@keyframes drop{
  from{ opacity:0; translate:0 -90px; rotate:-14deg; }
  to  { opacity:1; translate:0 0;     rotate:0deg; }
}

/* =========================================================
   FINAL CTA
   ========================================================= */
.colony{
  background:var(--choco);
  min-height:100svh; display:grid; place-items:center;
  overflow:hidden; position:relative; text-align:center;
}
.colony__inner{
  position:relative; z-index:2;
  display:grid; gap:clamp(1.6rem,4vw,2.8rem); justify-items:center;
  /* keeps the headline clear of the beavers peeking in at the edges */
  max-width:min(1040px,88vw); margin-inline:auto;
}
.colony__title{ font-size:clamp(1.5rem,5.4vw,3.9rem); }
.colony__title span{ color:var(--orange); }
.colony__fine{ font-size:.82rem; color:var(--cream); opacity:.7; max-width:40ch; }

.colony__peeks{ position:absolute; inset:0; pointer-events:none; }
.peek{
  position:absolute; width:var(--w,150px);
  opacity:0; transition:opacity .5s ease, translate .6s var(--ease);
}
.peek img{
  width:100%; height:auto; display:block;
  /* matches the flat drop shadow the rest of the art uses */
  filter:drop-shadow(5px 6px 0 rgba(26,18,11,.35));
}
.peek.is-on{ opacity:1; translate:0 0 !important; }

/* =========================================================
   FOOTER + easter eggs
   ========================================================= */
.foot{
  background:var(--choco); color:var(--cream);
  border-top:var(--bw) solid var(--ink);
  padding:2rem 1rem; text-align:center; font-size:.85rem;
}
.foot__sep{ opacity:.45; padding-inline:.35rem; }
.foot__mail{
  color:var(--cream); font-weight:900;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:2px;
  /* comfortable tap target without disturbing the single-line footer */
  display:inline-block; padding-block:.5rem;
}
.foot__mail:hover{ color:var(--orange); }
.egg-layer{ position:fixed; inset:0; pointer-events:none; z-index:99; overflow:hidden; }
.egg{
  position:fixed; font-size:2rem;
  animation:fly 1.5s ease-out forwards;
}
@keyframes fly{
  from{ opacity:1; transform:translate(-50%,-50%) scale(.4); }
  to  { opacity:0; transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.5) rotate(var(--rot)); }
}

/* =========================================================
   MASCOT RIG: placement and idle animation
   Every part is positioned from 0,0 via translate() so that
   transform-origin stays on the part's own box.
   ========================================================= */
.chonk-tail,.chonk-body,.chonk-head,.chonk-eyes,.chonk-paw{
  transform-box:fill-box;
}

.chonk-tail{
  transform-origin:50% 4%;
  transform:translate(98px,470px) rotate(-16deg);
  animation:tail-slap 9s var(--ease) infinite;
}
@keyframes tail-slap{
  0%,84%,100%{ transform:translate(98px,470px) rotate(-16deg); }
  88%        { transform:translate(98px,470px) rotate(-44deg); }
  92%        { transform:translate(98px,470px) rotate(-2deg); }
  96%        { transform:translate(98px,470px) rotate(-20deg); }
}

.chonk-body{
  transform-origin:50% 100%;
  animation:breathe 3.6s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform:scale(1,1); }
  50%    { transform:scale(1.025,1.04); }
}

.chonk-head{
  transform-origin:50% 100%;
  animation:head-bob 3.6s ease-in-out infinite;
}
@keyframes head-bob{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  50%    { transform:translate(0,-7px) rotate(.7deg); }
}

.chonk-eyes{
  transform-origin:50% 50%;
  animation:blink 6.5s ease-in-out infinite;
}
@keyframes blink{
  0%,90%,100%{ transform:scaleY(1); }
  94%        { transform:scaleY(.28); }
}

/* base transforms double as the resting pose when animation is disabled */
.chonk-paw{ transform-origin:50% 20%; }
.chonk-paw--l{ transform:translate(122px,468px); animation:paw-l 4.2s ease-in-out infinite; }
.chonk-paw--r{ transform:translate(478px,468px); animation:paw-r 4.2s ease-in-out infinite .5s; }
@keyframes paw-l{
  0%,100%{ transform:translate(122px,468px) rotate(0deg); }
  50%    { transform:translate(122px,462px) rotate(-11deg); }
}
@keyframes paw-r{
  0%,100%{ transform:translate(478px,468px) rotate(0deg); }
  50%    { transform:translate(478px,462px) rotate(11deg); }
}

/* while poked, he gets excited */
.is-poked .chonk-tail{ animation-duration:1.1s; }
.is-poked .chonk-paw--l,.is-poked .chonk-paw--r{ animation-duration:.5s; }

/* konami mode */
.chonk-mode .chonk-holder,.chonk-mode .meme,.chonk-mode .card{ rotate:2deg; }
.chonk-mode{ --orange:#F2A65A; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:860px){
  .buy__grid{ grid-template-columns:1fr; }
  .dam-wrap{ position:static; order:-1; max-width:340px; margin-inline:auto; }
  .blob--1,.blob--2,.blob--3{ display:none; }
}
@media (max-width:520px){
  :root{ --bw:3px; --bw-thin:2px; --shadow:4px 5px 0 var(--ink); --shadow-lg:7px 8px 0 var(--ink); }
  .hero__stage{ margin-block:.5rem; }
  /* stacked full-width buttons reach the bottom edge, so the cue would collide */
  .hero__scroll{ display:none; }
  .btn{ width:100%; max-width:340px; }
  .ca__row{ flex-direction:column; }
  .btn--copy{ width:100%; }
  /* a 44-char address can't fit a phone: shrink it so more is readable,
     the full value still goes to the clipboard via COPY.
     flex must be reset too. The row is a column here, so the 260px basis
     from the desktop rule would apply to HEIGHT and give a 260px tall box. */
  .ca__input{ font-size:.78rem; padding:.75rem .8rem; flex:0 0 auto; width:100%; }
}

/* =========================================================
   REDUCED MOTION: kill all movement, keep all content
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .step,.peek,.log{ opacity:1 !important; translate:none !important; }
  .log{ animation:none !important; }
  .dam-wrap{ position:static; }
}