/* PLAN MORE · strona "w przygotowaniu" · wartości z tokenów --pm-* */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--pm-bg-page);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pm-bg-page);color:var(--pm-text);font:400 var(--pm-fs-body)/var(--pm-lh-body) var(--pm-font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

.soon{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--pm-space-7);padding:var(--pm-space-8) var(--pm-margin);overflow:clip}

/* Scena: logo + rysunek konstrukcyjny w jednym układzie współrzędnych (viewBox -200 -150 2225 800) */
.stage{position:relative;width:min(100%,1000px);aspect-ratio:2225/800}
.logo{position:absolute;left:8.989%;top:18.75%;width:82.02%;height:74%;display:block;overflow:visible}
.drawing{position:absolute;inset:0;pointer-events:none}

/* prowadnice (szare) */
.l{position:absolute;background:var(--pm-gray-300)}
.h{left:0;width:100%;height:var(--pm-border-width);transform-origin:left center}
.v{top:0;height:100%;width:var(--pm-border-width);transform-origin:center top}
.h1{top:49.725%}
.h2{top:70.613%}
.v1{left:17.838%}
.v2{left:90.934%}

/* znaczniki pasowania w narożnikach prowadnic */
.x{position:absolute;width:11px;height:11px;transform:translate(-50%,-50%)}
.x::before,.x::after{content:"";position:absolute;background:var(--pm-gray-500)}
.x::before{left:0;top:5px;width:11px;height:1px}
.x::after{top:0;left:5px;height:11px;width:1px}
.x1{left:17.838%;top:49.725%}
.x2{left:90.934%;top:49.725%}
.x3{left:17.838%;top:70.613%}
.x4{left:90.934%;top:70.613%}

/* wymiary (kolor akcentu), linie 0,5 px na ekranach retina */
.soon{--hair:1px;--k:1.7}
@media (min-resolution:2dppx){.soon{--hair:.5px}}
/* wymiary (kolor akcentu): szerokość całego znaku i wysokość litery */
.d,.e,.k{position:absolute;background:var(--pm-accent)}
.dh{left:8.989%;top:11.25%;width:81.945%;height:var(--hair);transform-origin:left center}
.e{width:var(--hair)}
.e1{left:8.989%;top:8.75%;height:8.75%}
.e2{left:90.934%;top:8.75%;height:40%}
.dv{left:95.73%;top:49.725%;width:var(--hair);height:20.888%;transform-origin:center top}
.k{width:12px;height:var(--hair);transform:translate(-50%,-50%) rotate(-45deg)}
.k1{left:8.989%;top:11.25%}
.k2{left:90.934%;top:11.25%}
.k3{left:95.73%;top:49.725%}
.k4{left:95.73%;top:70.613%}
.lb{position:absolute;font:400 10px/1.4 var(--pm-font-sans);letter-spacing:.03em;font-variant-numeric:tabular-nums;color:var(--pm-accent);white-space:nowrap}
.lb-h{left:49.96%;top:calc(11.25% - 5px);transform:translate(-50%,-100%)}
.lb-v{left:calc(95.73% + 8px);top:60.17%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl}

/* logo: obrys w kolorze akcentu, potem wypełnienie czernią */
.logo path{fill:var(--pm-black);stroke:var(--pm-accent);stroke-width:var(--sw,4);stroke-linejoin:round;stroke-opacity:0;stroke-dasharray:1;stroke-dashoffset:0}
#os-gorna{--d:0ms}#os-dolna{--d:40ms}#przerwanie{--d:80ms}
#P0{--d:140ms}#L1{--d:210ms}#A2{--d:280ms}#N3{--d:350ms}#M4{--d:420ms}#O5{--d:490ms}#R6{--d:560ms}#E7{--d:630ms}

.copy{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--pm-space-3);max-width:var(--pm-measure)}
.copy h1{font-family:var(--pm-font-display);font-weight:400;font-style:normal;font-size:var(--pm-fs-h1);line-height:var(--pm-lh-h1);margin:0;text-wrap:balance}
.lead{margin:0;font-size:var(--pm-fs-lead);line-height:var(--pm-lh-lead);color:var(--pm-text-muted);text-wrap:balance}
.contact{margin:var(--pm-space-4) 0 0}
.contact a{color:var(--pm-text);text-decoration:none;text-underline-offset:3px;display:inline-block;padding:var(--pm-space-2) 0;min-height:var(--pm-control-h)}
.contact a:hover{text-decoration:underline;text-decoration-thickness:1px}

@media (min-width:1024px){.soon{gap:var(--pm-space-8)}}

/* Ruch: rysunek powstaje raz (około 3,5 s), bez pętli. Stan końcowy jest domyślny, więc przy wyłączonych animacjach widać gotowy rysunek. */
@keyframes draw-x{from{transform:scaleX(0)}}
@keyframes draw-y{from{transform:scaleY(0)}}
@keyframes appear{from{opacity:0}}
@keyframes o-draw{from{stroke-dashoffset:1;stroke-opacity:1}to{stroke-dashoffset:0;stroke-opacity:1}}
@keyframes o-out{from{stroke-opacity:1}}
@keyframes f-in{from{fill-opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .logo path{animation:
    o-draw calc(600ms * var(--k)) cubic-bezier(.3,.6,.2,1) calc(var(--d,0ms) * var(--k)) backwards,
    o-out calc(300ms * var(--k)) ease-out calc((var(--d,0ms) + 600ms) * var(--k)) backwards,
    f-in calc(350ms * var(--k)) ease-out calc((var(--d,0ms) + 600ms) * var(--k)) backwards}
  .h{animation:draw-x calc(700ms * var(--k)) cubic-bezier(.2,.6,.2,1) backwards}
  .h2{animation-delay:calc(80ms * var(--k))}
  .v{animation:draw-y calc(700ms * var(--k)) cubic-bezier(.2,.6,.2,1) calc(120ms * var(--k)) backwards}
  .v2{animation-delay:calc(200ms * var(--k))}
  .x{animation:appear calc(200ms * var(--k)) ease-out calc(600ms * var(--k)) backwards}
  .dh{animation:draw-x calc(600ms * var(--k)) cubic-bezier(.2,.6,.2,1) calc(1000ms * var(--k)) backwards}
  .e{animation:appear calc(150ms * var(--k)) ease-out calc(1000ms * var(--k)) backwards}
  .k1,.k2{animation:appear calc(150ms * var(--k)) ease-out calc(1500ms * var(--k)) backwards}
  .lb-h{animation:appear calc(200ms * var(--k)) ease-out calc(1550ms * var(--k)) backwards}
  .dv{animation:draw-y calc(500ms * var(--k)) cubic-bezier(.2,.6,.2,1) calc(1250ms * var(--k)) backwards}
  .k3,.k4{animation:appear calc(150ms * var(--k)) ease-out calc(1700ms * var(--k)) backwards}
  .lb-v{animation:appear calc(200ms * var(--k)) ease-out calc(1750ms * var(--k)) backwards}
  .copy>*{animation:appear calc(300ms * var(--k)) ease-out backwards}
  .copy h1{animation-delay:calc(1300ms * var(--k))}
  .lead{animation-delay:calc(1450ms * var(--k))}
  .contact{animation-delay:calc(1600ms * var(--k))}
}
@media (max-height:500px) and (orientation:landscape){.soon{gap:var(--pm-space-4);padding-block:var(--pm-space-4)}.stage{width:min(100%,460px)}.copy h1{font-size:clamp(1.25rem,5vh,1.75rem)}.contact{margin-top:0}}