/* =====================================================================
   Klik Klussenbedrijf | motion layer (Pinky Creative Studio, 2026-09-28)
   Charakter: budowlano-remontowy. Walek malarski, poziomica, panele,
   gladz (spaan), tasma budowlana, miarka. Tylko transform/opacity/clip-path.
   Klasa .mo na <html> = motion wlaczony (brak prefers-reduced-motion).
   ===================================================================== */

/* ---------- 0. Bezpieczniki ---------- */
.mo:not(.mo-ready) .hero-content{visibility:hidden}
.mo .fade-in{opacity:1;transform:none;transition:none}
.mo-clip{overflow:hidden}
@supports (overflow:clip){.mo section:not(.hero),.mo .footer{overflow-x:clip}}
@supports (overflow:clip){.mo-clip{overflow:clip}}

/* ---------- 1. Poziomica: pasek postepu scrolla ---------- */
.mo-level{position:fixed;top:64px;left:0;right:0;height:3px;z-index:999;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.06))}
.mo-level-fill{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#8a6f26,var(--accent),#f0dc9a)}
.mo-level-vial{position:absolute;top:-5px;left:0;width:34px;height:13px;border-radius:7px;background:linear-gradient(180deg,rgba(214,236,120,.55),rgba(160,190,60,.45));border:1px solid rgba(255,255,255,.55);box-shadow:0 2px 10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.5);overflow:hidden}
.mo-level-vial::before,.mo-level-vial::after{content:'';position:absolute;top:1px;bottom:1px;width:1px;background:rgba(0,0,0,.45)}
.mo-level-vial::before{left:11px}.mo-level-vial::after{right:11px}
.mo-level-bubble{position:absolute;top:2px;left:50%;width:9px;height:7px;margin-left:-4.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,rgba(255,255,255,.75) 60%,rgba(255,255,255,.35))}
.nav.scrolled{background:rgba(10,10,10,.94);box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* ---------- 2. Hero ---------- */
.mo .hero-slide.active{animation:moKen 9s cubic-bezier(.2,.7,.2,1) both}
@keyframes moKen{from{transform:scale(1.14)}to{transform:scale(1)}}
.mo-dust{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.mo-spot{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s;background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(201,168,76,.13),transparent 60%)}
.hero:hover .mo-spot{opacity:1}
.mo-giant{position:absolute;left:0;right:0;bottom:6vh;z-index:1;pointer-events:none;overflow:hidden;line-height:.9;user-select:none}
.mo-giant-row{display:flex;width:max-content;white-space:nowrap;font-size:clamp(4rem,13vw,11rem);font-weight:900;letter-spacing:-.04em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(201,168,76,.16)}
.mo-giant-row span{padding-right:.35em}
.mo-giant-row--b{-webkit-text-stroke:1px rgba(255,255,255,.07)}
.mo .mo-giant-row{animation:moMarq 60s linear infinite}
.mo .mo-giant-row--b{animation-duration:75s;animation-direction:reverse}
@keyframes moMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mo-crop{position:absolute;width:22px;height:22px;z-index:2;pointer-events:none;border-color:rgba(201,168,76,.55);border-style:solid;border-width:0}
.mo-crop--tl{top:84px;left:20px;border-top-width:1.5px;border-left-width:1.5px}
.mo-crop--tr{top:84px;right:20px;border-top-width:1.5px;border-right-width:1.5px}
.mo-crop--bl{bottom:28px;left:20px;border-bottom-width:1.5px;border-left-width:1.5px}
.mo-crop--br{bottom:28px;right:20px;border-bottom-width:1.5px;border-right-width:1.5px}
.mo-ruler{position:absolute;left:0;right:0;bottom:0;height:16px;z-index:2;pointer-events:none;overflow:hidden;opacity:.5}
.mo-ruler-in{position:absolute;top:0;bottom:0;left:0;width:calc(100% + 400px);background:
  linear-gradient(90deg,rgba(201,168,76,.9) 1.5px,transparent 1.5px) 0 0/80px 16px repeat-x,
  linear-gradient(90deg,rgba(201,168,76,.6) 1px,transparent 1px) 40px 6px/80px 10px repeat-x,
  linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px) 0 11px/8px 5px repeat-x}
.mo-rot{display:flex;align-items:center;gap:14px;height:1.5em;margin-bottom:22px;font-size:clamp(.95rem,1.8vw,1.25rem);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.mo-rot-num{font-variant-numeric:tabular-nums;font-size:.72em;color:var(--text2);letter-spacing:.1em;min-width:2.2em}
.mo-rot-bar{width:44px;height:2px;background:var(--accent);transform-origin:0 50%}
.mo-rot-win{position:relative;display:inline-block;flex:1 1 auto;min-width:0;height:1.5em;overflow:hidden}
.mo-rot-word{position:absolute;left:0;top:0;line-height:1.5em;white-space:nowrap}

/* ---------- 3. Split text (maski) ---------- */
.mo-split .mo-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .14em;margin:0 -.05em -.14em;background:none!important;-webkit-text-fill-color:currentColor!important}
.mo-split .mo-wi{display:inline-block;background:none!important;-webkit-text-fill-color:currentColor!important}
.mo-split .mo-hl{background:none!important;-webkit-text-fill-color:currentColor!important}
.mo-split .mo-wi.mo-gold{background:linear-gradient(135deg,var(--accent),var(--accent2))!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
.mo-nb{white-space:nowrap}
.mo .sec-title,.mo .about-text h2{position:relative}
.mo-stroke{position:absolute;left:50%;bottom:-14px;width:150px;height:14px;margin-left:-75px;overflow:visible;pointer-events:none}
.about-text .mo-stroke{left:0;margin-left:0}
.mo-stroke path{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;opacity:.85}
.mo .sec-label{position:relative}

/* ---------- 4. Tasma budowlana (marquee) ---------- */
.mo-tape{position:relative;overflow:hidden;padding:26px 0;background:var(--dark)}
@supports (overflow:clip){.mo-tape{overflow:clip}}
.mo-tape-band{position:relative;width:110%;margin-left:-5%;transform:rotate(-2deg);background:#121212;border-top:1px solid rgba(201,168,76,.25);border-bottom:1px solid rgba(201,168,76,.25)}
.mo-tape-band::before,.mo-tape-band::after{content:'';display:block;height:9px;background:repeating-linear-gradient(-45deg,var(--accent) 0 14px,#0a0a0a 14px 28px)}
.mo-tape-track{display:flex;width:max-content;white-space:nowrap;padding:14px 0}
.mo-tape-set{display:flex;align-items:center}
.mo-tape-item{font-size:clamp(1.3rem,3.2vw,2.4rem);font-weight:900;letter-spacing:-.01em;text-transform:uppercase;line-height:1.1;padding:0 .5em;color:#fff}
.mo-tape-item:nth-child(4n+3){color:transparent;-webkit-text-stroke:1px var(--accent)}
.mo-tape-dot{width:12px;height:12px;flex:0 0 12px;background:var(--accent);transform:rotate(45deg)}

/* ---------- 5. Panele podlogowe (separator) ---------- */
.mo-floor{position:relative;max-width:1200px;margin:0 auto;padding:34px 32px;perspective:700px}
.mo-floor-row{display:flex;gap:3px;height:22px;margin-bottom:3px}
.mo-plank{position:relative;height:100%;border-radius:2px;background:
  linear-gradient(90deg,rgba(0,0,0,.25),transparent 6%,transparent 94%,rgba(0,0,0,.3)),
  repeating-linear-gradient(177deg,rgba(255,255,255,.07) 0 1px,transparent 1px 5px),
  linear-gradient(180deg,#c9a456,#9c7630);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 4px rgba(0,0,0,.4);transform-origin:50% 100%}
.mo-plank:nth-child(3n+2){background:
  linear-gradient(90deg,rgba(0,0,0,.25),transparent 6%,transparent 94%,rgba(0,0,0,.3)),
  repeating-linear-gradient(181deg,rgba(255,255,255,.06) 0 1px,transparent 1px 6px),
  linear-gradient(180deg,#b8913f,#8a6526)}
.mo-plank:nth-child(3n){background:
  linear-gradient(90deg,rgba(0,0,0,.25),transparent 6%,transparent 94%,rgba(0,0,0,.3)),
  repeating-linear-gradient(179deg,rgba(255,255,255,.08) 0 1px,transparent 1px 4px),
  linear-gradient(180deg,#d4b263,#a88236)}
.mo-floor-plint{height:9px;border-radius:2px;background:linear-gradient(180deg,#f3efe6,#cfc8b8);transform-origin:0 50%;box-shadow:0 -2px 0 rgba(0,0,0,.3) inset}
.mo-floor-tag{position:absolute;right:32px;top:10px;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text2);opacity:.6}

/* ---------- 6. Karty uslug: tilt + glare ---------- */
.mo .srv{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transition:transform .6s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s}
.mo .srv:hover{--lift:-6px}
.mo .srv.mo-tilting{transition:transform .12s linear,border-color .4s,box-shadow .4s}
.mo .srv::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(201,168,76,.16),transparent 45%);opacity:0;transition:opacity .4s}
.mo .srv:hover::before{opacity:1}
.mo .srv-num{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.mo .srv:hover .srv-num{transform:rotate(360deg) scale(1.1)}

/* ---------- 7. Walek malarski (wipe sekcji) ---------- */
.mo-wall-host{position:relative}
.mo-wall{position:absolute;inset:0;z-index:4;pointer-events:none;background:
  radial-gradient(circle at 20% 30%,rgba(255,255,255,.035) 0 1px,transparent 1.5px) 0 0/9px 9px,
  radial-gradient(circle at 70% 60%,rgba(0,0,0,.35) 0 1px,transparent 1.5px) 0 0/13px 13px,
  repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 40px,rgba(0,0,0,.05) 40px 90px),
  #1c1b18}
.mo-roller{position:absolute;left:0;right:0;top:0;height:0;z-index:5;pointer-events:none;visibility:hidden}
.mo-roller-cyl{position:absolute;left:clamp(12px,5vw,72px);right:clamp(40px,8vw,120px);top:-15px;height:30px;border-radius:15px;background:
  repeating-linear-gradient(180deg,rgba(0,0,0,.14) 0 2px,transparent 2px 5px),
  linear-gradient(180deg,#f2dc93,#C9A84C 45%,#7d6421);box-shadow:0 8px 22px rgba(0,0,0,.55),0 0 34px rgba(201,168,76,.35)}
.mo-roller-cyl::before,.mo-roller-cyl::after{content:'';position:absolute;top:3px;bottom:3px;width:6px;border-radius:3px;background:#3a3a3a}
.mo-roller-cyl::before{left:-4px}.mo-roller-cyl::after{right:-4px}
.mo-roller-frame{position:absolute;right:clamp(4px,4vw,60px);top:-6px;width:70px;height:170px;overflow:visible}
.mo-roller-edge{position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,transparent,rgba(201,168,76,.8),transparent)}

/* ---------- 8. Gladz / spaan (portfolio) ---------- */
.mo .portfolio-coming{position:relative;overflow:hidden}
.mo-plaster{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:
  radial-gradient(circle at 30% 40%,rgba(255,255,255,.07) 0 1.5px,transparent 2px) 0 0/11px 11px,
  radial-gradient(circle at 60% 70%,rgba(0,0,0,.35) 0 2px,transparent 2.5px) 0 0/17px 17px,
  radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.04),transparent 70%),
  #262420}
.mo-trowel{position:absolute;top:50%;left:0;z-index:4;width:120px;height:70px;margin:-35px 0 0 -60px;pointer-events:none;filter:drop-shadow(0 8px 14px rgba(0,0,0,.6))}

/* ---------- 9. Formularz: mikrointerakcje ---------- */
.mo .fg{position:relative}
.mo .fg textarea{display:block}
.form-btn{justify-content:center}
.mo .fg label{transition:color .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.mo .fg:focus-within label{color:var(--accent);transform:translateX(4px)}
.mo .fg::after{content:'';position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),#f0dc9a);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mo .fg:focus-within::after{transform:scaleX(1)}
.mo .fg.mo-ok::before{content:'';position:absolute;right:14px;bottom:15px;width:18px;height:18px;border-radius:50%;z-index:1;background:rgba(34,197,94,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat;animation:moPop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes moPop{from{transform:scale(0)}to{transform:scale(1)}}
.mo .fg.mo-shake{animation:moShake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes moShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
.mo #dropZone svg{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.mo #dropZone:hover svg{transform:translateY(-6px)}
.mo #dropZone:hover{border-color:var(--accent)!important}

/* ---------- 10. Przyciski: ripple, magnes ---------- */
.mo .btn,.mo .form-btn{position:relative;overflow:hidden}
.mo-ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.45);transform:scale(0);animation:moRipple .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes moRipple{to{transform:scale(1);opacity:0}}
.mo .nav-links a{position:relative}
.mo .nav-links>li>a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:100% 50%;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.mo .nav-links>li>a:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* ---------- 11. Stopka: gigant ---------- */
.mo-foot-giant{overflow:hidden;margin:0 0 32px;pointer-events:none;user-select:none}
.mo-foot-giant-in{white-space:nowrap;width:max-content;font-size:clamp(3rem,11vw,9.5rem);font-weight:900;letter-spacing:-.045em;line-height:.95;color:transparent;-webkit-text-stroke:1px rgba(201,168,76,.28)}
.mo-foot-giant-in b{color:rgba(201,168,76,.10);-webkit-text-stroke:0;font-weight:900}

/* ---------- 12. Farba: rozprysk po wyslaniu formularza ---------- */
.mo-drop{position:fixed;z-index:10000;width:12px;height:12px;border-radius:50% 50% 50% 0;background:var(--accent);pointer-events:none}

/* ---------- 13. Mobile ---------- */
@media(max-width:768px){
  .mo-crop{display:none}
  .mo-giant{bottom:10vh}
  .mo-floor{padding:24px 16px}
  .mo-floor-tag{right:16px;top:6px}
  .mo-rot{margin-bottom:16px;gap:10px}
  .mo-rot-bar{width:28px}
  .mo-roller-frame{width:54px;height:130px}
  .mo-trowel{width:90px;height:52px;margin:-26px 0 0 -45px}
}

/* ---------- 14. prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  .feat-icon,.feat-icon .ring,.stat-icon svg,.stat-num .star,.whatsapp-fab::before,.mo-giant-row{animation:none!important}
  .hero-slide{transition:none!important}
  .mo-dust,.mo-spot,.mo-roller,.mo-wall,.mo-plaster,.mo-trowel{display:none!important}
  .mo-level-vial{display:none}
}