/* TwCare Loader 1.0.0 */
.twl{
  --twl-bg:#ECE5DF;
  --twl-ink:#333231;
  --twl-ease:cubic-bezier(.77,0,.18,1);
  --twl-ease-out:cubic-bezier(.16,1,.3,1);
  position:fixed !important;inset:0 !important;z-index:2147483000 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  overflow:hidden !important;pointer-events:all !important;
}
.twl *{box-sizing:border-box}
html.twl-skip .twl{display:none !important}

/* tlo: 6 pionowych pasow, wyjezdzaja na przemian w gore i w dol */
.twl-cols{position:absolute !important;inset:0 !important;display:flex !important}
.twl-col{flex:1 0 auto !important;width:calc(100% / 6 + 1px) !important;margin-right:-1px !important;background:var(--twl-bg) !important;will-change:transform}

/* ziarno: jedna warstwa, delikatnie drga, znika razem z tlem */
.twl-grain{
  position:absolute !important;inset:-60px !important;pointer-events:none !important;opacity:.2 !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2 0 0 0 0 .19 0 0 0 0 .18 1.25 0 0 0 -.38'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>") !important;
  background-size:240px 240px !important;
  animation:twl-grain .55s steps(1) infinite;
  will-change:transform,opacity;
}
@keyframes twl-grain{
  0%{transform:translate(0,0)}
  17%{transform:translate(-31px,19px)}
  33%{transform:translate(22px,-37px)}
  50%{transform:translate(-14px,-9px)}
  67%{transform:translate(38px,27px)}
  83%{transform:translate(-26px,33px)}
}

.twl-stage{position:relative !important;width:clamp(240px,36vw,460px) !important;will-change:transform,opacity}
.twl-svg{display:block !important;width:100% !important;height:auto !important;overflow:visible !important}
.twl-svg *{transform-box:fill-box}

.twl-fill{fill:var(--twl-ink)}
.twl-stroke{fill:none;stroke:var(--twl-ink);stroke-width:4.6;stroke-linejoin:miter;stroke-linecap:butt;stroke-dasharray:1 1;stroke-dashoffset:1}

/* licznik 0 do 100% */
.twl-count{
  position:absolute !important;right:clamp(20px,4vw,56px) !important;bottom:clamp(26px,5vh,56px) !important;
  display:flex !important;align-items:flex-start !important;gap:.12em !important;
  font:300 clamp(44px,7vw,104px)/.9 'Poppins',system-ui,sans-serif !important;
  color:var(--twl-ink) !important;font-variant-numeric:tabular-nums !important;letter-spacing:-.02em !important;
  opacity:0;will-change:opacity,transform;
}
.twl-count i{font-style:normal;font-size:.34em;line-height:1;margin-top:.2em;letter-spacing:0}
.twl-bar{position:absolute !important;left:0 !important;right:0 !important;bottom:0 !important;height:3px !important;background:rgba(51,50,49,.12) !important;opacity:0}
.twl-bar span{display:block;height:100%;background:var(--twl-ink);transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* --- wejscie --- */
.twl-line-r{transform:scaleX(0);transform-origin:0 50%}
.twl-line-l{transform:scaleX(0);transform-origin:100% 50%}
.twl-t-bar{transform:scaleX(0);transform-origin:50% 50%}
.twl-t-stem{transform:scaleY(0);transform-origin:50% 0}
.twl-w{clip-path:inset(100% 0 0 0)}

.twl.is-in .twl-line-r{animation:twl-sx .8s var(--twl-ease) .05s forwards}
.twl.is-in .twl-line-l{animation:twl-sx .8s var(--twl-ease) .15s forwards}
.twl.is-in .twl-t-bar{animation:twl-sx .5s var(--twl-ease) .38s forwards}
.twl.is-in .twl-t-stem{animation:twl-sy .45s var(--twl-ease) .52s forwards}
.twl.is-in .twl-w{animation:twl-reveal .65s var(--twl-ease) .52s forwards}
.twl.is-in .twl-c1{animation:twl-draw .6s var(--twl-ease-out) .95s forwards}
.twl.is-in .twl-c2{animation:twl-draw .6s var(--twl-ease-out) 1.02s forwards}
.twl.is-in .twl-c3{animation:twl-draw .6s var(--twl-ease-out) 1.09s forwards}
.twl.is-in .twl-c4{animation:twl-draw .6s var(--twl-ease-out) 1.16s forwards}
.twl.is-in .twl-count{animation:twl-fade .5s ease-out .2s forwards}
.twl.is-in .twl-bar{animation:twl-fade .5s ease-out .2s forwards}

@keyframes twl-sx{to{transform:scaleX(1)}}
@keyframes twl-sy{to{transform:scaleY(1)}}
@keyframes twl-reveal{to{clip-path:inset(0 0 0 0)}}
@keyframes twl-draw{to{stroke-dashoffset:0}}
@keyframes twl-fade{to{opacity:1}}

/* --- pas swiatla na bryle logo --- */
.twl-sheen{transform:translateX(-60%) skewX(-18deg);opacity:0}
.twl.is-in .twl-sheen{animation:twl-sheen 1.7s cubic-bezier(.45,0,.25,1) 1.5s infinite}
@keyframes twl-sheen{
  0%{transform:translateX(-60%) skewX(-18deg);opacity:0}
  12%{opacity:1}
  62%{transform:translateX(130%) skewX(-18deg);opacity:1}
  70%,100%{transform:translateX(130%) skewX(-18deg);opacity:0}
}

/* --- wyjscie --- */
.twl.is-out .twl-stage{animation:twl-stage-out .5s var(--twl-ease) forwards}
.twl.is-out .twl-count{animation:twl-count-out .45s var(--twl-ease) forwards}
.twl.is-out .twl-bar{animation:twl-bar-out .4s ease-in forwards}
.twl.is-out .twl-line-r{animation:twl-line-r-out .6s var(--twl-ease) forwards}
.twl.is-out .twl-line-l{animation:twl-line-l-out .6s var(--twl-ease) forwards}
.twl.is-out .twl-grain{animation:twl-grain .55s steps(1) infinite,twl-grain-out .9s ease-in .3s forwards}
.twl.is-out .twl-col{animation:twl-col-up .85s var(--twl-ease) calc(.22s + var(--i) * .07s) forwards}
.twl.is-out .twl-col:nth-child(even){animation-name:twl-col-down}
@keyframes twl-stage-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes twl-count-out{to{opacity:0;transform:translateY(12px)}}
@keyframes twl-bar-out{to{opacity:0}}
@keyframes twl-line-r-out{from{transform:scaleX(1);transform-origin:100% 50%}to{transform:scaleX(0);transform-origin:100% 50%}}
@keyframes twl-line-l-out{from{transform:scaleX(1);transform-origin:0 50%}to{transform:scaleX(0);transform-origin:0 50%}}
@keyframes twl-col-up{to{transform:translateY(-101%)}}
@keyframes twl-col-down{to{transform:translateY(101%)}}
@keyframes twl-grain-out{to{opacity:0}}
.twl.is-done{display:none !important}

/* --- ograniczony ruch --- */
@media (prefers-reduced-motion:reduce){
  .twl *{animation:none !important}
  .twl .twl-line-r,.twl .twl-line-l,.twl .twl-t-bar,.twl .twl-t-stem{transform:none !important}
  .twl .twl-w{clip-path:none !important}
  .twl .twl-stroke{stroke-dashoffset:0 !important}
  .twl .twl-sheen,.twl .twl-grain{display:none}
  .twl .twl-count,.twl .twl-bar{opacity:1}
  .twl.is-out{transition:opacity .4s linear;opacity:0}
}
html.twl-lock,html.twl-lock body{overflow:hidden !important}