/* The five illustrated stages form one scroll-driven physical card deck. */
.process{position:fixed;inset:0;z-index:23;height:100svh;overflow:hidden;visibility:hidden;pointer-events:none;touch-action:none;background:var(--paper);color:var(--wine);isolation:isolate}
body[data-surface=process] .process{visibility:visible;pointer-events:auto}
body[data-surface=process] .stage,body[data-surface=process]>header,body[data-surface=process] .scene-scroll-cue{visibility:hidden;pointer-events:none}
.process-brand{position:absolute;left:6%;top:24px;width:190px;height:auto;z-index:10}
.process-back{position:absolute;top:14px;left:50%;transform:translateX(-50%);border:0;background:none;color:var(--wine);min-height:44px;font:14px StudioText,Arial,sans-serif;display:flex;align-items:center;gap:8px;z-index:10}
.process svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.process-back svg{width:22px;height:22px}
.process-ribbon{position:absolute;left:-35%;top:37%;width:170%;height:38%;z-index:0;pointer-events:none;transform:translateX(var(--ribbon-shift,0px))}
.process-ribbon svg{display:block;width:100%;height:100%;overflow:visible}
.process-ribbon .ribbon-band{fill:none;stroke:var(--wine);stroke-width:128;stroke-linecap:butt}
.process-ribbon text{fill:var(--paper);stroke:none;font:500 64px StudioDisplay,Georgia,serif;letter-spacing:-1.5px;white-space:pre}
.process-deck{position:absolute;inset:60px 0 112px;z-index:2;perspective:1400px}
.process-card{position:absolute;left:50%;top:50%;width:min(62vw,calc(82svh - 258px),500px);margin:0;overflow:hidden;border:1px solid #a88976;border-radius:30px;background:#fff8ee;box-shadow:0 24px 44px #32140b1a;transform:translate(-50%,-50%);transform-origin:50% 55%;will-change:transform,opacity}
.process-card-art{position:relative;aspect-ratio:1;overflow:hidden;background:#ecdfcd}
.process-card-art img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 220ms ease-out}
.process-card-art img.is-ready{opacity:1}
.process-card-art[data-loading=true]:before{content:'Загружаем сцену…';position:absolute;inset:0;display:grid;place-items:center;padding:24px;color:var(--wine);font:16px/1.4 StudioText,Arial,sans-serif;text-align:center}
.process-card-art[data-failed=true]:after{content:'Не удалось загрузить иллюстрацию';position:absolute;inset:0;display:grid;place-items:center;padding:24px;color:var(--wine);font:16px/1.4 StudioText,Arial,sans-serif;text-align:center}
.process-card figcaption{height:128px;padding:17px 24px 20px}
.process-card-step{display:block;font:12px/1 StudioText,Arial,sans-serif;font-variant-numeric:tabular-nums;color:var(--wine);margin:0 0 10px}
.process-card h3{font:500 32px/1.02 StudioDisplay,Georgia,serif;letter-spacing:-.025em;margin:0;color:var(--ink)}
.process-controls{position:absolute;bottom:24px;left:6%;right:6%;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.process-controls button{display:flex;align-items:center;gap:12px;min-height:44px;padding:4px 0;border:0;background:none;color:var(--wine);font:16px StudioText,Arial,sans-serif;cursor:pointer}
.process-controls button svg{width:28px;height:24px}
#process-next{justify-self:end}
.process-steps{display:flex;align-items:center;justify-content:center;gap:6px}
.process-steps button{position:relative;justify-content:center;min-width:44px;font-size:14px;font-variant-numeric:tabular-nums}
.process-steps button:after{content:'';position:absolute;bottom:4px;left:12px;right:12px;height:1px;background:#751b2c55}
.process-steps button[aria-current=step]:after{height:2px;background:var(--wine)}
.process-steps button[aria-current=step]{font-weight:600}
.process-hint{grid-column:1/-1;text-align:center;margin:0;font:12px/1.4 StudioText,Arial,sans-serif;color:var(--ink)}
.process button:focus-visible{outline:2px solid var(--wine);outline-offset:4px}
.process button:hover{text-decoration:underline;text-underline-offset:5px}
@media(max-width:700px){
 .process-brand{width:135px;top:20px;left:20px}.process-back{left:auto;right:20px;transform:none;top:13px;font-size:12px}
 .process-deck{inset:62px 0 134px}
 .process-card{width:min(78vw,calc(100svh - 330px));border-radius:22px}
 .process-card figcaption{height:106px;padding:13px 18px 16px}.process-card-step{font-size:11px;margin-bottom:8px}.process-card h3{font-size:28px}
 .process-ribbon{width:250%;left:-75%;top:32%;height:38%}.process-ribbon .ribbon-band{stroke-width:132}.process-ribbon text{font-size:62px}
 .process-controls{bottom:14px;left:20px;right:20px;grid-template-columns:1fr 1fr;gap:2px 12px}
 .process-steps{grid-column:1/-1;grid-row:1;justify-content:space-between;gap:0}
 #process-prev{grid-column:1;grid-row:2}#process-next{grid-column:2;grid-row:2}
 .process-hint{grid-row:3;font-size:11px}
}
@media(max-width:700px) and (max-height:680px){
 .process-deck{inset:54px 0 124px}.process-card{width:min(76vw,calc(100svh - 330px));border-radius:18px}
 .process-card figcaption{height:92px;padding:11px 16px 13px}.process-card h3{font-size:24px}.process-card-step{margin-bottom:6px}
 .process-brand{width:120px}.process-ribbon{top:29%}
 .process-controls{bottom:10px}.process-hint{font-size:10px}
}
@media(min-width:701px) and (max-height:520px){
 .process-brand{top:16px;width:142px}.process-back{top:8px}
 .process-deck{inset:43px 0 74px}.process-card{width:min(34vw,calc(100svh - 228px));border-radius:16px}
 .process-card figcaption{height:86px;padding:10px 14px 12px}.process-card-step{font-size:10px;margin-bottom:6px}.process-card h3{font-size:22px}
 .process-controls{bottom:10px;gap:0}.process-hint{font-size:10px}.process-ribbon{top:25%;height:45%}
}
@media(prefers-reduced-motion:reduce){.process-card-art img{transition:none}.process-card{will-change:auto}}