/* =====================================================================
   ロゴ：ふだんは灰色。ホバー／タップで英単語が飛び出して、その単語の動きをする。
   ===================================================================== */
:root{--logo-grey:#8C91A6;--logo-grey-ink:#F4F6FF;--logo-name:#4A4E63}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){--logo-grey:#5C6180;--logo-grey-ink:#EEF0FF;--logo-name:#C9CCDD}
}
:root[data-theme=dark]{--logo-grey:#5C6180;--logo-grey-ink:#EEF0FF;--logo-name:#C9CCDD}

.logo{position:relative;-webkit-tap-highlight-color:transparent}
.logo .logo-mark{background:var(--logo-grey);color:var(--logo-grey-ink);
  transition:background-color .25s,color .25s;transform-origin:50% 60%}
.logo .logo-name{color:var(--logo-name)}
.logo .logo-name rt{color:var(--logo-name);opacity:.8}

/* ---- ふきだし ---- */
.logo-pop{position:absolute;left:-4px;top:calc(100% + 12px);z-index:60;pointer-events:none;
  display:none;flex-direction:column;align-items:flex-start;gap:2px;
  padding:8px 16px 8px 14px;border:3px solid var(--line);border-radius:16px;
  background:var(--c,#FF8A3D);color:var(--t,#fff);box-shadow:4px 4px 0 var(--line);
  white-space:nowrap;transform-origin:20px -10px}
.logo-pop::before{content:"";position:absolute;left:14px;top:-11px;width:16px;height:16px;
  background:inherit;border-left:3px solid var(--line);border-top:3px solid var(--line);
  transform:rotate(45deg);border-radius:3px 0 0 0}
.logo-pop b{display:flex;font:800 1.7rem/1.1 var(--en);letter-spacing:var(--ld,.05em);position:relative}
.logo-pop i{display:inline-block;font-style:normal;transform-origin:50% 100%}
.logo-pop small{font:700 .8rem/1.3 var(--jp);color:inherit;opacity:.92;position:relative}
.logo-pop em{position:absolute;font-style:normal;pointer-events:none}

.lf-on .logo-pop{display:flex;animation:lf-pop-in .38s cubic-bezier(.3,1.6,.5,1) both}
.lf-out .logo-pop{animation:lf-pop-out .26s ease-in both}
.lf-on .logo-mark{background:var(--c);color:var(--t);border-color:var(--line)}
@keyframes lf-pop-in{from{opacity:0;transform:scale(.3) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes lf-pop-out{to{opacity:0;transform:scale(.6) translateY(-8px)}}

/* ---- 単語ごとの色（暖色を中心に、いろいろ） ---- */
.logo[data-fun=jump]  {--c:#FF8A3D;--t:#fff}
.logo[data-fun=spin]  {--c:#8C6CF2;--t:#fff}
.logo[data-fun=shake] {--c:#FF5FA2;--t:#fff}
.logo[data-fun=grow]  {--c:#3CCB9B;--t:#1E2140}
.logo[data-fun=sleep] {--c:#3A4BC8;--t:#FFE58A}
.logo[data-fun=melt]  {--c:#FFD23F;--t:#1E2140}
.logo[data-fun=bounce]{--c:#FF5A5F;--t:#fff}
.logo[data-fun=fly]   {--c:#3BB2F0;--t:#fff}
.logo[data-fun=wave]  {--c:#14B8A6;--t:#fff}
.logo[data-fun=shine] {--c:#FFB020;--t:#3A1E00}

/* ---- jump：ぴょん ---- */
[data-fun=jump] .logo-mark{animation:lf-jump .9s cubic-bezier(.3,0,.4,1) 2}
[data-fun=jump] .logo-pop i{animation:lf-hop .5s ease-out calc(.15s + var(--i)*.07s) 3 both}
@keyframes lf-jump{0%,100%{transform:rotate(-4deg)}15%{transform:scale(1.15,.8)}45%{transform:translateY(-14px) scale(.92,1.12) rotate(-8deg)}
  75%{transform:scale(1.1,.88)}}
@keyframes lf-hop{0%,100%{transform:none}40%{transform:translateY(-12px)}70%{transform:translateY(1px) scaleY(.9)}}

/* ---- spin：くるくる ---- */
[data-fun=spin] .logo-mark{animation:lf-spin 1.1s cubic-bezier(.5,0,.3,1)}
[data-fun=spin] .logo-pop i{transform-origin:50% 55%;animation:lf-spin-l .8s cubic-bezier(.4,0,.3,1) calc(.2s + var(--i)*.09s) both}
@keyframes lf-spin{from{transform:rotate(-4deg)}to{transform:rotate(716deg)}}
@keyframes lf-spin-l{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ---- shake：ぶるぶる ---- */
[data-fun=shake] .logo-mark{animation:lf-shake .12s linear 8}
[data-fun=shake] .logo-pop b{animation:lf-shake-s .1s linear .2s 12}
@keyframes lf-shake{0%,100%{transform:translateX(0) rotate(-4deg)}25%{transform:translateX(-3px) rotate(-9deg)}75%{transform:translateX(3px) rotate(2deg)}}
@keyframes lf-shake-s{0%,100%{transform:none}25%{transform:translate(-2px,1px)}75%{transform:translate(2px,-1px)}}

/* ---- grow：むくむく大きく ---- */
[data-fun=grow] .logo-mark{animation:lf-grow 1.4s cubic-bezier(.3,1.5,.5,1)}
[data-fun=grow] .logo-pop i{animation:lf-grow-l .9s cubic-bezier(.3,1.6,.5,1) calc(.1s + var(--i)*.12s) both}
@keyframes lf-grow{0%{transform:rotate(-4deg)}40%,70%{transform:scale(1.45) rotate(4deg)}100%{transform:rotate(-4deg)}}
@keyframes lf-grow-l{0%{transform:scale(.35)}100%{transform:scale(1)}}
[data-fun=grow] .logo-pop i:nth-child(1){font-size:.6em}
[data-fun=grow] .logo-pop i:nth-child(2){font-size:.75em}
[data-fun=grow] .logo-pop i:nth-child(3){font-size:.9em}
[data-fun=grow] .logo-pop i:nth-child(4){font-size:1.12em}
[data-fun=grow] .logo-pop b{align-items:flex-end}

/* ---- sleep：すやすや（Zが浮かぶ） ---- */
[data-fun=sleep] .logo-mark{animation:lf-sleep 2s ease-in-out both}
[data-fun=sleep] .logo-pop i{animation:lf-breathe 1.6s ease-in-out calc(var(--i)*.05s) both}
[data-fun=sleep] .logo-pop em{right:-4px;top:2px;font:800 1rem var(--en);color:#FFE58A;
  animation:lf-zzz 1.5s ease-out calc(var(--i)*.35s) both}
[data-fun=sleep] .logo-pop em:nth-of-type(3){font-size:1.3rem}
@keyframes lf-sleep{0%{transform:rotate(-4deg)}25%,85%{transform:rotate(-22deg) translateY(3px) scaleY(.9)}100%{transform:rotate(-4deg)}}
@keyframes lf-breathe{0%,100%{transform:none;opacity:1}50%{transform:scaleY(.82);opacity:.6}}
@keyframes lf-zzz{0%{opacity:0;transform:translate(0,6px) scale(.5)}30%{opacity:1}100%{opacity:0;transform:translate(16px,-26px) scale(1.15) rotate(12deg)}}

/* ---- melt：とろ〜り ---- */
[data-fun=melt] .logo-mark{animation:lf-melt 1.8s ease-in-out both}
[data-fun=melt] .logo-pop i{animation:lf-melt-l 1.6s ease-in calc(var(--i)*.13s) both}
[data-fun=melt] .logo-pop em{left:46px;bottom:-14px;font-size:.9rem;animation:lf-drip 1s ease-in .7s both}
@keyframes lf-melt{0%{transform:rotate(-4deg)}45%,70%{transform:scale(1.15,.55) translateY(14px);border-radius:12px 12px 22px 22px}100%{transform:rotate(-4deg)}}
@keyframes lf-melt-l{0%,15%{transform:none}55%,80%{transform:translateY(5px) scale(1.18,.55) skewX(-6deg)}100%{transform:none}}
@keyframes lf-drip{0%{opacity:0;transform:translateY(-10px)}30%{opacity:1}100%{opacity:0;transform:translateY(22px)}}

/* ---- bounce：ぽんぽん ---- */
[data-fun=bounce] .logo-mark{animation:lf-bounce 1.3s cubic-bezier(.3,0,.3,1)}
[data-fun=bounce] .logo-pop b{animation:lf-bounce-w 1.2s ease-out .1s both}
@keyframes lf-bounce{0%,100%{transform:rotate(-4deg)}
  10%{transform:scale(1.2,.75)}25%{transform:translateY(-22px)}40%{transform:scale(1.15,.82)}
  55%{transform:translateY(-11px)}68%{transform:scale(1.08,.9)}80%{transform:translateY(-4px)}90%{transform:scale(1.03,.97)}}
@keyframes lf-bounce-w{0%{transform:translateY(-26px)}30%{transform:none}45%{transform:translateY(-12px)}60%{transform:none}72%{transform:translateY(-5px)}84%,100%{transform:none}}

/* ---- fly：そらをとぶ ---- */
[data-fun=fly] .logo-mark{animation:lf-fly 1.8s ease-in-out both}
[data-fun=fly] .logo-pop i{animation:lf-float 1.4s ease-in-out calc(var(--i)*.15s) both}
[data-fun=fly] .logo-pop em{top:-6px;font-size:1rem;color:#fff;opacity:0;animation:lf-cloud 1.8s linear calc(var(--i)*.5s) both}
[data-fun=fly] .logo-pop em:nth-of-type(2){top:auto;bottom:4px;font-size:.8rem}
@keyframes lf-fly{0%{transform:rotate(-4deg)}30%{transform:translate(6px,-18px) rotate(10deg)}
  55%{transform:translate(14px,-10px) rotate(-6deg)}80%{transform:translate(4px,-16px) rotate(6deg)}100%{transform:rotate(-4deg)}}
@keyframes lf-float{0%,100%{transform:none}50%{transform:translateY(-10px) rotate(-6deg)}}
@keyframes lf-cloud{0%{opacity:0;right:-10px}20%{opacity:.9}100%{opacity:0;right:90px}}

/* ---- wave：ゆらゆら ---- */
[data-fun=wave] .logo-mark{animation:lf-wave-m .5s ease-in-out 3 alternate}
[data-fun=wave] .logo-pop i{animation:lf-wave .9s ease-in-out calc(var(--i)*.1s) 2 both}
@keyframes lf-wave-m{from{transform:rotate(-14deg)}to{transform:rotate(12deg)}}
@keyframes lf-wave{0%,100%{transform:none}25%{transform:translateY(-7px) rotate(-8deg)}75%{transform:translateY(5px) rotate(8deg)}}

/* ---- shine：きらきら ---- */
[data-fun=shine] .logo-mark{animation:lf-shine 1.6s ease-in-out both}
[data-fun=shine] .logo-pop b{background:linear-gradient(100deg,#3A1E00 40%,#fff 50%,#3A1E00 60%) 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:lf-gloss 1.2s ease-in-out .25s both}
[data-fun=shine] .logo-pop em{color:#fff;font-size:1rem;animation:lf-twinkle .7s ease-in-out calc(var(--i)*.22s) 2 both}
[data-fun=shine] .logo-pop em:nth-of-type(1){left:-8px;top:-8px}
[data-fun=shine] .logo-pop em:nth-of-type(2){right:-6px;top:-10px;color:#FFF3B0}
[data-fun=shine] .logo-pop em:nth-of-type(3){right:-10px;bottom:-6px}
[data-fun=shine] .logo-pop em:nth-of-type(4){left:40%;bottom:-12px;color:#FFF3B0}
@keyframes lf-shine{0%,100%{transform:rotate(-4deg);box-shadow:3px 3px 0 var(--line)}
  50%{transform:rotate(-4deg) scale(1.08);box-shadow:3px 3px 0 var(--line),0 0 0 6px #FFE58A,0 0 22px 8px #FFB020}}
@keyframes lf-gloss{from{background-position:100% 0}to{background-position:0 0}}
@keyframes lf-twinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1.3) rotate(90deg)}}

/* スマホ */
@media (max-width:640px){
  .logo-pop{padding:6px 12px 6px 11px;border-width:2.5px;box-shadow:3px 3px 0 var(--line);top:calc(100% + 10px)}
  .logo-pop b{font-size:1.5rem}
}

/* 動きをへらす設定の人には、ふきだしだけ静かに出す */
@media (prefers-reduced-motion:reduce){
  .logo .logo-mark,.logo-pop i,.logo-pop b,.logo-pop em{animation:none!important}
  .logo-pop em{display:none}
  .lf-on .logo-pop{animation:lf-fade .2s both!important}
  .lf-out .logo-pop{animation:lf-fade .2s reverse both!important}
  @keyframes lf-fade{from{opacity:0}to{opacity:1}}
}