.build-transformation{border:1px solid #617b92;padding:0;width:min(1200px,96vw);height:min(760px,94dvh);max-width:none;max-height:none;background:#060e1b;color:white;overflow:hidden;border-radius:14px;box-shadow:0 0 80px #000}
.build-transformation::backdrop{background:#020710ed}
.build-cinema-scene{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 30% 45%,#60253399,transparent 55%),radial-gradient(ellipse at 70% 45%,#16446f99,transparent 55%)}
.build-cinema-grid{position:absolute;inset:0;opacity:.2;background-image:linear-gradient(#6ec5ff44 1px,transparent 1px),linear-gradient(90deg,#6ec5ff44 1px,transparent 1px);background-size:48px 48px;transform:perspective(700px) rotateX(22deg) scale(1.2)}
.build-cinema-sento,.build-cinema-suit,.build-armor{position:absolute;left:50%;bottom:5%;width:65%;height:88%;object-fit:contain;transform:translateX(-50%);transition:opacity .45s}
.build-cinema-sento{opacity:1}.build-cinema-suit,.build-armor{opacity:0}
.build-cinema-driver{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#080b12;opacity:0;transition:opacity .6s}
.build-pipe{position:absolute;top:8%;bottom:10%;width:32%;opacity:0;transition:opacity .6s;filter:drop-shadow(0 0 9px currentColor)}
.build-pipe.red{left:10%;color:#ff334c}.build-pipe.blue{right:10%;color:#2bbdff}
.build-pipe svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:4;stroke-linejoin:round}
.build-cinema-ring{position:absolute;width:38%;aspect-ratio:1;left:31%;top:22%;border:3px dashed #c3eaff;box-shadow:0 0 45px #65b8ff,inset 0 0 45px #ff476455;border-radius:50%;opacity:0;transform:rotate(var(--build-rotation))}
.build-armor.red{clip-path:polygon(0 0,100% 0,0 100%);transform:translateX(calc(-50% - var(--build-join)*55%))}
.build-armor.blue{clip-path:polygon(100% 0,100% 100%,0 100%);transform:translateX(calc(-50% + var(--build-join)*55%))}
.build-cinema-flash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse,#e4f8ffb0,transparent 65%);opacity:0}
.build-cinema-caption{position:absolute;left:5%;bottom:15%;display:flex;flex-direction:column;text-shadow:0 3px 10px #000;pointer-events:none;max-width:90%}
.build-cinema-caption small{letter-spacing:.3em;font:600 13px monospace;color:#a9dfff}
.build-cinema-caption strong{font-size:clamp(24px,5vw,62px);letter-spacing:.05em;line-height:1.3}
.build-cinema-mode{font-size:12px;color:#c2cbd5}
.build-cinema-controls{position:absolute;bottom:20px;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;gap:12px}
.build-cinema-controls button{background:#142639;color:white;border:1px solid #89b8d9;border-radius:6px;padding:10px 22px;font:inherit;cursor:pointer;min-height:44px}
.build-cinema-time{font:13px monospace;color:#c2d6e3}
.build-cinema-progress{position:absolute;bottom:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#ff344f,#32b9ff);transform:scaleX(var(--build-progress));transform-origin:left}
.build-transformation[data-phase=bottles] .build-cinema-driver,.build-transformation[data-phase=match] .build-cinema-driver,.build-transformation[data-phase=crank] .build-cinema-driver{opacity:1}
.build-transformation[data-phase=crank] .build-cinema-ring{opacity:.7}
.build-transformation[data-phase=frame] .build-pipe,.build-transformation[data-phase=assemble] .build-pipe{opacity:1}
.build-transformation[data-phase=assemble] .build-armor{opacity:1}
.build-transformation[data-phase=lock] .build-armor{opacity:1;transition:none}
.build-transformation[data-phase=lock] .build-pipe{opacity:1}
.build-transformation[data-phase=lock] .build-cinema-sento{opacity:0;transition:none}
.build-transformation[data-phase=ready] .build-cinema-driver{opacity:1}
.build-transformation[data-phase=reveal] .build-cinema-suit{transition:none}
.build-transformation[data-phase=assemble] .build-cinema-sento{opacity:.15}
.build-transformation[data-phase=reveal] .build-cinema-sento,.build-transformation[data-phase=finish] .build-cinema-sento{opacity:0}
.build-transformation[data-phase=reveal] .build-cinema-suit,.build-transformation[data-phase=finish] .build-cinema-suit{opacity:1}
.build-transformation[data-phase=reveal] .build-cinema-flash{animation:build-reveal-once .75s ease-out both}
@keyframes build-reveal-once{from{opacity:.8}to{opacity:0}}
@media(max-width:600px){.build-cinema-caption{bottom:19%}.build-cinema-sento,.build-cinema-suit,.build-armor{width:100%;height:80%;bottom:15%}.build-pipe{width:43%}.build-pipe.red{left:2%}.build-pipe.blue{right:2%}.build-cinema-driver{object-fit:contain}}
@media(prefers-reduced-motion:reduce){.build-transformation *{animation:none!important;transition:none!important}.build-cinema-ring{transform:none}.build-armor{transform:translateX(-50%)!important}.build-cinema-flash{display:none}}