/* Playful movement, with content always available without JavaScript. */
.b .brand .koala-mark{width:59px;height:62px;flex-shrink:0;overflow:visible}
.koala-mark .logo-beads{animation:bead-slide 2.8s ease-in-out infinite}
.b .brand:hover .koala-mark{animation:koala-hello .6s ease-in-out}
.b .hero h1 .exclaim{animation:headline-pop .85s cubic-bezier(.2,.8,.3,1.2) both}
.b .hero h1 .last{animation:headline-pop .85s .12s cubic-bezier(.2,.8,.3,1.2) both}
.b .hero-visual{animation:photo-arrive 1s .15s cubic-bezier(.2,.8,.3,1.15) both}
.b .hero-visual:before{animation:blob-dance 9s ease-in-out infinite alternate}
.b .seal{animation:badge-bob 3.2s ease-in-out infinite}
.b .tag{animation:tag-sway 4.5s ease-in-out infinite;transform-origin:50% 0}
.b .hero-bottom{gap:20px;align-items:center}
.b .hero-bottom b{font-weight:700;font-size:13px;letter-spacing:.05em}
.b .hero-bottom b span{display:inline-block;margin-left:.7em}
.b .scroll-link:after{animation:scroll-hop 1.6s ease-in-out infinite}
.pop-reveal.is-visible{animation:section-pop .7s var(--pop-delay,0ms) cubic-bezier(.2,.8,.3,1.12) both}
.pop-reveal:not(.is-visible){opacity:0;translate:0 26px}
.b .ability-core>svg{animation:core-float 3.6s ease-in-out infinite}
.b .ability-lines path{animation:bead-path 10s linear infinite}
.b .ability-node strong{transition:scale .25s,background .25s;border-radius:8px 8px 0 0}
.b .ability-node:hover strong{scale:1.12;background:#f9d447}
.b .primary,.b .navcta,.certificate-card{transition:translate .25s cubic-bezier(.2,.8,.3,1.5),box-shadow .25s,background .25s}
.b .primary:hover,.b .navcta:hover{translate:0 -4px;transform:none;box-shadow:0 7px 0 #bfc5a8}
.b .primary:active,.b .navcta:active{translate:0 2px;box-shadow:0 1px 0 #bfc5a8}
@media(hover:hover){.certificate-card:hover{translate:0 -6px;box-shadow:0 8px 0 #213a3015}}
.closing-beads i{animation:bead-bounce 2.4s ease-in-out infinite;animation-delay:calc(var(--bead-index,0)*.15s)}
.closing-beads i:nth-child(2){--bead-index:1}.closing-beads i:nth-child(3){--bead-index:2}.closing-beads i:nth-child(4){--bead-index:3}.closing-beads i:nth-child(5){--bead-index:4}
.footer-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:10px}
.motion-toggle{border:1px solid #213a3055;background:transparent;color:var(--ink);border-radius:30px;padding:7px 13px;font-size:10px;cursor:pointer}
.motion-toggle[hidden]{display:none}
@keyframes headline-pop{from{opacity:0;translate:0 24px;scale:.94}65%{scale:1.025}to{opacity:1;translate:0 0;scale:1}}
@keyframes photo-arrive{from{opacity:0;translate:0 35px;scale:.92}to{opacity:1;translate:0 0;scale:1}}
@keyframes section-pop{from{opacity:0;translate:0 26px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@keyframes bead-slide{0%,35%,100%{translate:0 0}50%,75%{translate:0 3px}}
@keyframes koala-hello{0%,100%{rotate:0deg}25%{rotate:-9deg}70%{rotate:7deg}}
@keyframes badge-bob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -9px;rotate:5deg}}
@keyframes tag-sway{0%,100%{rotate:-2deg}50%{rotate:2deg}}
@keyframes blob-dance{0%{border-radius:49% 51% 44% 56% / 49% 42% 58% 51%;rotate:-3deg}100%{border-radius:40% 60% 53% 47% / 56% 51% 49% 44%;rotate:3deg}}
@keyframes scroll-hop{0%,70%,100%{translate:0 0}35%{translate:0 5px}}
@keyframes core-float{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes bead-path{to{stroke-dashoffset:-90}}
@keyframes bead-bounce{0%,60%,100%{translate:0 0}30%{translate:0 -13px}}
@media(max-width:760px){.b .brand .koala-mark{width:46px;height:49px}.b .hero-bottom b{font-size:11px;line-height:1.9}.b .hero-bottom b span{display:block;margin:0}.b .hero-bottom .scroll-link{font-size:8px;letter-spacing:.06em;gap:9px;flex-shrink:0}}
.b.motion-paused *,.b.motion-paused *:before,.b.motion-paused *:after{animation:none!important;transition:none!important}
.b.motion-paused .pop-reveal{opacity:1;translate:none;scale:none}
@media(prefers-reduced-motion:reduce){.b *,.b *:before,.b *:after{animation:none!important;transition:none!important}.b .pop-reveal{opacity:1;translate:none;scale:none}}
/* Keep rotating decorations inside the page edge at every animation frame. */
.b>.wrap{overflow-x:clip}

/* A red ink stamp lands once as the award enters the viewport. */
.b .award-mark{color:#ae3529;border:3px solid currentColor;outline:1px solid currentColor;outline-offset:6px;position:relative}
.b .award-mark.stamp-ready:not(.stamp-visible){opacity:0}
.b .award-mark.stamp-visible{animation:award-stamp .68s .28s cubic-bezier(.2,.7,.3,1) both}
@keyframes award-stamp{
  0%{opacity:0;transform:translateY(-32px) rotate(-18deg) scale(1.6);filter:blur(2px)}
  58%{opacity:1;transform:translateY(2px) rotate(-7deg) scale(.92);filter:blur(0)}
  78%{transform:translateY(-2px) rotate(-7deg) scale(1.035)}
  100%{opacity:1;transform:translateY(0) rotate(-7deg) scale(1);filter:blur(0)}
}

/* Small "九州一" stamps on the Kyushu award cards. */
.b .achievement-grid article{position:relative;padding-right:112px}
.b .mini-stamp{position:absolute;top:14px;right:18px;width:78px;height:78px;border-radius:50%;color:#ae3529;border:2px solid currentColor;outline:1px solid currentColor;outline-offset:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.25;transform:rotate(-9deg);background:#fffbee80}
.b .mini-stamp b{font-size:19px;font-weight:900;letter-spacing:-.02em}
.b .mini-stamp small{font-size:8px;font-weight:700;letter-spacing:.06em}
.b .mini-stamp.stamp-ready:not(.stamp-visible){opacity:0}
.b .mini-stamp.stamp-visible{animation:mini-stamp .55s var(--stamp-delay,.2s) cubic-bezier(.2,.7,.3,1) both}
@keyframes mini-stamp{
  0%{opacity:0;transform:translateY(-22px) rotate(-22deg) scale(1.7);filter:blur(2px)}
  60%{opacity:1;transform:translateY(1px) rotate(-9deg) scale(.9);filter:blur(0)}
  80%{transform:rotate(-9deg) scale(1.04)}
  100%{opacity:1;transform:rotate(-9deg) scale(1);filter:blur(0)}
}
/* No hover effects on things that cannot be clicked. */
.b .tag:hover{transform:rotate(12deg)}
@media(max-width:760px){.b .achievement-grid article{padding-right:96px}.b .mini-stamp{width:66px;height:66px;right:14px;top:12px}.b .mini-stamp b{font-size:16px}.b .mini-stamp small{font-size:7px}}
.b.motion-paused .stamp-ready{opacity:1}
@media(prefers-reduced-motion:reduce){.b .stamp-ready{opacity:1}}

/* Header button fits its text; hero text link shows bold + underline on hover. */
.b .navcta{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;width:auto;min-width:0;white-space:nowrap}
.b .hero-actions .secondary{border-bottom:1px solid transparent;transition:border-color .2s,font-weight .2s}
.b .hero-actions .secondary:hover,.b .hero-actions .secondary:focus-visible{font-weight:700;border-bottom-color:currentColor}