/* Matome motion: additive decoration, never a prerequisite for reading. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration:180ms; }
.mm-site-a { --mm-gold:#f4cc82; --mm-light:#c4a1ff; --mm-ink:#fff9f2; --mm-panel:#361327; --mm-accent:#b82364; }
.mm-site-b { --mm-gold:#ffbad8; --mm-light:#c4b5ff; --mm-ink:#76264e; --mm-panel:#fff8fc; --mm-accent:#b82364; }
.mm-hero { isolation:isolate; }
.mm-stage { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; contain:paint; }
.mm-stage::before,.mm-stage::after { content:""; position:absolute; pointer-events:none; }
.mm-stage::before { inset:-30% -15%; background:linear-gradient(115deg,transparent 35%,#ffdfad38 44%,#fff8e86b 48%,transparent 56%); transform:translateX(-65%) rotate(-8deg); animation:mm-sweep 4.6s cubic-bezier(.16,1,.3,1) both; }
.mm-stage::after { width:65%; height:85%; right:-10%; top:-20%; border-radius:50%; background:radial-gradient(ellipse,#c4a1ff44,transparent 68%); animation:mm-aura 4.8s ease-out both; }
.mm-site-b .mm-stage::before { background:linear-gradient(120deg,transparent 33%,#ffc7e359 44%,#ffffff9c 48%,transparent 55%); }
.mm-site-b .mm-stage::after { background:radial-gradient(ellipse,#ffe1f980,#ddd3ff38 40%,transparent 68%); }
.mm-site-a .tm-hero__inner,.mm-site-b .kono-hero-copy { position:relative; z-index:2; }
.mm-particle { position:absolute; left:var(--mm-x); top:var(--mm-y); width:var(--mm-size,10px); height:var(--mm-size,10px); background:var(--mm-gold); opacity:0; animation:mm-spark 4.5s var(--mm-delay,0s) cubic-bezier(.22,.61,.36,1) both; }
.mm-site-a .mm-particle { clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); }
.mm-site-b .mm-particle { border-radius:85% 0 85% 25%; background:linear-gradient(135deg,#fff4fc,#ef92bf); animation-name:mm-petal; }
.mm-site-b .mm-particle:nth-child(3n) { border-radius:0; background:#fff4bd; clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); animation-name:mm-spark; }
.mm-hero.mm-intro .tm-hero__photo,.mm-hero.mm-intro .kono-hero-art img { animation:mm-photo 4.8s cubic-bezier(.2,.65,.3,1) both; }
.mm-cursor { position:absolute; left:0; top:0; width:220px; height:220px; margin:-110px; border-radius:50%; background:radial-gradient(circle,#ffedbe40,transparent 65%); opacity:0; transition:opacity .3s; pointer-events:none; will-change:transform; }
.mm-site-b .mm-cursor { background:radial-gradient(circle,#ffbcdc44,transparent 65%); }
.mm-button { position:relative; overflow:hidden; }
.mm-button::after { content:""; pointer-events:none; position:absolute; inset:-90% -40%; background:linear-gradient(110deg,transparent 43%,#fff7 50%,transparent 57%); transform:translateX(-100%) rotate(-12deg); }
.mm-button:hover::after,.mm-button:focus-visible::after { animation:mm-button-shine .75s ease-out; }
.mm-button:focus-visible,.mm-dock a:focus-visible { outline:3px solid var(--mm-gold); outline-offset:4px; }
.mm-progress { display:none; position:fixed; z-index:49; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,var(--mm-gold),var(--mm-light),var(--mm-accent)); transform-origin:left center; pointer-events:none; }
@supports (animation-timeline:scroll()) {
 .mm-progress { display:block; animation:mm-progress linear both; animation-timeline:scroll(root block); }
 @media (min-width:769px) and (prefers-reduced-motion:no-preference) {
  .mm-stage { animation:mm-parallax linear both; animation-timeline:view(); animation-range:exit 0% exit 100%; }
 }
}
.mm-dock { position:fixed; z-index:44; bottom:calc(18px + env(safe-area-inset-bottom,0px)); left:50%; transform:translate(-50%,16px); opacity:0; visibility:hidden; pointer-events:none; transition:transform .3s,opacity .3s,visibility .3s; }
.mm-dock.mm-show,.mm-dock:focus-within { transform:translate(-50%,0); opacity:1; visibility:visible; pointer-events:auto; }
.mm-dock a { display:flex; align-items:center; justify-content:center; min-height:48px; padding:10px 25px; border:1px solid var(--mm-gold); border-radius:99px; background:var(--mm-panel); color:var(--mm-ink); font:700 14px/1.4 sans-serif; text-decoration:none; box-shadow:0 5px 18px #35142524; white-space:nowrap; }
.mm-dock a::after { content:""; width:7px; height:7px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); margin-left:14px; }
.mm-count { position:relative; display:inline-block; }
.mm-count-overlay { position:absolute; inset:0; background:var(--mm-panel); color:inherit; font:inherit; text-align:center; border-radius:4px; }
.mm-offscreen .mm-stage *,.mm-offscreen .mm-stage::before,.mm-offscreen .mm-stage::after,
.mm-away .mm-stage *,.mm-away .mm-stage::before,.mm-away .mm-stage::after { animation-play-state:paused; }
@media (hover:hover) and (pointer:fine) {
 .mm-card { transition:translate .28s,box-shadow .28s; }
 .mm-card:hover { translate:0 -5px; box-shadow:0 12px 26px #9e557525; }
}
@media(max-width:768px) {
 .mm-stage { max-height:340px; }
 .mm-site-b .mm-stage { max-height:260px; }
 .mm-stage::after { width:70%; }
 .mm-cursor { display:none; }
 .mm-dock { bottom:calc(72px + env(safe-area-inset-bottom,0px)); left:auto; right:12px; transform:translateY(12px); }
 .mm-dock.mm-show,.mm-dock:focus-within { transform:translateY(0); }
 .mm-dock a { min-height:44px; font-size:12px; padding:9px 15px; }
}
@media(prefers-reduced-motion:reduce) {
 .mm-stage,.mm-progress { display:none; }
 .mm-hero img,.mm-button::after { animation:none!important; }
 .mm-dock,.mm-card { transition:opacity .15s; }
 .mm-card:hover { translate:none; }
 ::view-transition-old(root),::view-transition-new(root) { animation-duration:100ms; }
}
@keyframes mm-sweep { 0%{transform:translateX(-65%) rotate(-8deg);opacity:0} 12%{opacity:.9} 75%,100%{transform:translateX(55%) rotate(-8deg);opacity:0} }
@keyframes mm-aura { 0%{transform:translate(-12%,15%) scale(.7);opacity:0} 30%{opacity:1} 100%{transform:translate(8%,-5%) scale(1.2);opacity:.2} }
@keyframes mm-photo { from{scale:1.035} to{scale:1} }
@keyframes mm-spark { 0%{transform:translate3d(-12px,50px,0) rotate(-25deg) scale(.2);opacity:0} 25%{opacity:.85} 65%{opacity:.55} 100%{transform:translate3d(18px,-60px,0) rotate(60deg) scale(.5);opacity:0} }
@keyframes mm-petal { 0%{transform:translate3d(-18px,-65px,0) rotate(-40deg);opacity:0} 18%{opacity:.8} 80%{opacity:.6} 100%{transform:translate3d(48px,110px,0) rotate(145deg);opacity:0} }
@keyframes mm-button-shine { to{transform:translateX(100%) rotate(-12deg)} }
@keyframes mm-progress { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes mm-parallax { from{translate:0 0} to{translate:0 65px} }
/* VISUAL-QA-20260923: controls occupy their own rows, including at 390px. */
body .mm-dock,body .mm-dock.mm-show,body .mm-dock:focus-within {
 position:static; width:fit-content; max-width:calc(100% - 32px); margin:16px auto;
 transform:none; opacity:1; visibility:visible; pointer-events:auto; transition:none;
}
body #go-to-top { position:static; width:fit-content; margin:16px auto; }
body.body .mm-dock a { color:var(--mm-ink); }
/* Reading progress stays in the outer 3px gutter, away from text lines. */
body .mm-progress { width:3px; height:100dvh; transform-origin:center top; animation-name:mm-progress-edge; }
@keyframes mm-progress-edge { from{transform:scaleY(0)} to{transform:scaleY(1)} }
/* HERO-CROP-20260924: protect the crown through the entire zoom.
   A pins the source top; B uses kono-hero-headroom-20260924.webp.
   Keep these selectors independent of motion.js (paused/reduced/no-JS too).
   Parallax affects only .mm-stage, never either image. */
#main .tm-hero__photo { object-position:50% 0%; transform-origin:50% 0%; }
#main .kono-hero-art img { object-position:50% 20%; transform-origin:50% 0%; }
/* The title still fades in; lateral entrance must not cross into the face. */
#main .tm-hero__title > span { translate:none!important; }
@media(min-width:1000px) {
 #main .tm-home .tm-hero__note,.tm-hero__seal { right:3%; }
}
@media(max-width:600px) {
 #main .tm-hero__photo { object-position:75% 0%; transform-origin:75% 0%; }
 .tm-hero__seal { top:160px; }
}
@media(max-width:680px) {
 #main .kono-hero-art img { object-position:20% 0%; transform-origin:20% 0%; }
}