/* NOMEX.FUN — character animation states + silly body modes */

/* --- mouth / poke states (the SVG swaps mouth shapes) --- */
#dinoStage svg .mouth-open-group{opacity:0;transition:opacity .09s steps(2,end)}
#dinoStage svg.is-poked .mouth-open-group{opacity:1}
#dinoStage svg.is-poked .mouth-closed{opacity:0}
#dinoStage svg .mouth-closed{transition:opacity .09s steps(2,end)}
#dinoStage svg.is-poked .brow{transform:translateY(-4px)}
#dinoStage .brow{transition:transform .12s ease}

/* --- blinking --- */
#dinoStage .dino-eyes{transform-box:fill-box;transform-origin:center;transition:transform .07s ease}
#dinoStage svg.is-blinking .dino-eyes{transform:scaleY(.08)}
#dinoStage svg.is-blinking .pupil{opacity:0}

/* --- milk-wobble: the dino is quite drunk now --- */
body.milk-wobble .hero__dino{animation:wobbleSoft 2.6s ease-in-out infinite}
@keyframes wobbleSoft{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  25%{transform:translateY(-7px) rotate(1.4deg)}
  50%{transform:translateY(2px) rotate(-1.6deg)}
  75%{transform:translateY(-4px) rotate(.8deg)}
}

/* --- screen shake for the really committed --- */
body.shake-soft main{animation:shakeSoft 5s steps(14,end) 1}
@keyframes shakeSoft{
  0%,88%,100%{transform:translate(0,0)}
  89%{transform:translate(-3px,2px)}
  91%{transform:translate(3px,-2px)}
  93%{transform:translate(-2px,-3px)}
  95%{transform:translate(2px,3px)}
  97%{transform:translate(-1px,1px)}
}

/* --- KONAMI RAINBOW DINO MODE --- */
body.rainbow{
  background:
    radial-gradient(1200px 700px at 78% -12%, rgba(255,68,150,.28), transparent 62%),
    radial-gradient(900px 600px at 4% 108%, rgba(90,220,255,.24), transparent 60%),
    linear-gradient(180deg,#160f22,#0d1410 60%,#101c16);
}
body.rainbow .logo{animation:hueSpin 3s linear infinite}
body.rainbow #dinoStage svg{animation:hueSpin 2.4s linear infinite}
body.rainbow .window{border-color:#ff44a0}
@keyframes hueSpin{from{filter:hue-rotate(0)}to{filter:hue-rotate(360deg)}}

/* --- the "under construction" jiggle used on the 404 --- */
.jiggle{animation:jig 1.6s ease-in-out infinite}
@keyframes jig{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

.note{
  font-family:var(--font-mono);font-size:12px;color:#a6c0a1;border-left:3px solid var(--line2);
  padding-left:12px;margin:16px 0 0;
}
.muted{color:#a6c0a1}
.center{text-align:center}
.mt{margin-top:18px}

/* --- wide art strip --- */
.banner{margin:0}
.banner img{width:100%;height:auto;display:block;border:3px solid var(--line);border-radius:8px;background:#fff}
.banner figcaption{
  font-family:var(--font-mono);font-size:12px;color:#a6c0a1;margin-top:10px;text-align:center;
}

/* keep the handle + date on one line in tweet cards */
.tweet__date{white-space:nowrap}