/* Spoon motion: beginnings, steady growth, and continuity. */
.spoon-reveal { transition: opacity .8s ease, translate .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--reveal-delay, 0ms); }
.spoon-reveal.motion-pending { opacity: 0; translate: 0 22px; }
.spoon-reveal.motion-visible { opacity: 1; translate: 0 0; }
h1.spoon-reveal.motion-visible, .lead.spoon-reveal.motion-visible { animation: spoon-copy-in .85s cubic-bezier(.2,.7,.2,1) both; }
@keyframes spoon-copy-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
/* イラストの浮遊・傾きの演出は、意味を持たないため廃止した（2026-09-07）。 */
.spoon-letter { display: inline-block; white-space: pre; }
.motion-visible .spoon-letter { animation: spoon-letter-in .65s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--letter-order) * 35ms); }
@keyframes spoon-letter-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
main:has(.spoon-motion-controls) { position: relative; }
main:has(.spoon-motion-controls) > .hero { padding-top: 90px; }
.spoon-motion-controls { position: absolute; top: 5px; right: 0; z-index: 2; display: flex; justify-content: flex-end; padding: 4px 20px; }
.spoon-motion-control { font: inherit; font-size: .875rem; border: 1px solid var(--md-outline-variant); border-radius: var(--md-corner-full); padding: 8px 15px; min-height: 44px; background: var(--md-surface-container-lowest); color: var(--md-on-surface-variant); cursor: pointer; }
.spoon-motion-control:hover { background: var(--md-primary-container); }
body.home-impact main:has(.spoon-motion-controls) > .hero { padding-top: 0; }
body.home-impact .spoon-motion-controls { top: 50px; }
body.home-impact .spoon-motion-control { border-color: rgba(255,255,255,.38); background: rgba(5,47,71,.78); color: #fff; backdrop-filter: blur(8px); }
body.home-impact .spoon-motion-control:hover { background: rgba(5,47,71,.95); }
html.spoon-motion-paused .spoon-letter { animation: none; }
html.spoon-motion-paused h1.spoon-reveal, html.spoon-motion-paused .lead.spoon-reveal { animation: none; }
html.spoon-motion-paused .spoon-reveal { opacity: 1; translate: none; transition: none; }
@media(prefers-reduced-motion: reduce) { .spoon-letter, h1.spoon-reveal, .lead.spoon-reveal { animation: none !important; } .spoon-reveal { opacity: 1 !important; translate: none !important; transition: none !important; } }

/* An orbit suggests growth and the continuing relationship between generations. */
.spoon-art-shell { position: relative; isolation: isolate; overflow: visible; }
.spoon-art-image { display: block; width: 100%; height: auto; border-radius: inherit; position: relative; z-index: 1; }
.spoon-orbit { position: absolute; inset: -10%; pointer-events: none; z-index: -1; }
.spoon-orbit-ring { position: absolute; inset: calc(var(--orbit-index) * 5%); border: 1px solid color-mix(in srgb, var(--md-primary) 20%, transparent); border-radius: 50%; transform: rotate(-25deg); }
.spoon-orbit-ring:nth-child(2) { border-color: color-mix(in srgb, var(--md-tertiary) 25%, transparent); transform: rotate(28deg) scaleY(.75); }
.spoon-orbit-ring:nth-child(3) { border-style: dashed; opacity: .6; }
.spoon-orbit-ring::before { content: ''; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--md-primary); offset-path: ellipse(50% 50% at 50% 50%); offset-distance: 0%; animation: spoon-orbit 16s linear infinite; animation-delay: calc(var(--orbit-index) * -5s); box-shadow: 0 0 0 6px color-mix(in srgb, var(--md-primary) 9%, transparent); animation-play-state: paused; }
.spoon-orbit-ring:nth-child(2)::before { background: var(--md-tertiary-container); animation-direction: reverse; }
.motion-in-view .spoon-orbit-ring::before { animation-play-state: running; }
@keyframes spoon-orbit { to { offset-distance: 100%; } }
.route, .reason, .brief-phase, .om-chip { transition: translate .6s ease, opacity .6s ease, box-shadow .3s ease, border-color .3s ease; transition-delay: var(--reveal-delay,0ms); }
@media(hover:hover) and (pointer:fine) {
  html:not(.spoon-motion-paused) .route:hover, html:not(.spoon-motion-paused) .reason:hover, html:not(.spoon-motion-paused) .brief-phase:hover { translate: 0 -7px; box-shadow: var(--md-elev-soft-lg); }
  html:not(.spoon-motion-paused) .om-chip:hover { translate: 0 -4px; border-color: var(--md-primary); }
  html:not(.spoon-motion-paused) .btn:hover { translate: 0 -3px; }
  html:not(.spoon-motion-paused) .sec-head:hover .spoon-letter { animation: spoon-letter-hop .5s ease both; animation-delay: calc(var(--letter-order) * 30ms); }
}
@keyframes spoon-letter-hop { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-5px); } }
.btn { transition: translate .25s ease, box-shadow .25s ease, background-color .25s ease; }
.btn:active { scale: .98; }
.faq details[open] { border-color: var(--md-primary); }
html.spoon-motion-paused .spoon-orbit-ring::before, html.spoon-motion-hidden .spoon-orbit-ring::before { animation-play-state: paused; }
html.spoon-motion-paused .spoon-reveal { transition-delay: 0ms; }
@media(max-width:700px) { .spoon-orbit { inset: -5%; } .spoon-orbit-ring::before { width: 8px; height: 8px; } }
@media(max-width:700px) { body.home-impact .spoon-motion-controls { top: 46px; padding-right: 10px; } body.home-impact .spoon-motion-control { min-height: 38px; padding: 6px 11px; font-size: .75rem; } }
/* 極端に狭い画面では、はみ出した軌道がページ全体の横スクロールを生むため画像の内側に収める */
@media(max-width:480px) { .spoon-orbit { inset: 0; } }
@media(prefers-reduced-motion:reduce) { .spoon-orbit-ring::before, .sec-head:hover .spoon-letter { animation: none !important; } .route:hover, .reason:hover, .brief-phase:hover, .om-chip:hover, .btn:hover { translate: none !important; } .btn:active { scale: none; } }