/* Task 4 TOP motion (tsugini.design style). Hero loop keyframes come unmodified from 素材/TOPページ/07_ヒーローアニメーション_V3 (linked separately). */
:root{--drop-duration:2.4s;--fade-duration:1.6s;--motion-ease:cubic-bezier(.22,.61,.36,1)}
/* 1. header (logo + menu) slowly lowers from above on load */
.motion-ready .site-header[data-motion=drop]{z-index:50}
.motion-ready [data-motion=drop]:not(.is-visible){opacity:0;transform:translateY(-100%)}
.motion-ready [data-motion=drop]{transition:opacity var(--drop-duration) cubic-bezier(.4,0,.25,1),transform var(--drop-duration) cubic-bezier(.4,0,.25,1)}
/* 2. soft fade-up on scroll: text, images, footer */
.motion-ready [data-motion=fade]:not(.is-visible){opacity:0;transform:translateY(24px)}
.motion-ready [data-motion=fade]{transition:opacity var(--fade-duration) var(--motion-ease) var(--rise-delay,0s),transform var(--fade-duration) var(--motion-ease) var(--rise-delay,0s)}
/* 3. typewriter: hero heading only */
.motion-ready [data-type]:not(.tw-ready){visibility:hidden}
.tw-c{opacity:0;transition:opacity .45s ease-out}.tw-c.on{opacity:1}
/* 4. hero loop paused only while off screen */
.hero-art.is-paused .hero-loop__motion{animation-play-state:paused}
/* 5. image link glow on hover / keyboard focus */
.image-link{position:relative;overflow:hidden}
.image-link::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 15%,rgba(255,255,255,.35) 38%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.35) 62%,transparent 85%);transform:translateX(-100%)}
@media(hover:hover){.image-link:hover::after{animation:image-glow .75s ease-out 1 both}.image-link:hover img{filter:brightness(1.07) saturate(1.05)}}
.image-link:focus-visible::after{animation:image-glow .75s ease-out 1 both}
.image-link:focus-visible img{filter:brightness(1.07) saturate(1.05)}
.image-link img{transition:filter .45s ease-out}
@keyframes image-glow{0%{opacity:0;transform:translateX(-100%)}25%{opacity:1}100%{opacity:0;transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.motion-ready [data-motion]:not(.is-visible){opacity:1;transform:none}.motion-ready [data-motion]{transition:none}.image-link::after{display:none}.image-link img{transition:none}.image-link:hover img,.image-link:focus-visible img{filter:brightness(1.07)}}
.service-grid>:nth-child(2),.work-grid>:nth-child(2){--rise-delay:.18s}.service-grid>:nth-child(3),.work-grid>:nth-child(3){--rise-delay:.36s}
li[data-motion]:nth-child(2),.process-grid>:nth-child(2){--rise-delay:.15s}li[data-motion]:nth-child(3),.process-grid>:nth-child(3){--rise-delay:.3s}
[data-loop].is-paused *{animation-play-state:paused!important}
/* About route: hold the one-time road/terrain drawing until the scene is first on screen */
.motion-ready .route-visual:not(.is-seen) *{animation-play-state:paused!important}