/* =================================================================
   wula.dev — 草原黃昏 / soft Chiikawa world
   palette: cream paper + sunny yellow + sky blue + peach + brown ink
================================================================= */
:root {
  --cream:   #fff6e3;
  --cream-2: #fdeecb;
  --yellow:  #ffd84d;
  --yellow-d:#f5b73d;
  --sky:     #bfeaf5;
  --sky-2:   #7fd3e8;
  --peach:   #ffc6c6;
  --pink:    #ffb3b3;
  --ink:     #5b4636;        /* warm brown, used everywhere instead of black */
  --ink-soft:#8a7460;
  --grass:   #a8d672;
  --grass-d: #7cb84a;
  --white:   #fffdf6;

  --shadow:  0 10px 0 rgba(91,70,54,.12), 0 18px 30px -12px rgba(91,70,54,.28);
  --shadow-sm: 0 4px 0 rgba(91,70,54,.12);
  --r-lg: 34px;
  --r-md: 24px;

  --font-display: "Baloo 2", "Zen Maru Gothic", system-ui, sans-serif;
  --font-body:    "Zen Maru Gothic", "Baloo 2", system-ui, sans-serif;
  --font-hand:    "Gaegu", "Baloo 2", cursive;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 50% 0%, #ffe9b0 0%, var(--cream) 42%, var(--cream-2) 100%);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  cursor: default;
}

/* ---------- decorative sky ---------- */
.sky { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.sun {
  position: absolute; top: -90px; left: 50%; transform: translateX(-50%);
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, #fff3c4 0%, rgba(255,224,128,.55) 45%, transparent 70%);
  animation: breathe 7s ease-in-out infinite;
}
.cloud {
  position: absolute; background: #fffaf0; border-radius: 100px;
  filter: drop-shadow(0 8px 0 rgba(91,70,54,.05));
  opacity: .9;
}
.cloud::before, .cloud::after {
  content: ""; position: absolute; background: #fffaf0; border-radius: 50%;
}
.cloud--1 { width: 130px; height: 42px; top: 12%; left: 8%;  animation: drift 32s linear infinite; }
.cloud--2 { width: 90px;  height: 32px; top: 22%; right: 12%; animation: drift 44s linear infinite reverse; }
.cloud--3 { width: 110px; height: 36px; top: 40%; left: 18%; animation: drift 38s linear infinite; opacity:.7;}
.cloud::before { width: 60%; height: 160%; top: -55%; left: 12%; }
.cloud::after  { width: 45%; height: 150%; top: -45%; right: 14%; }

@keyframes drift { from { transform: translateX(-15vw); } to { transform: translateX(115vw); } }
@keyframes breathe { 50% { transform: translateX(-50%) scale(1.06); opacity:.9; } }

/* paper grain */
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}

/* ---------- floaty background characters ---------- */
.floaties { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.floaty { position: absolute; width: 70px; opacity: .35; filter: saturate(.9); }
.floaty .svg-char { width: 100%; height: auto; }
.floaty--a { top: 30%;  left: 4%;  animation: bob 6s ease-in-out infinite; }
.floaty--b { top: 64%;  right: 5%; width: 84px; animation: bob 7.5s ease-in-out infinite .6s; }
.floaty--c { top: 82%;  left: 9%;  width: 60px; animation: bob 5.4s ease-in-out infinite .3s; }
@keyframes bob { 50% { transform: translateY(-22px) rotate(-4deg); } }

/* =================================================================
   layout shell
================================================================= */
main { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
section { padding: 90px 0; }

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1120px; margin: 0 auto; padding: 16px 24px;
  backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--yellow); border: 3px solid var(--ink);
  position: relative;
}
.brand__mark::before, .brand__mark::after {
  content: ""; position: absolute; top: -10px; width: 7px; height: 16px;
  background: var(--yellow); border: 3px solid var(--ink); border-radius: 6px;
}
.brand__mark::before { left: 4px; transform: rotate(-12deg); }
.brand__mark::after  { right: 4px; transform: rotate(12deg); }
.brand__text { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--ink); }
.brand__dot { color: var(--yellow-d); }

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  text-decoration: none; color: var(--ink); font-weight: 700;
  padding: 8px 14px; border-radius: 999px; transition: .2s;
}
.nav a:hover { background: #fff; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.nav__cta {
  background: var(--ink); color: var(--cream) !important;
  box-shadow: var(--shadow-sm);
}
.nav__cta:hover { background: var(--ink) !important; transform: translateY(-2px) rotate(-1deg); }

/* =================================================================
   characters base
================================================================= */
.char { display: inline-block; }
.svg-char { width: 100%; height: auto; display: block; overflow: visible; }

/* idle wobble */
.char-stage .svg-char { animation: idle 4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes idle { 50% { transform: translateY(-10px) rotate(-2deg); } }

/* ears flop on hover */
.svg-char .ear { transform-origin: 50% 80%; transition: transform .3s cubic-bezier(.5,1.6,.5,1); }
.card:hover .ear--l, .card:focus .ear--l { transform: rotate(-14deg); }
.card:hover .ear--r, .card:focus .ear--r { transform: rotate(14deg); }
.svg-char .arm { transform-origin: 50% 0; }
.card:hover .arm--r { animation: wave 0.6s ease-in-out 2; }
@keyframes wave { 50% { transform: rotate(-32deg); } }

/* blink */
.svg-char .blink { animation: blink 5s infinite; transform-origin: 50% 56%; }
@keyframes blink {
  0%,93%,100% { transform: scaleY(1); }
  95.5% { transform: scaleY(.1); }
}

/* hachi tail sway */
.svg-hachi .tail { transform-origin: 76px 90px; animation: tailsway 3.5s ease-in-out infinite; }
@keyframes tailsway { 50% { transform: rotate(-12deg); } }

/* =================================================================
   HERO
================================================================= */
.hero {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center;
  padding-top: 40px; padding-bottom: 40px; min-height: 78vh;
}
.hero__eyebrow {
  display: inline-block; font-family: var(--font-hand); font-size: 1.25rem;
  color: var(--yellow-d); background: #fff; padding: 4px 16px; border-radius: 999px;
  box-shadow: var(--shadow-sm); transform: rotate(-2deg);
}
.hero__title {
  font-family: var(--font-display); font-weight: 800; line-height: 1.05;
  font-size: clamp(2.8rem, 7vw, 5.2rem); margin: 18px 0; color: var(--ink);
}
.hero__title span { display: block; }
.hero__sub { font-size: .42em; font-weight: 700; color: var(--ink-soft); margin-top: 6px; }
.hero__sub em { font-style: normal; color: var(--yellow-d); }
.wave { display: inline-block; animation: jiggle 1.2s ease-in-out infinite; transform-origin: bottom; color: var(--yellow-d); }
@keyframes jiggle { 25%{transform:rotate(-8deg) scale(1.1)} 75%{transform:rotate(8deg) scale(1.1)} }

.hero__lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 38ch; }
.hero__actions { display: flex; gap: 14px; margin: 28px 0 22px; flex-wrap: wrap; }

.btn {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  text-decoration: none; padding: 14px 26px; border-radius: 999px;
  border: 3px solid var(--ink); transition: .18s ease; display: inline-flex; gap: 8px; align-items: center;
}
.btn--primary { background: var(--yellow); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--primary:hover { transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 9px 0 rgba(91,70,54,.18); }
.btn--ghost { background: var(--white); color: var(--ink); }
.btn--ghost:hover { transform: translateY(-3px) rotate(1.5deg); box-shadow: var(--shadow-sm); }

.hero__yells { display: flex; gap: 10px; flex-wrap: wrap; }
.yell {
  font-family: var(--font-hand); font-size: 1.05rem; color: var(--ink-soft);
  padding: 2px 14px; background: var(--sky); border-radius: 999px; transform: rotate(-2deg);
  cursor: default; transition: .2s;
}
.yell:nth-child(even) { background: var(--peach); transform: rotate(2deg); }
.yell:hover { transform: scale(1.18) rotate(0); }

/* hero character stage */
.hero__char { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.char-stage { position: relative; width: min(340px, 80%); }
.char--usagi .svg-char { width: 100%; }
.char__shadow {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 60%; height: 18px; background: rgba(91,70,54,.12); border-radius: 50%;
  filter: blur(2px); animation: shadowPulse 4s ease-in-out infinite;
}
@keyframes shadowPulse { 50% { transform: translateX(-50%) scale(.86); opacity:.7; } }
.poke {
  font-family: var(--font-hand); font-size: 1.1rem; cursor: pointer;
  background: var(--ink); color: var(--cream); border: none;
  padding: 8px 22px; border-radius: 999px; box-shadow: var(--shadow-sm);
  transition: .18s;
}
.poke:hover { transform: translateY(-2px) rotate(-2deg); }
.poke:active { transform: translateY(1px) scale(.96); }

/* shake animation applied via JS */
.char--shake .svg-char { animation: shake .5s ease; }
@keyframes shake {
  0%,100%{transform:rotate(0)} 20%{transform:rotate(-9deg) scale(1.05)}
  40%{transform:rotate(9deg)} 60%{transform:rotate(-6deg)} 80%{transform:rotate(4deg)}
}

/* ---------- grass strip divider ---------- */
.grass-strip {
  height: 46px; margin: 10px 0 0;
  background:
    radial-gradient(circle at 14px 0, var(--grass) 14px, transparent 15px) repeat-x;
  background-size: 28px 46px;
  position: relative; z-index: 1;
  filter: drop-shadow(0 3px 0 var(--grass-d));
}

/* =================================================================
   section heads
================================================================= */
.section-head { text-align: center; max-width: 620px; margin: 0 auto 50px; }
.kicker {
  font-family: var(--font-display); font-weight: 800; letter-spacing: .22em;
  font-size: .78rem; color: var(--yellow-d);
}
.section-head h2, .about h2, .sayhi h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 4.5vw, 2.9rem); color: var(--ink); margin: 6px 0 10px;
}
.section-head p { color: var(--ink-soft); }

/* =================================================================
   CAST cards
================================================================= */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card {
  background: var(--white); border: 3px solid var(--ink); border-radius: var(--r-lg);
  padding: 26px 22px 28px; box-shadow: var(--shadow); outline: none;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  position: relative; overflow: hidden;
}
.card::after { /* corner sticker */
  content: ""; position: absolute; top: -22px; right: -22px; width: 60px; height: 60px;
  border-radius: 50%; opacity: .35;
}
.card--usagi::after   { background: var(--yellow); }
.card--hachi::after   { background: var(--sky-2); }
.card--momonga::after { background: var(--pink); }
.card:hover, .card:focus { transform: translateY(-10px) rotate(-1deg); box-shadow: 0 18px 0 rgba(91,70,54,.1), 0 30px 40px -16px rgba(91,70,54,.35); }
.card--hachi:hover, .card--hachi:focus { transform: translateY(-10px) rotate(1deg); }

.card__art {
  height: 170px; display: grid; place-items: center; margin-bottom: 12px;
  background: radial-gradient(circle at 50% 70%, #fff6d8, transparent 70%);
  border-radius: var(--r-md);
}
.card--hachi .card__art   { background: radial-gradient(circle at 50% 70%, #d7f3fb, transparent 70%); }
.card--momonga .card__art { background: radial-gradient(circle at 50% 70%, #ffe3ea, transparent 70%); }
.card__art .svg-char { width: 120px; }

/* photo cards: frame the user's images into the rounded art box */
.card__art--photo { overflow: hidden; padding: 0; }
.card__art--photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.card:hover .card__art--photo img, .card:focus .card__art--photo img { transform: scale(1.06); }

.card h3 { font-family: var(--font-display); font-size: 1.4rem; }
.card__alias { display:block; font-family: var(--font-hand); font-size: .9rem; color: var(--ink-soft); font-weight: 400; }
.card p { font-size: .96rem; color: var(--ink-soft); margin: 10px 0 16px; }

.stats { list-style: none; display: grid; gap: 8px; }
.stats li { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; font-size: .8rem; }
.stats i {
  display: block; height: 10px; border-radius: 999px; background: var(--cream-2);
  position: relative; overflow: hidden;
}
.stats i::after {
  content: ""; position: absolute; inset: 0; width: var(--v);
  background: linear-gradient(90deg, var(--yellow), var(--yellow-d));
  border-radius: 999px; transform: scaleX(0); transform-origin: left; transition: transform .9s ease;
}
.card.in i::after { transform: scaleX(1); }
.card--hachi .stats i::after   { background: linear-gradient(90deg, var(--sky), var(--sky-2)); }
.card--momonga .stats i::after { background: linear-gradient(90deg, var(--peach), var(--pink)); }

/* =================================================================
   WORK notes (sticky-note board)
================================================================= */
.notes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 880px; margin: 0 auto; }
.note {
  display: block; text-decoration: none; color: var(--ink);
  background: #fffceb; border-radius: 8px; padding: 30px 26px 26px;
  box-shadow: var(--shadow); position: relative;
  border: 2px solid rgba(91,70,54,.12);
  transition: transform .2s ease, box-shadow .2s; outline: none;
}
.note--1 { transform: rotate(-1.6deg); background:#fffceb; }
.note--2 { transform: rotate(1.4deg);  background:#eafaff; }
.note--3 { transform: rotate(1deg);    background:#fff0f0; }
.note--4 { transform: rotate(-1.2deg); background:#f1fbe4; }
.note:hover, .note:focus { transform: rotate(0) translateY(-6px) scale(1.02); box-shadow: 0 16px 30px -10px rgba(91,70,54,.4); z-index: 2; }
.note__pin {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8e8e, #e25555);
  box-shadow: 0 3px 5px rgba(0,0,0,.25), inset -2px -2px 3px rgba(0,0,0,.2);
}
.note--2 .note__pin { background: radial-gradient(circle at 35% 30%, #8ed8ff, #4aa6e0); }
.note--3 .note__pin { background: radial-gradient(circle at 35% 30%, #ffd17a, #e0a13a); }
.note--4 .note__pin { background: radial-gradient(circle at 35% 30%, #b6e87a, #7cb84a); }
.note__tag { font-family: var(--font-display); font-weight: 800; font-size: .7rem; letter-spacing: .12em; color: var(--ink-soft); }
.note h3 { font-family: var(--font-display); font-size: 1.5rem; margin: 6px 0 8px; }
.note p { font-size: .98rem; color: var(--ink-soft); }
.note__go { display: inline-block; margin-top: 14px; font-weight: 700; color: var(--yellow-d); }

/* =================================================================
   ABOUT
================================================================= */
.about__panel {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: center;
  background: var(--white); border: 3px solid var(--ink); border-radius: var(--r-lg);
  padding: 46px; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.about__panel::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 120%, #d7f3fb, transparent 50%);
  opacity: .6; pointer-events: none;
}
.about__art { position: relative; height: 230px; }
.about__art .svg-char { position: absolute; }
.about__hachi { width: 150px; left: 6%; bottom: 0; z-index: 2; }
.about__momo  { width: 100px; right: 4%; top: 8%; transform: rotate(8deg); }
.about__copy h2 { margin-top: 4px; }
.about__copy p { color: var(--ink-soft); margin: 12px 0; }
.about__copy strong { color: var(--ink); }
.badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.badge {
  font-size: .9rem; background: var(--cream-2); border: 2px solid rgba(91,70,54,.15);
  padding: 6px 14px; border-radius: 999px; font-weight: 700;
}

/* =================================================================
   SAY HI
================================================================= */
.sayhi { text-align: center; }
.sayhi__inner {
  position: relative; background: linear-gradient(160deg, var(--yellow) 0%, var(--yellow-d) 100%);
  border: 3px solid var(--ink); border-radius: var(--r-lg); padding: 70px 30px 56px;
  box-shadow: var(--shadow); max-width: 760px; margin: 0 auto;
}
.sayhi__usagi {
  position: absolute; top: -78px; left: 50%; transform: translateX(-50%);
  width: 120px; animation: idle 4s ease-in-out infinite;
}
.sayhi h2 { color: var(--ink); }
.sayhi p { color: #7a5e2e; font-weight: 700; }
.sayhi__links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.bigbtn {
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; text-decoration: none;
  background: var(--ink); color: var(--cream); padding: 16px 30px; border-radius: 999px;
  box-shadow: var(--shadow-sm); transition: .18s;
}
.bigbtn:hover { transform: translateY(-3px) rotate(-1.5deg); }
.bigbtn--alt { background: var(--white); color: var(--ink); border: 3px solid var(--ink); }

/* =================================================================
   FOOTER
================================================================= */
.foot { text-align: center; padding: 50px 24px 60px; color: var(--ink-soft); position: relative; z-index: 1; }
.foot__momo { width: 60px; display: inline-block; margin-bottom: 6px; animation: bob 5s ease-in-out infinite; }
.foot p { font-size: .9rem; }
.foot__tiny { font-size: .78rem; opacity: .7; margin-top: 6px; }

/* =================================================================
   speech bubble (poke reaction)
================================================================= */
.bubble {
  position: fixed; z-index: 100; pointer-events: none;
  font-family: var(--font-hand); font-size: 1.5rem; font-weight: 700; color: var(--ink);
  background: #fff; padding: 8px 20px; border: 3px solid var(--ink); border-radius: 999px;
  box-shadow: var(--shadow-sm); opacity: 0; transform: scale(.5) translateY(10px);
  transition: opacity .15s, transform .25s cubic-bezier(.34,1.8,.6,1);
}
.bubble.show { opacity: 1; transform: scale(1) translateY(0); }

/* =================================================================
   scroll reveal
================================================================= */
.reveal { opacity: 0; transform: translateY(24px); animation: rise .7s cubic-bezier(.2,.7,.3,1) forwards; animation-delay: var(--d, 0s); }
@keyframes rise { to { opacity: 1; transform: none; } }
.card, .note, .about__panel, .sayhi__inner {
  opacity: 0; transform: translateY(30px);
}
.card.in, .note.in, .about__panel.in, .sayhi__inner.in {
  opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}

/* =================================================================
   responsive
================================================================= */
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; text-align: center; gap: 10px; padding-top: 20px; }
  .hero__copy { order: 2; }
  .hero__char { order: 1; }
  .hero__lede { margin-inline: auto; }
  .hero__actions, .hero__yells { justify-content: center; }
  .cards { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
  .notes { grid-template-columns: 1fr; max-width: 420px; }
  .about__panel { grid-template-columns: 1fr; padding: 34px 26px; text-align: center; }
  .about__art { height: 200px; max-width: 320px; margin: 0 auto; }
  .badges { justify-content: center; }
  .nav a:not(.nav__cta) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .card, .note, .about__panel, .sayhi__inner { opacity: 1 !important; transform: none !important; }
}