/* joy.css — theme "kẹo pastel" + hiệu ứng vui cho Hidodo (dùng chung mọi trang). Đi cùng js/joy.js.
   Dùng: <link rel="stylesheet" href="css/joy.css"> TRƯỚC css của trang. Token :root dùng được ở mọi trang (var(--sun)...).
   Chỉ animate transform + opacity. Font Baloo 2 (SIL OFL 1.1) TỰ HOST, không gọi mạng ngoài. */
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:500 800;font-display:swap;src:url("../assets/fonts/baloo2-latin-vi.woff2") format("woff2")}
:root{
  --cream:#FFF8EC;--sun:#FFD84D;--peach:#FF9F7A;--pink:#FF8FB8;--mint:#7ED9B8;--sky:#7CC8FF;--grape:#B69CFF;
  --joy-ink:#3B2A20;--joy-ink-soft:#6B5444;
  --joy-radius:24px;--joy-shadow:0 8px 18px rgba(120,80,40,.16);
  --joy-font:"Baloo 2",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* nền chấm bi mềm: dán vào background của body/trang */
  --joy-bg:radial-gradient(circle at 12% 18%,rgba(255,159,122,.20) 0 14px,transparent 15px),
    radial-gradient(circle at 88% 12%,rgba(124,200,255,.22) 0 20px,transparent 21px),
    radial-gradient(circle at 78% 86%,rgba(255,143,184,.20) 0 16px,transparent 17px),
    radial-gradient(circle at 8% 80%,rgba(126,217,184,.22) 0 22px,transparent 23px),
    radial-gradient(rgba(255,216,77,.22) 3px,transparent 4px) 0 0/34px 34px,var(--cream);
}
.joy-bg{background:var(--joy-bg);background-attachment:fixed}
/* nút/thẻ "phồng": viền dưới đậm hơn, nhún khi bấm */
.joy-puffy{border-radius:var(--joy-radius);box-shadow:0 5px 0 rgba(120,80,40,.28),var(--joy-shadow);transition:transform .08s ease-out,box-shadow .08s ease-out}
.joy-puffy:active{transform:translateY(4px) scale(.98);box-shadow:0 1px 0 rgba(120,80,40,.28)}

/* ---- nhân vật ---- */
.joy-char{display:inline-block;line-height:0;transform-origin:50% 100%;animation:joy-breathe 3s ease-in-out infinite}
.joy-char svg{display:block;width:100%;height:100%;overflow:visible}
.joy-char .eyes{transform-origin:50% 40%;transform-box:fill-box}
.joy-char.joy-blink .eyes{animation:joy-blink 150ms linear 1}
.joy-char.joy-hop{animation:joy-hop 600ms cubic-bezier(.3,.7,.4,1) 1}
.joy-char.joy-pulse{animation:joy-pulse 400ms ease-out 1}
.joy-paused .joy-char{animation-play-state:paused}
.joy-host{width:52px;height:60px;flex:0 0 auto}
@keyframes joy-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes joy-blink{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.1)}}
@keyframes joy-hop{
  0%{transform:translateY(0) scale(1,1) rotate(0)}
  15%{transform:translateY(0) scale(1.08,.92) rotate(0)}
  45%{transform:translateY(-18px) scale(.95,1.08) rotate(-4deg)}
  70%{transform:translateY(0) scale(1.06,.94) rotate(3deg)}
  85%{transform:translateY(-4px) scale(.99,1.02) rotate(-1deg)}
  100%{transform:translateY(0) scale(1,1) rotate(0)}}
@keyframes joy-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* ---- hạt + vòng sáng (position:fixed, không chặn chạm) ---- */
.joy-p,.joy-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;will-change:transform,opacity}
.joy-p{width:var(--s,18px);height:var(--s,18px);margin:calc(var(--s,18px)/-2) 0 0 calc(var(--s,18px)/-2);animation:joy-burst var(--d,800ms) cubic-bezier(.2,.7,.3,1) forwards}
.joy-p svg{display:block;width:100%;height:100%}
.joy-p.dot{border-radius:50%}
.joy-ring{width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;border:7px solid var(--sun);animation:joy-ring 650ms ease-out forwards}
@keyframes joy-burst{
  0%{transform:translate(var(--x0),var(--y0)) scale(.3) rotate(0);opacity:0}
  12%{opacity:1}
  60%{opacity:1}
  100%{transform:translate(var(--x1),var(--y1)) scale(1.1) rotate(var(--r,0deg));opacity:0}}
@keyframes joy-ring{0%{transform:translate(var(--x0),var(--y0)) scale(.5);opacity:.9}55%{opacity:.7}100%{transform:translate(var(--x0),var(--y0)) scale(1.9);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .joy-char{animation:none!important}
  .joy-char.joy-pulse{animation:joy-pulse 400ms ease-out 1!important}
  .joy-p,.joy-ring{display:none!important}
}