/* ============================================================================= Navigator Motion — Pure CSS scroll-driven animations (0 KB JS layer) ---------------------------------------------------------------------------- - Uses animation-timeline: view() for scroll-linked reveal effects. - All animations are gated by @supports + html.wn-motion-on body class, so old browsers / disabled state remain on the immediate-render path. - prefers-reduced-motion is honoured at the very top. - Target ranges: FV elements → display immediately (handled by JS for stagger) voices, cases, profile reveal → @supports (animation-timeline: view()) - Variables consumed (set by JS based on saved preset / multiplier): --wn-motion-dur .55s | .8s | 1.1s --wn-motion-ease cubic-bezier(.22,.61,.36,1) ========================================================================== */ :root { --wn-motion-dur: .65s; --wn-motion-ease: cubic-bezier(.22, .61, .36, 1); --wn-motion-rise: 28px; } /* Preset overrides — JS adds data-wn-motion-preset on */ html[data-wn-motion-preset="subtle"] { --wn-motion-dur: .55s; --wn-motion-rise: 18px; } html[data-wn-motion-preset="standard"] { --wn-motion-dur: .75s; --wn-motion-rise: 28px; } html[data-wn-motion-preset="showy"] { --wn-motion-dur: 1.0s; --wn-motion-rise: 40px; } /* Master kill-switch: respect reduced-motion or disabled state */ @media (prefers-reduced-motion: reduce) { html.wn-motion-on .wn-fx-reveal { animation: none !important; opacity: 1 !important; transform: none !important; } } /* --------------------------------------------------------------------------- Modern path: scroll-driven via animation-timeline: view() --------------------------------------------------------------------------- */ @supports (animation-timeline: view()) { html.wn-motion-on .wn-fx-reveal { animation: wnFxFadeUp linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; animation-duration: var(--wn-motion-dur); animation-timing-function: var(--wn-motion-ease); } /* お客様の声カード：stagger 風（CSS の :nth-child を活用） */ html.wn-motion-on .wn-voices__card.wn-fx-reveal { animation-delay: 0ms; } html.wn-motion-on .wn-voices__card:nth-child(2).wn-fx-reveal { animation-delay: 60ms; } html.wn-motion-on .wn-voices__card:nth-child(3).wn-fx-reveal { animation-delay: 120ms; } html.wn-motion-on .wn-voices__card:nth-child(4).wn-fx-reveal { animation-delay: 180ms; } /* 事例カード：軽い stagger */ html.wn-motion-on .wn-cases .wn-case.wn-fx-reveal { animation-delay: 0ms; } html.wn-motion-on .wn-cases .wn-case:nth-child(2).wn-fx-reveal { animation-delay: 50ms; } html.wn-motion-on .wn-cases .wn-case:nth-child(3).wn-fx-reveal { animation-delay: 100ms; } html.wn-motion-on .wn-cases .wn-case:nth-child(4).wn-fx-reveal { animation-delay: 150ms; } html.wn-motion-on .wn-cases .wn-case:nth-child(5).wn-fx-reveal { animation-delay: 200ms; } html.wn-motion-on .wn-cases .wn-case:nth-child(6).wn-fx-reveal { animation-delay: 250ms; } /* プロフィールセクション */ html.wn-motion-on .wn-profile.wn-fx-reveal { animation-name: wnFxFadeIn; animation-range: entry 0% cover 35%; } /* 数値カードは JS で count-up するので opacity だけ調整（fade-in） */ html.wn-motion-on .wn-track-record__stat.wn-fx-reveal { animation-name: wnFxFadeUp; animation-range: entry 0% cover 20%; } html.wn-motion-on .wn-track-record__stat:nth-child(2).wn-fx-reveal { animation-delay: 80ms; } html.wn-motion-on .wn-track-record__stat:nth-child(3).wn-fx-reveal { animation-delay: 160ms; } html.wn-motion-on .wn-track-record__stat:nth-child(4).wn-fx-reveal { animation-delay: 240ms; } } /* --------------------------------------------------------------------------- Legacy / no-support fallback: IntersectionObserver via JS toggles `.is-in-view` class. CSS provides the visual transition. --------------------------------------------------------------------------- */ html.wn-motion-on .wn-fx-reveal { opacity: 0; transform: translateY(var(--wn-motion-rise)); transition: opacity var(--wn-motion-dur) var(--wn-motion-ease), transform var(--wn-motion-dur) var(--wn-motion-ease); will-change: opacity, transform; } html.wn-motion-on .wn-fx-reveal.is-in-view { opacity: 1; transform: translateY(0); } /* In modern browsers we let @supports path drive opacity/transform via keyframes, so neutralise the legacy fallback transitions to avoid double-application. */ @supports (animation-timeline: view()) { html.wn-motion-on .wn-fx-reveal { opacity: 1; transform: none; transition: none; } } /* Keyframes shared by both paths (in case JS path applies via animation) */ @keyframes wnFxFadeUp { from { opacity: 0; transform: translateY(var(--wn-motion-rise)); } to { opacity: 1; transform: translateY(0); } } @keyframes wnFxFadeIn { from { opacity: 0; } to { opacity: 1; } } /* --------------------------------------------------------------------------- FV stagger: text-line entries (JS sets `.wn-fx-line` per ) --------------------------------------------------------------------------- */ html.wn-motion-on .wn-fx-line { opacity: 0; transform: translateY(.6em); transition: opacity .6s var(--wn-motion-ease), transform .6s var(--wn-motion-ease); } html.wn-motion-on .wn-fx-line.is-in { opacity: 1; transform: translateY(0); } /* --------------------------------------------------------------------------- Count-up: state container during animation (cursor / hint disabled) --------------------------------------------------------------------------- */ html.wn-motion-on .wn-track-record__stat-num.is-counting { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------------- View Transitions API: subtle crossfade for in-page TOC jumps --------------------------------------------------------------------------- */ @supports (view-transition-name: none) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; animation-timing-function: var(--wn-motion-ease); } }