/* B案: 宇宙の奥行き、研究との接続、読み進めるStage。 */
html[data-motion="full"] .hero-image{transform:translateY(var(--hero-drift,0px));height:calc(100% + 32px);top:-16px}
.hero-bottom{align-items:center;gap:16px;flex-wrap:wrap}
.experience-toggle{color:#d1ddd7;border:1px solid #899b9566;background:#06101599;font:11px/1.4 var(--body);padding:10px 14px;min-height:44px;letter-spacing:0}
.experience-toggle:hover{border-color:#d1ddd7}.experience-toggle[hidden]{display:none}
.hero-bottom>span:nth-child(2){margin-left:auto}
.pillars article{position:relative}
.pillars article::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;transform:scaleX(var(--connection,1));transform-origin:left;background:#82b99e;pointer-events:none}
.timeline>li{position:relative;transition:background-color .5s}
.timeline>li::after{content:"";position:absolute;top:-1px;left:0;width:100%;height:2px;background:#99c3b0;transform:scaleX(0);transform-origin:left;transition:transform .75s cubic-bezier(.2,.7,.2,1)}
.timeline>li.is-reading::after{transform:scaleX(1)}
.timeline>li.is-reading{background:#b2d2c405}
.timeline .phase-label,.timeline-year b{transition:color .45s}
.timeline>li.is-reading .phase-label,.timeline>li.is-reading .timeline-year b{color:#a9e7c5}
.roadmap::before{background-position:right bottom;background-size:150% auto;transition:opacity 1s}
.roadmap::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(90deg,#071014 8%,#07101455 80%),url("assets/space.png");background-repeat:no-repeat;background-size:cover,240% auto;background-position:center,right top;opacity:0;transition:opacity 1.1s}
.roadmap[data-reading="2"]::after{opacity:.07}
.roadmap[data-reading="3"]::after{opacity:.22}
.roadmap[data-reading="3"]::before{opacity:.035}
.paper-cta::before{opacity:calc(.08 + var(--paper-arrival,1)*.12)}
.button .ui-arrow,.text-link .ui-arrow{transition:transform .25s ease}
@media(hover:hover){.button:hover .ui-arrow,.text-link:hover .ui-arrow{transform:translate(2px,-2px)}}
.coin-figure .coin{animation-name:mission-coin;animation-duration:12s}
@keyframes mission-coin{0%,100%{transform:translateY(4px) rotateX(2deg) rotateY(-5deg) rotateZ(-2deg);filter:drop-shadow(0 18px 20px #0003) brightness(1)}50%{transform:translateY(-5px) rotateX(-2deg) rotateY(5deg) rotateZ(1deg);filter:drop-shadow(0 23px 24px #0004) brightness(1.05)}}
.rocket-chapter.is-current{animation:mission-chapter .45s ease-out both}
@keyframes mission-chapter{from{transform:translateY(7px)}to{transform:translateY(0)}}
@media(max-width:800px){
 .hero-bottom>span:nth-child(2){display:none}
 html[data-motion="full"] .hero-image{transform:none;height:100%;top:0}
 .roadmap::after{background-size:cover,auto 150%;background-position:center,right top}
}
@media(max-width:700px) and (min-height:621px){html.js .rocket-journey:not(.is-static){height:560svh}}
html[data-motion="reduced"] .hero-image,html[data-motion="reduced"] .coin-tilt{transform:none!important}
html[data-motion="reduced"] .coin-figure .coin,html[data-motion="reduced"] .rocket-chapter{animation:none!important}
html[data-motion="reduced"] .timeline>li::after{transform:none;opacity:.3;transition:none}
html[data-motion="reduced"] .roadmap::after{opacity:0;transition:none}
html[data-motion="reduced"] .button .ui-arrow,html[data-motion="reduced"] .text-link .ui-arrow{transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.hero-image,.coin-tilt{transform:none!important}.coin-figure .coin,.rocket-chapter{animation:none!important}.timeline>li::after{transform:none;opacity:.3;transition:none}.roadmap::after{display:none}.button .ui-arrow,.text-link .ui-arrow{transform:none!important;transition:none}}
@media print{.experience-toggle,.roadmap::after{display:none}.timeline>li::after{display:none}}