/* ===== Preloader: layout + word-related diagrams ===== */
#preloader{flex-direction:column}
.preloader-counter{position:absolute;top:30px;left:30px;z-index:3;display:flex;gap:14px;font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.16em;color:rgba(255,255,255,.45)}
.preloader-footer{position:absolute;bottom:26px;left:30px;right:30px;z-index:3;display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.16em;color:rgba(255,255,255,.4)}
.preloader-center-wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.6vh,16px)}
.preloader-brand-tag{font-family:'JetBrains Mono',monospace;font-size:.75rem;letter-spacing:.42em;color:rgba(255,255,255,.6)}
.preloader-word-track{display:flex;justify-content:center}
#preloader .preloader-word{font-size:clamp(3rem,min(11vw,15vh),7.5rem)}
.preloader-bar{width:220px;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.preloader-bar-fill{width:0;height:100%;background:#fff;transition:width .6s ease}

.pl-visual{width:min(540px,88vw);height:clamp(130px,31vh,250px)}
.pl-scene{display:none;width:100%;height:100%;overflow:visible}
#preloader[data-w="PLAN"] .pl-scene.plan,#preloader[data-w="BUILD"] .pl-scene.build,#preloader[data-w="SHIP"] .pl-scene.ship,#preloader[data-w="SCALE"] .pl-scene.scale{display:block}

.pl-draw{fill:color-mix(in srgb,var(--pc) 9%,transparent);stroke:var(--pc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:pldraw .65s ease forwards;animation-delay:var(--d,0s)}
.pl-t{fill:#e5e7eb;font:700 13px 'JetBrains Mono',monospace;text-anchor:middle;letter-spacing:.12em;opacity:0;animation:plfade .4s ease forwards;animation-delay:var(--d,0s)}
.pl-fade{opacity:0;animation:plfade .5s ease forwards;animation-delay:var(--d,0s)}
.pl-pop{opacity:0;transform-box:fill-box;transform-origin:center;animation:plpop .5s cubic-bezier(.2,1.5,.3,1) forwards;animation-delay:var(--d,0s)}
.pl-grow{transform-box:fill-box;transform-origin:50% 100%;scale:1 0;animation:plgrow .7s cubic-bezier(.2,.9,.3,1) forwards;animation-delay:var(--d,0s)}
.pl-gx{transform-box:fill-box;transform-origin:0 50%;scale:0 1;animation:plgx .45s ease-out forwards;animation-delay:var(--d,0s)}
.pl-drop{translate:0 -90px;opacity:0;animation:pldrop .6s cubic-bezier(.3,1.3,.4,1) forwards;animation-delay:var(--d,0s)}
.pl-rise{translate:0 90px;animation:plrise 1.1s cubic-bezier(.25,.8,.3,1) forwards}
.pl-flame{transform-box:fill-box;transform-origin:50% 0;animation:plflick .12s ease-in-out infinite alternate}
.pl-streak{opacity:0;stroke:#fff;stroke-width:2;stroke-linecap:round;animation:plstreak .55s linear infinite;animation-delay:var(--d,0s)}
.pl-blink{animation:plblink .7s steps(1) infinite 1.4s;opacity:0}
@keyframes pldraw{to{stroke-dashoffset:0}}
@keyframes plfade{to{opacity:1}}
@keyframes plpop{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@keyframes plgrow{to{scale:1 1}}
@keyframes plgx{to{scale:1 1}}
@keyframes pldrop{to{translate:0 0;opacity:1}}
@keyframes plrise{to{translate:0 -25px}}
@keyframes plflick{from{scale:1 .7}to{scale:1.2 1.15}}
@keyframes plstreak{0%{translate:0 -10px;opacity:0}25%{opacity:.8}100%{translate:0 90px;opacity:0}}
@keyframes plblink{0%{opacity:1}50%{opacity:0}}