/* Motion layer — SAMPLE (2026-09-25, owner request: "動く UX/UI" in the manner of
   recruit.tver.co.jp). Additive only: remove the <link> and <script> for motion.* and the
   site is exactly as before. Everything here is off for prefers-reduced-motion. */

/* A. opening: lines rise out of a mask, one after another */
.m-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.m-line>span{display:block;transform:translateY(105%);transition:transform 1.1s cubic-bezier(.19,1,.22,1);transition-delay:var(--d,0s)}
.m-ready .m-line>span{transform:none}
/* the line wrappers are spans; site.css colours every span in these headings (.page-top h1 span,
   .blog-surface h1 span), so the wrappers must keep the heading's own colour */
.page-top h1 .m-line,.page-top h1 .m-line>span{color:inherit}
.m-fade{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s cubic-bezier(.19,1,.22,1);transition-delay:var(--d,0s)}
.m-ready .m-fade{opacity:1;transform:none}
.m-draw{display:block;width:min(100%,11.5em);height:.5em;margin-top:.05em;overflow:visible}
.m-draw path{fill:none;stroke:#9bc8e5;stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.m-ready .m-draw path{animation:m-draw 1.4s cubic-bezier(.65,0,.35,1) 1.5s both}
@keyframes m-draw{0%{stroke-dashoffset:100;opacity:0}2%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
.hero-photo.m-zoom{animation:none;background-size:auto 100%,300% 100%}
.hero-photo.m-zoom:after{content:"";position:absolute;inset:0;background:inherit;background-size:inherit;background-position:inherit;transform-origin:30% 60%;animation:m-kenburns 18s ease-out both;z-index:0}

@keyframes m-kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}

/* C. scroll: headings rise by line, cards arrive in turn, photos open up */
.m-card{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform 1s cubic-bezier(.19,1,.22,1),background .45s,color .45s;transition-delay:var(--d,0s)}
.m-card.m-in{opacity:1;transform:none}
.m-card.m-in:hover{transform:translateY(-10px);transition-delay:0s}
.app-card.m-card.m-in:hover{transform:translateY(-8px)}
.article-card.m-card.m-in:hover{transform:none}
.page-top .m-draw path{stroke:var(--blue,#376cc7)}
.blog-surface .page-top .m-draw path{stroke:#9bc8e5}
.m-open{clip-path:inset(12% 8% 12% 8% round 28px);transition:clip-path 1.3s cubic-bezier(.19,1,.22,1)}
.m-open.m-in{clip-path:inset(0 0 0 0 round 0)}
[data-reveal].m-lines{opacity:1;transform:none}
.m-lines .m-line>span{transition-delay:calc(var(--d,0s) + .15s)}
.m-lines:not(.m-in) .m-line>span{transform:translateY(105%)}
.m-lines.m-in .m-line>span{transform:none}

@media (prefers-reduced-motion: reduce){
  .m-line>span,.m-fade,.m-card{transform:none!important;opacity:1!important;transition:none!important}
  .m-draw path{stroke-dashoffset:0!important;animation:none!important}
  .hero-photo.m-zoom:after{animation:none}
  .m-open{clip-path:none!important;transition:none!important}
}