:root {
  --paper: #f4e6c8;
  --ink: #2b2418;
  --blue: #3a9fe0;
  --blue-deep: #1e78b8;
  --yellow: #f4d24a;
  --purple: #8b5cc7;
  --green: #c9ea90;
  --green-line: #5aa64a;
  --gold: #f0c14b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }

body {
  font-family: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", sans-serif;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

img { max-width: 100%; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }

.defs-only { position: absolute; width: 0; height: 0; overflow: hidden; }

.paper {
  position: fixed; inset: 0; z-index: -3;
  background-color: var(--paper);
  background-image: url("assets/paper-grain.png");
  background-size: 420px 420px;
  opacity: .9;
}

.stains {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 214, 120, .3), transparent 26%),
    radial-gradient(circle at 92% 18%, rgba(180, 150, 255, .16), transparent 24%),
    radial-gradient(circle at 18% 88%, rgba(120, 200, 140, .18), transparent 28%),
    radial-gradient(circle at 86% 84%, rgba(255, 160, 140, .14), transparent 26%);
}

.bg-doodles {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; opacity: .5; pointer-events: none;
}

.page {
  position: relative; z-index: 1;
  width: min(1180px, calc(100% - 76px));
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 36px 56px;
  align-items: center;
  padding: 40px 0 56px;
}

/* ---------------------------------------------------------- the stage */

.stage { position: relative; }

/* crayon sky the cut-out stands inside of — no photo frame anywhere */
.sky {
  position: absolute;
  inset: 11% -4% 13% -4%;
  z-index: 0;
  border-radius: 20px 30px 22px 26px;
  overflow: hidden;
  background:
    repeating-linear-gradient(72deg, rgba(255, 255, 255, .28) 0 3px, transparent 3px 11px),
    repeating-linear-gradient(66deg, rgba(96, 168, 214, .22) 0 2px, transparent 2px 15px),
    repeating-linear-gradient(78deg, rgba(255, 255, 255, .26) 0 4px, transparent 4px 24px),
    linear-gradient(#b9e2f7 0%, #9ed4f0 58%, #bfe5f4 100%);
  box-shadow: inset 0 0 0 5px rgba(58, 159, 224, .55);
  filter: url(#crayonEdge);
}

.sky .hill {
  position: absolute;
  left: -4%; right: -4%; bottom: -6%;
  height: 34%;
  border-radius: 46% 54% 8% 8% / 62% 58% 6% 6%;
  background:
    repeating-linear-gradient(68deg, rgba(255, 255, 255, .32) 0 3px, transparent 3px 11px),
    repeating-linear-gradient(60deg, rgba(70, 140, 60, .32) 0 2px, transparent 2px 14px),
    linear-gradient(#a9dd7e, #85c65c);
}

.doodle-layer { position: absolute; inset: 0; pointer-events: none; }
.doodle-layer.behind { z-index: 1; }
.doodle-layer.front { z-index: 3; }
.doodle { position: absolute; overflow: visible; filter: url(#crayonSoft); }

.doodle.sun     { width: 15%; top: 13%;  left: 2%;   transform: rotate(-8deg); }
.doodle.cloud.a { width: 20%; top: 15%;  right: 1%; }
.doodle.cloud.b { width: 14%; top: 33%;  left: 0;     opacity: .9; }
.doodle.planet  { width: 17%; top: 26%;  right: -2%; transform: rotate(12deg); }
.doodle.ufo     { width: 19%; top: 4%;   right: 6%;  display: none; }
.doodle.alien   { width: 11%; top: 47%;  right: -1%; transform: rotate(8deg); }
.doodle.robot   { width: 14%; bottom: 16%; left: -2%; transform: rotate(-10deg); }
.doodle.trex    { width: 22%; bottom: 4%; right: 0; }
.doodle.star    { width: 7%;  top: 40%;  left: 1%; }
.doodle.heart   { width: 6%;  top: 8%;   left: 26%; }

/* ---------------------------------------------------- the cut-out itself */

.figure { position: relative; z-index: 2; width: 86%; margin: 0 auto; }

.figure-media {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  /* Dissolves into the paper instead of ending on a photo edge. The gradient
     is five frames tall and bottom-aligned, so the four frames of headroom
     above stay solid: armour dropping in from the sky has to cross them, and a
     repeating one-frame mask would strobe it on the way down. */
  -webkit-mask-image: linear-gradient(180deg, #000 97.6%, rgba(0, 0, 0, .5) 99%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 97.6%, rgba(0, 0, 0, .5) 99%, transparent 100%);
  -webkit-mask-size: 100% 500%;
  mask-size: 100% 500%;
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  filter:
    drop-shadow(5px 8px 0 rgba(90, 70, 30, .11))
    drop-shadow(0 12px 18px rgba(40, 30, 10, .13));
}

.skin {
  position: relative;
  filter: saturate(.92) contrast(1.03) brightness(1.02);
  transition: filter .5s ease;
}

/* in-flow SVG so iOS paints it; not an <img>, so it won't highlight on drag */
.skin-svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.eye-canvas,
.grain,
.clothes,
.clothes-svg,
.armor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The clothes ride their own layer so they can leave without the head. */
.clothes {
  z-index: 0;
  transform: translateY(0);
  transition: transform .74s cubic-bezier(.2, .84, .3, 1);
  will-change: transform;
}

.shed .clothes {
  z-index: 0;
  transform: translateY(112%);
  /* falling away accelerates; coming back settles */
  transition: transform .66s cubic-bezier(.5, .02, .78, .2);
}

/* paper grain printed onto the person only — glues him to the page */
.grain {
  background: url("assets/paper-grain.png") 0 0 / 300px 300px;
  mix-blend-mode: multiply;
  opacity: .16;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.eye-canvas, .head-grain { z-index: 2; }

.head-grain {
  -webkit-mask-image: url("assets/head-mask.png");
  mask-image: url("assets/head-mask.png");
}

.body-grain {
  -webkit-mask-image: url("assets/body-mask.png");
  mask-image: url("assets/body-mask.png");
}

/* Keep the face naturally lit when the photographic armor arrives. */
.suited .skin { filter: saturate(.92) contrast(1.03) brightness(1.02); }

/* ------------------------------------------------------------- armour */

.armor { overflow: visible; }

.ap {
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

#apHelmet    { transform-origin: 640px 560px; }
#apGorget    { transform-origin: 520px 880px; }
#apChest     { transform-origin: 560px 1240px; }
#apShoulderL { transform-origin: 120px 1140px; }
#apShoulderR { transform-origin: 980px 1160px; }
#apBicepL    { transform-origin: 92px 1360px; }
#apBicepR    { transform-origin: 1036px 1400px; }

/* The suit comes down out of the sky as one thing. Each plate gets its own
   slight drift and tilt so it is a falling rig rather than a sliding sheet,
   but every one of them arrives from straight overhead. */
.ap                { --fx: 0px;   --fy: -2100px; --spin: 0deg; }
#apGorget          { --fx: -26px; --fy: -2020px; --spin: 3deg; }
#apChest           { --fx: 14px;  --fy: -2160px; --spin: -2deg; }
#apShoulderL       { --fx: -54px; --fy: -2080px; --spin: -5deg; }
#apShoulderR       { --fx: 58px;  --fy: -2110px; --spin: 5deg; }
#apBicepL          { --fx: -70px; --fy: -2050px; --spin: -7deg; }
#apBicepR          { --fx: 74px;  --fy: -2090px; --spin: 7deg; }
#apHelmet          { --fx: 10px;  --fy: -1960px; --spin: -4deg; }

.armor.fly .ap {
  visibility: visible;
  animation: armorDrop .74s cubic-bezier(.24, .82, .3, 1) both;
}

.armor.fly #apChest     { animation-delay: 0s; }
.armor.fly #apGorget    { animation-delay: .05s; }
.armor.fly #apBicepL    { animation-delay: .08s; }
.armor.fly #apBicepR    { animation-delay: .11s; }
.armor.fly #apShoulderL { animation-delay: .14s; }
.armor.fly #apShoulderR { animation-delay: .17s; }
.armor.fly #apHelmet    { animation-delay: .26s; }

.armor.off .ap {
  visibility: visible;
  animation: armorLift .52s cubic-bezier(.6, 0, .85, .3) both;
}

.armor.off #apHelmet    { animation-delay: 0s; }
.armor.off #apShoulderR { animation-delay: .06s; }
.armor.off #apShoulderL { animation-delay: .08s; }
.armor.off #apBicepR    { animation-delay: .1s; }
.armor.off #apBicepL    { animation-delay: .12s; }
.armor.off #apGorget    { animation-delay: .15s; }
.armor.off #apChest     { animation-delay: .18s; }

@keyframes armorDrop {
  0%   { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--spin)) scale(1.05); }
  9%   { opacity: 1; }
  72%  { transform: translate(0, 12px) rotate(0deg) scale(1.008); }
  87%  { transform: translate(0, -3px) rotate(0deg) scale(.997); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes armorLift {
  0%   { opacity: 1; transform: none; }
  16%  { opacity: 1; transform: translate(0, 26px) scale(.996); }
  100% { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--spin)) scale(1.04); }
}

/* --------------------------------------------------------------- HUD */

.hud {
  position: absolute;
  left: 50%; bottom: 9%;
  transform: translateX(-50%);
  width: 66%;
  padding: 9px 13px 11px;
  color: #b6f6ff;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  text-align: center;
  letter-spacing: .1em;
  background: rgba(3, 20, 30, .68);
  border: 1px solid rgba(126, 246, 255, .6);
  box-shadow: 0 0 22px rgba(126, 246, 255, .3), inset 0 0 22px rgba(126, 246, 255, .12);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  transition: opacity .3s ease;
}

.hud.show { opacity: 1; }
.hud-kicker { font-size: 12px; opacity: .75; }
.hud-line { font-size: 14px; margin: 5px 0 7px; }

.hud-bar {
  height: 5px;
  background: rgba(126, 246, 255, .18);
  overflow: hidden;
}

.hud-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #7ef6ff, #fff6c2);
}

/* ------------------------------------------------------------ sticky */

.sticky {
  position: absolute;
  left: 0; bottom: 2%;
  z-index: 5;
  width: 94px; height: 94px;
  background: linear-gradient(#fff6ad, #ffe469);
  box-shadow: 3px 5px 0 rgba(0, 0, 0, .13);
  transform: rotate(-8deg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  transition: transform .2s ease;
}

.sticky::before {
  content: "";
  position: absolute; top: -8px; right: 20px;
  width: 16px; height: 22px;
  background: linear-gradient(#d0d6dc, #9aa3ad);
  border-radius: 3px;
  box-shadow: 1px 1px 0 #6d757c;
}

.sticky .face { font-size: 27px; line-height: 1; }

.sticky .hint {
  font-family: "ZCOOL KuaiLe", "Ma Shan Zheng", cursive;
  font-size: 12px;
  color: #8a5a16;
}

.sticky:hover { transform: rotate(-3deg) scale(1.06); }

/* --------------------------------------------------------------- info */

.name-block { position: relative; margin-bottom: 18px; }
.arrow { display: block; width: 120px; margin-bottom: 2px; transform: translateX(-8px) rotate(-6deg); }

.name {
  font-family: "ZCOOL KuaiLe", "Ma Shan Zheng", cursive;
  font-size: clamp(56px, 7vw, 92px);
  line-height: 1.05;
  color: var(--yellow);
  -webkit-text-stroke: 3px #2a2214;
  paint-order: stroke fill;
  text-shadow: 4px 5px 0 rgba(139, 92, 199, .28);
  letter-spacing: .06em;
  display: inline-block;
  position: relative;
}

.name::after {
  content: "";
  position: absolute;
  left: 4px; right: 8px; bottom: 2px;
  height: 10px;
  border-bottom: 6px solid var(--purple);
  border-radius: 50%;
  transform: rotate(-1.5deg);
  opacity: .9;
  transition: border-color .5s ease;
}

.facts { list-style: none; display: grid; gap: 13px; margin: 8px 0 28px; font-size: 18px; }
.facts li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.facts b { font-weight: 700; }

.fact-link {
  color: var(--blue-deep);
  text-decoration: none;
  border-bottom: 2px solid var(--blue);
  border-radius: 1px;
  padding-bottom: 1px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(58, 159, 224, .25);
}
.fact-link:hover,
.fact-link:focus-visible {
  color: var(--blue);
  background: rgba(58, 159, 224, .12);
}

.ico { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: center / 70% no-repeat; }
.ico.person { background-color: #d6ebff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e88e5'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.5-4 14.5-4 16 0'/%3E%3C/svg%3E"); }
.ico.globe { background-color: #d9f5d6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2343a047' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M4 12h16M12 4c3 3 3 13 0 16M12 4c-3 3-3 13 0 16'/%3E%3C/svg%3E"); }
.ico.cake { background-color: #ffe7cc; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fb8c00'%3E%3Cpath d='M6 11h12v8H6z'/%3E%3Cpath d='M8 8c0-2 2-3 4-1 2-2 4-1 4 1v3H8z'/%3E%3C/svg%3E"); }
.ico.heart { background-color: #ffd6de; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e53935'%3E%3Cpath d='M12 20C4 13 3 8 7 5c3-2 5 1 5 1s2-3 5-1c4 3 3 8-5 15z'/%3E%3C/svg%3E"); }
.ico.star { background-color: #eee0ff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238e24aa'%3E%3Cpath d='M12 2l2.4 7.2H22l-6 4.4 2.3 7.2L12 16.6 5.7 20.8 8 13.6 2 9.2h7.6z'/%3E%3C/svg%3E"); }

.bio {
  position: relative;
  background: var(--green);
  border: 3px solid var(--green-line);
  border-radius: 6px 18px 10px 14px;
  padding: 18px 66px 18px 22px;
  font-size: 16px;
  line-height: 1.75;
  box-shadow: 4px 5px 0 rgba(60, 90, 40, .12);
  transform: rotate(-.4deg);
}

.bio .monster { position: absolute; right: 4px; bottom: -8px; width: 72px; }

.tape {
  display: none;
  position: absolute; left: -8px; top: 18px;
  width: 18px; height: 46px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .15) 0 4px, rgba(255, 230, 120, .7) 4px 8px);
  border: 1px solid rgba(180, 140, 40, .35);
  transform: rotate(-8deg);
}

body.suited-on .name::after { border-bottom-color: var(--gold); }

/* --------------------------------------------------------------- fx */

.dock { display: none; }

.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }

.burst {
  position: absolute;
  font-size: 22px;
  animation: burst 1.1s ease-out forwards;
}

.spark {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #fff3c0;
  box-shadow: 0 0 10px 3px rgba(255, 200, 90, .85);
  animation: spark .8s ease-out forwards;
}

@keyframes burst {
  0%   { transform: translate(0, 0) scale(.4) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(40deg); opacity: 0; }
}

@keyframes spark {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; }
}

.toast {
  position: fixed;
  left: 50%; bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: #2b2418;
  color: #fff8e7;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  z-index: 30;
  transition: .25s ease;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ------------------------------------------------------------ mobile */

@media (max-width: 880px) {
  .page {
    display: flex;
    flex-direction: column;
    width: min(460px, calc(100% - 28px));
    min-height: auto;
    padding: 14px 0 104px;
    gap: 6px;
  }

  .figure { width: 88%; }
  .sky { inset: 10% -4% 12% -4%; }

  .doodle.sun, .doodle.planet, .doodle.cloud.b, .doodle.robot { display: none; }
  .doodle.ufo { display: block; }
  .doodle.cloud.a { width: 24%; top: 20%; right: -1%; }
  .doodle.trex { width: 26%; bottom: 2%; right: -1%; }
  .doodle.alien { width: 13%; top: 44%; right: -1%; }
  .doodle.star { width: 9%; top: 46%; left: 0; }
  .doodle.heart { width: 8%; top: 12%; left: 22%; }

  .sticky { left: auto; right: -1%; bottom: 1%; width: 80px; height: 80px; }
  .sticky .face { font-size: 23px; }
  .sticky .hint { font-size: 13px; }

  .arrow { display: none; }
  .name-block { display: flex; justify-content: center; margin: 6px 0 12px; }

  .name {
    font-size: 48px;
    -webkit-text-stroke: 2px #2a2214;
    background: linear-gradient(#ffe566, #f4d24a);
    padding: 4px 22px 8px;
    border-radius: 6px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, .08);
  }

  .name::after { bottom: 6px; height: 8px; border-bottom-width: 5px; }

  .facts { font-size: 16px; gap: 11px; padding: 0 6px; margin-bottom: 18px; }
  .fact-link { padding: 6px 0 2px; }
  .bio { padding: 16px 58px 16px 26px; font-size: 15px; }
  .tape { display: block; }
  .bio .monster { width: 60px; right: 2px; bottom: -6px; }

  .dock {
    display: flex;
    position: fixed;
    left: 50%; bottom: 16px;
    transform: translateX(-50%);
    z-index: 15;
    background: rgba(255, 248, 230, .93);
    border: 2px solid #2b2418;
    border-radius: 18px;
    padding: 6px 10px;
    gap: 6px;
    box-shadow: 0 8px 0 rgba(0, 0, 0, .12);
  }

  .dock button { width: 46px; height: 46px; display: grid; place-items: center; }
  .dock svg { width: 32px; height: 32px; }
  .toast { bottom: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .armor.fly .ap,
  .armor.off .ap,
  .burst, .spark { animation-duration: .01s; animation-delay: 0s !important; }

  .clothes, .shed .clothes { transition-duration: .01s; }
}

/* Keep keyboard navigation visible against the paper texture. */
button:focus-visible, a:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 5px; }
.sticky:disabled { cursor: wait; }
@media (max-width: 880px) {
  .stage { width: 100%; }
  .info { width: 100%; }
  .facts li { column-gap: 8px; }
  .fact-link { overflow-wrap: anywhere; }
}