/* Ink-led motion: entrance, foreground/background depth, then a quiet resting state. */
.motion-toggle{position:fixed;bottom:20px;right:20px;z-index:35;display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;border:1px solid #15171835;border-radius:5px;background:#f7f5f0ed;color:#151718;font-size:11px;box-shadow:0 2px 12px #1517180c;backdrop-filter:blur(8px)}
.motion-toggle[hidden]{display:none}
.motion-toggle>span:first-child{font-size:12px;font-weight:700;width:13px;text-align:center}
.motion-ready .hero-art{transform:translate3d(0,var(--hero-scroll,0px),0);will-change:transform}
.motion-ready .hero-art img{animation:none;transform:translate3d(var(--paint-x,0px),var(--paint-y,0px),0) scale(1.045)}
.motion-ready .hero-art.is-flowing img{animation:ink-drift 10s ease-in-out infinite}
.motion-ready .hero-art.ink-enter{animation:ink-open 1.65s cubic-bezier(.22,.75,.16,1) both}
.motion-ready .hero h1 span{animation:headline-step .85s cubic-bezier(.22,.85,.25,1) both}
.motion-ready .hero h1 span:nth-child(2){animation-delay:.12s}
.motion-ready .hero h1 span:nth-child(3){animation-delay:.25s}
.motion-ready .section h2{position:relative}
.motion-ready .section h2::after{content:"";display:block;width:clamp(52px,6vw,86px);height:5px;margin-top:22px;transform:scaleX(0);transform-origin:left;border-radius:8px;background:linear-gradient(90deg,#f45151,#ffd337,#20bde0);transition:transform .85s cubic-bezier(.22,.75,.16,1) .18s}
.motion-ready .section h2.is-visible::after{transform:scaleX(1)}
.motion-ready .js-motion .reveal{transition-delay:var(--reveal-delay,0ms)}
.js-motion.motion-ready .reveal{transition-delay:var(--reveal-delay,0ms)}
.motion-ready .about-columns article,.motion-ready .benefit-grid article,.motion-ready .member-grid article,.motion-ready .flow-list li{transition-duration:.8s}
.motion-ready .benefit-grid .after::after{transform:scaleX(0);transform-origin:left;transition:transform .8s ease .3s}
.motion-ready .benefit-grid .is-visible .after::after{transform:scaleX(1)}
.motion-ready .benefit-grid svg{transition:transform .3s}
.motion-ready .benefit-grid article:hover svg{transform:rotate(-7deg) translateY(-3px)}
.motion-ready .program{transition:opacity .7s,transform .7s,background .25s}
.motion-ready .program:hover{background:#ffffff45}
.motion-ready .program-title .number{transition:color .3s,transform .3s}
.motion-ready .program:hover .number{color:#d83145;transform:translateX(5px)}
.motion-ready .paint-corner,.motion-ready .dark-paint-corner{transform:translate3d(0,var(--section-shift,0px),0);transition:opacity .5s;will-change:transform}
.motion-ready .section.is-in-view .paint-corner{animation:corner-pulse 8s ease-in-out infinite}
.motion-ready .section.is-in-view .dark-paint-corner{animation:corner-pulse 9s ease-in-out infinite}
.motion-ready .c-stage .c-art{animation:none;transition:filter .55s,opacity .55s;will-change:transform;opacity:.82}
.motion-ready .guild.is-in-view .c-chain{animation:chain-gather 6.6s ease-in-out infinite}
.motion-ready .guild.is-in-view .c-challenge{animation:challenge-reach 6.6s ease-in-out infinite}
.motion-ready .guild.is-in-view .c-change{animation:change-flow 6.6s ease-in-out infinite}
.motion-ready .c-stage.is-current .c-art{opacity:1;filter:brightness(1.08)}
.motion-ready .c-stage h3{transition:color .5s,transform .5s}
.motion-ready .c-stage.is-current h3{color:#ffd337;transform:translateY(-3px)}
.motion-ready .guild.is-in-view .c-stage h3{animation:stage-label 6.6s ease infinite}
.motion-ready .guild.is-in-view .c-stage:nth-child(2) h3{animation-delay:-4.4s}
.motion-ready .guild.is-in-view .c-stage:nth-child(3) h3{animation-delay:-2.2s}
.motion-ready .c-stage::before{content:"";position:absolute;bottom:-10px;left:20%;width:60%;height:2px;background:linear-gradient(90deg,#f45151,#ffd337,#20bde0);transform:scaleX(0);transform-origin:left;transition:transform .55s}
.motion-ready .c-stage.is-current::before{transform:scaleX(1)}
.motion-ready .guild.is-in-view .c-stage::before{animation:stage-mark 6.6s ease infinite}
.motion-ready .guild.is-in-view .c-stage:nth-child(2)::before{animation-delay:-4.4s}
.motion-ready .guild.is-in-view .c-stage:nth-child(3)::before{animation-delay:-2.2s}
.motion-ready .contact.is-in-view .contact-paint{animation:contact-flow 10s ease-in-out infinite}
@keyframes ink-open{0%{clip-path:circle(0% at 82% 74%);opacity:0}15%{opacity:1}100%{clip-path:circle(145% at 82% 74%);opacity:1}}
@keyframes ink-drift{0%,100%{transform:translate3d(var(--paint-x,0px),var(--paint-y,0px),0) scale(1.045) rotate(0)}35%{transform:translate3d(calc(var(--paint-x,0px) - 12px),calc(var(--paint-y,0px) - 9px),0) scale(1.07) rotate(.65deg)}70%{transform:translate3d(calc(var(--paint-x,0px) + 10px),calc(var(--paint-y,0px) + 6px),0) scale(1.055) rotate(-.5deg)}}
@keyframes headline-step{from{opacity:0;transform:translateY(28px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:translateY(0);clip-path:inset(0)}}
@keyframes corner-pulse{0%,100%{scale:1;rotate:0deg}50%{scale:1.065;rotate:-1.4deg}}
@keyframes chain-gather{0%,100%{transform:translateY(0) scale(1)}15%{transform:translateY(-9px) scale(1.015)}30%,90%{transform:translateY(0) scale(1)}}
@keyframes challenge-reach{0%,28%,100%{transform:scale(1) rotate(0)}45%{transform:scale(1.085) rotate(-1.8deg)}60%,95%{transform:scale(1) rotate(0)}}
@keyframes change-flow{0%,58%,100%{transform:translateX(0) scale(1)}73%{transform:translateX(12px) scale(1.06) rotate(1deg)}88%{transform:translateX(-3px) scale(1.025) rotate(-.4deg)}}
@keyframes contact-flow{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(14px) rotate(1.3deg)}}
@keyframes stage-label{0%,28%{color:#ffd337}34%,95%{color:#f7f5f0}100%{color:#ffd337}}
@keyframes stage-mark{0%,28%{transform:scaleX(1)}34%,95%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
.motion-paused .hero-art,.motion-paused .paint-corner,.motion-paused .dark-paint-corner{transform:none!important}
.motion-paused .hero-art.ink-enter{clip-path:none;opacity:1;animation:none}
.motion-paused .hero h1 span{clip-path:none;opacity:1;transform:none;animation:none}
@media(max-width:800px){.motion-toggle{bottom:12px;right:12px;min-height:40px;font-size:10px}.motion-ready .hero-art{transform:none;will-change:auto}.motion-ready .hero-art.is-flowing img{animation:ink-drift 12s ease-in-out infinite}.motion-ready .section h2::after{height:4px;margin-top:18px}.motion-ready .c-stage.is-current h3{transform:none}.motion-ready .c-stage::before{bottom:-12px}.motion-ready .guild.is-in-view .c-art{animation-duration:9s}}
@media(prefers-reduced-motion:reduce){.motion-toggle{display:none}.motion-ready .hero-art,.motion-ready .hero-art img,.motion-ready .paint-corner,.motion-ready .dark-paint-corner,.motion-ready .c-art{animation:none!important;transform:none!important;clip-path:none!important;opacity:1!important;filter:none!important}.motion-ready .hero h1 span{animation:none;opacity:1;transform:none;clip-path:none}.motion-ready .section h2::after,.motion-ready .benefit-grid .after::after{transform:scaleX(1);transition:none}.motion-ready .c-stage.is-current h3{color:inherit;transform:none}}
@media(max-width:800px){.motion-toggle{top:23px;bottom:auto;right:78px;width:40px;height:40px;padding:8px;justify-content:center}.motion-toggle-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}

/* Supplied film plays once; retain its last frame instead of jumping back to white. */
.hero-art-video .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .3s}
.hero-art-video.is-video-ready .hero-video{opacity:1}
.motion-ready .hero-art-video img,.motion-ready .hero-art-video.is-flowing img{animation:none;transform:none}
.motion-ready .hero-art-video{transform:none;will-change:auto}
@media(prefers-reduced-motion:reduce){.hero-art-video .hero-video{display:none}}

/* Begin the copy just after the first paint movement, using playback as the cue. */
.motion-ready .hero-video-timed h1{animation:none}
.motion-ready .hero-video-timed h1 span{animation-delay:.18s}
.motion-ready .hero-video-timed h1 span:nth-child(2){animation-delay:.30s}
.motion-ready .hero-video-timed h1 span:nth-child(3){animation-delay:.43s}
.motion-ready .hero-video-timed .hero-description{animation-delay:.35s}
.motion-ready .hero-video-timed .hero-actions{animation-delay:.45s}
.motion-ready .hero-intro-wait h1 span,.motion-ready .hero-intro-wait .hero-description,.motion-ready .hero-intro-wait .hero-actions{animation-play-state:paused}

@media(max-width:800px){.motion-toggle{top:18px}}

/* Scroll story copy stays readable without a timed entrance. */
.motion-ready .hero-scroll-story h1,.motion-ready .hero-scroll-story h1 span,.hero-scroll-story .hero-actions{animation:none;opacity:1;transform:none;clip-path:none}

/* Focus settles by 90% of the scroll story, matching the approved proposal. */
/* ぼかしは動画に焼き込み済み。実行時のblur・拡大縮小は重いので使わない */
.hero-scroll-story .hero-art img,.hero-scroll-story .hero-art .hero-video{filter:none;transform:none;will-change:auto}
@media(prefers-reduced-motion:reduce){.hero-scroll-story .hero-art img,.hero-scroll-story .hero-art .hero-video{filter:none;transform:none;will-change:auto}}

/* ピントが合った最終形は、動画ではなく原寸の高画質静止画で見せる */
.hero-art-video .hero-final{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;mix-blend-mode:normal;opacity:0;transition:opacity .35s}
.hero-art-video.is-final .hero-final{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-art-video .hero-final{display:none}}