/* ============================================================
   BAG CAT — 韭菜猫
   Dark illustrated lore site. Mobile first.
   ============================================================ */

:root{
  --ink:        #050505;   /* true black ground */
  --ink-2:      #0c0d0b;   /* charcoal */
  --grit:       #16180f;   /* dirty gray-green */
  --ash:        #8d8f86;   /* muted body text */
  --bone:       #ece7d9;   /* headline off-white */
  --burlap:     #b9a274;   /* the sack */
  --gold:       #d8a637;   /* the bell */
  --rad:        #7dfa1e;   /* radioactive green */
  --rad-dim:    #4c9c14;
  --seal:       #8f2f22;   /* the red chop mark on the sack */

  --font-disp: "Anton", "Arial Black", "Helvetica Neue", sans-serif;
  --font-body: ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-han: "Noto Serif SC", "Songti SC", "STSong", "PingFang SC", serif;

  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1240px;
}

*{ box-sizing:border-box; }

/* ambient dust/star canvas — sits behind everything */
#dust{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%;
}

/* aurora — big drifting radioactive blobs behind everything */
.aurora{
  position:fixed; inset:-20%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 30% at 18% 22%, rgba(125,250,30,.115), transparent 68%),
    radial-gradient(30% 26% at 84% 12%, rgba(76,156,20,.10), transparent 70%),
    radial-gradient(44% 34% at 72% 82%, rgba(125,250,30,.085), transparent 70%),
    radial-gradient(26% 22% at 8% 88%, rgba(216,166,55,.05), transparent 72%);
  filter:blur(10px);
  animation:aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(3%, -2%, 0) scale(1.06); }
  100%{ transform:translate3d(-3%, 2%, 0) scale(1.02); }
}
/* faint green grid — trading-terminal texture */
.gridfx{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(rgba(125,250,30,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,250,30,.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 40%, #000 30%, transparent 100%);
          mask-image:radial-gradient(75% 65% at 50% 40%, #000 30%, transparent 100%);
}
@media (prefers-reduced-motion:reduce){ .aurora{ animation:none; } }
/* everything above the dust */
.topbar,.hero,.creed,.ca-strip,.ch,.foot,.sticky-buy{ position:relative; z-index:1; }
.hero{ z-index:1; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--ash);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---------- shared type ---------- */
.h-xl,.h-lg,.h-md{
  font-family:var(--font-disp);
  color:var(--bone);
  line-height:0.92;
  letter-spacing:0.005em;
  text-transform:uppercase;
  margin:0;
  font-weight:400;
}
.h-xl{ font-size:clamp(3.1rem, 13vw, 8.2rem); }
.h-lg{ font-size:clamp(2.4rem, 9.2vw, 5.4rem); }
.h-md{ font-size:clamp(1.6rem, 5.4vw, 2.8rem); }

.han{
  font-family:var(--font-han);
  color:var(--rad);
  font-weight:700;
  letter-spacing:0.14em;
  text-shadow:0 0 26px rgba(125,250,30,.34);
}
.han-lg{ font-size:clamp(1.9rem, 8vw, 4rem); line-height:1.2; }
.han-md{ font-size:clamp(1.1rem, 4vw, 1.7rem); }
.han-sm{ font-size:.95rem; letter-spacing:.2em; }

.lede{ font-size:clamp(1.02rem,3.4vw,1.28rem); color:#a8aa9e; max-width:34ch; }
.lede.wide{ max-width:46ch; }
.dim{ color:#6f7167; }

/* vertical Chinese stamp, desktop only */
.vstamp{
  display:none;
  writing-mode:vertical-rl;
  font-family:var(--font-han);
  font-size:clamp(1rem,1.5vw,1.35rem);
  letter-spacing:.5em;
  color:rgba(125,250,30,.42);
  text-shadow:0 0 18px rgba(125,250,30,.25);
  user-select:none;
}

/* ---------- chrome ---------- */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:12px var(--pad);
  background:linear-gradient(180deg, rgba(5,5,5,.95) 40%, rgba(5,5,5,0));
  backdrop-filter:blur(6px);
}
.brand{ display:flex; align-items:baseline; gap:10px; text-decoration:none; }
.brand b{ font-family:var(--font-disp); font-weight:400; color:var(--bone); font-size:1.15rem; letter-spacing:.04em; }
.brand span{ font-family:var(--font-han); color:var(--rad); font-size:.95rem; letter-spacing:.16em; }
.topnav{ display:none; gap:26px; }
.topnav a{ text-decoration:none; font-size:.78rem; letter-spacing:.19em; text-transform:uppercase; color:#7e8076; }
.topnav a:hover{ color:var(--rad); }
.topbar-buy{ padding:9px 18px; font-size:.85rem; }
.topbar-right{ display:flex; align-items:center; gap:10px; }
.lang-toggle{
  font-family:var(--font-han); font-size:.92rem; letter-spacing:.1em;
  padding:8px 14px; border:1px solid #33352c; border-radius:2px;
  background:transparent; color:#9a9c90; cursor:pointer;
  transition:color .15s, border-color .15s;
}
.lang-toggle:hover{ color:var(--rad); border-color:var(--rad-dim); }

/* contract strip under the hero */
.ca-strip{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px var(--pad); border-bottom:1px solid #1a1c15; background:#090a07;
}
.ca-strip-label{ font-family:var(--font-disp); font-size:.68rem; letter-spacing:.34em; color:#6b6d63; }
.ca-strip-addr{
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.82rem; color:var(--burlap);
  letter-spacing:.04em; word-break:break-all; flex:1 1 220px; min-width:0;
}
.ca-strip-addr.live{ color:var(--bone); }
.ca-strip-link{ text-decoration:none; display:inline-flex; align-items:center; }
.ca-strip .copy-btn[aria-disabled="true"]{ opacity:.35; pointer-events:none; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-disp); font-weight:400; text-transform:uppercase;
  letter-spacing:.075em; font-size:clamp(.95rem,3.4vw,1.08rem);
  padding:15px 26px; border:1.5px solid var(--rad-dim); border-radius:2px;
  background:transparent; color:var(--rad); text-decoration:none; cursor:pointer;
  transition:background .16s, color .16s, box-shadow .16s, opacity .16s;
}
.btn:hover{ background:rgba(125,250,30,.1); box-shadow:0 0 30px rgba(125,250,30,.2); }
.btn-solid{ background:var(--rad); color:#07110a; border-color:var(--rad); }
.btn-solid:hover{ background:#96ff42; box-shadow:0 0 44px rgba(125,250,30,.4); }
.btn-ghost{ border-color:#33352c; color:#9a9c90; }
.btn-ghost:hover{ border-color:var(--burlap); color:var(--burlap); background:transparent; box-shadow:none; }
.btn[aria-disabled="true"]{ opacity:.42; pointer-events:none; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- chapter scaffold ---------- */
.ch{ position:relative; padding:clamp(84px,15vh,160px) var(--pad); }
.ch-inner{ max-width:var(--maxw); margin:0 auto; position:relative; }
.ch-num{
  font-family:var(--font-disp); font-size:.72rem; letter-spacing:.42em;
  color:var(--rad-dim); text-transform:uppercase; margin:0 0 18px;
}
.ch-num i{ font-style:normal; color:#4a4c43; }

/* full-bleed art */
.bleed{ position:relative; width:100vw; margin-left:50%; transform:translateX(-50%); }
.bleed img{ width:100%; height:auto; max-height:76svh; object-fit:cover; object-position:center 46%; }
.fade-b::after{
  content:""; position:absolute; inset:auto 0 -1px 0; height:42%;
  background:linear-gradient(180deg, transparent, var(--ink) 92%); pointer-events:none;
}
.fade-t::before{
  content:""; position:absolute; inset:-1px 0 auto 0; height:32%;
  background:linear-gradient(0deg, transparent, var(--ink) 92%); pointer-events:none; z-index:1;
}

/* ---------- 1. HERO ---------- */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:120px var(--pad) clamp(38px,7vh,72px); overflow:hidden; }
/* mobile: show the whole character in a band up top, copy sits under it */
.hero-art{
  position:absolute; inset:0 0 auto 0; height:64svh; z-index:0;
  background:transparent 50% 0/contain no-repeat;
  opacity:.92;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(96% 46% at 50% 24%, transparent 30%, rgba(5,5,5,.5) 78%, var(--ink) 100%),
    linear-gradient(180deg, rgba(5,5,5,.86) 0%, transparent 16%, rgba(5,5,5,.72) 48%, var(--ink) 62%);
}
.hero-inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; width:100%; }
.hero .h-xl{ text-shadow:0 6px 46px rgba(0,0,0,.95); }
.hero .h-xl em{ font-style:normal; color:var(--rad); text-shadow:0 0 42px rgba(125,250,30,.42); }
.hero-han{ margin:20px 0 30px; }
.ticker-line{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin-bottom:14px; font-family:var(--font-disp); letter-spacing:.06em;
}
.ticker-line b{ color:var(--rad); font-size:clamp(1.3rem,5vw,2rem); font-weight:400; }
.ticker-line span{ color:#71736a; font-size:.74rem; letter-spacing:.34em; }
.scroll-cue{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:3;
  font-size:.64rem; letter-spacing:.4em; color:#54564d; text-transform:uppercase;
  animation:cue 2.6s ease-in-out infinite;
}
@keyframes cue{ 0%,100%{opacity:.35;transform:translate(-50%,0)} 50%{opacity:.9;transform:translate(-50%,5px)} }

/* ---------- 2. bilingual marquee ---------- */
.creed{ border-block:1px solid #1a1c15; background:var(--ink-2); padding:0; overflow:hidden; }
.creed-track{ display:flex; width:max-content; animation:slide 46s linear infinite; }
.creed-track > div{ display:flex; }
.creed-item{
  display:flex; align-items:center; gap:14px; padding:20px 34px; white-space:nowrap;
  border-right:1px solid #1a1c15;
}
.creed-item i{ font-style:normal; font-family:var(--font-han); color:var(--rad); font-size:1.05rem; letter-spacing:.1em; }
.creed-item s{ text-decoration:none; color:#7b7d73; font-size:.78rem; letter-spacing:.26em; text-transform:uppercase; }
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .creed-track{animation:none} .scroll-cue{animation:none} }

/* ---------- generic split chapter ---------- */
.split{ display:grid; gap:clamp(26px,5vw,60px); align-items:center; }
.split figure{ margin:0; }
.split img{ width:100%; border-radius:2px; }

/* ---------- 3. 3:14 AM ---------- */
.clock{
  font-family:var(--font-disp); font-size:clamp(4.6rem,22vw,13rem); line-height:.85;
  color:var(--rad); text-shadow:0 0 60px rgba(125,250,30,.36); margin:0 0 6px;
}
.beats{ list-style:none; margin:26px 0 0; padding:0; }
.beats li{
  padding:11px 0; border-top:1px solid #1c1e17;
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  font-size:clamp(1.05rem,4vw,1.35rem); color:var(--bone);
}
.beats li em{ font-style:normal; font-family:var(--font-han); color:var(--rad-dim); font-size:.95rem; letter-spacing:.16em; }

/* ---------- 4. dream / pull quote ---------- */
.pull{
  border-left:2px solid var(--rad-dim); padding-left:clamp(18px,4vw,32px);
  font-size:clamp(1.15rem,4.4vw,1.6rem); color:var(--bone); max-width:30ch; line-height:1.42;
}

/* ---------- 5. shrine ---------- */
.shrine-copy .h-lg{ color:var(--rad); text-shadow:0 0 46px rgba(125,250,30,.28); }

/* ---------- 6. army ---------- */
.army{ text-align:center; }
.army .h-lg{ max-width:16ch; margin:0 auto; }

/* ---------- 7. sunrise ---------- */
.sunrise .h-lg{ color:var(--burlap); }
.sunrise .han{ color:var(--gold); text-shadow:0 0 30px rgba(216,166,55,.3); }

/* ---------- sightings ---------- */
.sight-grid{ display:grid; gap:10px; grid-template-columns:1fr; margin-top:36px; }
.sight{ position:relative; overflow:hidden; background:var(--ink-2); aspect-ratio:4/3; }
.sight img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.sight:hover img{ transform:scale(1.035); }
.sight figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:16px 18px;
  background:linear-gradient(0deg, rgba(3,3,3,.96) 12%, rgba(3,3,3,.7) 55%, transparent);
  display:flex; align-items:baseline; gap:12px;
}
.sight figcaption i{ font-style:normal; font-family:var(--font-han); color:var(--rad); font-size:1.3rem; letter-spacing:.12em; }
.sight figcaption s{ text-decoration:none; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:#9b9d92; }

/* ---------- contract / buy ---------- */
.buy{ border-top:1px solid #1a1c15; background:linear-gradient(180deg, #0a0b08, var(--ink)); padding-bottom:clamp(48px,8vh,110px); }
.ca-card{
  border:1px solid #23261c; background:rgba(12,13,11,.7); padding:clamp(20px,4vw,34px);
  max-width:760px; margin-top:30px;
}
.ca-label{ font-size:.66rem; letter-spacing:.34em; text-transform:uppercase; color:#6b6d63; margin-bottom:10px; }
.ca-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ca-addr{
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:clamp(.82rem,3.2vw,1rem);
  color:var(--bone); word-break:break-all; flex:1 1 260px; min-width:0;
}
.ca-addr.pending{ color:var(--burlap); font-family:var(--font-disp); letter-spacing:.1em; word-break:normal; }
.copy-btn{
  font-family:var(--font-disp); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  padding:10px 16px; border:1px solid var(--rad-dim); background:transparent; color:var(--rad);
  cursor:pointer; border-radius:2px; flex:0 0 auto;
}
.copy-btn:hover{ background:rgba(125,250,30,.1); }
.copy-btn[disabled]{ opacity:.35; cursor:not-allowed; }
.chain-tag{
  display:inline-block; margin-top:12px; font-size:.66rem; letter-spacing:.28em;
  text-transform:uppercase; color:#6b6d63;
}

/* ---------- footer ---------- */
.foot{ border-top:1px solid #17190f; padding:clamp(40px,7vw,80px) var(--pad) calc(88px + env(safe-area-inset-bottom)); background:var(--ink-2); }
.foot-inner{ max-width:var(--maxw); margin:0 auto; display:grid; gap:26px; }
.foot .h-md{ margin-bottom:4px; }
.foot .btn{ width:100%; }
.foot-rule{ border:0; border-top:1px solid #1c1e15; margin:4px 0; }
.disc{ font-size:.78rem; line-height:1.66; color:#5f6157; max-width:62ch; }
.disc strong{ color:#8a8c81; font-weight:600; }

/* ---------- sticky mobile buy ---------- */
.sticky-buy{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; gap:9px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg, rgba(5,5,5,.98) 62%, rgba(5,5,5,.86));
  border-top:1px solid #1c1e15;
  transform:translateY(105%); transition:transform .3s ease;
}
.sticky-buy.on{ transform:translateY(0); }
.sticky-buy .btn{ flex:1; padding:14px 10px; font-size:.92rem; }
.sticky-buy .btn.x-btn{ flex:0 0 auto; padding:14px 18px; }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
.rv.in{ opacity:1; transform:none; }

/* ---------- glow & action ---------- */
@keyframes breathe{
  0%,100%{ text-shadow:0 0 26px rgba(125,250,30,.32); }
  50%{ text-shadow:0 0 46px rgba(125,250,30,.62), 0 0 90px rgba(125,250,30,.18); }
}
.hero .h-xl em, .clock, .shrine-copy .h-lg{ animation:breathe 3.6s ease-in-out infinite; }
.han{ animation:breathe 4.8s ease-in-out infinite; }

@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(125,250,30,.55); }
  70%{ box-shadow:0 0 0 14px rgba(125,250,30,0); }
  71%{ box-shadow:0 0 0 0 rgba(125,250,30,0); }
}
.btn-solid{ animation:pulse 2.8s ease-out infinite; }

/* neon edge on chapter art */
.bleed img, .split img, .sight{
  box-shadow:0 0 0 1px rgba(125,250,30,.14), 0 0 42px rgba(125,250,30,.09);
}

/* image reveal gets a glow flash */
.rv.in figure img, figure.rv.in img{ animation:artin 1.1s ease-out; }
@keyframes artin{
  0%{ filter:brightness(1.7) saturate(1.4); box-shadow:0 0 90px rgba(125,250,30,.5); }
  100%{ filter:none; }
}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero .h-xl em,.clock,.shrine-copy .h-lg,.han,.btn-solid{ animation:none; }
  #dust{ display:none; }
}

/* ============================================================
   DESKTOP
   ============================================================ */
@media (min-width:768px){
  body{ font-size:18px; }
  .topnav{ display:flex; }
  .vstamp{ display:block; }
  .sight-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .split{ grid-template-columns:1.05fr .95fr; }
  .split.flip figure{ order:2; }
  .split img{ max-height:64vh; width:auto; max-width:100%; margin:0 auto; object-fit:contain; }
  /* desktop: no full-bleed — art stays inside the content column and under 60vh */
  .bleed{ width:100%; max-width:var(--maxw); margin:0 auto; transform:none; }
  .bleed img{ width:auto; max-width:100%; max-height:74vh; margin:0 auto; object-fit:contain; border-radius:2px; }
  .fade-b::after,.fade-t::before{ display:none; }
  .sticky-buy{ display:none; }
  .foot-inner{ grid-template-columns:1.2fr 1fr; align-items:end; }
  .foot{ padding-bottom:80px; }
  .foot .btn{ width:auto; }
  .foot-rule{ display:none; }

  /* desktop: copy left, contained art right — no full-screen background */
  .hero{ justify-content:center; min-height:auto; padding-top:120px; padding-bottom:64px; }
  .hero-art{
    position:absolute; left:auto; right:var(--pad); top:50%; transform:translateY(-50%);
    width:min(46vw, 84vh, 760px); aspect-ratio:1/1; height:auto; inset:auto var(--pad) auto auto;
    background-size:contain; background-position:center; opacity:1; border-radius:2px;
  }
  .hero::after{
    background:radial-gradient(60% 60% at 72% 50%, rgba(125,250,30,.05), transparent 70%);
  }
  .hero-inner{ padding-right:min(48vw, 700px); }
  .hero-vstamp{ position:absolute; right:calc(var(--pad) / 2); top:24vh; z-index:3; }
  .ch-vstamp{ position:absolute; right:calc(var(--pad) * -0.35); top:0; }

}
@media (min-width:1100px){
  .sight-grid{ grid-template-columns:repeat(4,1fr); }
}