/* One question, two scenes: option overload becomes a visible route. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.question-section{height:265svh;background:#101417;--q:0}
.question-stage{height:100svh;min-height:740px;padding-top:30px;isolation:isolate}
.question-stage>.section-eyebrow{z-index:10}
.scene-heading{position:absolute;top:11%;left:var(--page-pad);right:var(--page-pad);z-index:8;text-align:center;pointer-events:none}
.scene-heading p{font-size:clamp(34px,4.8vw,72px);line-height:1.4;font-weight:750;letter-spacing:-.05em}
.scene-heading span{display:inline-block}
.overload-heading{opacity:clamp(0,calc(1 - var(--q)*2.5),1);transform:translateY(calc(var(--q)*-20px));color:#eff3ee}
.clarity-heading{position:absolute;inset:0;opacity:clamp(0,calc((var(--q) - .38)*2.4),1);transform:translateY(calc((1 - var(--q))*18px))}
.clarity-heading span{color:var(--acid)}
.scene-visual{position:absolute;inset:25% 0 16%;pointer-events:none}
.overload-scene,.clarity-scene{position:absolute;inset:0}
.overload-scene{opacity:clamp(0,calc(1 - var(--q)*2.15),1);transform:scale(calc(1 + var(--q)*.12));will-change:opacity,transform}
.use-card-cloud{position:absolute;inset:0;isolation:isolate;mask-image:linear-gradient(transparent,#000 9%,#000 90%,transparent)}
.use-card{position:absolute;left:var(--cx);top:var(--cy);width:clamp(155px,15.5vw,235px);min-height:100px;padding:15px 19px 17px;background:#1a2229;border:1px solid #526270;border-radius:5px;box-shadow:0 12px 28px #0006;transform:translate(calc(-50% + var(--q)*var(--dx)),calc(-50% + var(--q)*var(--dy))) rotate(var(--tilt));text-align:left;line-height:1.5}
.use-card>span{font-size:12px;color:#9bacc2;display:block;margin-bottom:6px}
.use-card>strong{display:block;font-size:clamp(16px,1.45vw,22px);font-weight:600;color:#dfe8ed;letter-spacing:-.035em;white-space:nowrap}
.use-card>small{font-size:12px;display:block;margin-top:5px;color:#93a1aa;white-space:nowrap}
.use-card.card-1{background:#1c2847;border-color:#526596}
.use-card.card-2{background:#282d24;border-color:#61704a}
.use-card.card-3{background:#292536;border-color:#695a7c}
.overload-person{position:absolute;left:50%;top:52%;width:clamp(260px,31vw,420px);height:105%;max-height:450px;object-fit:contain;transform:translate(-50%,-50%);z-index:5;mask-image:radial-gradient(ellipse 48% 49% at center,#000 70%,transparent 100%)}
.clarity-scene{opacity:clamp(0,calc((var(--q) - .35)*2),1);transform:translateY(calc((1 - var(--q))*32px));will-change:opacity,transform}
.goal-journey{position:absolute;left:50%;top:52%;width:min(100%,1050px);height:130%;object-fit:contain;transform:translate(-50%,-50%);mask-image:linear-gradient(transparent,#000 2%,#000 98%,transparent);clip-path:inset(calc((1 - clamp(0,calc((var(--q) - .35)*1.8),1))*100%) 0 0 0)}
.destination-label{position:absolute;left:calc(50% - 270px);top:2%;padding:14px 20px;background:#d9ff5b;color:#172110;border-left:3px solid #f2ffc7;box-shadow:0 10px 30px #0004;opacity:clamp(0,calc((var(--q) - .63)*3.5),1);transform:translateY(calc((1 - var(--q))*12px));z-index:6}
.destination-label span,.origin-label span{font-size:12px;display:block;letter-spacing:.08em;margin-bottom:4px}
.destination-label strong{font-size:18px;line-height:1.6;font-weight:650;display:block}
.origin-label{position:absolute;left:auto;right:24%;bottom:0;background:#121b21e8;border-left:2px solid #6f8dff;padding:10px 16px;color:#e6eeeb;z-index:6;opacity:clamp(0,calc((var(--q) - .4)*3),1)}
.origin-label span{color:#a9bad0}.origin-label strong{font-size:15px;font-weight:550}
.scene-caption{position:absolute;left:24px;right:24px;bottom:5%;text-align:center;z-index:9;pointer-events:none}
.scene-caption p{font-size:17px;line-height:1.9;letter-spacing:.04em}
.overload-caption{opacity:clamp(0,calc(1 - var(--q)*2.2),1);color:#b8c4ca}
.clarity-caption{position:absolute;inset:0;opacity:clamp(0,calc((var(--q) - .48)*2.5),1);color:#edf3e8}
@media(min-width:1500px){.scene-visual{inset:24% 7% 16%}}
@media(max-width:760px){
 .question-section{height:255svh}
 .question-stage{min-height:700px;padding-top:25px}
 .scene-heading{top:12%;left:15px;right:15px}
 .scene-heading p{font-size:clamp(29px,7.7vw,46px);line-height:1.6}
 .scene-heading span{display:block}
 .scene-visual{inset:32% 0 19%}
 .use-card-cloud{inset:-8% -12%}
 .use-card{width:139px;min-height:88px;padding:11px 13px;box-shadow:0 8px 18px #0007}
 .use-card>strong{font-size:15px}.use-card>small{display:none}.use-card>span{font-size:12px;margin-bottom:5px}
 .use-card:nth-child(3n){z-index:1}.use-card:nth-child(4n){opacity:.75}
 .overload-person{width:230px;height:90%;max-height:340px;top:56%;mask-image:radial-gradient(ellipse 48% 49% at center,#000 74%,transparent 100%)}
 .goal-journey{width:100%;height:125%;top:51%;clip-path:inset(calc((1 - clamp(0,calc((var(--q) - .35)*1.8),1))*100%) 0 0 0)}
 .destination-label{left:6%;right:auto;top:-6%;padding:10px 13px;max-width:58%}
 .destination-label strong{font-size:15px}.destination-label span{font-size:12px}
 .origin-label{left:auto;right:6%;bottom:-2%;padding:8px 11px}.origin-label strong{font-size:14px}.origin-label span{font-size:12px}
 .scene-caption{bottom:5%;left:18px;right:18px}.scene-caption p{font-size:15px}
}
/* A quiet caption and a gently floating arrow invite the next scroll. */
.scene-caption{bottom:120px}
.scene-visual{bottom:calc(16% + 55px)}
.scene-scroll-cue{position:absolute;left:18px;right:18px;bottom:max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;z-index:10}
.scene-scroll-cue>span:first-child{color:#bdc9c8;font-size:12px;letter-spacing:.04em;line-height:1.6}
.scene-scroll-arrow{display:block;width:44px;height:32px;text-align:center;color:var(--acid);font:400 30px/1 Arial,Helvetica,sans-serif;animation:scene-arrow-float 2.4s ease-in-out infinite}
@keyframes scene-arrow-float{0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)}}
@media(max-width:760px){.scene-visual{bottom:calc(19% + 55px)}}
/* With motion reduced, both illustrated states remain readable in sequence. */
@media(prefers-reduced-motion:reduce){
 .question-section{height:auto;--q:1!important}
 .question-stage{height:auto;min-height:0;position:relative;padding-bottom:45px}
 .scene-heading{position:relative;inset:auto;margin-top:35px}
 .overload-heading{opacity:1;transform:none}.clarity-heading{display:none}
 .scene-visual{position:relative;inset:auto;margin:25px calc(-1 * var(--page-pad)) 0}
 .overload-scene,.clarity-scene{position:relative;inset:auto;height:500px;opacity:1;transform:none;will-change:auto}
 .use-card{transform:translate(-50%,-50%) rotate(var(--tilt))}
 .clarity-scene{margin-top:110px}.clarity-scene:before{content:'自分は、何をしたい？';position:absolute;top:-85px;left:15px;right:15px;text-align:center;color:var(--acid);font-size:30px;font-weight:700}
 .goal-journey{clip-path:none;height:110%}.destination-label,.origin-label{opacity:1;transform:none}
 .scene-caption{position:relative;inset:auto;margin-top:30px}.overload-caption{display:none}.clarity-caption{position:relative;opacity:1}
 .scene-scroll-cue{position:relative;inset:auto;margin:30px auto 0}
 .scene-scroll-arrow{animation:none;transform:none}
}
html:not(.js) .question-section{height:auto}
html:not(.js) .overload-scene{display:none}
@media print{.question-section{display:none}}