/* 心を軽くする偉人の言葉 — motion v1 (RHS)
   Slow, gentle, never jumpy. Drop in after the page CSS.
   Needs: .rhs-mesh with 4 .rhs-glow children (fixed, behind content), inline character_anim.svg (.rhs-chara). */
:root{
  --m-ease: cubic-bezier(.45,0,.55,1);        /* ease-in-out, soft */
  --m-ease-out: cubic-bezier(.2,.7,.2,1);
  --m-wave-dur: 1.2s;   --m-wave-deg-a: -14deg; --m-wave-deg-b: 12deg; --m-wave-deg-c: -6deg;
  --m-star-scale: 1.15; --m-bob: -2px;
  --m-card-dur: 250ms;  --m-card-shift: 8px;
}
/* ---------- background mesh (transform-only drift, GPU friendly) ---------- */
/* Parent clips the oversized mesh so inset:-10% cannot create scrollbars. */
.rhs-mesh-parent{position:fixed;inset:0;overflow:clip;z-index:0;pointer-events:none}
.rhs-mesh{position:fixed;inset:-10%;min-height:100lvh;z-index:-1;background:#B00AFC;pointer-events:none}
.rhs-glow{position:absolute;display:block;will-change:transform;
  animation:var(--glow-anim) var(--glow-dur,24s) var(--m-ease) var(--glow-delay,0s) infinite alternate both}
/* size = 2×radius of the static CSS mesh, centred on the same point */
.rhs-glow--1{left:20%;  top:-50%; width:160%;height:100%;background:radial-gradient(closest-side,rgba(17,10,252,.9) 0%,rgba(17,10,252,.45) 50%,rgba(17,10,252,0) 100%);--glow-anim:rhs-drift-1;--glow-dur:26s}
.rhs-glow--2{left:-60%; top:48%;  width:120%;height:68%; background:radial-gradient(closest-side,rgba(212,10,192,.85) 0%,rgba(212,10,192,.425) 50%,rgba(212,10,192,0) 100%);--glow-anim:rhs-drift-2;--glow-dur:21s}
.rhs-glow--3{left:12%;  top:22%;  width:100%;height:60%; background:radial-gradient(closest-side,rgba(106,10,252,.7) 0%,rgba(106,10,252,.35) 50%,rgba(106,10,252,0) 100%);--glow-anim:rhs-drift-3;--glow-dur:18s}
.rhs-glow--4{left:25%;  top:55%;  width:150%;height:90%; background:radial-gradient(closest-side,rgba(138,10,252,.8) 0%,rgba(138,10,252,.4) 50%,rgba(138,10,252,0) 100%);--glow-anim:rhs-drift-4;--glow-dur:30s}
/* amplitudes in viewport units: glow1 ±6vw/±5vh, glow2 ±5/±4, glow3 ±8/±6, glow4 ±5/±5 (checked for white text ≥4.5:1) */
@keyframes rhs-drift-1{0%{transform:translate3d(0,0,0) scale(1)}35%{transform:translate3d(-6vw,5vh,0) scale(1.08)}70%{transform:translate3d(4vw,-3vh,0) scale(.95)}100%{transform:translate3d(-2vw,2vh,0) scale(1.02)}}
@keyframes rhs-drift-2{0%{transform:translate3d(0,0,0) scale(1)}40%{transform:translate3d(5vw,-4vh,0) scale(1.05)}75%{transform:translate3d(-3vw,3vh,0) scale(.95)}100%{transform:translate3d(2vw,-2vh,0) scale(1)}}
@keyframes rhs-drift-3{0%{transform:translate3d(0,0,0) scale(1)}30%{transform:translate3d(-8vw,-6vh,0) scale(1.08)}65%{transform:translate3d(7vw,4vh,0) scale(.94)}100%{transform:translate3d(-3vw,5vh,0) scale(1.03)}}
@keyframes rhs-drift-4{0%{transform:translate3d(0,0,0) scale(1)}45%{transform:translate3d(-5vw,-5vh,0) scale(1.06)}80%{transform:translate3d(3vw,4vh,0) scale(.96)}100%{transform:translate3d(-1vw,-2vh,0) scale(1)}}
/* ---------- character: star wand wave + twinkle + tiny bob ---------- */
.rhs-chara{overflow:visible}
.rhs-chara .rhs-chara__body,.rhs-chara .rhs-chara__wand,.rhs-chara .rhs-chara__star,.rhs-chara .rhs-chara__sparkle{transform-box:view-box}
.rhs-chara.is-waving .rhs-chara__body{animation:rhs-bob var(--m-wave-dur) var(--m-ease) both}
.rhs-chara.is-waving .rhs-chara__wand{animation:rhs-wave var(--m-wave-dur) var(--m-ease) both}
.rhs-chara.is-waving .rhs-chara__star{animation:rhs-twinkle var(--m-wave-dur) var(--m-ease) both}
.rhs-chara.is-waving .rhs-chara__sparkle--1{animation:rhs-sparkle var(--m-wave-dur) var(--m-ease) both}
.rhs-chara.is-waving .rhs-chara__sparkle--2{animation:rhs-sparkle var(--m-wave-dur) var(--m-ease) .2s both}
@keyframes rhs-wave{0%{transform:rotate(0)}22%{transform:rotate(var(--m-wave-deg-a))}52%{transform:rotate(var(--m-wave-deg-b))}80%{transform:rotate(var(--m-wave-deg-c))}100%{transform:rotate(0)}}
@keyframes rhs-twinkle{0%,100%{transform:scale(1)}30%{transform:scale(var(--m-star-scale))}55%{transform:scale(1)}80%{transform:scale(1.1)}}
@keyframes rhs-sparkle{0%{opacity:0;transform:scale(.5) rotate(0)}35%{opacity:1;transform:scale(1) rotate(20deg)}100%{opacity:0;transform:scale(.7) rotate(45deg)}}
@keyframes rhs-bob{0%,100%{transform:translateY(0)}40%{transform:translateY(var(--m-bob))}75%{transform:translateY(0)}}
/* ---------- new quote: soft fade + slide-up ---------- */
.is-entering{animation:rhs-in var(--m-card-dur) var(--m-ease-out) both}
.is-entering--late{animation-delay:120ms}
@keyframes rhs-in{from{opacity:0;transform:translateY(var(--m-card-shift))}to{opacity:1;transform:none}}
/* ---------- battery: pause when the tab is hidden ---------- */
.is-tab-hidden .rhs-glow,.is-tab-hidden .rhs-chara *{animation-play-state:paused!important}
/* ---------- reduced motion: static background, no wave; quotes only cross-fade ---------- */
@media (prefers-reduced-motion: reduce){
  .rhs-glow{animation:none!important}
  .rhs-chara.is-waving *{animation:none!important}
  .is-entering{animation:rhs-fade 200ms linear both}
  @keyframes rhs-fade{from{opacity:0}to{opacity:1}}
}