/* ============================================================
   nw-top-loader — navrhweb.cz intro „diagnostický sken"
   Vanilla CSS · animuje jen transform/opacity · solid barvy
   Desktop (≥820px): širokoúhlá scéna, svislý sken-paprsek,
                     důkaz ve 3 sloupcích, opona od středu.
   Mobil  (<820px):  vertikální rytmus, ghost index beatu,
                     vodorovný paprsek, strips exit.
   ============================================================ */

#nw-top-loader{
  position:fixed;top:0;left:0;right:0;bottom:0;
  z-index:2147483000;
  font-family:"Space Grotesk",system-ui,sans-serif;
  color:#fff;
  overflow:hidden;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-user-select:none;user-select:none;
  -webkit-font-smoothing:antialiased;
}
#nw-top-loader.nw-exit{background:transparent !important;}
html.nw-lock,html.nw-lock body{overflow:hidden !important;}

/* ---------- opona (panely = pozadí) ---------- */
.nw-panels{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;}
.nw-p{position:absolute;display:block;background:#0a0e17;
  transition:transform .6s cubic-bezier(.76,0,.24,1);}
.nw-p::after{content:"";position:absolute;background:#00F0FF;opacity:0;
  transition:opacity .2s linear;}
.nw-exit .nw-p::after{opacity:1;}

/* ---------- scéna ---------- */
.nw-stage{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;
  pointer-events:none;transition:opacity .18s linear;}
.nw-exit .nw-stage{opacity:0;}
.nw-exit.nw-fast .nw-stage{transition-duration:.1s;}
.nw-exit.nw-fast .nw-p{transition-duration:.3s;transition-delay:0s !important;}

/* ---------- beaty ---------- */
.nw-beat{position:absolute;top:0;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;}
.nw-done{visibility:hidden;}

/* maskované řádky */
.nw-line{overflow:hidden;line-height:1.12;}
.nw-li{display:inline-block;transform:translateY(120%);
  transition:transform .65s cubic-bezier(.19,.8,.22,1);}
.nw-in .nw-li{transform:translateY(0);}
.nw-in .nw-line + .nw-line .nw-li{transition-delay:.12s;}
.nw-out .nw-li{transform:translateY(-125%);
  transition:transform .3s cubic-bezier(.6,0,.8,.3);transition-delay:0s !important;}

/* fade prvky */
.nw-fade{opacity:0;transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1);}
.nw-in .nw-fade{opacity:1;transform:translateY(0);transition-delay:.25s;}
.nw-in .nw-sub{transition-delay:.5s;}
.nw-out .nw-fade{opacity:0;transform:translateY(-12px);
  transition-duration:.25s;transition-delay:0s !important;}

/* ---------- wordmark (písmenková kaskáda) ---------- */
.nw-wm{font-weight:700;letter-spacing:-.03em;line-height:1.04;}
.nw-wm-a,.nw-wm-b{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.1;}
.nw-wl{display:inline-block;transform:translateY(135%);
  transition:transform .7s cubic-bezier(.19,.8,.22,1);}
.nw-in .nw-wl{transform:translateY(0);}
.nw-wm-a .nw-wl:nth-child(1){transition-delay:.04s;}
.nw-wm-a .nw-wl:nth-child(2){transition-delay:.07s;}
.nw-wm-a .nw-wl:nth-child(3){transition-delay:.10s;}
.nw-wm-a .nw-wl:nth-child(4){transition-delay:.13s;}
.nw-wm-a .nw-wl:nth-child(5){transition-delay:.16s;}
.nw-wm-a .nw-wl:nth-child(6){transition-delay:.19s;}
.nw-wm-a .nw-wl:nth-child(7){transition-delay:.22s;}
.nw-wm-a .nw-wl:nth-child(8){transition-delay:.25s;}
.nw-wm-b .nw-wl:nth-child(1){transition-delay:.30s;}
.nw-wm-b .nw-wl:nth-child(2){transition-delay:.33s;}
.nw-wm-b .nw-wl:nth-child(3){transition-delay:.36s;}
.nw-out .nw-wl{transform:translateY(-140%);
  transition:transform .3s cubic-bezier(.6,0,.8,.3);transition-delay:0s !important;}

/* ---------- typografie ---------- */
.nw-cy{color:#00F0FF;}
.nw-kick{font-size:13px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;}
.nw-sub{font-size:15px;color:rgba(255,255,255,.72);line-height:1.5;}
.nw-stmt .nw-li{font-weight:700;letter-spacing:-.02em;}

/* ---------- důkaz (3 weby) ---------- */
.nw-card{opacity:0;transform:translateY(26px);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1);
  border-top:1px solid rgba(255,255,255,.18);}
.nw-in .nw-card:nth-child(1){opacity:1;transform:translateY(0);transition-delay:.15s;}
.nw-in .nw-card:nth-child(2){opacity:1;transform:translateY(0);transition-delay:.29s;}
.nw-in .nw-card:nth-child(3){opacity:1;transform:translateY(0);transition-delay:.43s;}
.nw-out .nw-card{opacity:0;transform:translateY(-14px);
  transition-duration:.25s;transition-delay:0s !important;}
.nw-num{color:#00F0FF;font-size:12px;letter-spacing:.28em;font-weight:500;}
.nw-name{font-weight:700;letter-spacing:-.01em;}
.nw-tag{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62);}

/* ---------- sken-paprsek (signature) ---------- */
.nw-beam{position:absolute;background:#00F0FF;opacity:0;
  box-shadow:0 0 18px rgba(0,240,255,.85),0 0 46px rgba(0,240,255,.35);}
@keyframes nwSweepX{
  0%{transform:translateX(0);opacity:0}
  8%{opacity:1}
  90%{opacity:1}
  100%{transform:translateX(104vw);opacity:0}
}
@keyframes nwSweepY{
  0%{transform:translateY(0);opacity:0}
  8%{opacity:1}
  90%{opacity:1}
  100%{transform:translateY(104vh);opacity:0}
}
.nw-sweep{animation:nwSweepX .95s cubic-bezier(.7,.05,.3,.95);}

/* ---------- meta prvky ---------- */
.nw-rail{position:absolute;top:8vh;bottom:8vh;width:1px;background:rgba(255,255,255,.08);}
.nw-rl{left:5vw;}
.nw-rr{right:5vw;}
.nw-idx{display:none;}
.nw-skip{position:absolute;font-size:12px;font-weight:500;letter-spacing:.14em;
  color:rgba(255,255,255,.55);opacity:0;transition:opacity .4s linear;}
.nw-on .nw-skip{opacity:1;transition-delay:.9s;}
.nw-prog{position:absolute;}
.nw-prog i{position:absolute;top:0;left:0;right:0;bottom:0;display:block;background:#00F0FF;}

/* ---------- reduced-motion statická verze ---------- */
.nw-rmf{display:none;}
.nw-rm .nw-beat,.nw-rm .nw-beam,.nw-rm .nw-idx,
.nw-rm .nw-rail,.nw-rm .nw-prog{display:none;}
.nw-rm .nw-rmf{display:flex;position:absolute;top:0;left:0;right:0;bottom:0;
  flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:18px;padding:0 8vw;
  opacity:0;transition:opacity .4s linear;}
.nw-rm.nw-on .nw-rmf{opacity:1;}
.nw-rm-wm{font-size:clamp(44px,8vw,110px);font-weight:700;letter-spacing:-.03em;}
.nw-rm-s{font-size:clamp(20px,3vw,34px);font-weight:500;}
.nw-rm-p{font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.66);}
.nw-rm.nw-exit .nw-stage{opacity:0;transition:opacity .3s linear;}
.nw-rm.nw-exit .nw-p{transform:none !important;opacity:0;
  transition:opacity .3s linear;transition-delay:0s !important;}

@media (prefers-reduced-motion:reduce){
  .nw-beam{display:none;}
}

/* ============================================================
   DESKTOP ≥ 820 px — širokoúhlá scéna
   ============================================================ */
@media (min-width:820px){
  .nw-p{top:0;height:100%;width:calc(20% + 2px);}
  .nw-p:nth-child(1){left:0;}
  .nw-p:nth-child(2){left:20%;}
  .nw-p:nth-child(3){left:40%;}
  .nw-p:nth-child(4){left:60%;}
  .nw-p:nth-child(5){left:80%;}
  .nw-p::after{left:0;right:0;bottom:0;height:2px;}
  /* opona od středu ven */
  .nw-exit .nw-p{transform:translateY(-103%);}
  .nw-exit .nw-p:nth-child(3){transition-delay:0s;}
  .nw-exit .nw-p:nth-child(2),.nw-exit .nw-p:nth-child(4){transition-delay:.08s;}
  .nw-exit .nw-p:nth-child(1),.nw-exit .nw-p:nth-child(5){transition-delay:.16s;}

  .nw-beat{align-items:center;justify-content:center;text-align:center;padding:0 10vw;}
  .nw-wm{font-size:clamp(64px,9.5vw,150px);}
  .nw-b1 .nw-kick{margin-top:2rem;color:rgba(255,255,255,.72);}
  .nw-b2 .nw-kick{margin-bottom:2rem;}
  .nw-stmt .nw-li{font-size:clamp(44px,6vw,100px);}
  .nw-sub{margin-top:2rem;max-width:44em;}
  .nw-b3 .nw-kick{margin-bottom:3rem;}
  .nw-proof{display:flex;gap:3.4vw;}
  .nw-card{min-width:17vw;text-align:left;padding-top:14px;
    display:flex;flex-direction:column;gap:7px;}
  .nw-name{font-size:clamp(24px,2.6vw,40px);}
  .nw-b4 .nw-kick{margin-bottom:2rem;color:rgba(255,255,255,.72);}
  .nw-b4 .nw-li{font-size:clamp(40px,5.4vw,88px);}

  .nw-beam{top:0;bottom:0;left:-3px;width:3px;}
  .nw-skip{bottom:4.5vh;right:5vw;}
  .nw-prog{left:0;right:0;bottom:0;height:2px;}
  .nw-prog i{transform:scaleX(0);transform-origin:0 50%;}
  .nw-on .nw-prog i{transform:scaleX(1);transition:transform 4.9s linear;}
}

/* ============================================================
   MOBIL < 820 px — vertikální rytmus, jiná kompozice
   ============================================================ */
@media (max-width:819.98px){
  .nw-p{left:0;width:100%;height:calc(20% + 2px);}
  .nw-p:nth-child(1){top:0;}
  .nw-p:nth-child(2){top:20%;}
  .nw-p:nth-child(3){top:40%;}
  .nw-p:nth-child(4){top:60%;}
  .nw-p:nth-child(5){top:80%;}
  .nw-p:nth-child(odd)::after{top:0;bottom:0;right:0;width:2px;}
  .nw-p:nth-child(even)::after{top:0;bottom:0;left:0;width:2px;}
  /* strips exit: střídavě doleva / doprava, shora dolů */
  .nw-exit .nw-p:nth-child(odd){transform:translateX(-103%);}
  .nw-exit .nw-p:nth-child(even){transform:translateX(103%);}
  .nw-exit .nw-p:nth-child(1){transition-delay:0s;}
  .nw-exit .nw-p:nth-child(2){transition-delay:.05s;}
  .nw-exit .nw-p:nth-child(3){transition-delay:.1s;}
  .nw-exit .nw-p:nth-child(4){transition-delay:.15s;}
  .nw-exit .nw-p:nth-child(5){transition-delay:.2s;}

  .nw-beat{align-items:flex-start;justify-content:flex-end;
    text-align:left;padding:0 7vw 18vh;}
  .nw-wm{font-size:16vw;line-height:.98;}
  .nw-wm-b{display:block;}
  .nw-b1 .nw-kick{margin-top:1.4rem;color:rgba(255,255,255,.72);}
  .nw-b2 .nw-kick{margin-bottom:1.3rem;font-size:11px;}
  .nw-stmt .nw-li{font-size:11.5vw;}
  .nw-sub{margin-top:1.4rem;max-width:86vw;font-size:14px;}
  .nw-b3 .nw-kick{margin-bottom:1.8rem;}
  .nw-proof{display:flex;flex-direction:column;gap:16px;width:100%;}
  .nw-card{padding-top:12px;display:flex;align-items:baseline;gap:14px;width:100%;}
  .nw-name{font-size:8vw;}
  .nw-tag{margin-left:auto;font-size:11px;}
  .nw-b4 .nw-kick{margin-bottom:1.3rem;color:rgba(255,255,255,.72);}
  .nw-b4 .nw-li{font-size:9.5vw;}

  /* obří ghost index beatu — jen mobil */
  .nw-idx{display:block;position:absolute;top:5vh;left:7vw;
    font-size:26vw;font-weight:700;line-height:1;color:#101728;}
  .nw-idx span{display:block;font-size:12px;font-weight:500;
    letter-spacing:.3em;color:rgba(0,240,255,.75);margin-top:2vw;}

  .nw-beam{left:0;right:0;top:-3px;height:3px;width:auto;}
  .nw-sweep{animation-name:nwSweepY;}
  .nw-rail{display:none;}
  .nw-skip{bottom:3.5vh;left:7vw;}
  .nw-prog{left:0;top:0;bottom:0;width:2px;}
  .nw-prog i{transform:scaleY(0);transform-origin:50% 0;}
  .nw-on .nw-prog i{transform:scaleY(1);transition:transform 4.9s linear;}
}
