/* chg.land — hand-drawn landing / 404 */
:root{ --paper:#d7d7d7; --boil:.33s; }
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--paper);
  display:grid; place-items:center;
  min-height:100vh; min-height:100dvh;
  overflow:hidden;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-text-size-adjust:100%;
}
.stage{
  position:relative; isolation:isolate;
  width:min(100vw,100vh); height:min(100vw,100vh);
  width:min(100vw,100svh); height:min(100vw,100svh);
}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- ink that breathes ---------- */
.el{position:absolute}
.el .boil{position:absolute;inset:0}
.boil img{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  animation:boilA var(--boil) steps(1) infinite;animation-delay:inherit}
.boil .f1{animation-name:boilB}
.boil .f2{animation-name:boilC}
@keyframes boilA{0%,33.2%{opacity:1}33.4%,100%{opacity:0}}
@keyframes boilB{0%,33.2%{opacity:0}33.4%,66.5%{opacity:1}66.7%,100%{opacity:0}}
@keyframes boilC{0%,66.5%{opacity:0}66.7%,100%{opacity:1}}

/* ---------- groups ---------- */
.title,.msg,.catwrap{position:absolute;inset:0;z-index:3;pointer-events:none}
.el.glue{z-index:1}
.chg{z-index:3;pointer-events:none}

/* ---------- drawn menu (three empty tabs, nothing to click yet) ---------- */
.menu{position:absolute;inset:0;z-index:5;pointer-events:none}
.mtab{pointer-events:none;cursor:default}

/* ---------- the character ---------- */
.catwrap{animation:breathe 4.6s steps(7) infinite;transform-origin:50% 63%}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.004,.994)}}
.arm{z-index:3}
.arm-l{transform-origin:100% 46%;animation:waveL 19s steps(1) infinite}
.arm-r{transform-origin:0 46%;animation:waveR 19s steps(1) infinite}
@keyframes waveL{0%,84%{transform:rotate(0)}85%{transform:rotate(16deg)}87%{transform:rotate(33deg)}
  89%{transform:rotate(18deg)}91%{transform:rotate(35deg)}93%{transform:rotate(14deg)}94.5%,100%{transform:rotate(0)}}
@keyframes waveR{0%,84%{transform:rotate(0)}85%{transform:rotate(-5deg)}88%{transform:rotate(-9deg)}
  91%{transform:rotate(-4deg)}93%{transform:rotate(-8deg)}94.5%,100%{transform:rotate(0)}}
.blink{position:absolute;z-index:4;opacity:0;animation:blink 7.4s steps(1) infinite}
@keyframes blink{0%,95.4%{opacity:0}95.7%,97%{opacity:1}97.3%,100%{opacity:0}}
.el.glue{animation:bob 4.2s steps(7) infinite;transform-origin:50% 88%}   /* 404 page */
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(.7%) rotate(-.9deg)}}

/* ---------- it answers a click ---------- */
.cat-hit{position:absolute;z-index:6;left:31.5%;top:31%;width:32.5%;height:30%;
  pointer-events:auto;cursor:pointer;background:none;border:0;padding:0;
  -webkit-appearance:none;appearance:none}
.cat-hit:focus-visible{outline:2px dashed rgba(35,35,35,.6);outline-offset:.5vmin;border-radius:2vmin}
.mark{z-index:4;opacity:0;pointer-events:none}

/* thinking: scratches, head tilts, question marks */
.stage.think .arm-r{animation:scratch 2.7s steps(1) 1}
@keyframes scratch{0%{transform:rotate(0)}5%{transform:rotate(-38deg)}10%{transform:rotate(-74deg)}
  18%{transform:rotate(-66deg) translateY(-14%)}25%{transform:rotate(-82deg) translateY(-6%)}
  32%{transform:rotate(-66deg) translateY(-14%)}39%{transform:rotate(-82deg) translateY(-6%)}
  46%{transform:rotate(-67deg) translateY(-14%)}53%{transform:rotate(-81deg) translateY(-6%)}
  60%{transform:rotate(-70deg) translateY(-10%)}68%{transform:rotate(-36deg)}74%,100%{transform:rotate(0)}}
.stage.think .catwrap{animation:thinkTilt 2.7s steps(1) 1}
@keyframes thinkTilt{0%{transform:rotate(0)}8%,66%{transform:rotate(-1.5deg)}72%,100%{transform:rotate(0)}}
.stage.think .qm{animation:qpop 2.7s steps(1) 1}
@keyframes qpop{0%,9%{opacity:0;transform:translateY(7%)}11%,66%{opacity:1;transform:translateY(0)}
  68%,74%{opacity:1;transform:translateY(-3%)}76%,100%{opacity:0;transform:translateY(-7%)}}

/* pleased: both arms up, eyes shut, his own ticks popping */
.stage.happy .arm-l{animation:cheerL 2.3s steps(1) 1}
@keyframes cheerL{0%{transform:rotate(0)}8%{transform:rotate(36deg)}20%{transform:rotate(60deg)}
  32%{transform:rotate(28deg)}44%{transform:rotate(60deg)}56%{transform:rotate(30deg)}
  68%{transform:rotate(56deg)}80%{transform:rotate(22deg)}88%,100%{transform:rotate(0)}}
.stage.happy .arm-r{animation:cheerR 2.3s steps(1) 1}
@keyframes cheerR{0%{transform:rotate(0)}8%{transform:rotate(-34deg)}20%{transform:rotate(-58deg)}
  32%{transform:rotate(-26deg)}44%{transform:rotate(-58deg)}56%{transform:rotate(-28deg)}
  68%{transform:rotate(-54deg)}80%{transform:rotate(-20deg)}88%,100%{transform:rotate(0)}}
.stage.happy .catwrap{animation:hop 2.3s steps(1) 1;transform-origin:50% 96%}
@keyframes hop{0%,6%{transform:translateY(0)}12%{transform:translateY(-2.4%)}20%{transform:translateY(0)}
  26%{transform:translateY(-1.7%)}34%{transform:translateY(0)}56%{transform:translateY(-2.1%)}
  64%{transform:translateY(0)}72%{transform:translateY(-1.2%)}80%,100%{transform:translateY(0)}}
.stage.happy .blink{animation:shut 2.3s steps(1) 1}
@keyframes shut{0%,4%{opacity:0}6%,84%{opacity:1}88%,100%{opacity:0}}
.stage.happy .spark{animation:sparkPop 2.3s steps(1) 1}
@keyframes sparkPop{0%,8%{opacity:0;transform:scale(.6)}12%,40%{opacity:1;transform:scale(1)}
  44%,52%{opacity:.25;transform:scale(1.05)}56%,72%{opacity:1;transform:scale(1.1)}
  76%,100%{opacity:0;transform:scale(1.2)}}

/* startled: a jump, arms out, one exclamation */
.stage.startled .catwrap{animation:jump 1.9s steps(1) 1;transform-origin:50% 96%}
@keyframes jump{0%{transform:translateY(0)}5%{transform:translateY(-4.2%)}13%{transform:translateY(-3.4%)}
  21%{transform:translateY(0)}27%{transform:translateY(-1.5%)}33%{transform:translateY(0)}
  40%{transform:translateX(.7%)}46%{transform:translateX(-.7%)}52%{transform:translateX(.5%)}
  58%{transform:translateX(-.3%)}64%,100%{transform:translateX(0)}}
.stage.startled .arm-l{animation:outL 1.9s steps(1) 1}
@keyframes outL{0%{transform:rotate(0)}5%{transform:rotate(46deg)}28%{transform:rotate(40deg)}
  44%{transform:rotate(14deg)}56%,100%{transform:rotate(0)}}
.stage.startled .arm-r{animation:outR 1.9s steps(1) 1}
@keyframes outR{0%{transform:rotate(0)}5%{transform:rotate(-44deg)}28%{transform:rotate(-38deg)}
  44%{transform:rotate(-12deg)}56%,100%{transform:rotate(0)}}
.stage.startled .excl{animation:exclPop 1.9s steps(1) 1}
@keyframes exclPop{0%,3%{opacity:0;transform:scale(.5) translateY(8%)}
  6%,20%{opacity:1;transform:scale(1.12) translateY(0)}22%,58%{opacity:1;transform:scale(1) translateY(0)}
  62%,70%{opacity:1;transform:translateY(-3%)}74%,100%{opacity:0;transform:translateY(-8%)}}

/* dozing: eyes shut, head drops, z z z */
.stage.sleepy .blink{animation:shut 3.7s steps(1) 1}
.stage.sleepy .catwrap{animation:doze 3.7s steps(1) 1;transform-origin:50% 80%}
@keyframes doze{0%{transform:rotate(0)}8%,18%{transform:rotate(-1.4deg)}
  24%,44%{transform:rotate(-2.4deg) translateY(.5%)}50%,66%{transform:rotate(-1.6deg)}
  72%,86%{transform:rotate(-2.4deg) translateY(.5%)}92%,100%{transform:rotate(0)}}
.stage.sleepy .zzz{animation:zrise 3.7s steps(1) 1}
@keyframes zrise{0%,8%{opacity:0;transform:translateY(9%)}14%,46%{opacity:1;transform:translateY(2%)}
  52%,74%{opacity:1;transform:translateY(-2%)}80%,88%{opacity:1;transform:translateY(-6%)}
  92%,100%{opacity:0;transform:translateY(-11%)}}

/* ---------- quiet mode ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::after{animation:none !important;transition:none !important}
  .boil img{opacity:0}
  .boil .f0{opacity:1}
  .blink{opacity:0}
  .stage.think .qm,.stage.happy .spark,.stage.startled .excl,.stage.sleepy .zzz{opacity:1}
  .stage.happy .blink,.stage.sleepy .blink{opacity:1}
}