/* NOLARO v6: ruch i wykonczenie (preloader, pojawianie sekcji, hero, hover, tlo) */

/* ---------- preloader ---------- */
.pre{position:fixed;inset:0;z-index:1000;background:#fff;display:flex;align-items:center;justify-content:center;transition:opacity .45s ease,visibility .45s}
.pre svg{width:56px;height:56px}
.pre svg path{stroke-dasharray:140;stroke-dashoffset:140;animation:preDraw 1.1s cubic-bezier(.4,0,.2,1) forwards}
.pre svg path.a{stroke-dasharray:24;stroke-dashoffset:24;animation-delay:.55s;animation-duration:.5s}
.pre.off{opacity:0;visibility:hidden}
@keyframes preDraw{to{stroke-dashoffset:0}}

/* ---------- pojawianie sie (reveal) ---------- */
html.js .rv,html.js [data-rv]{opacity:0;transform:translate3d(0,26px,0);transition:opacity .75s cubic-bezier(.2,.65,.2,1),transform .75s cubic-bezier(.2,.65,.2,1);transition-delay:calc(var(--i,0)*90ms);will-change:opacity,transform}
html.js [data-rv="left"]{transform:translate3d(-34px,0,0)}
html.js [data-rv="right"]{transform:translate3d(34px,0,0)}
html.js [data-rv="zoom"]{transform:scale(.94)}
html.js .rv.in,html.js [data-rv].in{opacity:1;transform:none}
html.js .rv.d1{--i:1}html.js .rv.d2{--i:2}html.js .rv.d3{--i:3}
/* linia eyebrow rosnie po pojawieniu */
html.js .eyebrow::before{transform-origin:left;transform:scaleX(0);transition:transform .6s cubic-bezier(.2,.65,.2,1) .25s}
html.js .in .eyebrow::before,html.js .eyebrow.in::before,html.js .hero .eyebrow::before,html.js .phero .eyebrow::before{transform:scaleX(1)}

/* ---------- hero: wejscie po zaladowaniu ---------- */
html.js .hero .grid>div:first-child>*{opacity:0;transform:translate3d(0,22px,0);animation:heroIn .8s cubic-bezier(.2,.65,.2,1) forwards}
html.js .hero .grid>div:first-child>*:nth-child(1){animation-delay:.15s}
html.js .hero .grid>div:first-child>*:nth-child(2){animation-delay:.25s}
html.js .hero .grid>div:first-child>*:nth-child(3){animation-delay:.38s}
html.js .hero .grid>div:first-child>*:nth-child(4){animation-delay:.5s}
html.js .hero .grid>div:first-child>*:nth-child(5){animation-delay:.6s}
html.js .hero .grid>div:first-child>*:nth-child(6){animation-delay:.7s}
html.js .hero .grid>.rv{opacity:0;transform:translate3d(40px,0,0) scale(.97);animation:heroIn .9s cubic-bezier(.2,.65,.2,1) .35s forwards;transition:none}
@keyframes heroIn{to{opacity:1;transform:none}}
.hero.dk .offer i{animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(216,111,69,.55)}70%{box-shadow:0 0 0 9px rgba(216,111,69,0)}100%{box-shadow:0 0 0 0 rgba(216,111,69,0)}}
/* delikatny ruch poswiaty w hero */
.hero.dk::before{animation:glow 14s ease-in-out infinite alternate}
@keyframes glow{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-4%,3%,0)}}

/* ---------- kompozycje: elementy wchodza kolejno ---------- */
html.js .cmp .win,html.js .cmp .card,html.js .cmp .phone,html.js .cmp .circ,html.js .cmp .bdg,html.js .cmp .pill{opacity:0}
html.js .in .cmp .circ,html.js .cmp.in .circ{animation:cmpIn .8s cubic-bezier(.2,.65,.2,1) .1s forwards}
html.js .in .cmp .win,html.js .cmp.in .win,html.js .in .cmp .card,html.js .cmp.in .card{animation:cmpIn .8s cubic-bezier(.2,.65,.2,1) .25s forwards}
html.js .in .cmp .phone,html.js .cmp.in .phone{animation:cmpInR .85s cubic-bezier(.2,.65,.2,1) .35s forwards}
html.js .in .cmp .bdg,html.js .cmp.in .bdg{animation:pop .6s cubic-bezier(.2,.9,.3,1.3) .6s forwards,fl2 6s ease-in-out .9s infinite}
html.js .in .cmp .bdg.d2,html.js .cmp.in .bdg.d2{animation-delay:.72s,.9s}
html.js .in .cmp .bdg.d4,html.js .cmp.in .bdg.d4{animation-delay:.84s,.9s}
html.js .in .cmp .pill,html.js .cmp.in .pill{animation:cmpIn .7s cubic-bezier(.2,.65,.2,1) .95s forwards}
html.js .hero .cmp .win,html.js .hero .cmp .card,html.js .hero .cmp .phone,html.js .hero .cmp .circ,html.js .hero .cmp .bdg,html.js .hero .cmp .pill{animation-play-state:running}
@keyframes cmpIn{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes cmpInR{from{opacity:0;transform:translate3d(30px,10px,0)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
/* hero: kompozycja startuje od razu, bez czekania na scroll */
html.js .hero .cmp .circ{animation:cmpIn .8s cubic-bezier(.2,.65,.2,1) .5s forwards}
html.js .hero .cmp .win,html.js .hero .cmp .card{animation:cmpIn .8s cubic-bezier(.2,.65,.2,1) .65s forwards}
html.js .hero .cmp .phone{animation:cmpInR .85s cubic-bezier(.2,.65,.2,1) .8s forwards}
html.js .hero .cmp .bdg{animation:pop .6s cubic-bezier(.2,.9,.3,1.3) 1.05s forwards,fl2 6s ease-in-out 1.4s infinite}
html.js .hero .cmp .bdg.d2{animation-delay:1.17s,1.4s}
html.js .hero .cmp .bdg.d4{animation-delay:1.29s,1.4s}
html.js .hero .cmp .pill{animation:cmpIn .7s cubic-bezier(.2,.65,.2,1) 1.35s forwards}
/* lekki tilt za kursorem */
.cmp{transform-style:preserve-3d;transition:transform .35s ease}
.cmp.tilt{transition:transform .08s linear}

/* ---------- przyciski i karty ---------- */
.btn{position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease}
.btn .ms{transition:transform .25s cubic-bezier(.2,.65,.2,1)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,24,29,.14)}
.btn:hover .ms{transform:translateX(3px)}
.btn.p::after,.btn.w::after,.btn.dark::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .55s ease;pointer-events:none}
.btn.p:hover::after,.btn.w:hover::after,.btn.dark:hover::after{left:130%}
.btn.p:hover{box-shadow:0 14px 32px rgba(216,111,69,.38)}
.card,.plan,.ben>div,.mini4 .card,.steps>div,.story,.logos div,.chips .btn,.pfv .browser{transition:transform .28s cubic-bezier(.2,.65,.2,1),box-shadow .28s ease,border-color .28s ease}
.plan:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(20,24,29,.12);border-color:var(--p-l)}
.plan.hot:hover{box-shadow:0 26px 60px rgba(216,111,69,.24)}
.ben>div:hover .ic,.steps>div:hover .n{transform:translateY(-3px) scale(1.05)}
.ben .ic,.steps .n,.card .ic{transition:transform .28s cubic-bezier(.2,.65,.2,1),background .28s ease,color .28s ease}
.card:hover .ic{background:var(--p);color:#fff}
.logos div:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(20,24,29,.10);border-color:var(--p-l)}
.chips .btn:hover{border-color:var(--p);color:var(--p-d);background:var(--p-s)}
.faq details{transition:background .2s}
.faq summary .ms{transition:transform .25s cubic-bezier(.2,.65,.2,1),color .2s}
.faq details[open] p{animation:cmpIn .4s ease}
.pfv .browser:hover{transform:translateY(-3px)}

/* ---------- nawigacja i powrot na gore ---------- */
.nav{transition:box-shadow .3s ease,background .3s ease,border-color .3s ease}
.nav.scrolled{background:rgba(255,255,255,.94);border-bottom-color:var(--line);box-shadow:0 8px 30px rgba(20,24,29,.06)}
.nav .links a{position:relative}
.nav .links a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:var(--p);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.65,.2,1)}
.nav .links a:hover::after,.nav .links a.on::after{transform:scaleX(1)}
.totop{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(20,24,29,.25);z-index:90;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s,transform .3s,background .2s}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--p)}

/* ---------- tla: cieply bialy, ciemny z poswiata ---------- */
.sec.alt{background:linear-gradient(180deg,#F7F6F3 0%,#F9F8F5 100%)}
.sec.dark,.cta2,.loss,.hero.dk{background-color:#14181D;background-image:radial-gradient(60% 50% at 85% 10%,rgba(216,111,69,.22),transparent 65%),radial-gradient(40% 40% at 5% 95%,rgba(216,111,69,.12),transparent 70%),radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:100% 100%,100% 100%,26px 26px}
.sec.dark .card,.prembar{background:rgba(255,255,255,.04)}
.band{background:linear-gradient(90deg,#14181D,#23272E)}
.loss .nums div,.cta2 .in{position:relative}
.loss .nums div{transition:transform .28s ease,border-color .28s}
.loss .nums div:hover{transform:translateY(-3px);border-color:rgba(216,111,69,.5)}
.stat b,.loss .nums b,.kp b{font-variant-numeric:tabular-nums}

/* ---------- liczby: podbicie ---------- */
html.js .in .kp>div b,html.js .in .loss .nums b,html.js .loss.in .nums b{animation:num .7s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes num{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}

/* ---------- ograniczenie ruchu ---------- */
@media (prefers-reduced-motion:reduce){
  html.js .rv,html.js [data-rv],html.js .hero .grid>div:first-child>*,html.js .hero .grid>.rv,html.js .cmp .win,html.js .cmp .card,html.js .cmp .phone,html.js .cmp .circ,html.js .cmp .bdg,html.js .cmp .pill{opacity:1;transform:none;animation:none;transition:none}
  .hero.dk::before,.hero.dk .offer i,.btn::after{animation:none}
  .pre{display:none}
}